/* INICIO reseteo general */
img     { width: 100%; height: auto;}
figure  { margin: 0;}
p { line-height: 150%; }
a { text-decoration: none; }
/* FIN reseteo general */


/* INICIO Config variables */
:root {
    /* Color */
    --white:    #FFF;
    --light:    #FFF;
    --cream:    #fffcf5;
    --tea:      #f7fefa;
    --sky:      #f5fbff;
    --gray-25:  #fcfcfd;
    --gray-50:  #f9fafb;
    --gray-100: #eceff4;
    --gray-200: #e4e7ec;
    --gray-300: #d0d5dd;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-900: #101828;
    --brand-50: #f9f5ff;
    --brand-100:  #f4ebff;
    --brand-500:  #9e77ed;
    --brand-600:  #7f56d9;
    --brand-700:  #6941c6; 
    --brand-800:  #53389e;   
    --secondary:  #717bbc; 
    --third-25:   #dbc0dd;
    --third:      #faa7e0;
    --warning:    #ea3a3a;
    --warning-light:     #f8a09c;
    --advertisment-light:#edfdf4;
    --advertisment:      #83e5af;
    --advertisment-dark: #45c17d;
    --advertisment-darker: #37b86d;
    
   /* Font family */
    --font-family:"Inter-SemiBold",sans-serif;
    --display-font-family: "Inter-Bold", sans-serif;

    /* Font size */
    --text-sm-font-size:    0.875rem; /* 14px */
    --text-md-font-size:    1rem; /* 16px */
    --text-lg-font-size:    1.125rem; /* 18px */
    --text-xl-font-size:    1.25rem; /* 20px */
    --text-xxl-font-size:   1.65rem; /* 26px */
    --display-sm-font-size: 1.875rem; /* 30px */
    --display-md-font-size: 2.25rem; /* 36px */
    --display-lg-font-size: 2.75rem; /* 44px */
    --display-xl-font-size: 3.75rem; /* 60px */

    /* Line height */
    --text-sm-line-height: 1.25rem; /* 20px */
    --text-md-line-height: 1.5rem; /* 24px */
    --text-lg-line-height: 1.75rem; /* 28px */
    --text-xl-line-height: 1.875rem; /* 30px */
    --text-xxl-line-height: 2.25rem; /* 36px */
    --display-sm-line-height: 2.25rem; /* 36px */
    --display-md-line-height: 2.375rem; /* 38px */
    --display-lg-line-height: 3rem; /* 48px */
    --display-xl-line-height: 4.5rem; /* 72px */
    
    /* Font weight */
    --thin-font-weight:     400;
    --text-font-weight:     600;
    --display-font-weight:  700;

    /* Espaciado */
    --display-md-letter-spacing: -0.02rem;  


    /* Sombras */
    --shadow-xs-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
} 
/* FIN config variables */


/* INICIO Iconos */
@font-face {
  font-family: 'reserwa';
  src: url('../../img/fonts/reserwa.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  font-family: 'reserwa' !important;
  speak-as: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size:  1.5rem;
}

.icon-calendar::before  { content: "\e900"; }
.icon-message::before   { content: "\e901"; }
.icon-piechart::before  { content: "\e902"; }
.icon-clients::before   { content: "\e903"; }
.icon-zap::before       { content: "\e904"; }
/* FIN Iconos */


/* INICIO SOBREESCRIBIR BOOTSTRAP */
select.form-select, input[type="text"].form-control, input[type="email"].form-control, input[type="password"].form-control, textarea.form-control   {
  font-size: 0.85rem;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
  background-color: #f0f0f0 !important;  
  color: #333 !important;              
}

.custom-tooltip {
  --bs-tooltip-bg: var(--brand-800);
  --bs-tooltip-color: var(--bs-white);
}

.dropdown-menu.no-border {
    border: none;
    box-shadow: none; /* opcional, para quitar la sombra también */
  }
/* FIN SOBREESCRIBIR BOOTSTRAP */

/* INICIO COMUN */ 
.helper {border:solid 2px #F00;} /* PARA DEPURAR*/

body {  
  color:        var(--gray-900);
  font-family:  var(--font-family);
  font-style:   normal;
  font-size:    var(--text-md-font-size);
  font-optical-sizing: auto;
}

.height_100 {
    height: 100vh;
}

.fit-content { width: fit-content; }

.logo-reserwa {
    max-width: 192px;
}

.badge-base {
  background-color: var(--brand-100);
  color: var(--brand-700);
  border-radius: 50px;
}


/* ventana alertas*/
.modal_alert__contenido {
  min-height: 3rem;
}

/* Para textos */
.txt_thin       { font-weight: var(--thin-font-weight); }
.txt_semibold   { font-weight: var(--text-font-weight);}
.txt_bold       { font-weight: bold;}
.txt_underline  { text-decoration: underline; }
.txt_italic     { font-style: italic; } 

.txt_lighter  { color:var(--gray-400); } 
.txt_light    { color:var(--gray-500); } 
.txt_medium   { color:var(--gray-600) !important; }
.txt_darker   { color:var(--gray-700); }
.txt_darkest  { color:var(--gray-900) !important; }

.txt_base  { color:var(--brand-600); }
.txt_dark  { color:var(--brand-900); }

.txt_warning { color:var(--warning);}


.txt_sm { font-size: var(--text-sm-font-size); }
.txt_md { font-size: var(--text-md-font-size); }
.txt_lg { font-size: var(--text-lg-font-size); font-weight: var(--text-font-weight); }
.txt_xl { font-size: var(--text-xl-font-size); line-height: var(--text-xl-line-height); }
.txt_xxl { font-size: var(--text-xxl-font-size); line-height: var(--text-xl-line-height); }

.txt_sm_bold { font-size: var(--text-sm-font-size); line-height: var(--text-sm-line-height);  font-weight: var(--text-font-weight);}

.txt_display_sm { font-size: var(--display-sm-font-size); line-height: var(--display-sm-line-height); font-weight: var(--display-font-weight); color:var(--gray-900); }
.txt_display_md { font-size: var(--display-md-font-size); line-height: var(--display-md-line-height); font-weight: var(--display-font-weight); color:var(--gray-900); }
.txt_display_lg { font-size: var(--display-lg-font-size); line-height: var(--display-lg-line-height); font-weight: var(--display-font-weight); color:var(--gray-900); }
.txt_display_xl { font-size: var(--display-xl-font-size); line-height: var(--display-xl-line-height); font-weight: var(--display-font-weight); color:var(--gray-900); }


/* enlaces */
a:link { color: var(--brand-600) !important; }
a:hover {  color: var(--brand-600) !important; }
a:active {  color: var(--brand-600) !important; }
a:visited {  color: var(--brand-600) !important; }

/* botones */
.btn:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  border: 1px solid #ccc;
  opacity: 0.6;
}


.btn-clear {
  background-color: var(--light);
  border: solid 1px var(--gray-300); 
  color:  var(--gray-900) !important;
  text-align: center; 
  text-wrap:  nowrap;  
  box-shadow:       var(--shadow-xs-box-shadow);
}
.btn-clear:hover   { color:var(--brand-700) !important; border: solid 1px var(--brand-100) !important; background-color: var(--brand-50)  }
a.btn-clear:link    { color:var(--gray-900) !important; }
a.btn-clear:visited { color:var(--gray-900) !important; }
a.btn-clear:hover   { color:var(--brand-700) !important; border: solid 1px var(--brand-100) !important; background-color: var(--brand-50) }
a.btn-clear:active  { color:var(--gray-900) !important; }


.btn-base {
  background-color: var(--brand-600);
  border: solid 1px var(--brand-600); 
  color:  var(--light) !important;  
  text-align: center;   
  box-shadow:       var(--shadow-xs-box-shadow);
}
.btn-base:hover     { color:var(--light) !important; background-color: var(--brand-500) !important; border: solid 1px var(--brand-500); } 
a.btn-base:link     { color:var(--light) !important; }
a.btn-base:visited  { color:var(--light) !important; }
a.btn-base:hover    { color:var(--light) !important; background-color: var(--brand-500) !important;}
a.btn-base:active   { color:var(--light) !important; }

.btn-advertisment {
  background-color: var(--advertisment-darker); 
  border: solid 1px var(--brand-800);
  color:  var(--light) !important;  
  text-align: center;   
  box-shadow:       var(--shadow-xs-box-shadow);
}
.btn-advertisment:hover     { color:var(--light) !important; background-color: var(--advertisment) !important; border: solid 1px var(--brand-800); } 
a.btn-advertisment:link     { color:var(--light) !important; }
a.btn-advertisment:visited  { color:var(--light) !important; }
a.btn-advertisment:hover    { color:var(--light) !important; background-color: var(--advertisment) !important;}
a.btn-advertisment:active   { color:var(--light) !important; }

.btn-base-outline {
  background-color: var(--light);
  border: solid 1px var(--brand-600); 
  color:  var(--brand-600) !important;  
  text-align: center;   
  box-shadow:       var(--shadow-xs-box-shadow);
}
.btn-base-outline:hover     { color:var(--brand-600) !important; background-color: var(--brand-50) !important; border: solid 1px var(--brand-500) !important; } 
a.btn-base-outline:link     { color:var(--brand-600) !important; }
a.btn-base-outline:visited  { color:var(--brand-600) !important; }
a.btn-base-outline:hover    { color:var(--brand-600) !important; background-color: var(--brand-50) !important; border: solid 1px var(--brand-500) !important; }
a.btn-base-outline :active   { color:var(--brand-600) !important; }

 
a.link_darker:link     { color:var(--gray-700) !important; }
a.link_darker:visited  { color:var(--gray-700) !important; }
a.link_darker:hover    { color:var(--brand-700) !important; }
a.link_darker:active   { color:var(--gray-700) !important; }

a.link_darker_selected:link     { color:var(--brand-700) !important; background-color: var(--brand-50) !important; width: 220px; }
a.link_darker_selected:visited  { color:var(--brand-700) !important; background-color: var(--brand-50) !important; }
a.link_darker_selected:hover    { color:var(--brand-700) !important; background-color: var(--brand-50) !important; }
a.link_darker_selected:active   { color:var(--brand-700) !important; background-color: var(--brand-50) !important; }
 

.btn-no-outline {
  background-color: var(--light);
  border: solid 1px var(--light); 
  color:  var(--gray-900) !important; 
  text-align: center; 
}
.btn-no-outline:hover    { color:var(--brand-600) !important; }
a.btn-no-outline:link     { color:var(--gray-900) !important; }
a.btn-no-outline:visited  { color:var(--gray-900) !important; }
a.btn-no-outline:hover    { color:var(--brand-600) !important; }
a.btn-no-outline:active   { color:var(--gray-900) !important; }

.btn-md {
  font-size:    var(--text-md-font-size);
  font-weight:  var(--text-font-weight);
  line-height:  var(--text-md-line-height); 
  overflow:     hidden;
  padding:      10px 18px;
  gap:          8px;
  border-radius:    8px;
}

.btn-lg {
  font-size:    var(--text-lg-font-size);
  font-weight:  var(--text-font-weight);
  line-height:  var(--text-lg-line-height);
  overflow:     hidden;
  padding:      16px 28px; 
}

.btn-sm {
  font-size:    var(--text-sm-font-size);
  font-weight:  var(--text-font-weight);
  line-height:  var(--text-sm-line-height); 
  overflow:     hidden;
  padding:      10px 16px;
}


.btn-xs {
  font-size:    var(--text-sm-font-size);
  font-weight:  var(--text-font-weight);
  line-height:  var(--text-sm-line-height); 
  overflow:     hidden;
  padding:      6px 14px;
  box-shadow:       var(--shadow-xs-box-shadow);
}
.input-warning {
  border: solid 1px var(--warning-light) !important;
}
.select-warning {
  border: solid 1px var(--warning-light) !important;
}

.warning-message {
  color: var(--warning);
  border: solid 1px var(--warning-light);
  padding: 0.5rem;
  padding-left: 2rem;
  background-image: url(../../img/icons/warning.svg);
  background-repeat: no-repeat;
  background-position: 10px 10px;  
  display: inline-block;
  white-space: normal;
  overflow-wrap: break-word;
}



/* checkbox */
input[type="checkbox"] {
  appearance: none;
  background-color: var(--light);
  border: 1px solid var(--gray-300); /* Borde gris */
  border-radius: 4px;
  width:  1rem;
  height: 1rem;
  cursor:   pointer;
  position: relative;
  }
  
  input[type="checkbox"]:checked {
  border-color:     var(--brand-700);
  background-color: var(--light);
  }
  
  input[type="checkbox"]:checked::before {
  content: "✔";
  color: var(--brand-700);
  position: absolute;
  left: 50%;
  top:  50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  line-height: 0.5rem;
  } 



/* margenes */
.mb-6 { margin-bottom: 96px !important; }

/* fondos */
.bg_0 { background-color: var(--light); }
.bg_1 { background-color: var(--gray-25); }
.bg_2 { background-color: var(--gray-50); }
.bg_3 { background-color: var(--brand-50); }
.bg_4 { background-color: var(--advertisment-light); }

/* bordes */
.b_4      { border: solid 1px var(--advertisment); }
.b_4_dark { border: solid 1px var(--advertisment-dark); }

.divisor_central {
  flex: 1;
  height: 1px;
  background-color:var(--gray-400);
}



.group-inner-left {
  background-color: transparent !important;
  border-right: none !important; 
  /*text-align: right;*/
}

.group-inner-right {
  background-color: transparent !important;
  border-left: none !important;  
}

#pantalla-carga {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* velo oscuro semitransparente */
  z-index: 9999; /* bien por encima de todo */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner de Bootstrap opcional: */
.spinner-border {
  width: 3rem;
  height: 3rem;
}

/* FIN COMUN */ 


/* INICIO template 1 */
.tpl_1__contenedor {
  max-width: 340px;
}


.tpl_1__titulo {
  font-size: 3rem;
  font-weight:bold;
}

.tpl_1__seccion_2 {
    background: url(../../img/base/template_1/line-pattern0.svg) top right no-repeat,
                url(../../img/base/template_1/line-pattern1.svg) bottom left no-repeat;
}

.tpl_1__seccion_2_img {
    border: solid 5px #000;
    border-radius: 25px;
    box-shadow: inset 0 0 2px 2px  #fff;
}

/* personalizado por pagina */
.registro_bg_color {  
  background-color: var(--third);
}
.registro_img {
  background: url(../../img/signup/registro.png) no-repeat center center;
  background-size: cover;
}



.login_bg_color {  
  background-color: var(--secondary);
}
.login_img {
  background: url(../../img/login/login.png) no-repeat center center;
  background-size: cover;
}
/* personalizado por pagina */

/* FIN template 1 */


/* INICIO template 2 */
  .tpl2__cabecera {
    background-color: var(--light);
  }

  .tpl_2__content { max-width:640px; margin: auto;}

  .tpl_2__seccion_central {
    max-width: 750px;
    text-align: center;
    margin: auto;
  }

  /* iconos */
  .tpl_2__icon {
    width:  1.5rem;
    height: 1.5rem;
  }
  
  .tpl_2__icon_radio {
    background:     var(--brand-100, #f4ebff);
    border-radius:  1.75rem;
    border-style:   solid;
    border-color:   var(--brand-50, #f9f5ff);
    border-width:   0.5rem;
    width:  3rem;
    height: 3rem;
  }

  /* icono google calendar ---- */
  .g-calendar {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    position: relative;
    box-shadow: var(
      --shadow-xs-box-shadow,
      0px 1px 2px 0px rgba(16, 24, 40, 0.05)
    );
  }
  .bg {
    width: 87.5%;
    height: 87.5%;
    position: absolute;
    right: 6.25%;
    left: 6.25%;
    bottom: 6.25%;
    top: 6.25%;
    overflow: visible;
  }
  .g-calendar2 {
    width: 62.5%;
    height: 62.5%;
    position: absolute;
    right: 18.75%;
    left: 18.75%;
    bottom: 18.75%;
    top: 18.75%;
    overflow: visible;
  }
  /* icono google calendar ---- */

/* FIN template 2 */




/* INICIO template 3 */
  .tpl_3 {
    font-size:var(--text-sm-font-size);
    color: var(--gray-600);
  }

  .tpl_3__sidebar { max-width:250px; }
  .tpl_3__content { max-width:1200px; }
  .tpl_3__content_redux { max-width:900px; }
  .tpl_3__content_sm { max-width:560px; }
  
  /* iconos */
  .tpl_3__icon {
    width:  1.5rem;
    height: 1.5rem;
  }
  .tpl_3__icon_2 {
    width:  1rem;
    height: 1rem;
  }
  .tpl_3__icon_3 {    
    width:  3rem;
    height: 3rem;
  }

  .tpl_3__icon_radio {
    background:     var(--brand-100, #f4ebff);
    border-radius:  1.75rem;
    border-style:   solid;
    border-color:   var(--brand-50, #f9f5ff);
    border-width:   0.5rem;
    width:  3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* iconos */

  /* progress bar */
  .tpl_3__progress_bar {
    border-radius:    0.25rem;
    height:           0.5rem;
    background-color: var(--brand-100);
  }

  .tpl_3__progress_bar_done {
    border-radius:    0.25rem;
    height:           0.5rem;
    background-color: var(--brand-600);
  }  
  /* progress bar */

  /* configuracion pasos */
  .tpl_3__pasos_numero, .tpl_3__pasos_numero_actual, .tpl_3__pasos_numero_completado { 
    font-family:    "Inter-Medium", sans-serif;
    font-size:      13px;
    font-weight:    500;
    border-radius:  100%;
    width:          2rem;
    height:         2rem;
    line-height:    2rem;
    text-align:     center;
  }
  .tpl_3__pasos_numero { 
    color:  var(--gray-700);
    border: solid 2px var(--gray-400);
  }
  .tpl_3__pasos_numero_actual { 
    color:  var(--brand-600);
    border: solid 2px var(--brand-600);
  }
  .tpl_3__pasos_numero_completado { 
    color:  var(--brand-600);
    border: solid 2px var(--brand-600);
    background-color: var(--brand-600);
  }

  .tpl_3__pasos_separador {    
    background: var(--gray-400); 
    width:  75px;
    height: 2px;
    margin: auto 10px;
  }

  .tpl_3__pasos_texto, .tpl_3__pasos_texto_actual, .tpl_3__pasos_texto_completado  { 
    position: relative;
    top:      6px;
    display:  inline-block;
    left:     50%;
    transform: translateX(-50%);
    font-size: 13px;
  }
  .tpl_3__pasos_texto { 
    color:        var(--gray-700);
    font-weight:  500;
    font-family:  "Inter-Medium", sans-serif;
  }
  .tpl_3__pasos_texto_actual, .tpl_3__pasos_texto_completado { 
    color:        var(--brand-700);
    font-weight:  700;
    font-family:  "Inter-Bold", sans-serif;
  }
  /* configuracion pasos */

  
  /* configuracion seccion */
  .tpl_3__seccion_configuracion { 
    color:        var(--gray-700);
    font-weight:  500;
    font-family:  "Inter-Medium", sans-serif;
    padding:      0.5rem 0.2rem;
    margin-right: 1rem;
    border-bottom: solid 3px transparent;
  }
  .tpl_3__seccion_configuracion_actual { 
    color:        var(--brand-700);
    font-weight:  700;
    font-family:  "Inter-Bold", sans-serif;
    padding:      0.5rem 0.2rem;
    margin-right: 1rem;
    border-bottom: solid 3px var(--brand-700);
  }

  /* configuracion seccion */



  .tpl_3__divisor {
    background:   var(--gray-200);
    align-self:   stretch;
    flex-shrink:  0;
    height:       1px;
  }

  .tpl_3__avatar {
    background:     var(--third-25);
    border-radius:  50%;
    display:        flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    width:  4rem;
    height: 4rem;
    object-fit: cover;
  } 

  .tpl_3__avatar img {
    border-radius: 50%;
  }

  .tpl_3__fichero_avatar {
    border:dashed 1px var(--gray-300);
    border-radius: 8px;
  }

  .tpl_3__integracion {
    max-width: 700px;
  }



  .tpl_3__tabla {
    max-width: 1000px;
  }

  .tpl_3__tabla input[type="checkbox"] {
    appearance: none;
    background-color: var(--light);
    border: 1px solid var(--third-25);
    border-radius: 4px;
    width:  1rem;
    height: 1rem;
    cursor:   pointer;
    position: relative;
    }

  .tpl_3__tabla  td {
    vertical-align: middle; /* Alineación horizontal del contenido en las celdas */
  }

  .tpl_3__tabla th {
    background-color: var(--gray-100);
  }


  .tpl_3__tabla_avatar {
    width: 2.25rem;           
    height: 2.25rem;          
    border-radius: 50%;    
    display: flex;          
    justify-content: center;  
    align-items: center;    
    font-size: 0.85rem;      
    font-weight: bold;   
    text-transform: uppercase;  
  }

  .tpl_3__tabla_avatar_1 {
    background-color: #e1e1ff;  
    color: #7a7ac6;      
  }

  .tpl_3__tabla_avatar_2 {
    background-color: #c9f7f2;  
    color: #70b6a3;      
  }

  .tpl_3__tabla_avatar_3 {
    background-color: #b8d7ff;  
    color: #6f8fd1;      
  }

  .tpl_3__tabla_avatar_4 {
    background-color: #d4e4f9;  
    color: #8b9cc9;      
  }

  .tpl_3__tabla_avatar_5 {
    background-color: #b8fbd7;  
    color: #6ba57f;      
  }  

  .tpl_3__tabla_avatar_6 {
    background-color: #a0d2b2;  
    color: #4f7a64;      
  }

  .tpl_3__timeline_line { 
    position: relative;
  }

  .tpl_3__timeline_line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 39%;
    width: 3px;
    background-color: #495AFF;
    transform: translateX(-50%);
  }

  
  .tpl_3__timeline_icon { 
    position: relative;
    z-index: 10;
  }


  .image-option input[type="radio"] {
    display: none;
  }

  .image-option label {
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.2s;
    border-radius: 8px;
    overflow: hidden;
    display: block;
  }

  .image-option input[type="radio"]:checked + label {
    border-color: var(--brand-500);
    transform: scale(1.03);
  }

  .image-option img {
    width: 100%;
    height: auto;
    display: block;
  }
/* FIN template 3 */


/* INICIO template 4 */
.tpl_4__container {
  max-width: 1200px;
}

.tpl_4__cita {
  cursor: pointer;
}
.tpl_4__cita:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-700);
}

.tpl_4__contenido {
  margin:   auto;
  max-width:500px; 
}

.img-portada {
  max-height: 350px;
  object-fit: cover;
}
/* FIN template 4 */

/* INICIO externos */
  /* Estilos básicos para asegurar que el componente de Stripe sea visible */
  #card-element { 
    padding:          .75rem .75rem; 
    background-color: white;
    width:            100%;
    margin-bottom:    10px;
    border:           1px solid #dee2e6;;
    border-radius:    0.375rem;
    font-size:    1rem;
    font-weight:  400;
    line-height:  1.5;
    color:      #212529;
  }
  #card-errors {
      color: red;
  }
      


  /* CSS para ocultar inicialmente el lightbox */

  /* Estilos para el lightbox */
  .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .lightbox-overlay {
    display: none; /* Ocultar el modal por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fondo semitransparente */
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .lightbox-content {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      max-width: 500px;
      width: 90%;
      position: relative;
  }

  .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
  }
  .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  }

  .input-with-icon input {
    width: 100%;
    padding-right: 35px; /* Espacio suficiente para el ícono */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .input-with-icon .input-icon {
    position: absolute;
    right: 10px; /* Asegura que el ícono esté al lado derecho */
    width: 20px;
    height: 20px;
    pointer-events: none; /* Evita que interfiera con clics */
  }

  .more-vertical {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }


  .no-services {
      text-align: center;
      font-style: italic;
      color: var(--gray-600, #475467);
  }


  /*--- INICIO Stats ---*/
  .stats__periodo {
    max-width: 250px;
    border: solid 1px var(--gray-200);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
  }

  .stats__bg_1 {
    background-color: var(--cream);
  }

  .stats__bg_2 {
    background-color: var(--tea);
  } 

  .stats__bg_3 {
    background-color: var(--sky);
  }   

  .stats__bg_4 {
    background-color: var(--gray-50);
  } 

  /*--- FIN Stats ---*/




  /*--- INICIO Calendario cita ---*/
  .calendar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin-bottom: 10px;
  }
  .calendar-header button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .calendar-header button img {
    width: 37.9px;
    height: 37.9px;
    border-radius: 50%;
  } 
  .calendar-weekday {
    font-size:x-small;
  }
  .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
  }
  .calendar-day {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
  }
  .calendar-day.current {
    background-color: var(--brand-800);
    color: #ffffff !important;
    position: relative;
    font-weight: bold;
  }
  .calendar-day.current::after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #7f56d9;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
  }
  .calendar-day.disabled {
    color: rgba(26, 26, 26, 0.61);
  }
  .calendar-day.selectable {
    color: var(--brand-700);
    background-color: var(--brand-50);    
    border-radius: 50%;
    font-weight: bold;
  }
  /*--- FIN Calendario cita ---*/
/* FIN externos */


  /* Estilo general para los enlaces */ 

  /* Estilo específico para los números de la paginación */
  .pagination-number-base {
    text-decoration: none; /* Sin subrayado */
    color: black; /* Color inicial */
    transition: color 0.3s ease; /* Transición suave */
  }

  .pagination-number-base:hover {
    color: #6941c6; /* Color púrpura en hover */
    text-decoration: none; /* Asegura que no aparezca subrayado */
  }

  /* Para enlaces activos en la paginación */
  .pagination-number-base.active .number {
    color: #6941c6; /* Púrpura para la página activa */
    font-weight: bold; /* Destacar el número activo */
  }


  /** =================================================== MEDIA ===================================================**/
  @media (max-width: 768px) { /* md breakpoint en Bootstrap */
    .rounded-xs {
      border-top-left-radius: 1;
      border-bottom-left-radius: 1;
    }
  }