@charset "utf-8";


/*Propiedaddes Personalizadas*/
:root{
/* Colores base  */
  --primary:   #FB4797; /* hot pink CTA */
  --secondary: #f75997; /* deep purple */
  --accent:   #F9F2FE; /*#f8e1edd1; /* blush background */
  --light:     #FFFFFF;
  --dark:      #333333;
  --colorBorderInputs: #605C5C; /*Rosado*/
  --colorBorderInputsFocus:#fb4797e3; /*Rosado*/
  /* Pequeñas utilidades  */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 6px 20px rgba(0,0,0,.12);
}
	
	 
/*Reseteo  de Estilos*/
body{
 padding: 0px 2px;
 background:#FEFfFF;
  color: var(--dark);
  margin-left: 0rem;
  margin-right: 0rem;
  font-family: "Poppins", sans-serif;
}

a {
  color: #9e0c7a;
  text-decoration: none;
}

a:hover {
  color: #f009e4;
  text-decoration: none;
}
/*=======================================EStilos de Bootstrap==========================================*/

 .titulo-panel{
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 1px;
    color:#F4749F;
  }

.btn
  {
    --bs-btn-border-radius: 0.3rem;  
}

.btn-mora
   {
  background: linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  color: #fff;
  border: none;
  border-radius: .3rem;
  font-weight: 300;
  transition: transform .15s, box-shadow .15s;
}

.btn-secondary
  {
  background:#F7F5F7;
  color:#E42ECC;
  border: 1px solid var(--secondary);
}

.btn-filtro
  {
  background:#F9F8F9;
  color:#6F6B6B ;
  border: 1px solid var(--secondary);

}

.btn-mora:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}



.btn-secondary:hover
  { 
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color:#fff;
  background: var(--secondary);
  border-color:var(--secondary);
}

.btn-filtro:hover
  { 
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color:#fff;
  background: var(--secondary);
  border-color:var(--secondary);
}
.bg-mora
  {
  background-color:#7C43BD;
  color:#FFFFFF; 
}

.bg-test
  {
    background-color: #7C43BD
}

.contenedor
{
  margin: 5px;
}

.modal
  {
   --bs-modal-border-radius: 0rem
}

.card-body
  {
   padding:5px;
   --bs-card-color: #856c81
}

.fs-aili
  {
    font-size: 1.3rem;
    color: #171616
}

.g-4, .gy-4
 {
  --bs-gutter-y: 1.2rem;
}

.g-4, .gx-4
 {
    --bs-gutter-x: 1rem;
}

.nav-link-breadcumb
{
    color:var(--nav-link-color-hover);
}

.form-control
  {
    border-radius: 0.3rem;
}

.page-link{
  margin:10px;
}
.pagination
{

  --bs-pagination-bg: var(--light);
  --bs-pagination-color:    var(--dark);
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: .3rem;
  --bs-pagination-hover-bg: var(--secondary);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-color: #fff;
}



/* 8. Tooltips */
.custom-tooltip{
  --bs-tooltip-bg: var(--primary);
  --bs-tooltip-color: #fff;
}
/*============================0Mis estilos=============================0*/
.bg
  {
--bs-btn-bg:#a03ee1;
color:#fff;
}

.text-mora
  {
  color:#7C43BD;
}
.text-pink{
  color: #F4749F;
}
.titulo-paginas{
	color:#9E0C7A;
}
.custom-tooltip {
  --bs-tooltip-bg:#DA3FE4 ;
  --bs-tooltip-color: var(--bs-white);
}

.eliminar_carrito,.regresar
  {
    cursor: pointer;
}

#div_infoEntrega,#div_Carrito,#div_infoCompra
  {
    display: none;
}

#loading 
  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    z-index: 9999;
}
/* X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap*/

/*// Medium devices (tablets, 768px and up)
*/

.form-label
{
    color:#940DAC;
    font-weight: bold;
}

.input-morado,.form-select
 {
  /*border: 1px solid var(--colorBorderInputs); /* rosado  */
  border-radius: 0.0rem;
  box-shadow: none;
  transition: all 0.3s ease-in-out;
}

.input-morado:focus 
{
  border-color: var(--colorBorderInputsFocus);
  box-shadow: 0 0 0 0.2rem rgba(241, 164, 203, 0.25);
}

.input-morado::placeholder
 {
  color: #a57be1;
}

.nota-transferencia {
      display: none;
      transition: all 0.3s ease;
    }

.form{
  height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* =====================Para pantallas grandes (mayores a 1400px) ==================0*/
@media (min-width: 1500px) {
    .table {
        font-size: 1.1rem;
    }
    .card{
        font-size: .9rem
    }

/*========================== Para escritorios grandes (1200px a 1399px)================= */
@media (min-width: 1200px) and (max-width: 1399px) { 
    .table {
        font-size: 1rem;
    }
    .cambiar-estado{
        font-size: 1rem;
        min-width: 120px; 
    }

    
}

/* =====================Para escritorios normales (992px a 1199px)===================== */
@media (min-width: 992px) and (max-width: 1199px) {  
    .table {
        font-size: 1rem;
         min-width: 120px; 
    }
    .cambiar-estado{
        font-size: 1.2rem;
        min-width: 120px; 
    }
    
}


/*========================0 Para tablets (768px a 991px) =================================0*/
@media (min-width: 768px) and (max-width: 991px) { 
    .table {
        font-size: 1rem;
    }
    .cambiar-estado{
        font-size: 1rem;
        min-width: 120px; 
    }
}

/*=================================== Para celulares (menores a 768px)=========================000 */
@media (max-width: 767px) { 
    .table {
        font-size: 1rem;
    }
    .cambiar-estado{
        font-size: .8rem;
        min-width: 120px; 
    }
    .card{
        font-size: .9rem
    }

    /* Suaviza el scroll horizontal y mejora la experiencia en móviles */
.d-flex.overflow-auto.flex-nowrap {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Evita que los textos de los botones se dividan */

/* Estética opcional del scrollbar (para navegadores WebKit) */
.d-flex.overflow-auto.flex-nowrap::-webkit-scrollbar {
  height: 6px;
}

.d-flex.overflow-auto.flex-nowrap::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0px;
}

.acciones-producto {
    flex-direction: column !important;
  }



}

/*=============================000 Para celulares muy pequeños (menores a 480px)==================== */
@media (max-width: 480px) { 
    .table {
        font-size: 0.8rem;
        min-width: 120px; 
    }
    .cambiar-estado,.guardar-estado,.ver-detalle{
        font-size: .7rem;
        min-width: 100px; 
    }

    .card{
        font-size: 1.0rem !important
    }

  

    /* Suaviza el scroll horizontal y mejora la experiencia en móviles */
.d-flex.overflow-auto.flex-nowrap {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Evita que los textos de los botones se dividan */


/* Estética opcional del scrollbar (para navegadores WebKit) */
.d-flex.overflow-auto.flex-nowrap::-webkit-scrollbar {
  height: 6px;
}

.d-flex.overflow-auto.flex-nowrap::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0px;
}


.toggle-variantes {
  width: 30px;
  height: 30px;  border: none;
  border-radius: 50%;
  background-color: #E0DCDC;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  align-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.toggle-variantes:hover {
  background-color: #9870E2;
  color: white;
  transform: scale(1.1);
}

.toggle-variantes.expanded {
  background-color: #0d6efd;
  color: white;
}

.agregar_variante {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: #a950d2;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  align-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.agregar_variante:hover {
  background-color:#823aa3 ;
  color: white;
  transform: scale(1.1);
}
.acciones-producto i,
.acciones-producto button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  margin-top: 5px;
}



  h5{
  font-size: 1.2rem;
}



}