@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --color-blanco: #FFFFFF;
  --color-negro: #000000;

  --color-primario: #2148CA; 
  --color-secundario-azul: #001979; 
  --color-secundario-verde: #99BE11; 
  --color-complementario: #171728;

  --color-azul-boton-home: #EBF3FF;
  --color-status-morado: #a760ff;

  --color-gris-10: #fcfdff;
  --color-gris-50: #F8F9FB;
  --color-gris-100: #F0F2F5;
  --color-gris-200: #E8ECEF;
  --color-gris-300: #DEE1E6;
  --color-gris-400: #C7CBD1;
  --color-gris-500: #A3ACB2;
  --color-gris-600: #6C757E;
  --color-gris-700: #495058;
  --color-gris-800: #353A40;
  --color-gris-900: #212429;

  --color-verde-50: #E8F5E9;
  --color-verde-100: #C8E6C9;
  --color-verde-200: #A5D6A7;
  --color-verde-300: #81C784;
  --color-verde-400: #66BB6A;
  --color-verde-500: #4CAF50;
  --color-verde-600: #43A047;
  --color-verde-700: #388E3C;
  --color-verde-800: #2E7D32;
  --color-verde-900: #1B5E20;

  --color-azul-50: #E3F2FD;
  --color-azul-100: #BBDEFB;
  --color-azul-200: #90CAF9;
  --color-azul-300: #64B5F6;
  --color-azul-400: #42A5F5;
  --color-azul-500: #2196F3;
  --color-azul-600: #1E88E5;
  --color-azul-700: #1976D2;
  --color-azul-800: #1565C0;
  --color-azul-900: #0D47A1;

  --color-cian-50: #E0F7FA;
  --color-cian-100: #B2EBF2;
  --color-cian-200: #80DEEA;
  --color-cian-300: #4DD0E1;
  --color-cian-400: #26C6DA;
  --color-cian-500: #00BCD4;
  --color-cian-600: #00ACC1;
  --color-cian-700: #0097A7;
  --color-cian-800: #00838F;
  --color-cian-900: #006064;

  --color-amarillo-50: #FFF8E1;
  --color-amarillo-100: #FFEEB8;
  --color-amarillo-200: #FFE07A;
  --color-amarillo-300: #FFD347;
  --color-amarillo-400: #FFCD28;
  --color-amarillo-500: #FFC300;
  --color-amarillo-600: #E0AC00;
  --color-amarillo-700: #C29500;
  --color-amarillo-800: #A37D00;
  --color-amarillo-900: #856600;

  --color-naranja-50: #FFF3E0;
  --color-naranja-100: #FFE0B2;
  --color-naranja-200: #FFCC80;
  --color-naranja-300: #FFB74D;
  --color-naranja-400: #FFA726;
  --color-naranja-500: #FF9800;
  --color-naranja-600: #FB8C00;
  --color-naranja-700: #F57C00;
  --color-naranja-800: #EF6C00;
  --color-naranja-900: #E65100;

  --color-rojo-50: #FFEBEE;
  --color-rojo-100: #FFCDD2;
  --color-rojo-200: #EF9A9A;
  --color-rojo-300: #E57373;
  --color-rojo-400: #EF5350;
  --color-rojo-500: #F44336;
  --color-rojo-600: #E53935;
  --color-rojo-700: #D32F2F;
  --color-rojo-800: #C62828;
  --color-rojo-900: #B71C1C;

  --color-azul-fondo: #ECF6FE;
  --color-gris-titulo:#929CA6;
  --color-gris-sombra: #E8ECEFCC;

  /********************** FUENTES *********/
  --fuente-h1-regular: normal 400 18px / 22px 'Inter','Sans serif';
  --fuente-h1-semibold: normal 600 18px / 22px 'Inter','Sans serif';
  --fuente-h1-medium: normal 700 18px / 22px 'Inter','Sans serif';

  --fuente-h2-regular: normal 400 16px / 20px 'Inter','Sans serif';
  --fuente-h2-semibold: normal 600 16px / 20px 'Inter','Sans serif';
  --fuente-h2-medium: normal 700 16px / 20px 'Inter','Sans serif';

  --fuente-h3-regular: normal 400 14px / 18px 'Inter','Sans serif';
  --fuente-h3-semibold: normal 600 14px / 18px 'Inter','Sans serif';
  --fuente-h3-medium: normal 700 14px / 18px 'Inter','Sans serif';

  --fuente-body-regular:  normal 400 12px / 16px 'Inter','Sans serif';
  --fuente-body-semibold:  normal 600 12px / 16px 'Inter','Sans serif';
  --fuente-body-medium:  normal 700 12px / 16px 'Inter','Sans serif';

  --fuente-body2-regular:  normal 400 11px / 14px 'Inter','Sans serif';
  --fuente-body2-semibold:  normal 600 11px / 14px 'Inter','Sans serif';
  --fuente-body2-medium:  normal 700 11px / 14px 'Inter','Sans serif';
  
  --fuente-boton: normal 600 12px / 12px 'Inter','Sans serif';
  --fuente-link: normal 400 12px / 12px 'Inter','Sans serif';

  --fuente-mobile-h1-regular: normal 400 20px / 24px 'Inter','Sans serif';
  --fuente-mobile-h1-semibold: normal 600 20px / 24px 'Inter','Sans serif';
  --fuente-mobile-h1-medium: normal 700 20px / 24px 'Inter','Sans serif';

  --fuente-mobile-h2-regular: normal 400 18px / 22px 'Inter','Sans serif';
  --fuente-mobile-h2-semibold: normal 600 18px / 22px 'Inter','Sans serif';
  --fuente-mobile-h2-medium: normal 700 18px / 22px 'Inter','Sans serif';

  --fuente-mobile-h3-regular: normal 400 16px / 20px 'Inter','Sans serif';
  --fuente-mobile-h3-semibold: normal 600 16px / 20px 'Inter','Sans serif';
  --fuente-mobile-h3-medium: normal 700 16px / 20px 'Inter','Sans serif';

  --fuente-mobile-body-regular:  normal 400 14px / 20px 'Inter','Sans serif';
  --fuente-mobile-body-semibold:  normal 600 14px / 20px 'Inter','Sans serif';
  --fuente-mobile-body-medium:  normal 700 14px / 20px 'Inter','Sans serif';

  --fuente-mobile-body2-regular:  normal 400 12px / 16px 'Inter','Sans serif';
  --fuente-mobile-body2-semibold:  normal 600 12px / 16px 'Inter','Sans serif';
  --fuente-mobile-body2-medium:  normal 700 12px / 16px 'Inter','Sans serif';

  --fuente-tablet-h1-regular: normal 400 22px / 26px 'Inter','Sans serif';
  --fuente-tablet-h1-semibold: normal 600 22px / 26px 'Inter','Sans serif';
  --fuente-tablet-h1-medium: normal 700 22px / 26px 'Inter','Sans serif';

  --fuente-tablet-h2-regular: normal 400 20px / 24px 'Inter','Sans serif';
  --fuente-tablet-h2-semibold: normal 600 20px / 24px 'Inter','Sans serif';
  --fuente-tablet-h2-medium: normal 700 20px / 24px 'Inter','Sans serif';

  --fuente-tablet-h3-regular: normal 400 18px / 22px 'Inter','Sans serif';
  --fuente-tablet-h3-semibold: normal 600 18px / 22px 'Inter','Sans serif';
  --fuente-tablet-h3-medium: normal 700 18px / 22px 'Inter','Sans serif';

  --fuente-tablet-body-regular:  normal 400 16px / 22px 'Inter','Sans serif';
  --fuente-tablet-body-semibold:  normal 600 16px / 22px 'Inter','Sans serif';
  --fuente-tablet-body-medium:  normal 700 16px / 22px 'Inter','Sans serif';

  --fuente-tablet-body2-regular:  normal 400 14px / 18px 'Inter','Sans serif';
  --fuente-tablet-body2-semibold:  normal 600 14px / 18px 'Inter','Sans serif';
  --fuente-tablet-body2-medium:  normal 700 14px / 18px 'Inter','Sans serif';
}

/* Estiliza la barra de desplazamiento */
::-webkit-scrollbar {
  width: 9px; /* Ancho de la barra */
  height: 9px; /* Alto de la barra (para desplazamientos horizontales) */
}

/* Estiliza el fondo de la barra */
::-webkit-scrollbar-track {
  background: #E8ECEF; /* Color del fondo */
  border-radius: 8px; /* Bordes redondeados */
}

/* Estiliza el "thumb" (la parte que se mueve) */
::-webkit-scrollbar-thumb {
  background-color: #C7CBD1; /* Color del thumb */
  border-radius: 6px; /* Bordes redondeados */
  border: none
}

/* Estiliza el "hover" del thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: #A3ACB2; /* Color al pasar el mouse */
}

* {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--color-gris-900);

  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  min-height: 533px;
  min-width: 1100px;
}

body.movil{
  height: 100vh;
  min-height: 0px;
  min-width: 0px;
}

main {
  height: 100%;
  display: flex;
}

/***************************** TEXTO *****************************/
h1 {
  font: var(--fuente-h1-semibold);
}

h2 {
  font: var(--fuente-h2-semibold);
}

h3 {
  font: var(--fuente-h3-semibold);
}

h3.regular{
  font: var(--fuente-h3-regular);
}

h4 {
  font: var(--fuente-body-semibold);
}


h1.mobile {
  font: var(--fuente-mobile-h1-semibold);
}

h2.mobile {
  font: var(--fuente-mobile-h2-semibold);
}

h3.mobile {
  font: var(--fuente-mobile-h3-semibold);
}

h4.mobile {
  font: var(--fuente-mobile-body-semibold);
}

h1.letra-delgada,
h2.letra-delgada,
h3.letra-delgada,
h4.letra-delgada {
  font-weight: 400;
}

h1.bold,
h2.bold,Mobile/H1/Semibold
h3.bold,
h4.bold {
  font-weight: 700;
}

h3.regular{
  font: var(--fuente-h3-regular);
}

p.letra-semibold{
  font: var(--fuente-body-semibold);
  display: inline;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-azul-800);
}


a i{
  text-decoration: none;
  cursor: pointer;
  color: var(--color-azul-800);
}


span.label-subtitulo{
  color: var(--color-gris-600);
  font: var(--fuente-body-medium);
}

.texto-centrado {
  text-align: center;
}

.texto-izquierda {
  text-align: left;
}

.texto-derecha {
  text-align: right;
}

.texto-justificado {
  text-align: justify;
}

.texto-negro,
.texto-color-negro {
  color: var(--color-gris-900) !important;
}

.texto-color-blanco {
  color: var(--color-blanco);
}

.texto-color-rojo {
  color: var(--color-rojo-600);
}

.texto-color-verde {
  color: var(--color-verde-600);
}

.texto-advertencia{
  color: var(--color-amarillo-500);
}

.texto-gris{
  color: var(--color-gris-500);
}

.texto-link{
  color: var(--color-azul-800) !important;
}

.texto-primario{
  color: var(--color-primario);
}

.display-none {
  display: none;
}
.contenedor-botones-sucursales{
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.text-no-decoration{
  text-decoration: none;
}

.contenido-centrado{
  align-content: center;
  display: flex;
  justify-content: center;
}


i.icono-modal{
  font-size: 40px;
}

i.icono-modal.lg{
  font-size: 60px;
}

i.icono-grupos{
  font-size: 24px;
  color: var(--color-gris-700);
}

i.icono-mensaje-proceso{
  font-size: 100px;
  color: var(--color-gris-300);
}

.label-clases-restantes{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.label-horario{
  font: var(--fuente-body2-semibold);
  color: var(--color-primario);  
}
.label-horario i{
  font: var(--fuente-body2-semibold);
  color: var(--color-primario);  
}

.label-horario.lg{
  font: var(--fuente-body-semibold);
}
.label-horario.lg i{
  font: var(--fuente-body-semibold);
}

/****************************** BORDES ******************************/

.border-left{ border-left: 1px solid var(--color-gris-200)}
.border-right{ border-right: 1px solid var(--color-gris-200)}
.border-top{ border-top: 1px solid var(--color-gris-200)}
.border-bottom{ border-bottom: 1px solid var(--color-gris-200)}
.border-all{  border: 1px solid var(--color-gris-200)}

/****************************** GAP ******************************/
.gap-7 {
  gap: 7px !important;
}
.gap-8 {
  gap: 8px !important;
}
.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}
/******************************PADDING****************************/
.pl-0{
  padding-left: 0px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

/***************************** MARGIN ****************************/
.mr-8 {
  margin-right: 8px !important;
}

/************************* MARGIN BOTTOM *************************/
.mb-0 {
  margin-bottom: 0px !important;
}

.mb-2 {
  margin-bottom: 2px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-34 {
  margin-bottom: 34px !important;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mb-96 {
  margin-bottom: 96px;
}

/************************** MARGIN TOP ***************************/
.mt-20{
  margin-top: 20px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mt-8 {
  margin-top: 8px !important;
}
.mt-4 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 2px !important;
}

/************************* MARGIN LEFT ***************************/
.ml-4{
  margin-left: 4px !important;
}
.ml-8{
  margin-left: 4px !important;
}

/************************* MARGIN RIGHT **************************/
.mr-8 {
  margin-right: 8px !important;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

/************************** Estilos form *************************/
form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

label.requerido::after {
  content: " *";
  color: var(--color-rojo-500);
}
div.requerido::after {
  content: " *";
  color: var(--color-rojo-500);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"] {
  height: 31px;
  border-radius: 4px;
  border: 1px solid var(--color-gris-300);
  padding: 0 10px;
  font-size: 14px;
  width: 100%;
}

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type="number"] { 
  -moz-appearance:textfield; 
}

input[type="number"].small {
  width: 60px;
  height: 27px;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: var(--color-gris-500);
}


input[type="text"].no-border{
  border: 0px;
}

input[type="color"]{
  padding: 0;
  width: 26px;
  height: 26px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-gris-300);
  box-shadow: none;
  border-radius: 2px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

input[type="color"]:hover{
  cursor: pointer;
}

textarea:focus-visible{
  outline: none;
}

input:focus{
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-gris-100);
}

textarea {
  resize: none;
  height: 86px;
  border-radius: 4px;
  border: 1px solid var(--color-gris-300);
  font-size: 14px;
  width: 100%;
  padding: 10px;
}

.input-direccion-column textarea {
  height: 106px;
}

input.bold {
  font-weight: 700;
}

.input-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-row.align-start{
  align-items: start;
}

.input-row.filtro-busqueda{
  padding: 8px;
}

.input-row .hint {
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.input-row .label-row{
  display: flex;
  justify-content: space-between;
}

.input-row.fondo-gris{
  background-color: var(--color-gris-100);
  padding: 16px;
  border-radius: 6px;
}

.input-column {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  padding: 0px 4px;
}

.input-column.gap14 {
  gap: 14px;
}

.input-column.align-start{
  align-items: start;
}

.input-column.align-end{
  align-items: end;
}

.input-column.column-agregar-vacaciones {
  gap: 8px;
  padding: 0px;
}

.input-column .input-semi-medio{
  width: 45%;
}

.input-column .input-medio{
  width: 50%;
}

.input-column .input-min{
  width: 30%;
}


.input-column .input-semi-min{
  width: 33%;
}


.input-column-grupos{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px;
  gap: 10px;
}
.input-column-grupos .input-medio{
  width: 16%;
}

.input-column-grupos .input-hora{
  width: 2%;
}

.input-column .input-vertical{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  height: 100%;
  min-height: 105px;
}

.input-column .input-vertical.overflow-auto{
  overflow: auto;
}

.input-column .input-vertical.column-selects{
  gap: 10px;
}

.input-column .input-vertical.padding-izquierdo{
  padding-left: 16px;
}

.input-column .input-vertical.padding-derecho{
  padding-right: 16px;
}

.input-column .input-vertical.justify-start{
  justify-content: start;
  gap: 12px;
}

.input-column.full{
  height: 100%;
}

.input-column.gap-reducido{
  gap: 10px;
}

.input-column.no-padding{
  padding: 0px;
}

.input-column.gap-reducido{
  gap: 12px;
}

.input-column.gap-minimo{
  gap: 8px;
}

.input-direccion-column {
  flex-direction: column;
}

.input-direccion-column.alineacion-start {
  align-items: flex-start;
  gap: 16px;
}

.input-row.input-sin-label {
  justify-content: flex-end;
}

.input-row.ancho-contenido {
  width: auto;
}

.input-multiple {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.input-inline {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 16px;
}

.input-inline input {
  width: 45%;
}

.input-inline label {
  width: 55%;
}

/************************* Estilos radio button ***********************/

input[type=radio] {
  accent-color: var(--color-primario);
}

/************************* Estilos checkBox ***********************/
.checkbox-container {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  min-height: 31px;
  display: flex;
  justify-content: start;
  align-items: center;
}

.checkbox-container.no-padding{
  padding-left: 0px;
}

.checkbox-container .checkbox-label {
  font-size: 12px;
  font-weight: 400;
}

.checkbox-container .checkbox-label a {
  font-size: 14px;
  font-weight: 400;
}

.checkbox-container .checkbox-label a {
  font-size: 14px;
  font-weight: 400;
}


.checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-container input[type="checkbox"]:disabled{
  cursor:not-allowed; 
}

.checkmark {
  position: absolute;
  top: 7px;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1.5px solid var(--color-gris-400);
  border-radius: 3px;
  background-color: var(--color-blanco);
  transition: background-color 0.2s, border-color 0.2s;
  bottom: 0px;
}

.checkbox-container:hover input[type="checkbox"]~.checkmark {
  border-color: var(--color-gris-600);
}

.checkbox-container input[type="checkbox"]:checked~.checkmark {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}

.checkbox-container input[type="checkbox"]:checked~.checkmark.color-verde {
  background-color: var(--color-verde-600);
  border-color: var(--color-verde-600);
}

.checkbox-container input[type="checkbox"]:disabled~.checkmark {
  background-color: var(--color-gris-400);
  border-color: var(--color-gris-400);
  cursor:not-allowed; 
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid var(--color-blanco);
  border-width: 0 2px 2px 0;
}

.checkbox-container input[type="checkbox"]:checked~.checkmark::after {
  display: block;
}

.contenedor-checks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contenedor-checks .row-checks {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 32px;
}

.contenedor-checks .row-checks .checkbox-container {
  width: 96px;
  min-height: 16px;
}

.contenedor-checks .row-checks .checkbox-container .checkmark {
  top: 0px;
  height: 16px;
  width: 16px;
}

/************************* Estilos select *************************/
.styled-select {
  width: 100%;
  height: 31px;
  padding: 0 16px;
  font-size: 14px;
  border: 1px solid var(--color-gris-400);
  border-radius: 8px;
  background-color: var(--color-blanco);
  color: var(--color-gris-900);
  transition: border-color 0.3s ease;
}

.styled-select:hover {
  border-color: var(--color-gris-600);
}

/************************ Estilos boton *************************/
button{
  border: 0;
  font: var(--fuente-boton);
  background-color: var(--color-primario);
  color: var(--color-blanco);
  min-height:28px;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor:pointer;
}

button i{
  color: var(--color-blanco);
  font-weight: 600;
  font-size: 14px;
}

button.secundario{
  background-color: var(--color-gris-200);
  color: var(--color-gris-800);
}


button.secundario i{
  color: var(--color-gris-800);
  font-weight: 600;
  font-size: 12px;
}

button.eliminar{
  color: var(--color-blanco);
  background-color: var(--color-rojo-600);
}

button.exito{
  color: var(--color-blanco);
  background-color: var(--color-verde-600);
}

button.advertencia{
  color: var(--color-blanco);
  background-color: var(--color-amarillo-500);
}

button.rectangulo-lg{
  padding: 10px 52px;
  font: var(--fuente-h2-semibold);
}

button.rectangulo-md{
  padding: 10px 32px;
  font: var(--fuente-h2-semibold);
}

button:disabled{
  background-color: var(--color-gris-200);
  color: var(--color-gris-400);
  cursor: not-allowed;
}

button:disabled i{
  color: var(--color-gris-400);
  font-weight: 600;
}

button.flat.gris{
  background: var(--color-gris-100);
}

button.flat.sello i{
  color: var(--color-gris-700)
}

button.flat i{
  color: var(--color-negro);
}

button.flat{
  color: var(--color-negro);
  background-color: transparent;
}

button.flat.sm{
  min-height: 10px;
  padding: 5px !important;
}


button.flat.link{
  color: var(--color-azul-800);
  background-color: transparent;
}

button.flat.link i {
  color: var(--color-azul-800);
  background-color: transparent;
}

button.flat.link:disabled{
  color: var(--color-gris-400);
  background-color: transparent;
}

button.flat.link:disabled i {
  color: var(--color-gris-400);
  background-color: transparent;
  font-weight: 600;
}

button.flat.active{
  background-color: var(--color-gris-100);
}

button.flat:hover{
  background-color: var(--color-gris-100);
}

button.flat:disabled i{
  color: var(--color-gris-400);
  font-weight: 600;
}


button.outline{
  color: var(--color-negro);
  background-color: transparent;
  border: 1px solid var(--color-negro);
}

button.outline i{
  color: var(--color-negro);
}

button.outline:hover{
  background-color: var(--color-gris-100);
}

button.outline:disabled{
  color: var(--color-gris-400);
  border: 1px solid var(--color-gris-400);
}

button.outline:disabled i{
  color: var(--color-gris-400);
  font-weight: 600;
}

button.outline.azul{
  color: var(--color-azul-800);
  border-color: var(--color-azul-800);
  background: var(--color-azul-100);
}

button.outline.naranja{
  color: var(--color-naranja-800);
  border-color: var(--color-naranja-800);
  background: var(--color-naranja-100);
}
button.outline.verde{
  color: var(--color-verde-800);
  border-color: var(--color-verde-600);
  background: var(--color-verde-100);
}
button.outline.rojo{
  color: var(--color-rojo-800);
  border-color: var(--color-rojo-600);
  background: var(--color-rojo-100);
}


button.respuesta{
  width: 112px;
}


button.opcion-dropdown{
  width: 100%;
  background-color: var(--blanco);
  color: var(--gris-900);
  font: var(--fuente-body-regular);
  text-align: left;
  display: flex;
  justify-content: start;
}

button.opcion-dropdown i{
  color: var(--gris-900);
}

button.opcion-dropdown:hover{
  background-color: var(--color-azul-boton-home);
}

button.opcion-dropdown:disabled{
  color: var(--color-gris-400);
}

button.full{
  width: 100%;
  height: 35px;
  font-size: 15px;
}


button.btn-filtros-calendario{
  max-width: 140px;
}

button.btn-filtros-membresia{
  max-width: 160px;
}

button.busqueda-min{
  padding: 8px 6px;
}

/*************** Componente progress ***************/

progress{
  width: 100%;
  height: 4px !important;
  border: none;
  border-radius: 10px;
}

progress::-webkit-progress-bar{
  width: 100%;
  background-color: var(--color-gris-300);
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: var(--color-gris-300);  /* Color de la parte de la barra que indica el progreso */
  border-radius: 10px;
  transition: width 0.8s ease, background-color 0.8s ease;
}

/* Estilos para Firefox */
progress::-moz-progress-bar {
  background-color: var(--color-gris-300); /* Color de la parte de la barra que indica el progreso */
  border-radius: 10px;
  transition: width 0.8s ease, background-color 0.8s ease;
}

/* Clases de color */
progress.verde::-webkit-progress-value{
  background-color: #43a047;
}

progress.verde::-moz-progress-bar {
  background-color: #43a047;
}

progress.amarillo::-webkit-progress-value{
  background-color: #ffb300;
}

progress.amarillo::-moz-progress-bar {
  background-color: #ffb300;
}

progress.rojo::-webkit-progress-value{
  background-color: #e53935;
}

progress.rojo::-moz-progress-bar {
  background-color: #e53935;
}

/************************ Estilos submit *************************/
button i {
  font-size: 14px;
}

.boton-aceptar {
  width: 100%;
  height: 31px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primario);
  color: var(--color-blanco);
}

button:disabled.boton-aceptar {
  background-color: var(--color-gris-200);
  color: var(--color-gris-400);
  cursor: not-allowed;
}

.boton-aceptar.boton--plata {
  background-color: var(--color-plata);
}

.boton-aceptar.boton--eliminar {
  color: var(--color-blanco);
  background-color: var(--color-rojo-600);
}

.boton-expandir-filtro {
  width: auto;
  height: 28px;
  font: var(--fuente-boton);
  border-radius: 8px;
  border: none;
  background-color: var(--color-primario);
  color: var(--color-blanco);
  cursor: pointer;
  padding-inline: 8px;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.boton-expandir-filtro.activo {
  background-color: var(--color-gris-100);
}

.boton-expandir-filtro i.icon-filtro {
  font-size: 14px;
  color: var(--color-gris-700);
}

.boton-expandir-filtro i.icon-angulo-abajo {
  font-size: 14px;
  color: var(--color-gris-700);
}

.boton-agregar-filtro {
  width: auto;
  height: 28px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  border: none;
  background-color: var(--color-primario);
  color: var(--color-blanco);
  cursor: pointer;
  padding-inline: 16px;
  padding-block: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

button:disabled.boton-agregar-filtro {
  background-color: var(--color-gris-400);
  cursor: not-allowed;
}

.boton-agregar-filtro i {
  font-size: 18px;
  color: white;
}

.boton-dropdown {
  border: none;
  background: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

/************************ Boton en texto *************************/
.boton-en-texto {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-azul-600);
}

button:disabled.boton-en-texto {
  color: var(--color-gris-400);
  cursor: not-allowed;
}

button:disabled.boton-en-texto i {
  color: var(--color-gris-400);
}

.dropdown-menu .boton-en-texto {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gris-900);
}

/************************* Boton busqueda ************************/
.boton-busqueda {
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: 1px solid var(--color-gris-300);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin-bottom: 2px;
  cursor: pointer;
}

.boton-busqueda i {
  font-size: 15px;
}

/******************** Estilos input telefono *********************/
.input-container-telefono {
  width: 100%;
  display: flex;
  align-items: center;
}

.input-container-telefono .input-telefono__prefijo {
  background-color: var(--color-gris-100);
  border: 1px solid var(--color-gris-400);
  border-radius: 8px 0 0 8px;
  padding: 0 10px;
  height: 31px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.input-container-telefono input {
  border-radius: 0 8px 8px 0;
  flex: 1;
  border-left: none;
}

.input-container-telefono input:focus {
  outline: none;
}

.input-container-telefono .gap-8{
  gap: 8px;
}

/******************* Estilos input contenedor ********************/
.input-con-icono {
  position: relative;
}

.input-con-icono input {
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
}

.input-con-icono.derecha input {
  padding-left: 7px;
}

.input-con-icono.izquierda input {
  padding-right: 7px;
}

.input-con-icono i {
  position: absolute;
  left: 12px;
  top: 50%;
  bottom: 0px;
  font-size: 12px;
  transform: translateY(-50%);
  color: var(--color-gris-600);
}

.input-con-icono i.icon-signo-pesos {
  top: 48%;
}

.input-con-icono.derecha i {
  right: 12px !important;
  left: auto;
}

.input-con-icono span {
  position: absolute;
  right: 6px;
  top: 50%;
  font-size: 12px;
  transform: translateY(-50%);
}

.input-con-icono-derecha {
  padding-right: 30px !important;
}

.input-con-icono-contenedor {
  position: relative;
}

.icono-input-derecha {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 14px;
}

.icono-input-derecha i.icon-buscar {
  font-size: 14px;
}

/*****************************************************************/
/************************* Estilos tabla *************************/
/*****************************************************************/
table {
  width: 100%;
  border-collapse: collapse;
}

table .w1p {
  width: 1%;
}

table .w2p {
  width: 2%;
}

table .w3p {
  width: 3%;
}

table .w4p {
  width: 4%;
}

table .w5p {
  width: 5%;
}

table .w6p {
  width: 6%;
}

table .w7p {
  width: 7%;
}

table .w8p {
  width: 8%;
}

table .w9p {
  width: 9%;
}

table .w10p {
  width: 10%;
}

table .w11p {
  width: 11%;
}

table .w12p {
  width: 12%;
}

table .w13p {
  width: 13%;
}

table .w14p {
  width: 14%;
}

table .w15p {
  width: 15%;
}

table .w16p {
  width: 16%;
}

table .w17p {
  width: 17%;
}

table .w18p {
  width: 18%;
}

table .w19p {
  width: 19%;
}

table .w20p {
  width: 20%;
}

table .w21p {
  width: 21%;
}

table .w23p {
  width: 23%;
}

table .w24p {
  width: 24%;
}

table .w25p {
  width: 25%;
}

table .w26p {
  width: 26%;
}

table .w28p {
  width: 28%;
}

table .w30p {
  width: 30%;
}

table .w31p {
  width: 31%;
}

table .w32p {
  width: 32%;
}

table .w33p {
  width: 33%;
}

table .w34p {
  width: 34%;
}

table .w35p {
  width: 35%;
}

table .w36p {
  width: 36%;
}

table .w38p {
  width: 38%;
}

table .w40p {
  width: 40%;
}

table .w41p {
  width: 40%;
}

table .w42p {
  width: 42%;
}

table .w45p {
  width: 45%;
}

table .w46p {
  width: 46%;
}

table .w47p {
  width: 47%;
}

table .w48p {
  width: 48%;
}

table .w49p {
  width: 49%;
}

table .w50p {
  width: 50%;
}

table .w52p {
  width: 52%;
}

table .w55p {
  width: 55%;
}

table .w56p {
  width: 56%;
}

table .w58p {
  width: 58%;
}

table .w60p {
  width: 60%;
}

table .w62p {
  width: 62%;
}

table .w63p {
  width: 63%;
}

table .w65p {
  width: 65%;
}

table .w66p {
  width: 66%;
}

table .w67p {
  width: 67%;
}

table .w68p {
  width: 68%;
}

table .w69p {
  width: 69%;
}

table .w70p {
  width: 70%;
}

table .w73p {
  width: 73%;
}

table .w75p {
  width: 75%;
}

table .w80p {
  width: 80%;
}

table thead.cabecera-sticky {
  position: sticky;
  top: 0;
}


table tr.align-top{
  vertical-align: top;
}

table tr.no-border{
  border: none;
}

table tr.gris{
  background: var(--color-gris-50);
}

table .color-gris-600{
  color: var(--color-gris-600);
}

tr.row-totales{
  background: var(--color-gris-100);
  font: var(--fuente-body-semibold);
}

.tabla-base tbody tr.row-totales:hover{
  background: var(--color-gris-100);
  font: var(--fuente-body-semibold);
}

.tabla-base tbody tr td .celda-columna {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*****************************************************************/
/************************** BADGE INFO **************************/
/***************************************************************/
.badge-info{
  padding: 2px 8px;
  gap: 8px;
  border-radius: 4px;
  font: var(--fuente-body2-semibold);
  display: flex;
  justify-content: center;
  align-items: center;
}

.badge-info.amarillo{
  background: var(--color-amarillo-200);
  color: var(--color-amarillo-900);
}

.badge-info.verde{
  background: var(--color-verde-50);
  color: var(--color-verde-800);
}

.badge-info.rojo{
  background: var(--color-rojo-50);
  color: var(--color-rojo-800);
}

.badge-info.azul{
  background: var(--color-azul-100);
  color: var(--color-azul-900);
}

.badge-nivel-evaluacion{
  padding: 6px 12px;
  gap: 8px;
  border-radius: 10px;
  opacity: 0px;
  background: var(--color-azul-50);
  font: var(--fuente-body-semibold);
}

.badge-index{
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--color-gris-100);
  display: flex;
  justify-content: center;
  align-items: center;
  font: var(--fuente-body-semibold);
}


.badge-respuesta{
  width: 112px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: var(--fuente-boton);
}

.badge-respuesta.azul{
  border: 1px solid var(--color-azul-800);
  color: var(--color-azul-800);
  background: var(--color-azul-50);
}

.badge-respuesta.naranja{
  border: 1px solid var(--color-naranja-800);
  color: var(--color-naranja-800);
  background: var(--color-naranja-50);
}

.badge-cupon{
  padding: 2px 8px;
  border-radius: 4px;
  font: var(--fuente-body2-semibold);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-verde-50) ;
  color: var(--color-verde-800) ;
}

.badge-cupon.rojo{
  background: var(--color-rojo-50) !important;
  color: var(--color-rojo-800) !important;
}

.badge-cupon.verde{
  background: var(--color-verde-50) !important;
  color: var(--color-verde-800) !important;
}

.badge-cupon.naranja{
  background: var(--color-naranja-50) !important;
  color: var(--color-naranja-800) !important;
}



/*****************************************************************/
/********************* Estilos tabla detalle *********************/
/*****************************************************************/
.tabla-detalle tbody tr:first-child td {
  border-top: 0;
}

.tabla-detalle tbody tr td {
  height: 32px;
  border-bottom: 1px solid var(--color-gris-200);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 400;
}

.tabla-detalle.edades-alumnos tbody tr td {
  padding: 0px;
  height: 25px;
}

.tabla-scroll {
  max-height: 170px;
  overflow-y: auto;
}

.tabla-scroll-alumnos {
  max-height: calc(100vh - 245px);
  overflow-y: auto;
}

.tabla-scroll table {
  width: 100%;
  border-collapse: collapse;
}

.tabla-scroll thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

.tabla-detalle.no-bordes tbody tr td {
  border-bottom: none;
}

.tabla-detalle:not(.opciones-normal) tbody tr td:nth-child(odd) {
  font-size: 12px;
  color: var(--color-gris-600);
}

.tabla-detalle thead tr td {
  height: 32px;
  padding: 6px 8px;
  background-color: var(--color-blanco);
  font-size: 12px;
  font-weight: 700;
}

.tabla-agregar tbody tr td div.comentario,
.tabla-detalle tbody tr td div.comentario {
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow: hidden;
  /* max-height: 42px; */
  padding: 0px 4px;
}

.tabla-agregar tbody tr td div.comentario {
  padding: 0px 0px;
}

.tabla-detalle .cabecera-fija {
  position: sticky;
  top: 0;
}

.tabla-detalle.modal {
  margin-top: 10px
}

.tabla-detalle.cabecera-no-wrap {
  white-space: nowrap;
}

table.tabla-detalle.cabecera-no-sticky thead th {
  position: relative;
}

.tabla-detalle .celda-no-overflow {
  text-overflow: inherit;
  white-space: normal;
  overflow-wrap: break-word;
}


table.tabla-detalle td.icono-caja-dashboard {
  font-size: 20px;
  padding: 16px 8px;
}

.tabla-detalle td a {
  font-size: 12px;
}


.tabla-detalle.actividades tr{
  vertical-align: baseline;
}

.badge-actividades{
  width: 6px;
  height: 6px;
  background-color: #A3ACB2;
  border-radius: 100px;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 2px;
}

td .row{
  display: flex;
}


td.celda-opciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

td .celda-opciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

td.celda-opciones.no-padding{
  padding: 0px !important;
}

td.celda-opciones.center{
  justify-content: center;
  align-items: center;
}


td.fondo-amarillo{
  background: var(--color-amarillo-200);
}


tr.bg-azul-50{
  background: var(--color-azul-50);
}

tr.bg-amarillo-50{
  background: var(--color-amarillo-50);
}

tr.bg-rojo-50{
  background: var(--color-rojo-50);
}

tr.bg-verde-50{
  background: var(--color-verde-50);
}

.background-rojo-50{
  background: var(--color-rojo-50)!important;
}
/*****************************************************************/
/********************** Estilos tabla base ***********************/
/*****************************************************************/
.tabla-base {
  width: 100%;
  border-spacing: 0;
  overflow: hidden;

  border-collapse: separate;
  border-spacing: 10;
  border: 1px solid var(--color-gris-200);
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.tabla-base.no-border {
  border: 0px solid var(--color-gris-200);
}

.tabla-base thead {
  background-color: var(--color-gris-100);
  font-weight: bold;
}

.tabla-base.no-border thead {
  background-color: transparent;
}

.tabla-base tfoot th,
.tabla-base thead th {
  padding: 8px 9px;
  border-bottom: 1px solid var(--color-gris-200);
  font-size: 12px;
  white-space: nowrap;
}

.tabla-base.no-border thead th {
  border-bottom: 0px solid var(--color-gris-200);
  white-space: nowrap;
  font-weight: 400;
  color: var(--color-gris-700);
  font-size: 12px;
}

.tabla-base tfoot th{
  background: var(--color-gris-100);
}

.tabla-base tbody tr td {
  border-bottom: 1px solid var(--color-gris-200);
  height: 33px;
}

.tabla-base.no-border tbody tr td {
  border-bottom: 0px solid var(--color-gris-200);
}

.tabla-base.gastos{
  border-radius: 0px;
  border: 0px;
}

.tabla-base.tabla-base-overflow{
  overflow: auto;
}

.tabla-totales tbody tr td{
  background: var(--color-gris-100);
  font: var(--fuente-body-semibold);
}

/* .tabla-base.gastos tbody tr td{
  border: 1px solid var(--color-gris-200);
} */

.tabla-base.gastos tbody td{
  padding: 0px 8px;
  border-left: 1px solid var(--color-gris-200);
}

/*.tabla-base.gastos tbody td.border:last-child{
  border-right: 1px solid var(--color-gris-200);
} */

.tabla-base.gastos tbody td input[type="text"]:not(.input-en-tabla) {
  border: none;
  font-size: var(--fuente-body2-regular);
  height: 33px;
  border-radius: 0px;
}

.tabla-base.gastos tbody td input[type="text"].input-en-tabla {
  font-size: var(--fuente-body-regular);
  height: 20px;
}

.tabla-base.gastos tbody td .input-con-icono.icono-en-input i {
  top: 9px;
}

.tabla-base.gastos tbody td input[type="text"].input-busqueda-en-tabla {
  border: none;
  font-size: var(--fuente-body-regular);
  height: 20px;
  border-radius: 0px;
}

.tabla-base tbody tr td.no-padding{
  padding: 0px;
}

.tabla-base tbody tr td.padding-input{
  padding-block: 6px;
  padding-inline: 8px;
}

.tabla-base tbody tr:last-of-type {
  border-bottom: none;
}

.tabla-base tbody td {
  padding: 6px 8px;
  font-size: 12px;
}

.tabla-base.no-border tbody td {
  padding: 0px 8px;
  height: 16px;
}

.tabla-base tbody tr:hover {
  background: var(--color-gris-50);
}

.celda-opciones i {
  font-size: 12px;
}

.tabla-base td a {
  font-size: 12px;
}

.tabla-base tbody tr.active{
  font-size: 12px;
  border: 1px solid var(--color-azul-200);
  background: var(--color-azul-fondo);
}

.tabla-base tbody tr.active td{
  border-top: 1px solid var(--color-azul-200);
  border-bottom: 1px solid var(--color-azul-200);
}

.tabla-base tbody tr.active td:first-child{
  border-left: 1px solid var(--color-azul-200);
}
.tabla-base tbody tr.active td:last-child{
  border-right: 1px solid var(--color-azul-200);
}

.tabla-base tbody tr.no-border td{
  border: none;
}

.tabla-base tbody tr td.titulo-seccion {
  background: var(--color-gris-50);
}

.tabla-base tbody tr.no-padding-block td{
  padding-block: 0px;
}

.tabla-base tbody tr td.td-total{
  font: var(--fuente-body-semibold);
  background: var(--color-gris-100) !important;
}

.tabla-base.sin-borde{
  border: none;
}

.tabla-base.no-border-radius{
  border-radius: 0px;
}


/****************** Contenedor tabla base *****************/
.contenedor-tabla-base {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}

.contenedor-tabla-base .tabla-base {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
}

.contenedor-tabla-base .tabla-base thead {
  position: sticky;
  top: 0;
}

.contenedor-tabla-base .tabla-base tbody.cursor-pointer tr td{
  cursor: pointer;
}

.contenedor-tabla-base.col-control-alumnos {
  height: calc(100% - 90px);
}

.doble-tabla {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

/************************* DROPDOWN ***********************/
.dropdown-menu {
  width: 150px;
  position: absolute;
  background-color: var(--color-blanco);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  z-index: 1000;
  border-radius: 4px;
  top:20px;
  right: 10px;
  padding: 12px 10px;
  justify-content: start;
  align-items: start;
  gap: 10px;
}
.dropdown-menu-grupo{
  position: absolute !important;
  background-color: var(--color-blanco);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 4px;
  left: 762px !important;
  width: 180px !important;
  top: -50 !important;
  bottom: -50 !important;
  height: 87px !important;
  bottom: 0px !important;
  top: -10 !important;
  top: 0px !important;
  margin-top: 0px !important;
  padding: 12px 10px;
  right: 10px;
  justify-content: start;
  align-items: start;
  gap: 10px;
}

.dropdown-menu.medium{
  width: 176px;
}

.dropdown-menu.grupo{
  width: 175px;
}

.dropdown-menu.cajas{
  width: 200px;
}

.dropdown-menu.large{
  width: 230px;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dropdown-menu ul li {
  padding-inline: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
}

.dropdown-menu ul li i {
  font-size: 14px;
  color: var(--color-gris-600);
}

.dropdown-menu ul li:hover {
  background-color: #e1f5fe;
}

/*****************************************************************/
/************************* Inicio Clases *************************/
/*****************************************************************/
.alerta-env{
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-amarillo-500);
  color: var(--c)
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-inhabilitado{
  cursor: not-allowed;
}

.contenedor-general{
  display: flex;
  align-items: start;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 44px);
  overflow: hidden;
}

/*****************************************************************/
/*************************** Vista web ***************************/
/*****************************************************************/
.vista-web {
  width: calc(100vw - 60px);
  height: 100%;
  overflow: auto;
  position: relative;
}

.vista-web.vista-full{
  width: 100% !important;
  height: 100%;
  overflow: auto;
  position: relative;
}

/********************** Barra desplazamiento *********************/
.vista-web::-webkit-scrollbar {
  width: 5px;
}

/* Estilo de la "pista" de la barra (background) */
.vista-web::-webkit-scrollbar-track {
  background: var(--color-gris-50);
}

/* Estilo del "thumb" (la parte que se mueve) */
.vista-web::-webkit-scrollbar-thumb {
  background-color: var(--color-gris-400);
  border-radius: 10px;
}

/* Estilo del thumb al pasar el mouse */
.vista-web::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gris-600);
}


/* Contenedor padre */
.vista-web.contenido{
  margin-left: 60px;
}

.vista-web.herramientas{
  margin-left: 60px;
  display: flex;
  flex-direction: column;
}

.vista-web.contenido.configuracion{
  margin-left: 0px;
}

.vista-web .contenedor-contenido {
  width: 100%;
  height: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}


.vista-web .contenedor-contenido.row{
  flex-direction: row;
}

.vista-web .contenedor-contenido.detalle{
  height: calc(100%  -  70px);
}

.vista-web .contenedor-contenido.contenido-por-tab {
  height: calc(100% - 99px);
}

.vista-web .contenedor-contenido.contenido-detalle-row {
  flex-direction: row;
}

.vista-web .contenedor-contenido.contenido-cards-configuracion {
  height: calc(100% - 56px);
}

.vista-web .contenedor-contenido.row.alineacion-centrada {
  align-items: center;
  gap: 10px;
}

.vista-web .contenedor-contenido.row.alineacion-centrada i {
  font-size: 12px;
  color: var(--color-primario);
  cursor: pointer;
}


.vista-web.detalle{
  margin-left: 56px;
}

.contenedor-row{
  display: flex;
  justify-content: start;
  align-items: start;
  height: 100%;
}

.contenedor-row.items-separados{
  gap: 10px;
}

/************************** Estilos login *************************/
.vista-web .login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/bg-login-aquara.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.vista-web .login .login__card {
  width: 380px;
  display: flex;
  align-items: start;
  justify-content: center;
  background-color: var(--color-blanco);
  border-radius: 4px;
  padding: 40px 20px;
}

.vista-web .login .login__card .credenciales-card {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:24px;
}


.vista-web .login .login__card .credenciales-card form{
  gap: 16px;
}

.vista-web .login .login__card .credenciales-card h1 {
  font-size: 22px;
}

.vista-web .login .login__card .credenciales-card img {
  width: 132px;
  height: 56px;
}

.vista-web .login .login__card .credenciales-card button {
  width: 100%;
}

.vista-web .login .login__card .credenciales-card a.link-password{
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: var(--color-negro);
  text-decoration: underline;
}

/************************ Sidebar ************************/
.sidebar {
  width: 60px;
  border-right: 1px solid var(--color-gris-300);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 100%;
  z-index: 1000;
  gap: 16px;
  padding: 12px;
  position: fixed;
  background: var(--color-blanco);
  transition: width 0.3s ease-in-out;
  overflow: hidden;
  position: fixed;
}

.sidebar:hover{ 
  width: 250px;
  border-right: none;
}

.sidebar .item-sidebar{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 32px;
  gap: 8px;

  overflow: hidden;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.sidebar .item-sidebar:not(.titulo):hover{
  background: var(--color-gris-100);
}

.sidebar .item-sidebar .contenedor-icono{
  border-radius: 8px;
  width: 32px; 
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar .item-sidebar .contenedor-icono i{
  font-size: 18px;
  color: var(--color-gris-800) ;
}

.sidebar .item-sidebar.activo{
  background: var(--color-azul-boton-home);
}

.sidebar .item-sidebar.activo .contenedor-icono i{
  color: var(--color-negro);
}

.sidebar .item-sidebar.titulo .contenedor-icono{
  border-radius: 8px;
  width: 32px; 
  background: var(--color-azul-boton-home);
}

.sidebar .item-sidebar.titulo .contenedor-icono i{
  color: var(--color-primario); 
  font-size: 20px;
}

.sidebar .item-sidebar .contenedor-titulo{
  font: var(--fuente-body-regular);

  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.3s ease;
  max-width: 0;
}

.sidebar .item-sidebar.titulo .contenedor-titulo{
  font: var(--fuente-h3-semibold);
}

.sidebar:hover .item-sidebar .contenedor-titulo{ 
  opacity: 1;
  max-width: 200px;
}


.sidebar-configuracion{
  width: 250px;
  background-color: var(--color-blanco);
  border-right: 1px solid var(--color-gris-300);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 100%;
  z-index: 1000;
  gap: 4px;
  padding: 16px;
}


.sidebar-configuracion .seccion-titulo{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 10px;
  flex-direction: column;
}

.sidebar-configuracion .seccion-titulo .seccion-regresar{
  display: flex;
  width: 100%;
  justify-content: start;
  padding: 11px 0px;
  border-bottom:1px solid var(--color-gris-300);
  gap: 4px;
}

.sidebar-configuracion .seccion-titulo .seccion-regresar i{
  color: var(--color-azul-800);
  font-size: 16px;
}


.sidebar-configuracion .item-sidebar{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  padding: 2px 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 8px;
  height: 32px;
}

.sidebar-configuracion .item-sidebar.titulo{
  padding: 0px;
}

.sidebar-configuracion .item-sidebar.titulo .contenedor-titulo{
  font: var(--fuente-body-medium);
}

.sidebar-configuracion .item-sidebar.activo{
  background: var(--color-azul-boton-home);
}

.sidebar-configuracion .item-sidebar:hover{
  background: var(--color-gris-100);
}

.sidebar-configuracion .item-sidebar.titulo:hover{
  background: var(--blanco);
}


/************************** Home *************************/
.home {
  display: flex;
  width: 1260px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
}

.encabezado {
  max-height: 64px;
  width: 100%;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.encabezado.encabezado-home{
  padding: 0px 0px;
}

.encabezado .boton-aceptar {
  height: 32px;
}

.encabezado i.icon-flecha-izquierda {
  font-size: 14px;
}

.encabezado .badge-hora{
  display: flex;
  justify-content: start;
  align-items: start;
  background: var(--color-blanco);
  border-radius: 6px;
  gap: 6px;
  padding: 4px 8px;
}

.encabezado .opciones{
  width: 15%;
  display: flex;
  align-items: end;
  justify-content: end;
  gap: 10px;
}


/************************** HEADER GLOBAL *************************/
.header-global{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primario);
  min-height: 44px;
  padding: 0px 40px;
}


.header-global img.logo-header{
  height: 24px;
  width: 87px;
}

.header-global .seccion-opciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  height: 44px;
}

.header-global .seccion-opciones .contenedor-sucursales{
  position: relative;
  height: 100%;
  min-width: 150px;
}

.header-global .seccion-opciones .contenedor-sucursales .badge-sucursal{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-blanco);
  gap: 8px;
  padding-inline: 8px;
  cursor: pointer;
}

.header-global .seccion-opciones .contenedor-sucursales .badge-sucursal:hover{
  background: var(--color-azul-900);
}


.header-global .seccion-opciones .contenedor-sucursales .badge-sucursal  .seccion-titulo{
  color: var(--color-blanco);
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  font: var(--fuente-body-semibold);
}

.header-global .seccion-opciones .contenedor-sucursales .badge-sucursal i{
  color: var(--color-blanco);
}


.dropdown-menu-sucursal{
  display: flex;
  flex-direction: column;
  background: var(--color-blanco);
  display: none;
  z-index: 100;
  position: absolute;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  width: 100%;
}

.dropdown-menu-sucursal .item-menu{
  width: 100%;
  padding: 8px 8px;
  cursor: pointer;
  border-left: 2px solid var(--color-blanco);
}

.dropdown-menu-sucursal .item-menu:hover{
  background: var(--color-azul-50);
  border-left: 2px solid var(--color-azul-50);
}

.dropdown-menu-sucursal .item-menu.activo{
  border-left: 2px solid var(--color-primario);
}


.dropdown-menu-sucursal.active{
  display: flex;
  max-height: 310px;
  overflow: auto;
}

/****************** Row usuario activo *******************/
.row-usuario-activo {
  width: auto;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}


.row-usuario-activo .seccion-avatar{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.row-usuario-activo .seccion-avatar span.label-usuario {
  color: var(--color-blanco);
  font: var(--fuente-body-semibold);
}

.row-usuario-activo .dropdown-menu {
  width: 150px;
  display: none;
  padding: 0px;
  top: 32px;
}

.row-usuario-activo .dropdown-menu.active {
  display: flex;
}

.row-usuario-activo .dropdown-menu.active a{
  font: var(--fuente-link);
  color: var(--color-gris-900);
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 10px 5px;
  gap: 10px;
}

.row-usuario-activo .dropdown-menu.active a i{
  font: var(--fuente-link);
  color: var(--color-gris-900);
}

.row-usuario-activo .dropdown-menu.active a:hover{
  background-color: var(--color-azul-boton-home);
  cursor: pointer;
}

.row-usuario-activo button i{
  /* color: var(--color-gris-900); */
}

.row-usuario-activo .dropdown-menu a.menu-item{
  padding: 16px 8px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.row-usuario-activo .seccion-avatar .avatar img{
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

/***************************** Alerta ****************************/
.alerta-contenedor {
  width: 100%;
  position: fixed;
  padding-inline: 16px;
  padding-block: 4px;
  z-index: 1100;
  top: 30px;
  left: 0;
  align-items: center;
  justify-content: center;
  display: none;
}

.alerta-contenedor.visible{
  display: flex;
}

.alerta {
  color: var(--gris-900);
  border-radius: 8px;
  width: auto;
  padding-block: 4px;
  padding-inline: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  max-width: 800px;
  text-align: center;
}

.alerta i {
  font-size: 16px;
  margin-left: 30px;
  cursor: pointer;
}

.fijo .alerta i {
  font-size: 16px;
  margin-left: auto;
  cursor: pointer;
}

.alerta.error {
  background-color: var(--color-rojo-50);
  border: 1px solid var(--color-rojo-500);
}

.alerta.advertencia {
  background-color:var(--color-amarillo-50);
  border: 1px solid var(--color-amarillo-500);
}

.alerta.advertencia p#labelAlertaGlobal,
.alerta.advertencia-login p#labelAlertaGlobal{
  color: var(--color-amarillo-800);
  font-weight: 500;
}

.alerta.error-login {
  color: var(--color-rojo-600);
  padding-inline: 4px;
  padding-block: 0px;
  /* width: 100%; */
  font-weight: 500;
  margin-bottom: 9px;
}

.alerta.error p#labelAlertaGlobal,
.alerta.error-login p#labelAlertaGlobal{
  color: var(--color-rojo-800);
  font-weight: 500;
}

.alerta.exito {
  background-color: #e8f5e9;
  color: var(--color-gris-900);
  padding-inline: 16px;
  padding-block: 4px;
  border: 1px solid #4caf50;
  border-radius: 8px;
  /* width: 100%; */
  font-weight: 400;
}

.alerta.exito-login {
  color: #4caf50;
  padding-inline: 16px;
  padding-block: 12px;
  /* width: 100%; */
  font-weight: 500;
  font-size: 16px;
  text-align: center;
}

.alerta.exito p#labelAlertaGlobal,
.alerta.exito-login p#labelAlertaGlobal{
  color: var(--color-verde-800);
  font-weight: 500;
}

/***************************** Banner ****************************/
.banner {
  width: 100%;
  height: 144px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 64px;
}

.banner.banner--registro-numero {
  background-image: url("../imagenes/artegrafico-background-login-movil.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  height: 300px;
  margin-bottom: 120px;
}

.banner .banner__logo {
  width: 128px;
  height: 128px;
  background-color: var(--color-blanco);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -100px;
}

.banner .banner__logo img {
  width: 86px;
  height: 80px;
}

.banner.banner--registro-contrato {
  background-image: url("../imagenes/artegrafico-background-completarregistro-mobile.jpg");
  background-size: contain;
  background-repeat: repeat;
  background-position: top center;
}

.banner .banner__icon {
  width: 80px;
  height: 80px;
  background-color: var(--color-primario);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -40px;
  border: 3px solid var(--color-blanco);
}

.banner .banner__icon img {
  width: 40px;
  height: 40px;
}

.banner.banner--login-cliente {
  height: 220px;
  margin-bottom: 40px;
}

.banner.banner--login-cliente .banner__logo {
  width: auto;
  height: auto;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
}

.banner.banner--login-cliente .banner__logo img {
  width: 76px;
  height: 80px;
}

/********************************************************************/
/****************** ESTILOS SYNCFUSION Multiselect ******************/
/********************************************************************/
.e-multiselect {
  margin: 0 !important;
  height: 31px;
  border: 1px solid #dee1e6 !important;
  border-radius: 4px !important;
  padding-left: 12px;
  padding-right: 9px;
  align-items: center;
  border-radius: 8px !important;
}

.e-multiselect.e-input-group .e-multi-select-wrapper .e-searcher input {
  min-height: 15px !important;
  height: 20px !important;
  width: 100%;
}

.e-multiselect.e-input-group .e-multi-select-wrapper .e-searcher input:focus {
  border: none;
  outline: none;
}

.e-multiselect .e-delim-values {
  color: var(--color-gris-900);
  font-family: Inter;
  font-size: 14px;
}

.e-multiselect.e-input-group .e-input-group-icon,
.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon:hover {
  font-size: 14px;
}

.e-multiselect.e-input-group.e-control-wrapper.e-input-focus::before,
.e-multiselect.e-input-group.e-control-wrapper.e-input-focus::after {
  background: none;
}

.e-multiselect input.e-dropdownbase::placeholder {
  color: var(--color-gris-900);
  font-family: Inter;
  font-size: 12px;
}

.e-popup .e-checkbox-wrapper .e-frame.e-check,
.e-popup .e-checkbox-wrapper:hover .e-frame.e-check {
  background-color: #0668d0;
  color: #fff;
}

.e-popup.e-popup-open{
  border-radius: 0px 0px 4px 4px;
}

.e-popup.e-ddl .e-dropdownbase{
  border-radius: 0px 0px 4px 4px;
  /* border: 14px solid var(--color-primario); */
}

.e-dropdownbase .e-list-item:last-child{
  border-radius: 0px 0px 4px 4px;
}

.e-dropdownbase .e-list-item,
.e-dropdownbase .e-list-item.e-item-focus {
  color: var(--color-gris-900);
  font-family: Inter;
  font-size: 12px;
  padding-inline: 0px;
}

.e-multi-select-wrapper {
  min-height: 28px;
}

.e-multiselect.e-input-group.e-control-wrapper.e-checkbox.e-valid-input {
  height: 31px;
  border-radius: 8px !important;
  font-family: Inter !important;
}

.e-multiselect .e-input-group .e-control-wrapper .e-checkbox {
  height: 40px !important;
  border-radius: 8px !important;
  font-family: Inter !important;
}

.e-multiselect .e-delim-values {
  font-family: "Roboto", sans-serif;
}

.e-delim-view .e-delim-values {
  font-size: 14px;
  color: var(--color-gris-900);
}

.e-multiselect input.e-dropdownbase::placeholder {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--color-gris-500);
}

.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
.e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
.e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
  background: none;
}

.e-multiselect.e-input-group .e-multi-select-wrapper {
  background-color: var(--color-blanco);
}

.e-multiselect.e-input-group.e-control-wrapper.e-checkbox {
  background-color: var(--color-blanco);
}

input.e-input, 
textarea.e-input, 
.e-input-group, 
.e-input-group.e-control-wrapper{
  font-size: 14px;
}

/************************* Row de filtros *************************/
input.input-filtro-minimo{
  width: 15%;
}

.row-filtros-varios {
  margin-top: 12px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.row-botones-filtros{
  margin-top: 12px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0px 16px;
  justify-content: end;
}

.row-botones-filtros .contenedor-botones{
  display: flex;
  justify-content: end;
  align-items: center;
  width: 20%;
  gap: 12px 16px;
}

.row-filtros-varios > .input-row {
  flex-basis: 20%;
  max-width: calc(20% - 16px);
}

.row-filtros-varios > .input-row.botones-filtros {
  flex-basis: 25%;
  max-width: calc(25% - 16px);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
  justify-content: end;
}

.row-filtros-varios .boton-aceptar {
  width: 120px;
  height: 40px;
  border-radius: 4px;
}

.row-filtros-varios .input-row .input-doble{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.input-row .input-doble{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.separador{
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 1px;
  background: var(--color-gris-200);
}

/********************************************************************/
/****************** ESTILOS SYNCFUSION DATAGRID *********************/
/********************************************************************/
.e-grid {
  border-radius: 4px;
  border-color: var(--color-gris-200);
}

.e-grid .e-toolbar.e-control[class*="e-toolbar"] {
  height: 25px;
  min-height: 25px;
}

.e-grid .e-toolbar .e-toolbar-item {
  height: 25px;
  min-height: 25px;
  padding-top: 0;
}

.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
  margin: 0;
}

.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
  font-size: 12px;
  color: var(--gris-900);
  letter-spacing: normal;
}

.e-grid .e-gridheader {
  border-bottom-color: var(--color-gris-200);
}

.e-grid .e-gridheader .e-table th .e-sortfilterdiv {
  cursor: pointer;
}

.e-grid .e-gridheader .e-table th .e-sortfilterdiv.e-icons {
  margin-right: 0px;
}

.e-grid .e-gridheader .e-table th {
  background: var(--color-gris-100);
  padding-inline: 8px;
  color: var(--color-negro);
  height: 32px;
  min-height: 32px;
  cursor: move;
}

.e-grid.e-resize-lines .e-headercell .e-rhandler,
.e-grid.e-resize-lines .e-headercell .e-rsuppress {
  border-color: var(--color-gris-200);
}

.e-grid .e-gridheader .e-table th .e-headertext {
  font-size: 12px;
  font-weight: 500;
}

.e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
  padding-right: 18px;
}

.e-grid .e-gridheader tr.e-columnheader {
  background-color: var(--color-gris-100);
}

.e-grid .e-gridheader tr th:first-child {
  padding-left: 8px;
}

.e-grid .e-gridcontent .e-table tr td {
  font-size: 12px;
  color: var(--color-negro);
  padding: 0px 8px;
  height: 40px;
  line-height: 14px;
}

.e-grid .e-gridcontent .e-table tr .celda-multilinea {
  white-space: pre-wrap;
  padding-block: 7px;
}

.e-grid .e-gridcontent .e-table .e-emptyrow td {
  text-align: center;
}

.e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
  height: auto !important;
  min-height: auto !important;
}

.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
  color: var(--color-gris-900);
}

.e-grid .e-row:hover .e-rowcell {
  background: #e1f5fe !important;
}

.e-grid .e-rowcell.e-selectionbackground {
  background: #e1f5fe;
}

.e-grid .e-gridfooter .e-summarycontent table tfoot tr td {
  background: #f8f9fb;
  padding: 4px 8px;
  color: var(--color-gris-900);
  font-weight: 500;
  font-size: 12px;
}

.e-grid .e-gridpager .e-pagercontainer {
  margin: 0;
  padding-top: 4px;
}

.e-grid .e-pager .e-parentmsgbar {
  padding-block: 10px;
}

.e-grid .e-gridpager .e-pagercontainer .e-icons {
  padding-top: 5px;
}

.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-currentitem:focus {
  background-color: var(--color-primario);
}

.e-ccdlg .e-dlg-header-content {
  padding: 12px;
}

.e-ccdlg .e-dlg-header-content .e-dlg-header {
  font-size: 12px;
  color: var(--color-gris-900);
  font-weight: 500;
}

.e-ccdlg .e-footer-content .e-control {
  font-size: 12px;
}

.e-ccdlg .e-dlg-content .e-cc-contentdiv .e-ccul-ele {
  margin: 0;
}

.e-ccdlg .e-dlg-content .e-cc-contentdiv .e-ccul-ele .e-cclist {
  padding-block: 4px;
}

.e-ccdlg .e-dlg-content .e-cc-contentdiv .e-ccul-ele .e-cclist .e-label {
  font-size: 12px;
  color: var(--color-gris-900);
}

.e-filter-popup li {
  font-size: 12px;
  height: 25px;
  color: var(--color-gris-900);
}

.e-filter-popup .e-dlg-content {
  padding-block: 8px;
}

.e-filter-popup .e-ftrchk {
  font-size: 12px;
  padding-block: 4px;
}

.e-filter-popup .e-ftrchk .e-label {
  font-size: 12px;
  color: var(--color-gris-900);
}

.e-filter-popup .e-footer-content .e-control {
  font-size: 12px;
}

.e-contextmenu-wrapper .e-excel-menu li {
  font-size: 12px;
  color: var(--color-gris-900);
}

.e-grid .e-frozenheader>.e-table,
.e-grid .e-frozencontent>.e-table,
.e-grid .e-frozencontent .e-virtualtable>.e-table,
.e-grid .e-frozenheader .e-virtualtable>.e-table {
  border-right-color: #ffff;
}

.e-grid .e-headercontent,
.e-grid .e-frozenscrollbar {
  border-color: #fff;
}

.e-grid.e-gridhover .e-frozenhover {
  background-color: #e1f5fe !important;
}

.e-grid .e-toolbar {
  border-radius: 4px 4px 0 0;
}

.e-grid .e-gridheader {
  border-radius: 4px 4px 0 0;
  border-color: var(--color-gris-200);
  background-color: var(--color-gris-100);
}

.e-grid .e-pager {
  border-radius: 0 0 4px 4px;
}

/********************************************************************/
/******************** ESTILOS SYNCFUSION SELECT *********************/
/********************************************************************/
.e-ddl.e-input-group.e-control-wrapper .e-input {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
}
.e-input-group.e-control-wrapper{
  color: var(  --color-gris-900) !important;
}
.e-ddl.e-input-group {
  border: 1px solid var(--color-gris-300) !important;
  padding-inline: 8px;
  border-radius: 8px;
  height: 40px;
}

.e-ddl.e-input-group.e-control-wrapper.e-input-focus {
  outline: 1px solid var(--color-gris-300) !important;
}

.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before,
.e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
  display: none;
}

.e-input-group.e-control-wrapper.e-disabled {
  background: var(--color-gris-100) !important;
}
.e-input-group.e-control-wrapper.e-disabled .e-multi-select-wrapper {
  background: var(--color-gris-100) !important;
}

.e-input-group.e-control-wrapper .e-input[disabled] {
  -webkit-text-fill-color: #797979;
}

.e-dropdownbase .e-list-item{
  border-left: 2px solid var(--color-blanco);
}

.e-dropdownbase .e-list-item.e-item-focus,
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover,
.e-dropdownbase .e-list-item.e-hover {
  color: var(--gris-900);
  background-color: var(--color-gris-100);
  border-left: 2px solid var(--color-gris-100);
}

.e-dropdownbase .e-list-item.e-hover {
  border-left: 2px solid #f0f2f5;
}

.e-dropdownbase .e-list-item.e-active.e-hover,
.e-dropdownbase .e-list-item.e-active{
  border-left: 2px solid var(--color-primario);
}

.e-dropdownbase .e-list-item,
.e-dropdownbase .e-list-item.e-item-focus {
  font-family: "Roboto", sans-serif;
  min-height: 30px;
  line-height: 30px;
  font-size: 12px;
}

.e-input-group,
.e-input-group.e-control-wrapper {
  margin-bottom: 0px;
}

.e-list-icon {
  color: var(--gris-600);
  width: 12px;
  height: 12px;
}

/* SELECT CON GROUP BY */
.e-dropdownbase.e-dd-group .e-list-item.e-item-focus,
.e-dropdownbase.e-dd-group .e-list-item.e-active,
.e-dropdownbase.e-dd-group .e-list-item.e-active.e-hover,
.e-dropdownbase.e-dd-group .e-list-item.e-hover {
  padding-left: 24px !important;
}

/********************************************************************/
/****************** ESTILOS SYNCFUSION DATEPICKER *******************/
/********************************************************************/
.e-input-group.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
  border: 1px solid var(--color-gris-300);
  height: 31px;
  padding-inline: 10px;
  border-radius: 4px !important;
}

.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left){
  background: var(--color-blanco);
}

.e-input-group:not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-float-icon-left),
.e-input-group:not(.e-float-icon-left).e-input-focus {
  border: 1px solid var(--color-gris-300);
  border-radius: 4px !important;
}

.e-input-group.e-error:hover:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-error:hover:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
  border: 1px solid var(--color-gris-300);
  border-radius: 4px !important;
}

.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-input-focus.e-error:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap,
.e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap,
.e-float-input.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap,
.e-float-input.e-input-focus.e-error:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) input:not([disabled]),
.e-float-input.e-input-focus.e-error:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) textarea:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap,
.e-float-input.e-control-wrapper.e-input-focus.e-error:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) input:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus.e-error:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) textarea:not([disabled]),
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap,
.e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap,
.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap,
.e-float-input.e-input-focus:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
.e-float-input.e-input-focus:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap,
.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
  border: 1px solid var(--color-gris-300);
  border-radius: 8px !important;
}

.e-input-group.e-input-focus.e-error:hover:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-input-focus.e-error:hover:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-input-focus.e-error:hover:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-control-wrapper.e-input-focus.e-error:hover:not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap:hover,
.e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap:hover,
.e-float-input.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap:hover,
.e-float-input.e-input-focus.e-error:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) input:not([disabled]),
.e-float-input.e-input-focus.e-error:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) textarea:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left.e-error:not(.e-success):not(.e-warning):not(.e-disabled) .e-input-in-wrap:hover,
.e-float-input.e-control-wrapper.e-input-focus.e-error:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) input:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus.e-error:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-disabled) textarea:not([disabled]),
.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
.e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
  border: 1px solid var(--color-gris-300);
  border-radius: 8px !important;
}

.e-input-group:not(.e-float-icon-left),
.e-input-group.e-error:not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
  border: 1px solid var(--color-gris-300);
  border-radius: 8px !important;
}

.e-input-group:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
.e-input-group:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
.e-input-group.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
.e-input-group.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after,
.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after {
  border-color: transparent !important;
  background-color: transparent;
}


.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap, 
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled, 
.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap{
  background-color: transparent;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled{
  border-bottom-color: var(--color-gris-300) !important;
}


.e-input-group-icon.e-date-icon.e-icons {
  margin: 0px;
}

.e-date-icon.e-active {
  color: var(--color-primario) !important;
}

.e-selected .e-day {
  background-color: var(--color-primario) !important;
}

.e-calendar .e-content td.e-today.e-selected span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
  background-color: var(--color-primario);
  border: 1px solid var(--color-primario);
  box-shadow: inset 0 0 0 2px #fff;
  color: #fff;
}

.e-today .e-day {
  border: 1px solid var(--color-primario) !important;
  box-shadow: inset 0 0 0 2px #fff !important;
  color: var(--color-primario) !important;
}

.e-today.e-selected .e-day {
  color: white !important;
}

.e-today {
  color: var(--color-primario) !important;
}



input.e-input::selection,
textarea.e-input::selection,
.e-input-group input.e-input::selection,
.e-input-group.e-control-wrapper input.e-input::selection,
.e-float-input input::selection,
.e-float-input.e-control-wrapper input::selection,
.e-input-group textarea.e-input::selection,
.e-input-group.e-control-wrapper textarea.e-input::selection,
.e-float-input textarea::selection,
.e-float-input.e-control-wrapper textarea::selection {
  background-color: var(--color-primario);
}


/* .e-schedule .e-timescale td {
  height: 60px;
} */

.e-datepicker .e-model-header{
  background-color: var(--color-secundario-azul);
}

.e-datepicker .e-model-header .e-model-year,
.e-datepicker .e-model-month, 
.e-datepicker .e-model-day{
  color: var(--color-blanco);
}

.e-ddl .e-filter-parent .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-ddl .e-filter-parent .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):hover,
.e-ddl .e-filter-parent .e-input-group.e-control-wrapper{ 
  border-radius: 0px !important;
  padding-inline: 5px !important;
}

.e-input-group input.e-input::placeholder,
.e-input-group.e-control-wrapper input.e-input::placeholder,
.e-input-group textarea.e-input::placeholder, 
.e-input-group.e-control-wrapper textarea.e-input::placeholder {
  color: var(--color-gris-500);
}


/*****************************************************************/
/******************** EVENTOS CALENDARIO *************************/
/*****************************************************************/
.e-schedule {
  height: auto; /* Permitir que se ajuste al contenido */
}

.e-schedule .e-schedule-toolbar, .e-schedule .e-schedule-header-row {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment{
  background: transparent;
  display: flex;
  border: 0px;
  min-width: 120px;
  max-width: 250px;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment .e-appointment-details{
  padding: 0px;
  border: 0px;
  width: 100%;
}

.e-schedule .e-event-resize.e-bottom-handler,
.e-schedule .e-appointment .e-recurrence-icon::before,
.e-schedule .e-event-resize.e-top-handler{
  display: none;
}

.e-schedule .e-vertical-view .e-work-cells{
  background-color: var(--color-blanco);
}


/*****************************************************************/
/************************* ESTILO STATUS *************************/
/*****************************************************************/
.status-global {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--color-gris-900);
  font-size: 12px;
}

.status-global .status-bullet {
  width: 12px;
  height: 12px;
  border-radius: 100px;
  margin-right: 6px;
  background-color: var(--color-primario);
}

.status-global .status-bullet.status-pendiente {
  background-color: var(--color-amarillo-400);
}

.status-global .status-bullet.status-activo {
  background-color: var(--color-verde-600);
}

.status-global .status-bullet.status-eliminado {
  background-color: var(--color-rojo-600);
}

.status-global .status-bullet.status-inactivo{
  background-color: var(--color-gris-500);
}

.status-global .status-bullet.status-noAplica{
  background-color: var(--color-azul-600);
}

.status-global.texto-derecha {
  justify-content: flex-end;
}

/********************************************************************/
/******************************* MODAL ******************************/
/********************************************************************/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 1000;
}

.modal-detalle {
  z-index: 900;
}

.modal .modal-card {
  margin: 50px auto;
  background-color: #fff;
  border-radius: 10px;
  width: 440px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  animation-name: fade;
  animation-duration: 0.1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  padding: 0px;
  height: fit-content;
}

.modal .modal-card.modal-detalle {
  margin: 0px;
  background-color: #fff;
  border-radius: 0px;
  width: 35%;
  height: 100%;
  margin-left: auto;
  padding-inline: 24px;
  padding-block: 18px;
}

/******************** TAMAÑOS MODAL ********************/
.modal .modal-card.sm{
  width: 350px;
}

.modal .modal-card.w300 {
  width: 300px;
}


.modal .modal-card.w400 {
  width: 400px;
}

.modal .modal-card.w440 {
  width: 400px;
}

.modal .modal-card.w500 {
  width: 500px;
}

.modal .modal-card.w600 {
  width: 600px;
}

.modal .modal-card.w700 {
  width: 700px;
}

.modal .modal-card.w800 {
  width: 800px;
}

.modal .modal-card.w900 {
  width: 900px;
}

.modal .modal-card.w1100 {
  width: 1100px;
}

.modal .modal-card.w1000 {
  width: 1000px;
}

.modal .modal-card.relacionar-grupos {
  width: 900px;
}

.modal .modal-card.modal-overflow {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}


/****************** MODAL 2 COLUMNAS *******************/
.modal .modal-card.dos-columnas {
  width: 620px;
}

.modal .modal-card.dos-columnas .modal-body form.doble-columna {
  display: flex;
  flex-direction: row;
}

.modal .modal-card.dos-columnas .modal-body form.doble-columna>div {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.modal .modal-card.dos-columnas .modal-body form.doble-columna div.columna-izquierda {
  border-right: 1px solid #dee1e6;
  padding-right: 24px;
}

.modal .modal-card.dos-columnas .modal-body form.doble-columna div.columna-derecha {
  padding-left: 8px;
}

.modal .modal-card.dos-columnas .modal-body form.doble-columna div.columna-derecha h2 {
  margin: 0px !important;
}

/********************* MODAL HEADER ********************/
.modal .modal-card .modal-header {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-gris-200);
  padding-inline: 24px;
  padding-block: 8px;
}

.modal .modal-card .modal-header label {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.modal .modal-card .modal-header i {
  cursor: pointer;
  padding: 6px;
  border-radius: 50px;
  font-size: 14px;
}

.modal .modal-card .modal-header i:hover {
  background-color: #e8ecef;
}

.modal .modal-card .modal-header.solo-btn-cerrar {
  justify-content: flex-end;
  border: none;
}

/********************* MODAL BODY **********************/
.modal .modal-card .modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  max-height: 100%;
  overflow-y: auto;
}
.modal .modal-card .modal-body.padding-24{
  padding: 24px;
}
.modal .modal-card .modal-body .input-buscar-archivos {
  width: 5%;
  height: auto;
  display: flex;
  gap: 24px;
}
.input-buscar-archivos input.input-oculto {
  display: none;
}
.input-buscar-archivos button {
  white-space: nowrap;
}
.input-buscar-archivos input {
  height: 100%;
}

.modal .modal-card .modal-body .filtros {
  display: flex;
  flex-direction: row;
  gap: 12px;
  height: 28px;
  align-items: center;
}

.modal .modal-card .modal-body .filtros input {
  width: 260px;
}

.modal .modal-card .modal-body form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 100%;
  /* overflow-y: auto; */
}

form.form-direccion-row {
  flex-direction: row;
}

.modal .modal-card .modal-body form label {
  line-height: 16px;
}

.modal .modal-card .modal-body .titulo-modal {
  font-size: 16px;
  font-weight: 700;
}

.modal .modal-card .modal-body .subtitulo-modal {
  font-size: 14px;
  font-weight: 700;
}

.modal.modal-eliminar .modal-card .modal-body {
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 16px;
}

.modal.modal-advertencia .modal-card .modal-body {
align-items: center;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 36px;
  gap: 8px;
}

.modal-card .modal-body .contenedor-tabla{
  max-height: 350px;
  overflow: auto;
}

.modal-card .modal-body .contenedor-tabla.operacion-caja{
  max-height: 450px;
  overflow: auto;
}

.modal.modal-eliminar .modal-card .modal-body.exito {
  padding-top: 40px;
}

.modal.modal-eliminar .modal-card .modal-body.exito .contenedor-tabla{
  width: 80%;
}


.modal .modal-card .modal-body img.ilustracion-modal.ilustracion-eliminar {
  width: 112px;
  height: 80px;
  margin-bottom: 16px;
}

.modal .modal-card .modal-body img.ilustracion-modal.ilustracion-advertencia {
  width: 104px;
  height: 80px;
  margin-bottom: 16px;
}

.modal .modal-card .modal-body img.ilustracion-modal.ilustracion-factura {
  width: 112px;
  height: 120px;
  margin-bottom: 16px;
}

.modal .modal-card .modal-body.gap-reducido {
  gap: 8px;
}

.modal .modal-card .modal-body.no-gap {
  gap: 0px;
}

.modal .modal-card .modal-body .seccion-filtros{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
}

.modal .modal-card .modal-body .seccion-filtros .seccion-acciones{
  width: 20%;
  display: flex;
  gap: 10px;
}


.modal .modal-card .modal-body .seccion-filtros .input-column .w10p{
  width: 10%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w18p{
  width: 18%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w20p{
  width: 20%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w25p{
  width: 25%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w30p{
  width: 30%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w32p{
  width: 32%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w40p{
  width: 40%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w47p{
  width: 47%;
}

.modal .modal-card .modal-body .seccion-filtros .input-column .w50p{
  width: 50%;
}

.modal .modal-card .modal-body .seccion-lista{
  min-height: 400px;
  max-height: 400px;
  overflow: auto;
}

.modal .modal-card .modal-body .seccion-lista.reagendar-clases{
  min-height: 220px;
  max-height: 300px;
}

.modal .modal-card .modal-body.no-padding{
  padding: 0px;
}

/******************* MODAL BUSQUEDA ********************/
.modal.modal-busqueda .modal-card .modal-body {
  height: 448px;
  overflow: auto;
}

/********************* MODAL FOOTER ********************/
.modal .modal-card .modal-footer {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--color-gris-300);
  padding: 15px;
}

.modal .modal-card .modal-footer.center {
  justify-content: center;
}

.modal .modal-card .modal-footer.footer-end {
  justify-content: flex-end;
  padding-right: 24px;
}

.modal .modal-card .modal-footer .boton-aceptar {
  width: 180px;
  height: 40px;
  padding-block: 13px;
  border-radius: 4px;
}

.modal .modal-card .modal-footer.no-border {
  border: none;
}

.modal .modal-card .modal-footer.exito{
  padding-bottom: 40px;
}

.modal .modal-card .modal-footer.footer-between{
  justify-content: space-between;
}

.modal .modal-card .modal-footer.footer-between .seccion-acciones{
  display: flex;
  justify-content: end;
  gap: 10px;
}

.modal .modal-card .modal-footer.no-padding-top {
  padding-top: 0px;
}

.modal .modal-card .modal-footer.align-initial {
  align-items: initial;
}

.modal.modal-advertencia .modal-card .modal-footer {
  padding-top: 0px;
  padding-bottom: 40px;
}

/******************* MODAL BACKGROUD *******************/
.modal .modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/******************* MODAL DETALLE *********************/
.modal-detalle .header-modal {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.modal-detalle .header-modal i {
  margin-left: auto;
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  font-size: 16px;
}

.modal-detalle .header-modal i:hover {
  background-color: #e8ecef;
}

.modal-detalle .encabezado {
  height: 32px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding: 0px;
  margin-bottom: 18px;
}

.modal-detalle .encabezado .logo {
  border-radius: 50%;
  padding: 8px;
  background-color: #e8ecef;
  font-size: 16px;
}

.modal-detalle .encabezado label {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--gris-900);
}

.modal-detalle .datos-generales .titulo {
  font-weight: 600;
  line-height: 18px;
}

.modal-detalle .datos-generales .tabla-detalle {
  margin-top: 4px;
}

.modal-detalle .datos-generales {
  margin-top: 16px;
}

.modal-detalle .encabezado .opciones {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
}

.modal-detalle .encabezado .opciones i {
  font-size: 16px;
  cursor: pointer;
  color: #262b30;
}

.modal-detalle .encabezado {
  padding-right: 16px;
}


.modal-body .row-btn-cerrar-modal{
  display: flex;
  justify-content: end;
  width: 100%;
}

.modal-body .row-btn-cerrar-modal i{
  font-size: 17px;
}

.modal-card.relacionar-grupos .modal-body{
  height: 370px;
}

.modal-card.relacionar-grupos.seleccionar-titular .modal-body{
  height: 400px;
  padding: 0px;
}

.modal-card.relacionar-grupos .modal-body .row-tablas{
  display: flex;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 16px;
}

.modal-card.relacionar-grupos.seleccionar-titular .modal-body .row-tablas{
  gap: 0px;
}

.modal-card.relacionar-grupos .modal-body .row-tablas .columna-mitad{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:8px;
}

.modal-card.relacionar-grupos.seleccionar-titular .modal-body .row-tablas .columna-mitad{
  padding: 16px;
}

.modal-card.relacionar-grupos .modal-body .row-tablas .columna-mitad.column{
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.modal-card.relacionar-grupos .modal-body .row-tablas .columna-mitad.column.w40p{
  width: 40%;
}

.modal-card.relacionar-grupos .modal-body .row-tablas .columna-mitad.column.w60p{
  width: 60%;
}

.modal-card.relacionar-grupos .modal-body .row-tablas .columna-mitad.column.p24{
  padding: 24px;
}

.modal-card.relacionar-grupos .modal-body .row-tablas .columna-mitad.column.izquierda{
  height: 100%;
  border-right: 1px solid var(--color-gris-200);
}

.modal-card.relacionar-grupos .modal-body .columna-mitad .seccion-filtros{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.modal-card.relacionar-grupos .modal-body .columna-mitad .contenedor-tabla{
  max-height: 300px;
  overflow: auto;
  width: 100%;
}

/***************** VALIDACION DE CONTRASEÑAS ******************/
.input-password div {
  display: flex;
}

.input-password .input-con-icono {
  margin-top: 4px;
}

.input-password .generar-password {
  margin-left: auto;
  color: var(--color-azul-600);
  cursor: pointer;
  line-height: 16px;
}

.input-password .validar-password {
  flex-direction: column;
  margin-top: 6px;
}

.input-password .validar-password .progreso {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-items: center;
}

/* .input-password .validar-password .progreso progress { */
  /* width: 100%; */
/* } */

.input-password .validar-password .progreso label {
  font-size: 12px;
  line-height: 14px;
  color: var(--color-gris-600);
}

.input-password .validar-password .validaciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.input-password .validar-password .validaciones div {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.input-password .validar-password .validaciones div label {
  font-size: 12px;
  line-height: 14px;
}


/*********************** ICONOS DE COLOR **********************/
i.verde {
  color: var(--color-verde-600);
}

i.rojo {
  color: #e53935;
}

i.primario {
  color: var(--color-primario);
}

i.gris {
  color: var(--color-gris-600);
}

i.azul {
  color: var(--color-azul-800);
}

/********************** Estilos titulo base **********************/
.contenedor-titulo-pagina{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 6px;
  min-height: 56px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-gris-300);
}

.contenedor-titulo-pagina .seccion-titulo{
  width: 60%;
}

.contenedor-titulo-pagina .seccion-titulo .titulo{
  font: var(--fuente-h2-semibold);
}


.contenedor-titulo-pagina .seccion-titulo .contenedor-breadcrumbs a{
  text-decoration: none;
}
.contenedor-titulo-pagina .seccion-titulo .contenedor-breadcrumbs p{
  display: inline;
}

.contenedor-titulo-pagina .seccion-acciones{
  width: 20%;
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 10px
}

/********************** Estilos gestor base ***********************/
.row-grids{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.contenedor-grid-gestor {
  width: 100%;
  height: 100%;
  flex: 1;
  padding: 0px 20px;
}

.contenedor-grid-gestor.antiguedad{
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0px 20px;
  gap: 16px;
}

.contenedor-grid-gestor.tabulador{
  width: 20%;
}

.celda-acciones-gestor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.celda-acciones-gestor.center {
  justify-content: center;
}

.celda-acciones-gestor.left {
  justify-content: left;
}

.celda-acciones-gestor i {
  font-size: 14px;
  color: #495058;
}

.contenedor-grid-gestor.visor{
  margin-top: 18px;
}

.contenedor-grid-gestor.grid-overflow{
  overflow: auto;
}

.contenedor-grid-gestor.grid-400 {
  width: 400px;
  padding-top: 16px;
}

.contenedor-grid-gestor.grid-overflow {
  overflow: auto;
  flex: 1;
}

/********************** Estilos filtros base **********************/
.contenedor-filtros {
  width: 100%;
  height: auto;
  padding: 16px 20px;
}

.contenedor-filtros .row-filtros-busqueda {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contenedor-filtros .row-filtros-busqueda .seccion-input-principal {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 12px;
}

.contenedor-filtros .row-filtros-busqueda .seccion-input-principal .input-con-icono-contenedor {
  width: 228px;
}

.contenedor-filtros .row-filtros-busqueda .seccion-input-principal .input-con-icono-contenedor input {
  width: 100%;
}

.contenedor-filtros .row-filtros-busqueda .contenedor-opciones {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}


.contenedor-filtros.calendario{
  max-width: 1300px;
}

.contenedor-filtros.calendario .input-column{
  align-items: end;
  gap: 12px;
  padding: 0px;
}

.contenedor-filtros.no-padding{
  padding: 0px;
}

/******************* Contenedor filtros en modal ******************/

.modal.modal-busqueda .modal-card .modal-body .row-filtros-busqueda__input {
  display: flex;
  gap: 12px;
}

.modal.modal-busqueda .modal-card .modal-body .row-filtros-busqueda .row-filtros-busqueda__input .input-con-icono-contenedor {
  width: 360px;
}

.modal.modal-busqueda .modal-card .modal-body .row-filtros-busqueda .row-filtros-busqueda__input .boton-aceptar {
  width: 76px;
  height: 40px;
}

/**************** Contenedor filtros en parametros ****************/
.card-basica.card-edicion-parametros .row-filtros-busqueda__input {
  display: flex;
  gap: 12px;
}

.card-basica.card-edicion-parametros .row-filtros-busqueda .row-filtros-busqueda__input .input-con-icono-contenedor {
  width: 100%;
}

.card-basica.card-edicion-parametros .row-filtros-busqueda .row-filtros-busqueda__input .boton-aceptar {
  width: 76px;
  height: 40px;
}

/***************************** Loader *****************************/
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.loader {
  width: 11.2px;
  height: 11.2px;
  animation: spinner 1s infinite linear;
  border-radius: 11.2px;
  box-shadow: 28px 0px 0 0 var(--color-gris-600), 17.4px 21.8px 0 0 var(--color-gris-600),
    -6.2px 27.2px 0 0 var(--color-gris-600), -25.2px 12px 0 0 var(--color-gris-600),
    -25.2px -12px 0 0 var(--color-gris-600), -6.2px -27.2px 0 0 var(--color-gris-600),
    17.4px -21.8px 0 0 var(--color-gris-600);
}

/* LOADER */
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/*****************************************************************/
/************************* BANNER GLOBAL *************************/
/*****************************************************************/
.banner-global{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  font: var(--fuente-body-semibold);
}

.banner-global.eliminar{
  background: var(--color-rojo-50);
  border: 1px solid var(--color-rojo-300);
}

.banner-global i{
  font-size: 17px;
}

.banner-global.eliminar p,
.banner-global.eliminar i{
  color: var(--color-rojo-500);
}

.banner-global.confirmar{
  background: var(--color-verde-50);
  border: 1px solid var(--color-verde-300);
}

.banner-global.confirmar p,
.banner-global.confirmar i{
  color: var(--color-verde-500);
}

/*****************************************************************/
/************************* Inicio sesion *************************/
/*****************************************************************/
.vista-movil .contenedor-token {
  width: 304px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 24px;
}

.vista-movil .contenedor-token input {
  width: 48px;
  height: 48px;
  font-size: 20px;
  text-align: center;
}

.vista-movil .contenedor-token input::placeholder {
  color: var(--color-negro);
}

.boton-volver-enviar-codigo {
  text-align: center;
  font-size: 14px;
  margin-bottom: 186px;
  display: block;
}

.label-enviar-codigo {
  margin-left: auto;
  cursor: pointer;
  color: var(--color-azul-800);
}

/*****************************************************************/
/**************************** Nav bar ****************************/
/*****************************************************************/
main.main-vista-movil {
  flex-direction: column;
}

.nav-bar {
  width: 100%;
  height: 80px;
  position: fixed;
  background-color: var(--color-negro);
  z-index: 991;
}

.nav-bar .nav-bar__contenido {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-bar .nav-bar__contenido img.nav-bar-foto-cliente {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  cursor: pointer;
}

.nav-bar .nav-bar__contenido img.nav-bar-logo {
  width: 94px;
  height: 40px;
}

.nav-bar__datos-contrato {
  width: 100%;
  height: 100vh;
  background-color: var(--color-blanco);
  z-index: 992;
  position: absolute;
  display: none;
}

.nav-bar__datos-contrato .titulo-datos-contrato {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-gris-400);
  position: relative;
  margin-bottom: 32px;
}

.nav-bar__datos-contrato .titulo-datos-contrato p {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gris-900);
}

.nav-bar__datos-contrato .boton-regresar {
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 12px;
  left: 32px;
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-bar__datos-contrato .boton-regresar i {
  font-size: 18px;
}

.contenedor-datos-personales {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 32px;
  margin-bottom: 32px;
}

.contenedor-datos-personales .datos-personales-foto-cliente {
  width: 58px;
  height: 58px;
}

.contenedor-datos-personales .datos-personales-foto-cliente img {
  width: 100%;
  height: 100%;
}

.contenedor-datos-personales .datos-personales {
  flex-grow: 1;
  color: var(--color-gris-900);
}

.contenedor-datos-personales .datos-personales .datos-personales__nombre {
  font-size: 14px;
  font-weight: 500;
}

.contenedor-datos-personales .datos-personales .datos-personales__telefono {
  font-size: 14px;
  font-weight: 400;
}

.contenedor-datos-personales .datos-personales .datos-personales__editar {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gris-700);
}

.datos-grupales-folio {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
  padding-inline: 32px;
}

.contenedor-datos-grupales {
  width: 100%;
  height: auto;
  padding-inline: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.contenedor-datos-grupales .row-datos-grupales {
  width: 100%;
  height: auto;
  padding-block: 6px;
  border-bottom: 0.8px solid var(--color-gris-200);
}

.contenedor-datos-grupales .row-datos-grupales p {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gris-600);
}

.contenedor-datos-grupales .row-datos-grupales h4 {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gris-900);
}

.nav-bar__datos-contrato .boton-cerrar-sesion {
  position: absolute;
  bottom: 32px;
  right: 32px;
  background-color: var(--color-plata);
  border: none;
  border-radius: 4px;
  padding-inline: 28px;
  padding-block: 10px;
  cursor: pointer;
}

/*****************************************************************/
/************************* Home clientes *************************/
/*****************************************************************/
.contenedor-cards-paquetes {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.contenedor-cards-paquetes .paquete-card {
  width: 336px;
  height: auto;
  border: 1px solid var(--color-gris-200);
  border-radius: 10px;
}

.contenedor-cards-paquetes .paquete-card .imagen-paquete {
  width: 100%;
  height: 180px;
}

.contenedor-cards-paquetes .paquete-card .imagen-paquete img {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
}

.contenedor-cards-paquetes .paquete-card .paquete-body {
  width: 100%;
  height: auto;
  padding-inline: 24px;
  padding-block: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contenedor-cards-paquetes .paquete-card .paquete-body .detalle-paquete {
  color: var(--color-gris-700);
}

.contenedor-cards-paquetes .paquete-card .paquete-body li.detalle-paquete {
  margin-left: 14px;
}

.contenedor-cards-paquetes .paquete-card .paquete-body .precios-paquete {
  width: 100%;
  height: auto;
  display: flex;
  gap: 16px;
}

.contenedor-cards-paquetes .paquete-card .paquete-body .precios-subtitulo {
  color: var(--color-gris-600);
}

.contenedor-cards-paquetes .paquete-card .paquete-body .precios-valor {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-gris-900);
}

.contenedor-cards-paquetes .paquete-card .paquete-body .precios-tachado {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: line-through;
  color: var(--color-gris-600);
}

.contenedor-cards-paquetes .paquete-card .paquete-body .descuento {
  display: flex;
  align-items: flex-end;
}

.contenedor-cards-paquetes .paquete-card .paquete-body .precios-descuento {
  padding-inline: 8px;
  padding-block: 4px;
  border-radius: 4px;
  background-color: var(--color-rojo-600);
  color: var(--color-rojo-50);
  margin-bottom: 4px;
}

/*****************************************************************/
/********************** Home administrativo **********************/
/*****************************************************************/
.vista-web .contenedor-contenido.contenedor-home {
  display: flex;
  align-items: center;
  padding-inline: 0px;
}

.vista-web .contenedor-contenido .header-banner{
  width: 100%;
  height: 280px;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  padding: 12px 48px;

  background: url('../img/header-home.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

}

.vista-web .contenedor-contenido .header-banner .contenedor-informacion{
  color: var(--color-blanco);
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 9px;
  flex-direction: column;
  padding: 16px 0px;
}

.vista-web .contenedor-contenido .header-banner .contenedor-informacion  img.imgLogo{
  width: 116px;
  height: 32px;
}

.vista-web .contenedor-contenido .header-banner .contenedor-informacion h1{
  font-size: 28px;
  font-weight: 600;
  line-height: 28px;
}

.vista-web .contenedor-contenido .header-banner .contenedor-informacion .label-ultimo-acceso{
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.vista-web .contenedor-contenido .seccion-menus {
  width: 60%;
  padding: 12px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
}

.vista-web .contenedor-contenido .seccion-menus.home{
  top: -80px;
}

.vista-web .contenedor-contenido .seccion-menus.configuracion {
  width: 75%;
}

.vista-web .contenedor-contenido .seccion-menus .row-cards{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}


.vista-web .contenedor-contenido .seccion-menus .row-cards .card-menu{
  width: 25%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  background-color: var(--color-blanco);
  padding: 24px;
  gap: 16px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px var(--color-gris-sombra);
  min-height: 164px;
}

.vista-web .contenedor-contenido .seccion-menus .row-cards .card-menu.placeholder{
  box-shadow: none;
}

.vista-web .contenedor-contenido .seccion-menus .row-cards .card-menu .contenedor-icono{
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-azul-boton-home);
}

.vista-web .contenedor-contenido .seccion-menus .row-cards .card-menu .contenedor-icono i{
  font-size: 24px;
  color: var(--color-primario);
}


.vista-web .contenedor-contenido .seccion-menus .row-cards .card-menu .contendedor-descripcion h3.titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-800);
  margin-bottom: 4px;
}

.vista-web .contenedor-contenido .seccion-menus .row-cards .card-menu .contenedor-descripcion p.descripcion{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.vista-web .contenedor-contenido .contenedor-home .bar-izquierda {
  width: 70%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.contenedor-home .bar-izquierda .row-home {
  width: 100%;
  height: auto;
}

.contenedor-home .bar-izquierda .row-home.banner-bienvenida {
  height: 120px;
  background-image: url("../imagenes/artegrafico-banner-home.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 10px;
  padding-inline: 32px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.contenedor-home .bar-izquierda .row-home.banner-bienvenida .titulo {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-gris-900);
}

.contenedor-home .bar-izquierda .row-home.banner-bienvenida .subtitulo {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gris-700);
}

.contenedor-home .bar-izquierda .row-home .contenedor-cards-accesos-directos {
  width: 100%;
  height: auto;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contenedor-home .bar-izquierda .row-home .titulo-seccion-cards {
  font-weight: 500;
  margin-bottom: 8px;
}


.contenedor-home .banner-ejemplo{
  display: flex;
  justify-content: bottom;
  align-items: end;
  background: var(--color-azul-100);
  width: 100%;
  height: 150px;
  border-radius: 10px;
  margin: 0px 20px;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding: 16px;
}

.contenedor-home .banner-ejemplo.operacion{
  background: url("../img/homes/aquara-banner-home-operacion.jpg");
}

.contenedor-home .banner-ejemplo.configuracion{
  background: url("../img/homes/aquara-banner-home-configuracion.png");
}

.contenedor-home .banner-ejemplo.inventario{
  background: url("../img/homes/aquara-banner-home-dashboards.png");
}

.contenedor-home .banner-ejemplo.gastos{
  background: url("../img/homes/aquara-banner-home-gastos.png");
}

.contenedor-home .banner-ejemplo.reportes{
  background: url("../img/homes/aquara-banner-home-reportes.png");
}

.contenedor-home .banner-ejemplo.ventas{
  background: url("../img/homes/aquara-banner-home-ventas.png");
}

.contenedor-home .banner-ejemplo.recursosHumanos{
  background: url("../img/homes/aquara-banner-home-recursosHumanos.png");
}

.contenedor-home .banner-ejemplo.accesoSeguridad{
  background: url("../img/homes/aquara-banner-home-accesoSeguridad.png");
}

.contenedor-home .banner-ejemplo h1{
  font: var(--fuente-body-semibold);
  color: var(--color-blanco);
  font-size: 25px;
}

/*****************************************************************/
/*********************** HOME HERRAMIENTAS ***********************/
/*****************************************************************/
.vista-web .contenedor-contenido.contenedor-herramientas {
  flex-direction: row;
  background-color: #f0f2f5;
  gap: 16px;
  padding-inline: 16px;
  padding-block: 8px;
}

.contenedor-herramientas .card-herramienta {
  height: 312px;
  width: 246px;
  padding-top: 32px;
  padding-inline: 28px;
  padding-bottom: 24px;
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
}

.contenedor-herramientas .card-herramienta .ilustracion-herramienta {
  width: 108px;
  height: 80px;
}

.contenedor-herramientas .card-herramienta .info-herramienta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.contenedor-herramientas .card-herramienta .info-herramienta .titulo-herramienta {
  font-size: 12px;
  font-weight: 600;
  color: #212429;
  text-align: center;
}

.contenedor-herramientas .card-herramienta .info-herramienta .descripcion-herramienta {
  font-size: 12px;
  font-weight: 400;
  color: #495058;
  text-align: center;
  line-height: 16px;
}

.contenedor-herramientas .card-herramienta a {
  margin-top: auto;

  border: 0;
  font: var(--fuente-boton);
  background-color: var(--color-primario);
  color: var(--color-blanco);
  min-height:28px;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor:pointer;
}

.contenedor-herramientas .card-herramienta a i{
  color: var(--color-blanco);
  font-weight: 600;
  font-size: 14px;
}

/*****************************************************************/
/***************************** CARDS *****************************/
/*****************************************************************/
.card-basica {
  background-color: var(--color-blanco);
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/********************** Card acceos directos **********************/
.card-basica.card-accesos-directos {
  width: 31%;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}

.card-basica.card-accesos-directos i {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #FBEEC5;
  font-size: 20px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/********************** Card pagos recibidos **********************/
.card-basica.card-pagos-recibidos {
  height: 244px;
}

/************************** Card outline **************************/
.card-basica.card-outline {
  background-color: transparent;
  border: 1px solid var(--color-gris-200);
  padding-inline: 24px;
  padding-top: 16px;
  padding-bottom: 24px;
}

.card-basica.card-outline.card-edicion {
  width: 842px;
  margin: 0 auto;
}

.card-basica.card-outline.card-edicion-boton {
  width: 842px;
  margin: 0 auto;
  padding-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}

.card-basica.card-outline.card-edicion-boton .boton-aceptar {
  height: 40px;
  width: 150px;
}

.card-basica.card-outline.card-edicion-parametros {
  width: 842px;
  margin: 0 auto;
  height: 500px;
}

/**************************** Card gris ***************************/
.card-basica.card-gris {
  background-color: var(--color-gris-50);
  border: 1px solid var(--color-gris-200);
  padding: 16px;
}

.card-basica.card-gris .titulo-card {
  gap: 8px;
}

.card-basica.card-gris .titulo-card h4 {
  font-size: 14px;
  font-weight: 400;
}

.card-basica.card-gris .titulo-card i {
  font-size: 15px;
  cursor: pointer;
}


.card-basica.card-datoFiscal{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 16px;
  /* min-height: 300px; */
}


.card-basica.card-alumno{
  min-height: 250px;
}

.card-basica.card-datoFiscal span.label-titulo{
  color: var(--color-gris-titulo);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

/*****************************************************************/
/********************** CARD RESPONSABLE ************************/
/***************************************************************/
.card-responsable {
  width: 316px;
  height: 346px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  flex-direction: column;
  border: 1px solid var(--color-gris-200);
  gap: 8px;
  padding-top: 16px;
}


.card-alumno.placeholder{
  justify-content: center;
  align-items: center;
  display: flex; 
  border: 1px solid var(--color-azul-200);
  background: var(--color-azul-fondo);
  cursor: pointer;
}

.card-responsable.placeholder{
  border: 1px solid var(--color-azul-200);
  background: var(--color-azul-fondo);
  cursor: pointer;
}

.card-alumno.placeholder.sin-permiso,
.card-responsable.placeholder.sin-permiso{
  cursor: not-allowed;
}

.card-alumno.placeholder .seccion-info,
.card-responsable.placeholder .seccion-info{
  width: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.card-alumno.placeholder .seccion-info i,
.card-responsable.placeholder .seccion-info i{
  font-size: 32px;
  color: var(--color-azul-600);
}

.card-alumno.placeholder .seccion-info p.titulo,
.card-responsable.placeholder .seccion-info p.titulo{
  font: var(--fuente-body-regular);
  color: var(--color-azul-800);
}

.card-responsable .seccion-imagen{
  width: 120px;
  height: 120px;
  position: relative;
}

.card-responsable .seccion-imagen img{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.card-responsable .seccion-imagen .badge-editar{
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  background-color: var(--color-secundario-azul);
  color: var(--color-blanco);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  cursor: pointer;
}

.card-responsable .seccion-imagen .badge-editar i{
  color: var(--color-blanco);
  font-size: 16px;
}

.card-responsable .seccion-datos{
  width: 80%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 12px;
}

.card-responsable .seccion-datos .seccion-info p.label-titulo{
  font: var(--fuente-body2-semibold);
  color: var(--color-gris-titulo);
}

.card-responsable .seccion-datos .seccion-info p.label-dato{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.card-responsable .seccion-footer{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding-inline: 24px;
  border: none !important;
}

.card-responsable .seccion-footer i{
  font-size: 16px;
}

.card-responsable .badge-info{
  margin-left: auto;
  margin-right: 16px;
}

.card-expediente {
  width: 231px;
  min-height: 308px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 6px;
  flex-direction: column;
  border: 1px solid var(--color-gris-200);
}

.card-expediente .seccion-header{
  display: flex;
  padding: 16px;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.card-expediente .seccion-footer{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding-inline: 24px;
}

.card-expediente .seccion-footer i{
  font-size: 16px;
}

.card-expediente .seccion-datos{
  width: 80%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 12px;
}

.card-expediente .seccion-datos .seccion-info p.label-titulo{
  font: var(--fuente-body2-semibold);
  color: var(--color-gris-titulo);
}

.card-expediente .seccion-datos .seccion-info p.label-dato{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.card-expediente .seccion-imagen img{
  height: 220px;
}

/************************** Titulo card ***************************/
.card-basica .titulo-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-basica .titulo-card.titulo-card-sin-boton {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.card-basica .titulo-card h3 {
  font-size: 16px;
  font-weight: 700;
}

/************************ Multicolumna card ***********************/
.card-basica.card-multi-columna {
  display: flex;
  padding: 0;
}

.card-basica .columna-card {
  flex: 1;
  padding-inline: 24px;
  padding-top: 16px;
  padding-bottom: 24px;

  display: flex;
  flex-direction: column;
}

.card-basica .columna-card.borde-derecho-columna-card {
  border-right: 1px solid var(--color-gris-200);
}

/********************* Opciones seleccionables ********************/
.contenedor-opciones-seleccionables {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}

.contenedor-opciones-seleccionables .opcion-seleccionable {
  width: 100%;
  padding-inline: 16px;
  padding-block: 10px;
  border: 1px solid var(--color-gris-200);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contenedor-opciones-seleccionables .opcion-seleccionable i.icon-agregar {
  font-size: 18px;
  cursor: pointer;
}

/*********************** Opciones editables ***********************/
.contenedor-opciones-editables {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contenedor-opciones-editables .opcion-editable {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contenedor-opciones-editables .opcion-editable i {
  font-size: 18px;
  cursor: pointer;
}


/*****************************************************************/
/**************************** Detalle ****************************/
/*****************************************************************/
.vista-web .contenedor-contenido .contenedor-detalle {
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-inline: 24px;
  padding-block: 16px;
  gap: 32px;
  min-width: 900px;
}


.vista-web .contenedor-contenido .contenedor-detalle.full-width{
  width: 100%;
}

.vista-web .contenedor-contenido .contenedor-detalle.full-height{
  height: 100%;
}

.vista-web .contenedor-contenido .contenedor-detalle.espacio-entre-contenedores-detalle {
  justify-content: space-between;
}

/* .vista-web .contenedor-contenido .contenedor-detalle.border-right { */
  /* border-right: 1px solid var(--color-gris-200); */
  /* width: 80%; */
/* } */

.contenedor-detalle-perfil.info{
  width: 600px;
  padding: 20px;
  min-width: 550px;
  height: 100%;
}

.contenedor-detalle-perfil.permisos{
  width: 100%;
  height: 100%;
  gap: 16px;
  display: flex;
  flex-direction: column;
}


.contenedor-detalle-perfil.permisos .detalle-datos{
  height: 100%;
  overflow: auto;
}


.contenedor-detalle-perfil .row-titulo-detalle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}


.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle {
  width: 100%;
  height: auto;
  display: flex;
  gap: 16px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle.column{
  flex-direction: column;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle.ocultar-overflow {
  height: 100%;
  overflow: auto;
}

.contenedor-datos-detalle.gap-32 {
  gap: 32px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-imagen {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-imagen.imagen-articulo {
  width: 280px;
  height: 180px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-imagen img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

i.icono-editar-imagen {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 24px;
  height: 24px;
  background-color: var(--color-secundario-azul);
  color: var(--color-blanco);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  cursor: pointer;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-imagen.imagen-articulo i.icono-editar-imagen {
  bottom: 12px;
  right: 12px;
  font-size: 14px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos.datos-cards {
  max-width: 422px;
  gap: 16px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos .row-titulo-detalle {
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos .row-titulo-detalle > .dropdown-menu{
  right: 0px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos .row-titulo-detalle > .dropdown-menu{
  right: 0px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos .row-titulo-detalle.solo-boton-opcion {
  justify-content: flex-end;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos .row-titulo-detalle.solo-boton-opcion .boton-aceptar {
  width: 180px;
  height: 40px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .detalle-datos:not(.datos-cards) .tabla-detalle {
  margin-bottom: 24px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .contenedor-mitad{
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vista-web .contenedor-contenido .contenedor-detalle .contenedor-datos-detalle .contenedor-mitad .row-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.vista-web .contenedor-contenido .seccion-footer.suscripcion{
  position: sticky;
  bottom: 0px;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  width: 100%;
  padding-inline: 32px;
  padding-block: 24px;
}

.boton-opciones-puntos {
  width: 36px;
  height: 36px;
  padding-block: 16px;
  padding-inline: 11px;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
}

.boton-opciones-puntos i {
  font-size: 18px;
}

.boton-opciones-puntos.boton-opciones-puntos--activo {
  background-color: var(--color-gris-100);
}

button:disabled.boton-opciones-puntos {
  color: var(--color-gris-400);
  cursor: not-allowed;
}

/********************* BOTON OUTLINE *******************/
.boton-outline {
  width: 182px;
  height: 28px;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-oxford);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.boton-outline i {
  font-size: 18px;
}

button:disabled.boton-outline {
  color: var(--color-gris-400);
  border: 1px solid var(--color-gris-400);
  cursor: not-allowed;
}

button:disabled.boton-outline i {
  color: var(--color-gris-400);
}

.boton-outline.boton-subida-imagen {
  width: auto;
  padding-inline: 16px;
  background-color: transparent;
}

/********************* MODAL FOOTER ********************/
.seccion-tabs {
  width: 240px;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  background-color: var(--color-gris-50);
  border-right: 1px solid var(--color-gris-200);
  padding-top: 12px;
}

.seccion-tabs.configuracion{
  padding-left: 0px;
}

.seccion-tabs .tab-opcion {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 6px 12px;
  background-color: var(--color-gris-50);
  cursor:pointer;

  color: var(--color-gris-600);
  font: var(--fuente-body-regular);
}

.seccion-tabs .tab-opcion.active {  
  border-left: 3px solid var(--color-azul-800);
  width: 100%;

  color: var(--color-azul-800);
  font: var(--fuente-body-semibold);
}


.contenedor-tabs{
  width: calc(100% - 240px);
  max-width: 750px;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: start;
  align-items: start;
  padding: 24px;
  flex-direction: column;
  gap: 24px;
}


.contenedor-tabs.full{
  max-width: 100%;
  padding: 0px;
  gap: 0px;
}

.contenedor-tabs.tabs-detalle-configuracion {
  padding: 0px 24px;
  overflow: initial;
}

.contenedor-tabs .contenedor-datos-detalle{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 16px;
  width: 100%;
}

.contenedor-tabs .contenedor-imagen{
  position: relative;
}

.contenedor-tabs .contenedor-imagen img{
  height: 120px;
  width: 120px;
  border-radius: 100%;
  display: flex;
}

.contenedor-tabs .contenedor-detalle-tabs{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

.contenedor-tabs .contenedor-detalle-tabs .contenedor-mitad{
  width: 50%;
}

.contenedor-tabs .contenedor-detalle-tabs .row-titulo-detalle .titulo-imagen{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px ;
}


.contenedor-tabs .contenedor-detalle-tabs .row-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position:relative;
  width: 100%;
  padding-bottom: 8px;
}

.contenedor-tabs .contenedor-detalle-tabs .row-header.no-padding{
  padding-bottom: 0px;
}

.contenedor-tabs .contenedor-detalle-tabs .row-header .titulo-seccion{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 4px;
}


.contenedor-tabs .contenedor-detalle-tabs .seccion-detalle,
.contenedor-tabs .contenedor-detalle-tabs .seccion-tabla{
  width: 100%;
  padding: 0px 8px;
}

.contenedor-tabs .contenedor-detalle-tabs .seccion-tabla.column{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  gap: 20px;
}

.contenedor-tabs .contenedor-detalle-tabs .seccion-tabla.column .columna-medio{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 50%;
  flex-direction: column;
}

.contenedor-tabs .contenedor-detalle-tabs .contenedor-descripcion{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0px;

  /* border-bottom: 1px solid  var(--color-gris-200); */
}

.contenedor-tabs .contenedor-detalle-tabs .contenedor-descripcion p{
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}


.contenedor-tabs .contenedor-detalle-tabs.row{
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.contenedor-tabs .contenedor-detalle-tabs.row.no-wrap{
  flex-wrap: nowrap;
}

.contenedor-tabs .contenedor-detalle-alumno{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  padding: 0px 16px;
  max-width: 992px;
  flex-direction: column;
  gap: 16px;
}

.contenedor-tabs .contenedor-detalle-alumno.configuracion{
  max-width: 870px;
}

.contenedor-tabs.tabs-detalle-configuracion .contenedor-detalle-alumno{
  padding: 0px;
}

.contenedor-tabs .contenedor-detalle-alumno.falta{
  gap: 60px;
}

.contenedor-tabs .contenedor-detalle-alumno.row{
  flex-direction: row;
}

.contenedor-tabs .contenedor-detalle-alumno.border-bottom{
  border-bottom: 1px solid var(--color-gris-300);
}

.contenedor-tabs .contenedor-detalle-alumno.contendor-flex{
  flex: 1;
  max-height: calc(100% - 130px);
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion{
  max-width: 980px;
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 16px;
  height: 100%; 
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion.column{
  flex-direction: column;
}

.contenedor-tabs .header-detalle{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  margin: 0px 16px;
  border-bottom: 1px solid var(--color-gris-200);
  max-width: 960px;
  padding: 16px 10px;
  margin-bottom: 8px;
}

.contenedor-tabs .header-detalle.configuracion{
  max-width: 837px;
}

.contenedor-tabs.tabs-detalle-configuracion .header-detalle{
  padding-inline: 0px;
}

.contenedor-tabs .header-detalle.no-margin {
  margin: 0px;
}

.contenedor-tabs .header-detalle .seccion-imagen{
  position: relative;
  height: 80px;
  width: 80px;
}

.contenedor-tabs .header-detalle .seccion-imagen img{
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.contenedor-tabs .header-detalle .seccion-detalle{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.contenedor-tabs .header-detalle .seccion-detalle .contenedor-datos{
  width: 60%;
  padding-left: 16px;
  gap: 2px;
  display: flex;
  flex-direction: column;
}

.contenedor-tabs .header-detalle .seccion-detalle .contenedor-datos.no-padding{
  padding-left: 0px;
}
.contenedor-tabs .header-detalle .seccion-detalle .contenedor-menu{
  align-self: flex-end;
  position: relative;
}


p.subtitulo-detalle{
  font: var(--fuente-body-regular);
  color: var(--color-gris-600);
}

p.subtitulo-detalle.bold{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-600);
}

.contenedor-tabs .header-detalle .seccion-detalle .contenedor-datos .row{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-tablas-detalle{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  gap: 40px;
  margin-top: 12px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-tablas-detalle .contenedor-tabla{
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-tablas-detalle .contenedor-tabla .seccion-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards{
  display: flex;
  justify-content: start;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}
.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .sellos-fiscales{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  color: var(--color-azul-800) !important;
}
.seccion-cards .sellos-fiscales button,
.seccion-cards .sellos-fiscales i {
  color: var(--color-azul-800) !important;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info{
  display: flex;
  justify-content: start;
  align-items: start;
  padding: 16px;
  background: var(--color-gris-50);
  border: 1px solid var(--color-gris-200);
  border-radius: 2px;
  min-height: 152px;
  flex-direction: column;
  width: 33%;
  flex-grow: 1;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info.placeholder{
  background: var(--color-blanco);
  border: 1px solid var(--color-blanco);
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .row-titulo{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .row-titulo .titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-900); 
}


.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .seccion-datos{
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 18px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .seccion-datos .contenedor-seccion-datos{
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .seccion-datos .contenedor-seccion-datos span.titulo{
  font: var(--fuente-body-semibold);
  font-size: 12px;
  color: var(--color-gris-600);
}


.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .seccion-datos.gap-reducido{
  gap: 5px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info .seccion-datos pre {
  white-space: pre-wrap;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info-grupos{
  display: flex;
  justify-content: start;
  align-items: start;
  padding: 16px;
  background: var(--color-gris-50);
  border: 1px solid var(--color-gris-200);
  border-radius: 4px;
  min-height: 66px;
  flex-direction: column;
  width: 33%;
  flex-grow: 1;
}
.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info-grupos .row-titulo{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info-grupos .row-titulo .titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-900); 
}


.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-info-grupos .seccion-datos{
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 18px;
  color: var(--color-gris-700);
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards  .card-comentario{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  flex-direction: column;
  border: 1px solid var(--color-gris-200);
  border-radius: 8px;
  min-height: 96px;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards  .card-comentario .seccion{
  padding-block: 12px;
  padding-inline: 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards  .card-comentario .seccion.titulo{
  font: var(--fuente-body-semibold);
  border-bottom: 1px solid var(--color-gris-200);
  width: 100%;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-comentario .seccion .contenedor-seccion-datos{
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}

.contenedor-tabs .contenedor-detalle-alumno .seccion-informacion .contenedor-detalle-tabs .seccion-cards .card-comentario .seccion .contenedor-seccion-datos span.titulo{
  font: var(--fuente-body-semibold);
  font-size: 12px;
  color: var(--color-gris-600);
}


.row-seccion-detalle{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.row-seccion-detalle.principal{
  margin-top: 0px;
}

/*****************************************************************/
/*********************** Cards Padres Hijos **********************/
/*****************************************************************/

.contenedor-padres-hijos {
  width: 100%;
  height: 100%;
  display: flex;
  padding-inline: 20px;
  padding-block: 20px;
}

.contenedor-padres-hijos.planes{
  justify-content: space-between;
}

.contenedor-padres-hijos.planes.start{
  justify-content: start;
  gap: 20px;
}


.contenedor-padres-hijos.gris {
  background-color: var(--color-gris-50);
}

.contenedor-padres-hijos.no-padding-top{
  padding-top: 0px;
}

.contenedor-padres-hijos .padres-hijos-card {
  width: 40%;
  outline: 1px solid var(--color-gris-300);
}

.padres-hijos-card .padres-hijos-header {
  background-color: var(--color-gris-100);
  padding-inline: 16px;
  padding-block: 8px;
  display: flex;
  justify-content: space-between;
}

.padres-hijos-card .padres-hijos-header .titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-gris-900);
}

.padres-hijos-card .padres-hijos-header .acciones {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

.padres-hijos-card .padres-hijos-header button {
  font-size: 16px;
  padding: 0px;
  min-height: 10px;
  min-width: 23px;
}

/* .padres-hijos-card .padres-hijos-header i:hover { */
  /* background-color: var(--color-gris-500); */
/* } */

.padres-hijos-card .padres-hijos-contenido {
  background-color: var(--color-blanco);
  align-items: center;
  padding-block: 0px;
  padding-left: 0px;
}

.padres-hijos-card .padres-hijos-contenido .scroll-area {
  height: calc(100vh - 190px);
  padding-right: 8px;
  overflow-y: auto;
  text-align: center;
  padding-block: 16px;
  padding-left: 16px;
}

.padres-hijos-card .padres-hijos-contenido .scroll-area.configuracion .busqueda{
  height: calc(100vh - 280px);
}

.padres-hijos-card .padres-hijos-contenido .scroll-area.configuracion {
  height: calc(100vh - 230px);
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row {
  min-height: 32px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}


.padres-hijos-card .padres-hijos-contenido .padres-hijos-row h4.titulo-item{
  font: var(--fuente-body-semibold);
  color: var(--gris-900);
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row h5.subtitulo-item{
  font: var(--fuente-body2-semibold);
  color: var(--color-gris-600);
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row p.texto-item{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row-con-folio {
  height: 26px;
  padding-inline: 8px;
  padding-block: 4px;
  display: flex;
  align-items: start;
  gap: 6px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row button{
  padding: 0px ;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row:hover {
  background: #E1F5FE;
}
.padres-hijos-card .padres-hijos-contenido .padres-hijos-row.no-hover {
  background: inherit!important;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row.active {
  background: #E1F5FE;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row-cuenta {
  cursor: pointer;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row-cuenta .cantidad-subcategorias {
  display: flex;
  align-items: center;
  gap: 16px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .iconos-opciones {
  display: flex;
  align-items: center;
  gap: 6px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .titulo-item,
.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .clave-item {
  font-weight: 700;
  color: var(--color-gris-600);
  font-size: 12px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-salida-inventario{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 2px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-salida-inventario .info-titulo{
  font-weight: 600;
  color: var(--color-gris-700);
}

.contenedor-padres-hijos .padres-hijos-card.padres-hijos-card-extend {
  width: 60%;
}

/********************* Cuestionarios alumnos *********************/
.contenedor-padres-hijos.cuestionario-salud {
  padding: 0px;
  height: 90%;
}

.contenedor-padres-hijos.cuestionario-salud .padres-hijos-card.no-max-limite {
  max-width: none;
  width: 100%;
}

.contenedor-padres-hijos.cuestionario-salud .padres-hijos-card .padres-hijos-contenido {
  height: calc(100% - 36px);

}
.contenedor-padres-hijos.cuestionario-salud .padres-hijos-card .padres-hijos-contenido .scroll-area {
  height: 100%;
  padding-inline: 16px;
  padding-block: 8px;
}

.contenedor-padres-hijos.cuestionario-salud .padres-hijos-card .padres-hijos-contenido .scroll-area.periodos-clases .row-titulos{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px;
}

.contenedor-padres-hijos.cuestionario-salud .padres-hijos-card .padres-hijos-contenido .scroll-area.periodos-clases .titulo-item {
  font-weight: 700;
  color: var(--color-gris-600);
  font-size: 12px;
}


.contenedor-padres-hijos.cuestionario-salud .padres-hijos-contenido .padres-hijos-row .contenedor-listado-cuestionarios{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contenedor-padres-hijos.cuestionario-salud .padres-hijos-contenido .padres-hijos-row {
  min-height: 65px;
  width: 100%;
}

.contenedor-padres-hijos.cuestionario-salud .padres-hijos-contenido .padres-hijos-row.no-padding{
  min-height: 0px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-listado-cuestionarios{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.padres-hijos-card .padres-hijos-contenido .row-cuestionario-salud td{
  padding-block: 8px;
}

.padres-hijos-card .padres-hijos-contenido .row-cuestionario-salud:hover{
  background-color: var(--color-azul-50);
}

.padres-hijos-card .padres-hijos-contenido .row-cuestionario-salud .titulo-item {
  font-weight: 700;
  color: var(--color-gris-600);
  font-size: 12px;
}

.padres-hijos-card .padres-hijos-contenido .row-cuestionario-salud td{
  padding-block: 8px;
}

.padres-hijos-card .padres-hijos-contenido .header-salud{
  padding: 0px;
  padding-bottom: 2px;
}

.padres-hijos-card .padres-hijos-contenido .header-salud.pi8{
  padding-inline: 8px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-listado-cuestionarios .fecha-periodo-asistencia {
  width: 100px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.padres-hijos-card .padres-hijos-contenido .titulo-cuestionario {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-gris-700);
  white-space: nowrap;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-listado-cuestionarios .contenedor-status-cuestionario {
  display: flex;
  gap: 16px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-listado-cuestionarios .contenedor-status-cuestionario .status-label {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.padres-hijos-card .padres-hijos-contenido .padres-hijos-row .contenedor-listado-cuestionarios .contenedor-status-cuestionario .status-label label {
  font-size: 12px;
  color: var(--color-gris-600);
}

/*****************************************************************/
/********************** Contratos grupales ***********************/
/*****************************************************************/
.formulario-multi-columna {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row !important;
  gap: 24px;
}

.formulario-multi-columna .columna-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*****************************************************************/
/************************ Lista expandible ***********************/
/*****************************************************************/
.visibilidad-oculto {
  visibility: hidden;
}

.contenedor-lista-expandible {
  width: 100%;
  height: auto;
}

.contenedor-lista-expandible .row-padre-lista-expandible {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contenedor-lista-expandible .row-padre-lista-expandible h4 {
  display: inline-block;
}

.lista-expandible-enter-active,
.lista-expandible-leave-active {
  transition: opacity 0.2s, transform 0.2s, height 0.2s ease-in-out;
}

.lista-expandible-enter,
.lista-expandible-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  height: 0;
  overflow: hidden;
}

.lista-expandible-enter-to,
.lista-expandible-leave {
  opacity: 1;
  transform: translateY(0);
  height: auto;
}

/*****************************************************************/
/**************************** TABS *******************************/
/*****************************************************************/
.seccion-tabs-horizontal {
  background-color: var(--color-blanco);
  width: 100%;
  height: 32px;
  display: flex;
  gap: 16px;
  align-items: center;
  padding-inline: 32px;
  border-bottom: 1px solid var(--color-gris-300);
}
.seccion-tabs-horizontal .tab-opcion {
  cursor: pointer;
  padding: 8px;
  transition: background-color 0.3s ease;
  color: var(--color-gris-600);
  font: var(--fuente-body-regular);
  height: 32px;
}
.seccion-tabs-horizontal .tab-opcion-active {
  font: var(--fuente-body-semibold);
  color: var(--color-azul-800);
  border-bottom: 3px solid var(--color-azul-800);
}
.seccion-tabs-horizontal .tab-opcion:hover {
  cursor: pointer;
  background-color: #f0f2f5;
}
.contenedor-tabs-horizontal {
  height: 100%;
  overflow-y: auto;
}

.contenedor-tabs-horizontal .contenedor-tabs-padding-standar {
  padding: 16px;
}

.contenedor-tabs-horizontal .padres-hijos-card .padres-hijos-contenido .scroll-area {
  height: calc(100vh - 215px);
}

.contenedor-tabs-horizontal .padres-hijos-card .padres-hijos-contenido .scroll-area.filtro {
  height: calc(100vh - 255px);
}


.contenedor-tabs-horizontal .padres-hijos-card .padres-hijos-contenido .scroll-area.no-padding-inline {
  padding-inline: 0px;
}


.contenedor-tabs-horizontal .padres-hijos-card .padres-hijos-contenido .scroll-area.entrega-productos{
  height: calc(100vh - 178px);
  gap: 8px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}


.contenedor-tabs-horizontal .padres-hijos-card .padres-hijos-contenido .scroll-area.entrega-productos .seccion-acciones{
  flex-grow: 1;
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
}

.contenedor-tabs-horizontal.contenedor-overflow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/*****************************************************************/
/********************** CONTENEDOR OVERFLOW **********************/
/*****************************************************************/
.div-overflow {
  flex: 1;
  overflow: auto;
}

.div-overflow.pagos-automaticos {
  height: calc(100vh - 230px);
}

/*****************************************************************/
/*********************** ARTICULOS EDITAR ************************/
/*****************************************************************/
.columna-seccion{
  outline: 1px solid var(--color-gris-300);
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 8px;
  justify-content: start;
  align-items: start;
  background: var(--color-blanco);
  width: 32%;
  border-radius: 4px;
}

.columna-seccion.min{
  width: 25%;
}

.columna-seccion.max{
  width: 47%;
}

.columna-seccion .seccion-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.columna-seccion .seccion-header .titulo{
  font: var(--fuente-h2-semibold);
}

.columna-seccion .seccion-contenido{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 16px;
}

.columna-seccion .seccion-contenido .scroll-area{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  border: 1px solid var(--color-gris-200);
}

.columna-seccion .seccion-contenido .scroll-area.busqueda{
  max-height: calc(100vh - 250px);
}

.columna-seccion .seccion-contenido .scroll-area .item{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--color-gris-200);
  background: var(--color-gris-10);
}

.columna-seccion .seccion-contenido .scroll-area .item:hover{
  background: var(--color-gris-50);
}

.columna-seccion .seccion-contenido .scroll-area .item.active{
  border-left: 4px solid var(--color-azul-800);
  background: var(--color-azul-50);
}

.columna-seccion .seccion-contenido .scroll-area .item .seccion-info{
  display: flex;
  flex-direction: column;
  gap: 4px
}

.columna-seccion .seccion-contenido .scroll-area .item .seccion-info .texto-item{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.columna-seccion .seccion-contenido .scroll-area .item:last-child{
  border-bottom: 0px;
}

.columna-seccion .seccion-contenido .scroll-area .item .iconos-opciones{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}


.columna-seccion .seccion-contenido .entrega-productos{
  height: calc(100vh - 200px);
  gap: 12px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
}

.columna-seccion .seccion-contenido .entrega-productos .seccion-acciones{
  flex-grow: 1;
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
}

.columna-seccion .seccion-contenido .contenedor-placeholder{
  height: calc(100vh - 300px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--color-gris-600);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.columna-seccion .seccion-contenido .contenedor-placeholder .texto-placeholder{
  font: var(--fuente-body-regular);
  text-align: center;
  color: var(--color-gris-600);
}

.columna-seccion .seccion-contenido .contenedor-placeholder i {
  font-size: 48px;
  color: var(--color-gris-400);
}






/*****************************************************************/
/************************* SUBIDA IMAGEN *************************/
/*****************************************************************/
.contenedor-crop{
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}


.fixed-size-container {
  width: 100%;
  height: 355px;
  overflow: hidden;
  margin: auto;
}

.contenedor-crop img{
  display: block;
  max-width: 100%;
}

.contenedor-subida-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-subida-img .recuadro-subida-img {
  width: 100%;
  height: 355px;
  background-color: var(--color-gris-50);
  border: 1px dashed var(--color-gris-500);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.recuadro-subida-img.drag-over {
  border-color: #2C90F9;
}

.contenedor-subida-documento-pantalla {
  width: 420px;
  height: 472px;
  margin-inline: auto;
  margin-block: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--color-gris-200);
  border-radius: 4px;
}

.contenedor-subida-documento-pantalla .seccion-botones {
  margin-top: auto;
  display: flex;
  gap: 8px;
  justify-content: end;
}

.contenedor-subida-documento {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-subida-documento .recuadro-subida-documento i {
  font-size: 26px;
  color: var(--color-gris-500);
}

.contenedor-subida-documento .recuadro-subida-documento {
  width: 100%;
  height: 86px;
  background-color: var(--color-gris-50);
  border: 1px dashed var(--color-gris-500);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.recuadro-subida-documento.drag-over {
  border-color: #2C90F9;
}

.contenedor-subida-documento .recuadro-subida-documento i {
  font-size: 26px;
  color: var(--color-gris-500);
}

.contenedor-subida-documento .recuadro-info-documento{
  width: 100%;
  height: 86px;
  background-color: var(--color-gris-50);
  border: 1px dashed var(--color-gris-500);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contenedor-info-documento {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding-inline: 16px;
  padding-block: 8px;
  border: 1px solid var(--color-gris-300);
  border-radius: 4px;
  gap: 8px;
}

.contenedor-info-documento.oculto {
  border: none;
}

.contenedor-info-documento .contenedor-informacion{
  display: flex;
  justify-content: start;
  align-items: start;
}

.contenedor-info-documento .seccion-titulo{
  display: flex;
  flex-direction: column;
  width: 82%;
}

.contenedor-info-documento .seccion-titulo .titulo{
  font: var(--fuente-body-regular);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contenedor-info-documento .seccion-titulo .tamanio{
  color: var(--color-gris-600);
  text-align: left;
  font-size: 12px;
}
.contenedor-info-documento .seccion-titulo i{
  color: var(--color-gris-700);
}

.contenedor-info-documento i.aquara-icon-ol-documento {
  font-size: 18px;
  color: var(--color-gris-700);
}

.contenedor-info-documento .seccion-icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--color-gris-300);
  border-radius: 100%;
}

.contenedor-info-documento i.aquara-icon-ol-cerrar {
  font-size: 12px;
  color: var(--color-gris-700);
  margin-left: auto;
}

/*********************** SUBIR DOCUMENTO ALUMNOS ***********************/
.contenedor-subida-documento .recuadro-subida-documento.subir-documento-alumnos {
  height: 160px;
  border: 1px dashed var(--color-gris-700);
  gap: 4px;
  margin-bottom: 8px;
}

.contenedor-subida-documento .recuadro-subida-documento.subir-documento-alumnos > div {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-gris-600);
}

.contenedor-subida-documento .recuadro-subida-documento.subir-documento-alumnos .outline {
  width: fit-content;
  height: fit-content;
  padding-inline: 16px;
  padding-block: 8px;
  background-color: transparent;
  border: 1px solid var(--color-gris-600);
  border-radius: 6px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
  color: var(--color-gris-800);
}

.contenedor-subida-documento .recuadro-subida-documento.subir-documento-alumnos i {
  width: 24px;
  height: 21px;
  margin-bottom: 4px;
  color: var(--color-gris-500);
}

/***********************************************************************/
/*************************** NUEVA INSCRIPCION *************************/
/***********************************************************************/
.contenedor-contenido.contenedor-nueva-inscripcion{
  margin-left: 60px;
  width: calc(100% - 60px);
  display: flex;
  justify-content: start;
  align-items: center;
  padding-top: 16px;
  max-height: calc(100% - 0px);
  background-color: var(--color-gris-100);
}

.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso{
  width: 850px;
  padding: 12px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  /* gap: 18px; */
  position: relative;
  height: 100%;
}

.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso.final{
  width: 1100px;
}


.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso.full{
  width: 100%;
}


.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso form.form-general{
  max-height: calc(100% - 50px);
  height: 100%;
  overflow: auto;
}

.seccion-steps{
  min-height: 48px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 18px;
  max-width: 850px;
}

.seccion-steps .contenedor-step{
  display: flex;
  justify-content: center;
  align-items: start;
}

.seccion-steps .contenedor-step{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
  min-width: 80px;
  height: 40px;
  flex-direction: column;
  flex-grow: 1;
}

.seccion-steps .contenedor-step:last-child {
  width: auto;
  flex-grow: 0;
}



.seccion-steps .contenedor-step .seccion-indicador{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.seccion-steps .contenedor-step .seccion-indicador .indicador{
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  border-radius: 100%;
  border: 1px solid var(--color-gris-500);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.seccion-steps .contenedor-step .seccion-indicador i{
  color: var(--color-blanco);
  font-size: 14px;
}

.seccion-steps .contenedor-step.completado .seccion-indicador .indicador,
.seccion-steps .contenedor-step.active .seccion-indicador .indicador{
  border: 1px solid var(--color-azul-800);
  background: var(--color-azul-800);
}

.seccion-steps .contenedor-step.active .seccion-indicador .indicador::after{
  content: '';
  width: 10px; /* Ajusta según el tamaño del agujero */
  height: 10px;
  background-color: var(--color-blanco); /* Color del agujero */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.seccion-steps .contenedor-step .seccion-indicador .conector{
  display: flex;
  height: 2px;
  background: var(--color-gris-200);
  width: 100%;
}

.seccion-steps .contenedor-step.completado .seccion-indicador .conector,
.seccion-steps .contenedor-step.active .seccion-indicador .conector{
  background: var(--color-azul-800);
}

.seccion-steps .contenedor-step .titulo{
  font: var(--fuente-body-regular);
  color: var(--color-gris-500);
}

.seccion-steps .contenedor-step.active .titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-azul-800);
}

.seccion-steps .contenedor-step.completado .titulo{
  color: var(--color-gris-900);
}

.contenedor-footer-steps{
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: end;
  padding: 24px 32px;
  border-top: 1px solid var(--color-gris-200);
  gap: 16px;
  margin-top: auto;
}

.row-header-steps{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position:relative;
  width: 100%;
  padding-bottom: 8px;
}

.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso .seccion-acciones{
  flex-grow: 1;
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  max-height: 100%;
}

.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso .seccion-acciones .contenedor-step{
  height: 100%;
  display: flex;
  gap: 24px;
  flex-direction: column;
  padding-right: 15px;
  overflow: auto;
}


.columna-expectativa{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 6px;
  margin-bottom: 12px;
}


.contenedor-contenido.contenedor-nueva-inscripcion .seccion-proceso .seccion-acciones .contenedor-step .seccion-membresias{
  height: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  overflow: hidden;
  justify-content: start;
  align-items: center;
}

.contenedor-plan-sucursal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  background: var(--color-gris-50);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}



.contenedor-plan-sucursal.align-start{
  justify-content: start;
  gap: 16px;
}

.contenedor-plan-sucursal.active{
  background: var(--color-azul-100);
}


.contenedor-plan-sucursal  .seccion-titulo{
  width: 30%;
  font: var(--fuente-body-semibold);
  color: var(--color-gris-900);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.contenedor-plan-sucursal  .seccion-titulo.min{
  width: 25%;
}

.contenedor-plan-sucursal  .seccion-titulo span.subtitulo{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.contenedor-plan-sucursal  .seccion-info{
  text-align: center;
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.seccion-info.w30p{
  width: 30%;
}

.seccion-info.w60p{
  width: 60%;
}

.seccion-info.w15p{
  width: 15%;
}

.contenedor-plan-sucursal  .seccion-info.text-left{
  text-align: left;
}

.contenedor-plan-sucursal .seccion-titulo span.clave,
.contenedor-plan-sucursal .seccion-info span.titulo{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.contenedor-plan-sucursal .seccion-sucursal{
  width: 20%;
}

.contenedor-contenido.contenedor-nueva-inscripcion .seccion-footer{
  position: sticky;
  bottom: 0px;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-200);

  width: 100%;
  padding-inline: 32px;
  padding-block: 24px;
}


.contenedor-expectativa{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
  flex-direction: column;
}

.contenedor-expectativa .seccion-expectativa{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 10px;
}

.contenedor-expectativa.abierto{
  flex-direction: column;
}

.contenedor-expectativa .seccion-otro{
  width: 100%;
  min-height: 70px;
  border-radius: 10px;
  border: 1px solid var(--color-gris-300);
  background: var(--color-gris-100);
  padding: 8px;
}

.contenedor-relacionar-familiar{
  width: 100%;
  min-height: 200px;
  max-height: 350px;
}

.card-seccion-registro{
  display: flex;
  width: 100%;
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: 6px;
  padding: 24px;
  flex-direction: column;
  gap: 16px;
}

.card-seccion-registro.minimo{
  min-height: 140px;
}

.card-seccion-registro.gap-reducido{
  gap: 8px;
}

.card-seccion-registro.direccion-row {
  flex-direction: row;
}

.card-seccion-registro.preguntas{
  padding: 16px;
  gap:8px;
  min-width: 330px;
}

.card-seccion-registro.preguntas.titulo{
  gap:2px;
}

.card-seccion-registro.preguntas .row-pregunta{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
}


.card-seccion-registro.preguntas .row-pregunta .seccion-numero{
  width: 20px;
}

.card-seccion-registro.preguntas .row-pregunta .seccion-contenido{
  width: calc(100% - 20px);
  gap: 9px;
  display: flex;
  flex-direction: column;
}

.card-seccion-registro.preguntas .row-pregunta .seccion-contenido p.titulo-pregunta{
  font: var(--fuente-body-regular);
}


.card-seccion-registro .seccion-opciones{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 32px;
}


.card-seccion-registro .seccion-opciones .contenedor-opcion{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.card-seccion-registro p.titulo{
  font: var(--fuente-body-semibold);
}


.card-seccion-registro .seccion-info{
  gap: 4px;
  display: flex;
  flex-direction: column;
}

.card-seccion-registro .seccion-info p.info{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

/************************************************************************/
/****************************** PREREGISTRO ****************************/
/***********************************************************************/
.vista-movil {
  width: 100%;
  height: auto;
  overflow: auto;
  position: relative;
}

.vista-movil a,
.vista-movil span,
.vista-movil p{
  font: var(--fuente-mobile-body-regular);
}

.vista-movil .alerta-contenedor{
  max-width: 100%;
}


/* .vista-movil::-webkit-scrollbar {
  width: 5px;
} */

/* Estilo de la "pista" de la barra (background) */
/* .vista-movil::-webkit-scrollbar-track {
  background: var(--color-gris-50);
} */

/* Estilo del "thumb" (la parte que se mueve) */
/* .vista-movil::-webkit-scrollbar-thumb {
  background-color: var(--color-gris-400);
  border-radius: 10px;
} */

/* Estilo del thumb al pasar el mouse */
/* .vista-movil::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gris-600);
} */

.main-vista-movil .vista-movil .contenedor-contenido {
  margin-top: 112px;
}

/* Contenedor padre */
.vista-movil .contenedor-contenido {
  width: 100vw;
  /* height: 100vh; */
  padding-bottom: 48px;
}

/* Contenedor generico */
.vista-movil .contenedor-base {
  max-width: 330px;
  /* height: auto; */
}

.vista-movil .contenedor-contenido .seccion-header.principal{
  width: 100%;
  height: 420px;
  padding: 32px 24px;
  background: url('../img/preregistro/aquara-banner-tablet-inicio.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.vista-movil .contenedor-contenido .seccion-header.imagen{
  width: 100%;
  height: 250px;
  padding: 32px 24px;
  background: url('../img/preregistro/aquara-banner-tablet-registrardatospersonales.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}

.vista-movil .contenedor-contenido .seccion-header.codigo{
  width: 100%;
  height: 250px;
  padding: 32px 24px;
  background: url('../img/preregistro/aquara-banner-tablet-codigoverificacion.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}


.vista-movil .contenedor-contenido .seccion-header.datos{
  width: 100%;
  height: 192px;
  padding: 32px 24px;
  background: url('../img/header-home.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.vista-movil .contenedor-contenido .seccion-header .row-logos{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vista-movil .contenedor-contenido .seccion-acciones{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 16px 32px;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step{
  max-width: 450px;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step.center{
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
  height: 50vh;
}


.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .header{
  gap: 8px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .header.form{
  align-items: start;
  justify-content: start;
  text-align: left;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid var(--color-gris-200);
  padding: 14px 0px;
  gap: 2pxZ;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step p.subtitulo{
  font: var(--fuente-mobile-body-regular);
  font-size: 14px;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step p.subtitulo b{
  font: var(--fuente-mobile-body-medium);
  font-size: 14px;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .row{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .row.titulo-seccion{
  gap: 8px;
  /* margin-top: 24px; */
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .row.titulo-seccion i{
  font-size: 18px;
  color: var(--color-gris-700);
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .row.center{
  justify-content: center;
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .column{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 16px
}

.vista-movil .contenedor-contenido .seccion-acciones .contenedor-step .seccion-footer{
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: end;
  flex-direction: column;
  gap: 24px;
  margin: 20px 0px 10px 0px;
  border: none !important;
}

.item-sucursal{
  min-width: 266px;
  min-height: 40px;
  padding: 11px 16px;
  gap: 16px;
  border-radius: 32px;
  opacity: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-azul-500);
  margin-block: 22px;
}

.item-sucursal i{
  font-size: 18px;
  color: var(--color-blanco);
}

.item-sucursal p.nombre-sucursal{
  font: var(--fuente-mobile-body2-medium);
  color: var(--color-blanco);
}

.contenedor-tipo-registro{
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--color-gris-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 8px;
}

.contenedor-tipo-registro .item-info{
  display: flex;
  gap: 16px;
  justify-content: start;
  align-items: center;
}

.contenedor-tipo-registro  .seccion-icono{
  height: 44px;
  width: 44px;
  background-color: var(--color-azul-fondo);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-tipo-registro  .seccion-icono i{
  font-size: 28px;
  color: var(--color-primario);
}


.contenedor-tipo-registro button.boton-avanzar{
  background-color: var(--color-secundario-azul);
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-tipo-registro button.boton-avanzar i{
  font-size: 18px;
  color: var(--color-blanco)
}


.contenedor-steps-proceso{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 8px;
}

.contenedor-steps-proceso .contenedor-step-proceso{
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: start;
  align-items: start;
  flex-grow: 1;
}

.contenedor-steps-proceso .contenedor-step-proceso.active:last-child,
.contenedor-steps-proceso .contenedor-step-proceso:last-child{
  width: auto;
  flex-grow: 0;
}

.contenedor-steps-proceso .contenedor-step-proceso  .seccion-indicador{
  width: 18px;
  height: 18px;
  border-radius: 100%;
  border:1px solid var(--color-gris-500);
  background-color: var(--color-blanco);
  display: flex;
  justify-content: center;
  align-items: center;
}


.contenedor-steps-proceso .contenedor-step-proceso  .seccion-indicador i{
  color: var(--color-blanco);
  font-size: 12px;
}

.contenedor-steps-proceso .contenedor-step-proceso.completo .contenedor-indicador .seccion-indicador,
.contenedor-steps-proceso .contenedor-step-proceso.active .contenedor-indicador .seccion-indicador{
  background: var(--color-azul-800);
  border-color: var(--color-azul-800);
  position: relative;
}

.contenedor-steps-proceso .contenedor-step-proceso .contenedor-indicador{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}


.contenedor-steps-proceso .contenedor-indicador .separador{
  width: calc(100% - 30px);
  height: 2px;
  background-color: var(--color-gris-300);
}

.contenedor-step-proceso.completo .contenedor-indicador .separador{
  width: calc(100% - 30px);
  height: 2px;
  background-color: var(--color-azul-800);
}


.contenedor-steps-proceso .contenedor-step-proceso.active .contenedor-indicador .seccion-indicador::after{
  content: '';
  width: 6px; /* Ajusta según el tamaño del agujero */
  height: 6px;
  background-color: var(--color-blanco); /* Color del agujero */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contenedor-steps-proceso .contenedor-step-proceso .seccion-titulo{
  max-width: 65px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--color-gris-500);
}

.contenedor-steps-proceso .contenedor-step-proceso.completo .seccion-titulo,
.contenedor-steps-proceso .contenedor-step-proceso.active .seccion-titulo{
  color: var(--color-azul-800);
}

.contenedor-step .texto-exito{
  width: 60%;
  text-align: center;
  padding-top: 20px;
  min-width: 300px;
}

/************************************************************************/
/**************************** EVENTOS CALENDARIO ***********************/
/**********************************************************************/
.contenedor-grid-calendario{
  max-height: calc(100vh - 200px);
  padding-inline: 20px;
  position: relative;
  overflow: auto;
  width: 100%;
}

.seccion-footer{
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding-block: 10px;
  border-top: 1px solid var(--color-gris-300);
}


.contenedor-cita-clase{
  padding: 8px;
  background-color: var(--color-azul-50);
  border: 1px solid var(--color-azul-500);
  border-radius: 6px;
  height: 100%;
  cursor: pointer;
}
.contenedor-cita-clase .seccion-header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.contenedor-cita-clase .seccion-header .clave {
  font: var(--fuente-body2-regular);
}
.contenedor-cita-clase .seccion-header .seccion-alumnos{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.contenedor-cita-clase .seccion-header .seccion-alumnos i {
  font-size: 12px;
}
.contenedor-cita-clase .label-alumnos{
  color: var(--gris-900); 
  font: var(--fuente-body2-semibold);
}
.contenedor-cita-clase .tituloCurso{
  font: var(--fuente-body2-semibold);
  color: var(--color-gris-900);
  width: 100%;
}
.item-info-grupo {
  display: flex;
  width: 100%;
  gap: 8px;
  padding: 6px 16px;
  background: var(--color-azul-50);
  border-radius: 4px;
  border-left: 4px solid var(--color-primario);
  min-height: 42px;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
}

.item-info-grupo .seccion-titulo{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

.item-info-grupo .seccion-info{
  display: flex;
  justify-content: start;
  flex-direction: column;
  width: 90%;
  gap: 0px;
}

.item-info-grupo .seccion-info .row-datos{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.item-info-grupo .seccion-alumnos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 70px;
}
.item-info-grupo .seccion-alumnos i {
  font-size: 12px;
}
.item-info-grupo .seccion-alumnos .label-alumnos{
  color: var(--gris-900); 
  font: var(--fuente-body-semibold);
}
.item-info-grupo .clave {
  font: var(--fuente-body-regular);
  color: var(--color-gris-700);
}

.row-info-grupo{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-gris-200);
}

.item-datos-grupo {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 4px;
  color: var(--color-gris-700);
}
.item-datos-grupo.space-between{
  justify-content: space-between;
}
.item-datos-grupo i{
  font-size: 14px;
  color: var(--color-gris-600);
}
.seccion-edades-alumnos{
  max-height: 150px;
}
.seccion-edades-alumnos .item-datos-grupo div{
  color: var(--color-gris-700);
}
.contenedor-grupos{
  max-height: calc(100% - 20px);
  overflow: auto;
  gap: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contenedor-grupos-modal{
  height: 250px;
}


.contenedor-info-modal{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
  width: 100%;
  flex-direction: column;
}

.contenedor-info-modal.row{
  flex-direction: row;
}

.contenedor-info-modal .seccion-contenido{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
  width: 50%;
  padding: 24px 0px;
  min-height: 200px;
  flex-direction: column;
}

.contenedor-info-modal .seccion-contenido.info{
  gap: 4px; 
  width: 100%;
}

.contenedor-info-modal .seccion-contenido.edades{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
  border-right: 1px solid var(--color-gris-200);
  padding-right: 24px;
}

.contenedor-info-modal .seccion-contenido.clases{
  padding-left: 24px;
}


.contenedor-info-modal .seccion-contenido.info  .tabla-scroll,
.contenedor-info-modal .seccion-contenido.clases .tabla-scroll,
.contenedor-info-modal .seccion-contenido.edades .tabla-scroll{
  width: 100%;
}



/************************************************************************/
/******************************* ITEMS GRUPO ***************************/
/**********************************************************************/

.item-grupo{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 4px;
  flex-direction: column;
  border: 1px solid var(--color-gris-200);
  background: var(--color-gris-50);
  width: 100%;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0px 2px 4px 0px var(--color-gris-sombra);
  min-height: 92px;
}


.item-grupo.margin-bottom{
  margin-bottom:14px;
}


.item-grupo.sin-borde{
  border: none;
  background: var(--color-gris-50);
}

.item-grupo.claro{
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
}


.item-grupo.verde
{
  border: 1px solid var(--color-verde-200);
  background: var(--color-verde-50);
}

.item-grupo.rojo
{
  border: 1px solid var(--color-rojo-200);
  background: var(--color-rojo-50);
}


.item-grupo.ajuste{
  justify-content: center;
  align-items: center;
}

.item-grupo.center{
  justify-content: center;
  align-items: center;
}

.item-grupo.column{
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.item-grupo.border-bottom{
  border-bottom: 1px solid var(--color-gris-200);
}

.item-grupo.no-shadow{
  box-shadow: none;
}

.item-grupo .seccion-titulo{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
}

.item-grupo .seccion-titulo .contenedor-titulo{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 2px;
}

.item-grupo .seccion-titulo .contenedor-titulo .titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-900);
} 

.item-grupo .seccion-titulo .contenedor-titulo .item-horario{
  font: var(--fuente-body-regular); 
  color: var(--color-primario);
}

.item-grupo .seccion-info {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
  width: 100%;
}

.item-grupo .seccion-info-modal{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 4px;
  width: 100%;
  flex-direction: column;
}

.item-grupo .seccion-info-modal .item-info,
.item-grupo .seccion-info-modal .item-info i,
.item-grupo .seccion-info .item-info{
  font: var(--fuente-body-regular);
  color: var(--color-gris-600);
}

.contenedor-item-membresia {
  width: 100%;
}

.contenedor-item-membresia .contenedor-membresia{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--color-gris-100);
  border: 1px solid var(--color-gris-200);
  border-radius: 6px;
  gap: 8px;
}

.contenedor-membresia .seccion-titulo .contenedor-subtitulo{
  font: var(--fuente-body-regular);
  color: var(--color-gris-700);
}

.contenedor-membresia .seccion-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.contenedor-membresia .seccion-info .item-info{
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 1px;
  border-bottom: 1px solid var(--color-gris-200);
}

.contenedor-membresia .seccion-info .item-info span.tituloInfo{
  font: var(--fuente-body-regular);
  color: var(--color-gris-600);
}
.contenedor-membresia .seccion-info .item-info span.datoIanfo{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}



.row-dia-opcion{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.row-dia-opcion .seccion-check{
  width: 3%;
}

.row-dia-opcion .seccion-input{
  width: 31%;
}

.row-dia-opcion .seccion-input.nombre{
  width: 19%;
}

.row-dia-opcion .seccion-input-grupo{
  width: 20%;
}

.row-dia-opcion .seccion-check-agregar{
  width: 16px;
}
.row-dia-opcion .seccion-input-grupo.nombre{
  width: 12%;
}

.row-dia-opcion .seccion-input-grupo.select{
  width: 16%;
}

.row-dia-opcion .seccion-input-grupo.hora{
  width: 1px;
}

.item-grupo.ajuste .contenedor-titulo{
  width: 100%;
}

.item-grupo.ajuste .contenedor-titulo h3{
  margin-bottom: 8px;
}

.item-grupo.ajuste .contenedor-desglose{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  width: 100%;
}


.item-grupo.ajuste .contenedor-desglose .seccion-monto{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}


.item-grupo.ajuste .contenedor-desglose .seccion-monto span{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.item-grupo.ajuste .contenedor-desglose .seccion-monto p{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}


/*****************************************************************/
/********************** ALTA SUSCRIPCION *************************/
/*****************************************************************/

.contenedor-alta-suscripcion{
  flex: 1;
  position: relative;
  overflow: auto;
}

.contenedor-alta-suscripcion .seccion-acciones.full{
  max-width: 100%;
  justify-content: center;
}

.contenedor-alta-suscripcion .seccion-acciones{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 100%;
}
.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral{
  width: 25%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  padding: 16px 20px;
  height: 100%;
  gap: 8px;
  max-width: 340px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral.no-padding{
  padding: 0px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral .row-titulo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral .row-nombre{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  border-bottom: 1px solid var(--color-gris-200);
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral .row-nombre p{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-600);
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral .seccion-grupos{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  flex-grow: 1;
}


.contenedor-alta-suscripcion .seccion-acciones .seccion-principal{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  height: 100%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .seccion-filtros-planes{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .seccion-filtros-planes .row-filtros{
  display: flex;
  justify-content: start;
  align-items: end;
  width: 100%;
  gap: 16px;
  max-width: fit-content;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .seccion-filtros-planes .row-filtros .columna-filtro{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 4px;
  width: 100%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .seccion-filtros-planes .row-filtros .columna-filtro.botones{
  flex-direction: row;
}


.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  padding: 16px;
  flex-grow: 1;
}
.contenedor-alta-suscripcion .seccion-acciones .seccion-lateral .contenedor-footer,
.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-footer{
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: end;
  padding: 24px 32px;
  border-top: 1px solid var(--color-gris-200);
  gap: 16px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  flex-direction: column;
  padding: 16px;
  height: 100%;
  min-width: 900px;
}


.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-footer{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 8px;
  padding: 24px 0px;
  border-top: 1px solid var(--color-gris-200);
  width: 100%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido{
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
}


.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards .card-info-suscripcion{
  padding: 16px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-gris-200);
  background: var(--color-gris-50);
  min-height: 200px;
  width: 50%;
  height: 100%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards .card-info-suscripcion .contenedor-info{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards .card-info-suscripcion .contenedor-info .titulo{
  width: 15%;
  font: var(--fuente-body2-regular);
  color: var(--color-gris-700);
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards .card-info-suscripcion.segunda .contenedor-info .titulo{
  width: 28%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards .card-info-suscripcion .contenedor-info .informacion{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-cards .card-info-suscripcion .contenedor-info .informacion span{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-700);
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .contenedor-clases{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 8px;
  flex-direction: column;
}




.contenedor-alta-suscripcion .seccion-acciones .seccion-resumen .contenedor-contenido .seccion-clases{
  flex-grow: 1;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 8px;
}


.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 16px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros.align-end{
  align-items: end;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros .columna-filtro{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 350px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros .row-filtro{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 4px;
  max-width: 350px;
  flex-direction: column;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros .row-filtro.minimo{
  width: 300px;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros .columna-filtro label{
  width: 60%;
}

.contenedor-alta-suscripcion .seccion-acciones .seccion-principal .contenedor-contenido .row-filtros .seccion-filtros .columna-filtro.minimo{
  width: 200px;
}

.contenedor-lista{
  display: flex;
  align-items: start;
  justify-content: start;
  width: 100%;
  gap: 8px;
  flex-direction: column;
  overflow: auto;
}

.contenedor-lista.horarios{
  height: 605px;
  overflow: auto;
}

.contenedor-lista .contenedor-titulos{
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: center;
  padding: 0px 24px;
  text-align: left;
  gap: 5px;
}

.contenedor-lista .contenedor-titulos .titulo{
  width: 30%;
}

.titulos-tabla-grupos{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 16px;
  text-align: left;
}

.contenedor-grupo-plan .seccion-info,
.titulos-tabla-grupos .seccion-info{
  width: 20%;
  font: var(--fuente-body-semibold);
  text-overflow: ellipsis;
  overflow: hidden;
}
.contenedor-grupo-plan .seccion-info.minimo,
.titulos-tabla-grupos .seccion-info.minimo{
  width: 12%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.contenedor-grupo-plan .seccion-info.no-clases{
  width: 100%;
  text-align: center;
  font: var(--fuente-body-semibold);
  color: var(--color-amarillo-800);
  align-items: center;
  display: flex;
  justify-content: center;
}


.contenedor-grupo-plan{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--color-gris-50);
  border: 1px solid var(--color-gris-100);
  border-radius: 6px;
  text-align: left;
  border-radius: 4px;
}

.contenedor-grupo-plan.advertencia{
  background-color:var(--color-amarillo-50);
  border: 1px solid var(--color-amarillo-600);
}

.contenedor-grupo-plan.advertencia i.advertencia{
  color: var(--color-amarillo-800);
  font-size: 18px;
}

.contenedor-grupo-plan .seccion-info{
  font: var(--fuente-body-regular);
}

.contenedor-grupo-plan .seccion-info.info-centrado {
  text-align: center;
}

.contenedor-grupo-plan .seccion-info span{
  font: var(--fuente-body-semibold);
}

.contenedor-grupo-plan .seccion-info span.titulo{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}

.contenedor-grupo-plan .seccion-info p.label-horario{
  font: var(--fuente-body2-semibold);
  color: var(--color-primario);
}

.contenedor-grupo-plan .seccion-titulo{
  width: 30%;
  font: var(--fuente-body-semibold);
  color: var(--color-gris-900);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contenedor-grupo-plan .seccion-titulo span.subtitulo{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
}

.contenedor-tabs-dias{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  padding: 0px 16px;
  border-bottom: 1px solid var(--color-gris-200);
}

.contenedor-tabs-dias .tab-dia{
  padding: 4px 8px;
  cursor: pointer;
}

.contenedor-tabs-dias .tab-dia.selected{
  font: var(--fuente-body-semibold);
  /* background: var(--color-azul-50); */
  /* color: var(--color-azul-800); */
  border-bottom: 1px solid var(--color-primario);
}



.contenedor-horarios{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 16px;
}

.contenedor-horarios .item-horario{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 2px;
}

.contenedor-horarios .item-horario .label-dia{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-700 );
}

.contenedor-horarios .item-horario .card-info{
  width: 100%;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 2px;
  flex-direction: column;
  align-items: center;
  background: var(--color-gris-50);
  border: 1px solid var(--color-gris-200);
  border-radius: 4px;
}

/*****************************************************************/
/********************** SECCION DROPDOWN *************************/
/*****************************************************************/
.seccion-dropdown{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}

.seccion-dropdown .seccion-titulo{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-gris-100);
  padding: 12px 24px;
}

.seccion-dropdown .seccion-titulo .titulo{
  font: var(--fuente-body-medium);
}


.seccion-dropdown .seccion-titulo .seccion-acciones{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

.seccion-dropdown .seccion-titulo .seccion-acciones i,
.seccion-dropdown .seccion-titulo i{
  font-size: 14px;
  cursor: pointer;
}

.seccion-dropdown .seccion-contenido{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}


.contenedor-proceso-full{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  height: calc(100vh - 100px);
}

.contenedor-proceso-full.tabs-proceso{
  flex: 1;
}

.contenedor-proceso-full .seccion-proceso{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--color-gris-200);
  padding-block: 20px;
}


.contenedor-proceso-full .seccion-header .seccion-info{
  width: 50%;
  display: flex;
  gap: 8px;
}

.contenedor-proceso-full .seccion-header .contenedor-imagen{
  position: relative;
  height: 80px;
  width: 80px;
}

.contenedor-proceso-full .seccion-header .contenedor-imagen img{
  width: 100%;
  height: 100%;
}

.contenedor-proceso-full .seccion-header .row{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.contenedor-proceso-full .seccion-contenido {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  flex: 1;

}

.contenedor-proceso-full .seccion-contenido .columna-detalle{
  width: 30%;
  max-width: 300px;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
  flex-direction: column;
  padding-block: 18px;
  /* gap: 18px; */
  background: var(--color-gris-50);
  border-right: 1px solid var(--color-gris-200);
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-usuario{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 8px;
  padding-block: 16px;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-usuario.mid{
  min-width: 250px;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-informacion{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-direction: column;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-usuario .contenedor-imagen{
  position: relative;
  height: 80px;
  width: 80px;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-usuario .contenedor-imagen img{
  width: 100%;
  height: 100%;
}


.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-informacion-adicional{
  padding-block: 8px;
  margin-top: 1px solid var(--color-gris-500);
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  overflow: auto;
  max-height: 370px;
  height: 100%;
  width: 100%;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-informacion-adicional .column-info{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  flex-direction: column;
  gap: 2px;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-informacion-adicional .column-info .row-info{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 4px;
}

.contenedor-proceso-full .seccion-contenido .columna-detalle .contenedor-informacion-adicional .column-info .row-info .titulo{
  width: 50%;
  text-align: left;
  font: var(--fuente-body-regular);
  color: var(--color-gris-700);
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso{
  width: 100%;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 160px);
  justify-content: start;
  align-items: center;
  display: flex;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding-block: 16px;
  text-align: center;
  overflow: auto;
  height: 100%;
  width: 100%;
  max-width: 900px;
  padding-inline: 10px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso.align-start{
  align-items: start;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso.lg{
  max-width: 1100px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso.no-padding{
  padding-block: 0px;
}


.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso h3.titulo{
  margin-bottom: 16px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 8px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items.align-start{
  align-items: start;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items .contenedor-horario{
  text-align: left;
  width: 300px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items .contenedor-separador{
  width: 21px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items .contenedor-separador i{
  font-size: 24px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .contenedor-alerta{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .contenedor-alerta .seccion-alerta{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .contenedor-alerta .seccion-alerta p{
  font: var(--fuente-body-regular);
  color: var(--color-gris-600);
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items .contenedor-sin-suscripcion{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 300px;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-items .contenedor-sin-suscripcion img{
  width: 200px;
  height: 200px;
}


.contenedor-proceso-full .seccion-footer{
  width: 100%;
  padding: 12px;
  display: flex;
  justify-content: end;
  align-items: center;
  background: var(--color-gris-50);
  border: none;
  border-top: 1px solid var(--color-gris-200);
}

.contenedor-proceso .seccion-planes{
  display: flex;
  width: 100%;
  gap: 18px;
  height: 100%;
}

.contenedor-proceso .seccion-planes .seccion-grupos{ 
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  padding: 16px;
  border-right: 1px solid var(--color-gris-200);
  overflow: auto;
}

.contenedor-proceso .seccion-planes .seccion-grupos .min{ 
  width: 20%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  padding: 16px;
  border-right: 1px solid var(--color-gris-200);
}

.contenedor-proceso .seccion-planes .seccion-grupos .item-lista{
  padding: 8px 24px;
  width: 100%;
  text-align: left;

}

.contenedor-proceso .seccion-planes .seccion-grupos .item-lista.clase{
  align-items: center;
  gap: 4px;
}

.contenedor-proceso .seccion-planes .seccion-grupos .item-lista:hover,
.contenedor-proceso .seccion-planes .seccion-grupos .item-lista.active{
  background: var(--color-azul-50);
}


.contenedor-proceso .seccion-planes .seccion-opciones{
  width: 80%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.contenedor-proceso .seccion-planes .seccion-opciones .contenedor-titulo{
  display: flex;
  justify-content: space-between;
  align-items: bottom;
  text-align: left;
  width: 100%;
  flex-direction: column;
}

.contenedor-proceso .seccion-planes .seccion-opciones .contenedor-titulo .row-filtros{
  display: flex;
  justify-content: start;
  align-items: end;
  width: 100%;
  gap: 16px;
}

.contenedor-proceso .seccion-planes .seccion-opciones .contenedor-titulo .row-filtros .columna-filtro{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 4px;
  flex-direction: column;
}

.contenedor-proceso .seccion-planes .seccion-opciones .contenedor-titulo .row-filtros .columna-filtro.botones{
  flex-direction: row;
  gap: 8px;
}


.contenedor-proceso .seccion-planes .seccion-opciones .filtro-numero-clases{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35%;
  gap: 8px;
}

.contenedor-proceso .seccion-planes .seccion-opciones .filtro-numero-clases label{
  width: 60%;
}


.contenedor-proceso .seccion-filtros{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-gris-50);
  border-bottom: 1px solid var(--color-gris-200 );
  padding-block: 12px;
}

.contenedor-proceso .seccion-filtros .contenedor-filtros{
  display: flex;
  justify-content: center;
  align-items: end;
  width: 75%;
  gap: 16px;
  padding-block: 12px;
}

.contenedor-proceso .seccion-filtros .contenedor-filtros .columna-horas{
  width: 33%;
}

.contenedor-proceso .seccion-filtros .contenedor-filtros .columna-acciones{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}


.contenedor-proceso .seccion-filtros .contenedor-filtros .row-filtro.max{
  max-width: 250px;
}

.contenedor-proceso .seccion-filtros .contenedor-filtros .row-filtro.max-lg{
  max-width: 310px;
}

.contenedor-proceso .seccion-filtros .contenedor-filtros .row-filtro.min{
  max-width: 120px;
}


.contenedor-proceso .proceso .seccion-horarios{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  gap: 16px;
  height: 100%;
}


.contenedor-proceso .proceso .seccion-horarios .seccion-principal{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 70%;
}

.contenedor-proceso .proceso .seccion-horarios .seccion-lateral{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  width: 30%;
  padding: 16px;
  border: 1px solid var(--color-azul-200);
  border-radius: 4px;
  height: 100%;
}

.contenedor-proceso .proceso .seccion-horarios .seccion-lateral .row-titulo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 13px;
}


.contenedor-proceso-full .seccion-contenido .contenedor-proceso .seccion-resumen{
  width: 100%;
}


.contenedor-proceso .proceso .seccion-resumen .resumen-plan{
  width: 100%;
}

.contenedor-proceso .proceso .seccion-resumen .resumen-plan .seccion-plan{
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-gris-200);
  margin-bottom: 24px;
}

.card-plan{
  padding: 35px 40px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  border-radius: 2px;
  border: 1px solid var(--color-gris-200);
  gap:12px;
}

.card-plan.verde{
  background: var(--color-verde-50);
  border: 1px solid var(--color-verde-200);
}


.card-plan .seccion-titulo{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.card-plan .seccion-titulo i{
  font-size: 25px;
}

.card-plan .seccion-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  justify-content: start;
  align-items: start;
}

.card-plan .seccion-info .row-info{
  display: flex;
  gap: 12px;
  justify-content: start;
  align-content: start;
  width: 100%;
}

.card-plan .seccion-info .row-info span.titulo-info{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-700);
  width: 60%;
}

.card-plan .seccion-info .row-info p.label-info{
  font: var(--fuente-body-regular);
  color: var(--color-gris-900);
  width: 40%;
}

.contenedor-proceso .proceso .seccion-recalculo{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 100%;
  gap: 12px;
}

.contenedor-proceso .proceso .seccion-recalculo .row-tablas{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: start;
  gap: 40px;
  text-align: left;
  margin-bottom: 32px;
}

.contenedor-proceso .proceso .seccion-recalculo .row-tablas .contenedor-tabla{
  display: flex;
  flex-direction: column;
  width: 40%;
  justify-content: start;
  align-items: start;
  gap: 12px;
}


.contenedor-proceso-full .seccion-contenido .contenedor-proceso .seccion-ajustes{
  width: 100%;
}


.row-ajustes{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.row-ajustes .item-ajuste {
  display: flex;
  justify-content: space-between;
  width: 70%;
  padding: 20px 24px;
  border: 1px solid var(--color-gris-200);
  border-radius: 8px;
  text-align: left;
}

.row-ajustes .item-ajuste.totales{
  background: var(--color-gris-50);
}

.row-ajustes .item-ajuste.titulo{
  padding: 2px 24px;
  border: none;
  font: var(--fuente-body2-semibold);
}

.row-ajustes .item-ajuste .titulo{
  width: 50%;
}

.row-ajustes .item-ajuste .status{
  width: 15%;
}
.row-ajustes .item-ajuste .total{
  width: 20%;
  text-align: right;
}


.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-falta{
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-falta .input-column{
  justify-content: center;
  align-items: center;
}

.contenedor-proceso-full .seccion-contenido .contenedor-proceso .proceso .row-falta .input-column label{
  width: 40%;
}


.item-clase-falta{
  display: flex;
  width: 70%;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid var(--color-gris-200);
  text-align: left;
  margin-bottom: 12px;
}

.item-clase-falta .item-info{
  display: flex;
  width: 70%;
  flex-direction: column;
}

.item-clase-falta .item-info span.titulo{
  font: var(--fuente-body-semibold);
}

.contenedor-resumen-faltas {
  width: 88%;
}


.card-datos-falta{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: start;
}

.card-datos-falta .seccion-datos{
  width: 20%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  text-align: left;
  gap: 15px;
  padding: 20px;
  height: 100%;
  flex-grow: 1;
}

.card-datos-falta .seccion-datos .row-dato{
  width: 100%;
}

.card-datos-falta .seccion-datos .row-dato p.titulo{
  font: var(--fuente-body-semibold)
}

.card-datos-falta .seccion-clases{
  width: 77%;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-inline: 10px;
  border-left: 1px solid var(--color-gris-200 );
  min-height: 150px;
}

.seccion-clases.center{
  justify-content: center;
}

.card-datos-falta .seccion-clases .item-clase-falta{
  width: 100%;
}


.seccion-justificar-falta{
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: start;
  flex-flow: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-gris-300);
  border-radius: 4px;
}

.seccion-justificar-falta.full{
  flex-grow: 1;
  height: 100%;
}


.seccion-justificar-falta .row-elemento{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2px;
}

.seccion-justificar-falta .columna-elemento{
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 2px;
}

.seccion-justificar-falta .row-elemento .titulo,
.seccion-justificar-falta .columna-elemento .titulo{
  width: 35%;
  font: var(--fuente-body-semibold);
}

.seccion-justificar-falta .footer{
  display: flex;
  flex-direction: revert;
  justify-content: end;
  align-items: end;
  width: 100%;
  flex-grow: 1;
}


.contenedor-item-archivo{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-gris-100);
  border-radius: 4px;
  background: var(--color-gris-50);
}

.contenedor-item-archivo .contenedor-titulo{
  width: 90%;
  display: flex;
  gap: 4px;
  justify-content: start;
  align-items: center;
}

.contenedor-item-archivo .contenedor-titulo span.label-peso-archivo{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-700)
}

/*****************************************************************/
/************************* EVALUACIONES *************************/
/***************************************************************/
.titulo-nivel-evaluacion{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding-block: 12px;
  font: var(--fuente-body-semibold);
}


.row-preguntas{
  display: flex;
  justify-content: center;
  align-items: start;
  width: 70%;
  flex-direction: column;
  margin-block: 12px;
}

.row-preguntas .seccion-pregunta{
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding-block: 12px;
  gap: 16px;
}

.row-preguntas .seccion-pregunta .col-index{
  display: flex;
  width: 8%;
  height: 100%;
  justify-content: center;
  align-items: start;
}

.row-preguntas .seccion-pregunta .col-reactivo{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 92%;
}

.row-preguntas .seccion-pregunta .col-reactivo .contenedor-pregunta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.row-preguntas .seccion-pregunta .col-reactivo .contenedor-pregunta p{
  font: var(--fuente-body-semibold);
}

.row-preguntas .seccion-pregunta .col-reactivo .contenedor-pregunta .contenedor-respuestas{
  display: flex;
  gap: 8px;
  width: 25%;
  justify-content: end;
  align-items: center;
}

.row-preguntas .seccion-pregunta .col-reactivo .contenedor-comentario{
  text-align: left;
}

.contenedor-clase-vacaciones{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  background: var(--color-gris-50);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  gap: 15px;
}


.contenedor-clase-vacaciones .seccion-info{
  width: 28%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 3px;
}

.contenedor-clases-vacaciones{
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: start;
  text-align: left;
}

.contenedor-sin-clases{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 100%;
  height: 100%;
}


.contenedor-clases-vacaciones .seccion-clases{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.contenedor-clases-vacaciones .seccion-clases .row-clase{
  display: flex;
  justify-content: start;
  align-content: start;
  gap: 20px;
  padding: 18px 16px;
  border: 1px solid var(--color-gris-200);
  background: var(--color-gris-50);
  border-radius: 4px;
  margin-block: 7px;
}

.contenedor-clases-vacaciones .seccion-clases .row-clase.titulo{
  padding: 0px 16px !important;
  font-size: var(--fuente-body-medium);
  border: none !important;
  background: none !important;
}

.contenedor-clases-vacaciones .seccion-clases .row-clase .col-info{
  width: 25%;
  display: flex;
  gap:8px;
  justify-content: start;
  align-items: center;
}

.contenedor-clases-vacaciones .seccion-clases .row-clase.titulo .col-info{
  font: var(--fuente-body-semibold);
}

.card-resumen-vacaciones{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--color-gris-200);
  border-radius: 8px;
  margin-block: 16px;
  gap: 20px;

}

.card-resumen-vacaciones .row-info{
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  gap: 11px;
}

.card-resumen-vacaciones .row-info .seccion-dato{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

.card-resumen-vacaciones .row-info .seccion-dato .titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-600);
}

.card-resumen-vacaciones .row-info .label-signo{
  font-size: 24px;
}

.gestor-evaluaciones .tab-resultados .padres-hijos-row {
  align-items: start;
}

.gestor-evaluaciones .tab-resultados .contenedor-padres-hijos .padres-hijos-card {
  width: 40%;
}

.gestor-evaluaciones .tab-resultados .contenedor-padres-hijos .padres-hijos-card-extend {
  width: 60%;
}

/*****************************************************************/
/*************************** CANCELAR SUSCRIPCION ****************/
/*****************************************************************/
.row-clase,
.row-cargo{
  width: 100%;
  gap: 0px;
  padding: 20px 24px;
  border-radius:4px;
  border: 1px solid var(--color-gris-200);
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 8px;
}

.row-clase.titulos,
.row-cargo.titulos{
  padding: 5px 24px;
  border: none;
}

.row-cargo.totales{
  background: var(--color-gris-50);
}

.row-cargo .seccion-descripcion{
  width: 50%;
  text-align: left;
}

.row-cargo .seccion-status{
  text-align: left;
  width: 25%;
}

.row-cargo .seccion-total{
  text-align: right;
  width: 25%;
}


.row-clase .seccion-horario{
  width: 25%;
  text-align: left;
}
.row-clase .seccion-grupo{
  width: 30%;
  text-align: left;
}
.row-clase .seccion-asistencia{
  width: 25%;
  text-align: left;
}
.row-clase .seccion-costo{
  width: 20%;
  text-align: right;
}

/*****************************************************************/
/**************************** CLASES *****************************/
/*****************************************************************/
.control-acceso {
  height: 100%;
  overflow-y: auto;
}
.control-acceso .titulo {
  font: var(--fuente-body-semibold);
  color: var(--gris-900);
}
.control-acceso .subtitulo {
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600);
}
.control-acceso-col-clases {
  flex: 1;
  height: 100%;
  padding: 20px;
}
.control-acceso-col-clases .lista {
  height: calc(100% - 34px);
  overflow: auto;
}
.control-acceso-col-clases .lista .item-clase {
    cursor: pointer;
    padding-inline: 8px;
    padding-block: 10px;
    display: flex;
    gap: 12px;
    text-align: left;
    align-items: end;
}
.control-acceso-col-clases .lista .item-clase > div {
  flex: 1;
}
.control-acceso-col-clases .lista .item-clase .col-horario {
  max-width: 100px;
}
.control-acceso-col-clases .lista .item-clase .col-nivel {
  max-width: 80px;
}
.control-acceso-col-clases .lista .item-clase:hover {
  background: #E1F5FE;
}
.control-acceso-col-clases .lista .item-clase.active {
  background: #E1F5FE;
}

/************************ COLUMNA ALUMNOS ************************/
.control-acceso-col-alumnos {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.control-acceso-col-alumnos.col-padding {
  padding: 16px;
}

/* TITULO CLASE */
.control-acceso-col-alumnos .contenedor-titulo-clase {
  width: 100%;
  padding: 16px;
  border-bottom: 1px solid var(--color-gris-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-acceso-col-alumnos .contenedor-titulo-clase .seccion-titulo{
  display: flex;
  justify-content: center;
  align-items: start;
  width: 50%;
  flex-direction: column;
}

.control-acceso-col-alumnos .contenedor-titulo-clase .seccion-curso{
  display: flex;
  justify-content: center;
  align-items: start;
  width: 50%;
  flex-direction: column;
}

.control-acceso-col-alumnos .contenedor-titulo-clase .grupo-clase {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-gris-900);
  margin-bottom: 4px;
}

.control-acceso-col-alumnos .contenedor-titulo-clase .horario-clase {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

/* BODY CLASE */
.control-acceso-col-alumnos .contenedor-body-clase {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.control-acceso-col-alumnos .contenedor-body-clase .row-filtros {
  display: flex;
  gap: 16px;
}
.control-acceso-col-alumnos .contenedor-body-clase .row-filtros .row-column-input {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.control-acceso-col-alumnos .contenedor-body-clase .row-filtros .row-column-input .titulo-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.control-acceso-col-alumnos .contenedor-body-clase .row-filtros .row-column-input .subtitulo-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--color-gris-600);
  margin-bottom: 2px;
}

.control-acceso-col-alumnos .contenedor-body-clase h4 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

/* LISTA ALUMNOS */
.control-acceso-col-alumnos .lista {
  flex: 1;
  overflow: auto;
}
.control-acceso-col-alumnos .lista .item-clase-agrupada {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.control-acceso-col-alumnos .lista .item-clase-agrupada:not(:first-child) {
  margin-top: 16px;
}
.control-acceso-col-alumnos .lista .item-clase {
  padding: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 0.8px solid var(--color-gris-200);
}
.control-acceso-col-alumnos .lista .item-clase > div:not(.col-marcar-asistencia) {
  flex: 1;
}
.control-acceso-col-alumnos .lista .item-clase .nombre-alumno {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.control-acceso-col-alumnos .lista .item-clase .row-badges {
  display: flex;
  gap: 8px;
}

.control-acceso-col-alumnos .lista .item-clase .col-marcar-asistencia {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.control-acceso-col-alumnos .lista .item-clase .col-marcar-asistencia i.verde {
  color: var(--color-verde-800);
}
.control-acceso-col-alumnos .lista .item-clase .col-marcar-asistencia i.rojo {
  color: var(--color-rojo-800);
}

.control-acceso-col-alumnos .lista .item-clase .badge-reagendado{
  width: 100px;
  margin-top: 5px;
}

/* FOOTER */
.control-acceso-col-alumnos .col-footer-clase {
  padding-inline: 16px;
  padding-block: 24px;
  border-top: 1px solid var(--color-gris-200);
}

.control-acceso-col-alumnos button {
  height: fit-content;
  width: fit-content;
  padding-block: 8px;
  padding-inline: 12px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}
.control-acceso-col-alumnos .col-footer-clase > button {
  width: fit-content;
  height: fit-content;
  padding-inline: 12px;
  padding-block: 8px;
  font-size: 12px;
  line-height: 12px;
  margin-left: auto;
}

/* FILTROS EN GESTOR */
.row-filtros-control-alumnos {
  margin-top: 8px;
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.row-filtros-control-alumnos > .input-row {
  flex-basis: 25%;
  max-width: calc(25% - 16px);
}

.row-filtros-control-alumnos > .input-row.botones-filtros {
  flex-basis: 25%;
  max-width: calc(25% - 16px);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px 16px;
  justify-content: end;
  margin-left: auto;
}

.row-filtros-control-alumnos .boton-aceptar {
  width: 120px;
  height: 40px;
  border-radius: 4px;
}

.row-filtros-control-alumnos .input-row .input-doble{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/******************************************************************/
/***************************** VENTAS ****************************/
/*****************************************************************/
.contenedor-proceso-full .contenedor-alta-venta{
  max-width: 1350px;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.contenedor-proceso-full .contenedor-alta-venta.operacion-caja{
  max-width: 1000px;
}

.contenedor-proceso-full .contenedor-alta-venta .col{ 
  display:flex;
  justify-content: start;
  align-items: start;
  gap: 16px;
  border-right: 1px solid var(--color-gris-200);
  height: 100%;
  flex-direction: column;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info{
  width: 25%;
} 

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta{
  padding: 16px;
  justify-content: start;
  align-items: start;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-caja{
  width: 40%;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-caja-gastos{
  width: 32%;
}


.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-configuracion{
  padding: 16px;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid var(--color-gris-200);
} 

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  gap: 16px;
  max-height: calc(100vh - 320px);
  overflow: auto;
  flex-direction: column;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .row-titulo-cargos{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-inline: 16px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos .contenedor-cargos{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  max-height: calc(100vh - 430px);
  overflow: auto;
  flex-direction: column;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos .contenedor-cargo{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid var(--color-gris-200);
  padding:16px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos .contenedor-cargo:hover{
  background: var(--color-azul-50);
  cursor: pointer;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos .contenedor-cargo .seccion-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos .contenedor-cargo.no-border{
  border: none;
}


.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-cargos .contenedor-cargo .seccion-info .label-folio{
  font: var(--fuente-body-semibold);
}


.contenedor-proceso-full .contenedor-alta-venta .col.resumen{
  width: 58%;
  gap: 0px;
}


.contenedor-proceso-full .contenedor-alta-venta .col.resumen.operacion-caja{
  width: 70%;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta .seccion-resumen{
  display: flex;
  justify-content: start;
  align-content: start;
  width: 100%;
  flex-grow: 1;
  flex-direction: column;
  gap: 16px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta .seccion-resumen.detalle{
  gap: 8px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta .seccion-resumen .row-info-resumen{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta .seccion-resumen .row-info-resumen.column{
  flex-direction: column;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta .seccion-resumen .row-info-resumen.column.detalle{
  justify-content: start;
  align-items: start;
  align-content: start;
  gap: 5px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info.resumen-venta .seccion-resumen .row-info-resumen p{
  font: var(--fuente-h3-regular);
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-acciones{
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  gap: 16px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-acciones.padding{
  padding-inline: 16px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-acciones .row-botones{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.info .seccion-acciones .row-botones.botones-flex-start{
  justify-content: flex-start;
}


.boton-caja{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 16px 12px;
  gap: 8px;
  background: var(--color-primario);
  color: var(--color-blanco);
  font: var(--fuente-h2-semibold);
  cursor: pointer;
}

.row-botones.botones-flex-start .boton-caja{
  width: calc(50% - 8px);
}

.boton-caja span{
  color: var(--color-blanco);
}

.boton-caja i{
  color: var(--color-blanco);
  font-size: 20px;
}


.boton-caja:disabled{
  background: var(--color-azul-200);
}

.boton-caja:disabled span{
  color: var(--color-blanco);
}

.boton-caja:disabled i{
  color: var(--color-blanco);
  font-size: 20px;
}




.boton-caja.secundario{
  background: var(--color-gris-200);
  color: var(--color-gris-800);
  font: var(--fuente-h2-semibold);
}

.boton-caja.secundario span{
  color: var(--color-gris-800);
}

.boton-caja.secundario i{
  color: var(--color-gris-800);
  font-size: 20px;
}

.boton-caja.secundario:disabled{
  background: var(--color-gris-100) !important;
}
.boton-caja.secundario:disabled span,
.boton-caja.secundario:disabled i{
  color: var(--color-gris-500);
}

.boton-caja.eliminar{
  background: var(--color-rojo-600);
  color: var(--color-blanco);
  font: var(--fuente-h2-semibold);
}

.boton-caja.eliminar span{
  color: var(--color-blanco);
}

.boton-caja.eliminar i{
  color: var(--color-blanco);
  font-size: 20px;
}

.boton-caja.eliminar:disabled{
  background: var(--color-rojo-100) !important;
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-busqueda{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  width: 100%;
  background: var(--color-gris-300);
  border-bottom: 1px solid var(--color-gris-300);
}


.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  max-height: calc(100vh - 170px);
  overflow: auto;
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--color-gris-200);
  padding: 14px 32px;
  cursor: pointer;
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle:hover{
  background: var(--color-azul-50);
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle.active{
  background: var(--color-azul-50);
}


.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle .info-cargo{
  display: flex;
  gap: 8px;
  justify-content: start;
  align-items: center;
}


.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle .contenedor-precio{
  text-align: right;
  display: flex;
  width: 50%;
  justify-content: end;
  gap: 18px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle .contenedor-titulo{
  gap: 4px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle .badge-cupon{
  padding: 2px 8px;
  background: var(--color-verde-100);
  border-radius: 8px;
  color: var(--color-verde-800);
  font: var(--fuente-body2-semibold);
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle .seccion-descuento{
  display: flex;
  justify-content: start;
  align-items: start;
  padding-top: 5px;
  gap: 8px;
}

.contenedor-proceso-full .contenedor-alta-venta .col.resumen .seccion-detalles .contenedor-detalle .seccion-descuento .label-descuento{
  font: var(--fuente-h3-semibold);
  color: var(--color-rojo-600);
}




.contenedor-inicio-operacion{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-gris-100);
}


.contenedor-inicio-operacion .card-inicio-operacion{
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-direction: column;
  border: 1px solid var(--color-gris-300);
  border-radius: 8px;
  width: 350px;
  background: var(--color-blanco);
}


.seccion-cupon{
  padding-block: 14px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-gris-100);
  border-radius: 4px;
}

.seccion-cupon .row-cupon{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.seccion-cupon .row-cupon input{
  width: 140px;
}

.seccion-cupon .row-cupon i{
  font-size: 16px;
}

.seccion-modal-factura{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 8px;
}

.seccion-modal-factura.entrega{
  margin-top: 15px;
}

.contenedor-pagos-venta .seccion-ventas{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px 32px;
  border-bottom: 1px solid var(--color-gris-200);
}

.contenedor-pagos-venta .seccion-ventas .contenedor-info{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 8px;
  flex-direction: column;
}


.contenedor-pagos-venta .seccion-ventas .contenedor-info.total{
  align-items: end;
}

.contenedor-pagos-venta .seccion-pagos{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  width: 100%;
}


.contenedor-pagos-venta .seccion-pagos .seccion-metodos{
  display: flex;
  justify-content: start;
  align-items: start; 
  padding: 16px 32px;
  border-radius: 4px;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}

.contenedor-pagos-venta .seccion-pagos .seccion-metodos.efectivo{
  background: var(--color-azul-100);
}

.contenedor-pagos-venta .seccion-pagos .seccion-metodos.tarjetas{
  background: var(--color-gris-200);
} 

.contenedor-pagos-venta .seccion-pagos .seccion-metodos .row-metodo-pago{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.contenedor-pagos-venta .seccion-pagos .seccion-metodos .row-metodo-pago .label-titulo{
  font: var(--fuente-body-semibold);
  color: var(--color-gris-600);
}

.contenedor-pagos-venta .seccion-pagos .seccion-metodos .row-metodo-pago .col-label{
  width: 120px;
}

.contenedor-pagos-venta .seccion-pagos .seccion-metodos .row-metodo-pago .col-input{
  width: 150px;
}

.contenedor-pagado{
  width: 100%;
  background: var(--color-gris-100);
  border: 1px solid var(--color-gris-300);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  font: var(--fuente-h1-medium);
}

.contenedor-pagado i{
  font: var(--fuente-h1-medium);
}



td.detalle-producto .seccion-info{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  align-items: start;
}

td.detalle-producto .seccion-info p.titulo{
  font: var(--fuente-body-semibold);
}
.seccion-cupon-detalle{
  margin-top: 8px;
  width: 40%;
  text-align: left;
}


/*****************************************************************/
/**************************** GRUPOS *****************************/
/*****************************************************************/

.gestor-grupos .tab-resumen-por-profesor {
  display: flex;
  row-gap: 24px;
  column-gap: 16px;
  flex-wrap: wrap;
}
.gestor-grupos .tab-resumen-por-profesor .card-basica {
  width: 344px;
  padding-bottom: 16px;
}
.gestor-grupos .tab-resumen-por-profesor .card-basica .contenedor-encabezado {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.gestor-grupos .tab-resumen-por-profesor .card-basica .contenedor-encabezado .foto-perfil {
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-gris-200);
}
.gestor-grupos .tab-resumen-por-profesor .card-basica .contenedor-contenido {
  padding-top: 16px;
  gap: 6px;
}

.gestor-grupos .tab-resumen-por-profesor .card-basica .contenedor-contenido .label {
  font: var(--fuente-body2-semibold);
  color: var(--color-gris-600);
  margin-bottom: 2px;
}

.gestor-grupos .tab-resumen-por-profesor .card-basica .contenedor-contenido .item-row {
  display: grid;
  grid-template-columns: calc(60% - 8px) calc(20% - 8px) calc(20%);
  gap: 8px;
  font: var(--fuente-body2-regular);
}
.gestor-grupos .tab-resumen-por-profesor .card-basica .contenedor-contenido .item-row .total {
  font: var(--fuente-body2-medium);
}
.gestor-grupos .tab-visor .encabezado {
  width: 100%;
  height: 64px;
  border-top: solid 1px var(--color-gris-200);
  background-color: var(--color-gris-50);
  justify-content: center;
}
.gestor-grupos .tab-visor form {
  width: 50%!important;
}

.gestor-grupos .tab-visor.profesor form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gestor-grupos .tab-visor.profesor form .select-principal {
  width: 100%;
  max-width: 300px;
}

.gestor-grupos .tab-visor .select-principal .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
  background: var(--color-gris-50);
}
.gestor-grupos .tab-visor .select-principal .e-ddl.e-input-group{
  border: none!important;
  text-align: center;
}
.gestor-grupos .tab-visor .select-principal input{
  text-align: center;
}
.gestor-grupos .tab-visor .select-principal .e-ddl.e-input-group.e-control-wrapper.e-input-focus {
  outline: none!important;
}
.gestor-grupos .tab-visor .select-principal .e-ddl.e-input-group.e-control-wrapper .e-input {
  font: var(--fuente-h3-semibold);
  color: var(--color-gris-900);
  background: var(--color-gris-50);
}
.gestor-grupos .tab-visor .e-schedule{
  border-left: none!important;
  border-right: none!important;
}
.gestor-grupos .tab-visor .e-schedule-table .e-date-header-container,
.gestor-grupos .tab-visor .e-schedule-table .e-left-indent td,
.gestor-grupos .tab-visor .e-schedule-table .e-header-row td {
  height: 48px;
  background-color: var(--color-gris-50);
  text-align: center;
  font: var(--fuente-body-semibold);
  border-left: none;
  border-right: none;
}
.gestor-grupos .tab-visor .e-schedule-table .e-date-header-container .e-date-header-wrap {
  border-right: none;
  border-bottom: 1px solid var(--color-gris-200);
}
.e-schedule .e-vertical-view .e-time-cells-wrap .e-time-cells {
  font: var(--fuente-body-semibold);
  max-width: 50px;
  width: 50px;
}
.e-schedule .e-vertical-view .e-work-cells {
  border-right: none!important;
  border-left: none!important;
}
.gestor-grupos .modal .modal-card {
  margin: auto;
}
.gestor-grupos .modal .modal-card .modal-body {
  padding-bottom: 24px;
}
.gestor-grupos .tab-visor.tab-por-dia .encabezado {
  justify-content: space-between;
  padding-block: 0;
}
.gestor-grupos .tab-visor.tab-por-dia form {
  width: 100%!important;
  display: grid;
  justify-content: center;
  grid-template-columns: calc(25%) calc(65%);
  padding: 0;
  align-items: center;
}

.gestor-grupos .tab-visor.tab-por-dia form .select-principal {
  width: 40%;
}

.gestor-grupos .tab-visor.tab-por-dia .filtros {
  display: flex;
  justify-content: end;
  gap: 8px;
  align-items: end;
}

.gestor-grupos .tab-visor.tab-por-dia .filtros .input-row{
  max-width: 250px;
}

.gestor-grupos .tab-visor.tab-por-dia .filtros .input-row.limpiar{
  max-width: 100px;
}

.contenedor-cierre-operacion{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  gap: 20px;
}

.contenedor-cierre-operacion .seccion-resumen{
  width: 50%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--color-gris-200);
  padding-right: 20px;
}

.contenedor-cierre-operacion .seccion-datos{
  width: 47%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 16px;
}

.contenedor-cierre-operacion .seccion-datos .row-input-monto{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  width: 100%;
}


.contenedor-cierre-operacion .seccion-datos .row-input-monto .seccion-label{
  width: 50%;
  text-align: right;
}


.col.resumen.operacion-caja{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.col.resumen.operacion-caja .contenido-tab-operacion{
  width: 100%;
  justify-content: start;
  align-items: start;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
}

.col.resumen.operacion-caja .contenido-tab-operacion .seccion-tablas{
  justify-content: space-between;
  width: 100%;
  display: flex;
  gap: 40px;
}

.col.resumen.operacion-caja .contenido-tab-operacion .seccion-tablas.seccion-tablas-overflow{
  overflow: auto;
}

.col.resumen.operacion-caja .contenido-tab-operacion .seccion-tabs-operacion{
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  gap: 8px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.incremento{
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
  margin-top: 28px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.incremento h1{
  margin-bottom: 28px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.incremento .seccion-incremento{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 39%;
  flex-direction: column;
  margin-bottom: 20px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.gasto{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 8px;
  margin-top: 28px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.gasto h1{ 
  margin-bottom: 28px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.gasto .seccion-alta-gasto{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  flex-direction: column;
  gap: 8px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.gasto .seccion-alta-gasto .row-acciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.contendido-tab-overflow {
  overflow: auto;
}

.contenedor-resumen-montos{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 16px;
}

.card-monto{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
}

.card-monto.gris{
  background: var(--color-gris-50);
  border: 1px solid var(--color-gris-200);
}

.card-monto.verde{
  background: var(--color-verde-50);
  border: 1px solid var(--color-verde-200);
}

.card-monto.rojo{
  background: var(--color-rojo-50);
  border: 1px solid var(--color-rojo-200);
}


.col.resumen.operacion-caja .contenido-tab-operacion.incremento .seccion-corte{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 70%;
  flex-direction: column;
  margin-bottom: 20px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.incremento .seccion-corte .row-input-corte{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.incremento .seccion-corte .row-input-corte .seccion-label{
  width: 50%;
}

.col.resumen.operacion-caja .contenido-tab-operacion.incremento .seccion-acciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}
.col.resumen.operacion-caja .contenido-tab-operacion.incremento .seccion-corte .contenedor-total{
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre.resumen{
  width: 100%;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre .row-resumen{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre .row-resumen.acciones{
  width: 80%;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre .row-comentario{
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 4px;
  flex-direction: column;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre .row-resumen .contenedor-total{
  text-align: right;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre.resumen .seccion-resumen-operacion{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 24px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre.resumen .seccion-tabla-resumen{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 24px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre .seccion-dispersion-montos{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  gap: 16px;
  margin-top: 24px;
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre  .seccion-dispersion-montos h1{
  margin-bottom: 24px
}

.col.resumen.operacion-caja .contenido-tab-operacion.cierre .step-cierre .row-resumen.acciones{
  margin-top: 24px;
}


.seccion-resumen-cambio-responsable{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seccion-resumen-cambio-responsable .contenedor-responsable{
  width: 40%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 4px;
}

.seccion-resumen-cambio-responsable .item-responsable{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 20px 10px;
  border-radius: 8px;
}

.seccion-resumen-cambio-responsable .item-responsable.gris{
  background: var(--color-gris-50);
  border: 1px solid var(--color-gris-200);
}

.seccion-resumen-cambio-responsable .item-responsable.verde{
  background: var(--color-verde-50);
  border: 1px solid var(--color-verde-200);
}

.seccion-resumen-cambio-responsable .item-separador{
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.seccion-resumen-cambio-responsable .item-separador i{
  font-size: 20px;
}


.contenedor-aplicar-devolucion{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100%;
  background: var(--color-gris-200);
}


.contenedor-aplicar-devolucion .contenedor-devoluciones{
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 20px;
  padding-block: 40px;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 40%;
  border-radius: 1px solid var(--color-gris-200);
  background: var(--color-blanco);
  padding: 24px;
  height: 500px;
  gap: 8px;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-acciones{
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
  gap: 12px;
  flex-grow: 1;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-titulo{
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-aplicacion{
  height: 90%;
  width: 100%;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-operaciones{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-operaciones .seccion-mensaje-operacion{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  flex-direction: column;
  gap: 16px;
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-operaciones .seccion-mensaje-operacion i{
  font-size: 62px;
  color: var(--color-gris-500);
}

.contenedor-aplicar-devolucion .contenedor-devoluciones .card-contenido .seccion-operaciones .seccion-mensaje-operacion h2{
  color: var(--color-gris-500);
}

.contenedor-alta-gasto{
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.contenedor-proceso-full .contenedor-alta-gasto .col{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 16px;
  border-right: 1px solid var(--color-gris-200);
  height: 100%;
  flex-direction: column;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.info{
  width: 20%;
  padding: 12px 20px;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.info .seccion-acciones{
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
  gap: 8px;
  flex-grow: 1;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.resumen{
  width: 80%;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.resumen.no-gap {
  gap: 0px;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.resumen .seccion-tablas{
  height: calc(100% - 0px);
  overflow: auto;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.resumen .seccion-tablas.seccion-flex-1 {
  flex: 1;
  height: initial;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.resumen .seccion-tablas .tabla-totales{
  width: 100%;
  position: sticky;
  bottom: 0;
  left: 0;
}

.contenedor-proceso-full .contenedor-alta-gasto .col.resumen .seccion-acciones{
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
  gap: 8px;
  padding-inline: 32px;
  padding-block: 24px;
  background-color: var(--color-gris-50);
}

/*********************************************************************/
/************************** DASHBOARDS ******************************/
/*******************************************************************/
.row-filtros-dashboard{
  display: flex;
  justify-content: start;
  align-items: end;
  padding: 10px 21px;
  gap: 16px;
}

.row-filtros-dashboard .filtro{
  max-width: 250px;
}

.row-filtros-dashboard .filtro.mw120 {
  max-width: 120px;
}

.row-filtros-dashboard .seccion-acciones{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
}

.row-filtros-dashboard .seccion-acciones-finales {
  margin-left: auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.contenedor-grid-dashboard{
  height: 100%;
  flex: 1;
  background: var(--color-gris-200);
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.contenedor-grid-dashboard .contenedor-dashboard{
  padding: 20px 20px;
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 24px;
  max-width: 1340px;
}


.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 24px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard{
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
  align-items: center;
  background: var(--color-blanco);
  padding: 25px;
  border-radius: 6px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.totales .seccion-total{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-right: 1px solid var(--color-gris-100);
  width: 20%;
  height: 100%;
  padding-block: 13px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.totales{
  padding: 12px 25px;
}


.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.totales .seccion-total:last-child{
  border-right: none;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.totales .seccion-total h1{
  font-size: 24px;
  line-height: 44px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  width: 100%;
  max-height: 340px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard.no-gap{
  gap: 0px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica{
  flex-direction: column;
  justify-content: start !important;
  align-items: start !important;
  flex-grow: 1;
  width: 50%;
  height: 340px;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica.full {
  width: 100%;
}


.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica .contenedor-grafica{
  width: 100%;
  height: 100%;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica .contenedor-grafica .label-sin-registros{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica .contenedor-grafica.tabla{
  overflow: auto;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica .contenedor-grafica.tabla.border {
  border: 1px solid var(--color-gris-100);
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica .contenedor-grafica.tabla.full{
  flex: 1;
  height: initial;
}


.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .card-dashboard.grafica .contenedor-grafica.tabla table.tabla-totales{
  width: 100%;
  position: sticky;
  bottom: 0;
  left: 0;
}


.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .columna-metricas{
  width: 100%;
  border-radius: 0px;
}


.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia{
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  flex-direction: column;
  height: 100%;
  gap: 24px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia .row-totales-asistencia{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 24px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia .row-totales-asistencia .card-totales-asistencia,
.card-totales-ventas{
  display: flex;
  flex-direction: column;
  align-items: start!important;
  width: 50%;
  background: var(--color-blanco);
  border-radius: 8px;
  padding: 24px;
  min-height: 158px;
  justify-content: end;
  gap: 8px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia .row-totales-asistencia .card-totales-asistencia h1,
.card-totales-ventas h1 {
  font-size: 24px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia .row-totales-asistencia .card-totales-asistencia p.titulo,
.card-totales-ventas p.titulo{
  font: var(--fuente-body-regular);
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia .row-totales-asistencia .card-totales-asistencia .badge,
.card-totales-ventas .badge {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--color-azul-50);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .column-dashboard .seccion-totales-asistencia .row-totales-asistencia .card-totales-asistencia .badge i,
.card-totales-ventas .badge i {
  color: var(--color-azul-600);
  font-size: 18px;
}

.contenedor-grid-dashboard .contenedor-dashboard .seccion-acciones {
  padding-top: 16px;
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
  gap: 12px;
  flex-grow: 1;
}

/*****************************************************************/
/********************** DASHBOARD REFACTOR ***********************/
/*****************************************************************/

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard.align-initial {
  align-items: initial;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard.justify-content-start {
  justify-content: flex-start;
}

/**************************** COLUMNA ****************************/
.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard.direccion-column {
  flex-direction: column;
  gap: 12px;
  max-height: unset;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard.w15p{
  width: 16%;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard.w25p{
  width: 25%;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard.w30p{
  width: 30%;
}

.contenedor-grid-dashboard  .contenedor-dashboard .row-dashboard .column-dashboard.w50p{
  width: 50%;
}

/************************** METRIC CARD **************************/
.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.metric-card {
  flex-direction: column;
  justify-content: center;
  min-height: 161px;
  height: 100%;
  position: relative;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.metric-card.no-radius{
  border-radius: 0px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.no-gap,
.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.metric-card.no-gap {
  gap: 0px;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.card-transparente {
  background-color: transparent;
}

.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.alto-fit,
.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.metric-card.alto-fit {
  height: fit-content;
}

/************************** TITULO CARD **************************/
.contenedor-grid-dashboard .contenedor-dashboard .row-dashboard .card-dashboard.no-gap .contenedor-titulo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-dashboard.metric-card .titulo-card-metric {
  width: 100%;
}

.card-dashboard.metric-card .contenedor-grafica {
  margin-bottom: auto;
}

/********************* CONTENEDOR TITULO CARD ********************/
.card-dashboard .contenedor-titulo-card {
  width: 100%;
  display: flex;
  gap: 10px;
}

.card-dashboard .contenedor-titulo-card > div {
  width: 40% !important;
  margin-left: auto !important;
}

/************************* CONTENIDO CARD ************************/
.card-dashboard.metric-card .seccion-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.card-dashboard.metric-card .seccion-total .titulo-totales {
  font-size: 24px;
  line-height: 44px;
}

.card-dashboard.metric-card .seccion-total .subtitulo {
  text-align: center;
}


/******************** CONTENIDO LEYENDAS CHART *******************/
.card-dashboard.metric-card .contendedor-leyendas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda.leyenda-total {
  font-weight: 600;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda .seccion-titulo {
  display: flex;
  gap: 6px;
  align-items: center;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda .color-item {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--color-primario);
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda .titulo-item {
  font-size: 12px;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda.leyenda-total .titulo-item {
  margin-left: 0px;
  margin-top: 4px;
  font-size: 14px;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda .valor-item {
  font-size: 12px;
  margin-left: auto;
}

.card-dashboard.metric-card .contendedor-leyendas .item-leyenda.leyenda-total .valor-item {
  font-size: 14px;
}

.card-dashboard.metric-card .badge {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--color-azul-50);
  display: flex;
  justify-content: center;
  align-items: center;
}

/************************** ICONO INFO ***************************/
.card-dashboard.metric-card .icono-info {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 16px;
  color: var(--color-primario);
  cursor: pointer;
}

.row-detalle .icono-info {
  font-size: 16px;
  color: var(--color-primario);
  cursor: pointer;
}


/*****************************************************************/
/**************************** FACTURAS ***************************/
/*****************************************************************/
.alta-factura .card-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--color-gris-100);
  padding: 6px;
  border-radius: 4px;
  border: 1px solid var(--color-gris-300);
}

.alta-factura .contenedor-alta {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100%;
  gap: 20px;
  background: var(--color-gris-200);
  padding-block: 40px;
}

.alta-factura .contenedor-alta  .card-contenido{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 600px;
  border-radius: 6px;
  background: var(--color-blanco);
  padding: 24px;
  min-height: 550px;
  height: 100%;
  gap: 8px;
  max-height: calc(100vh - 175px);
}

.alta-factura .contenedor-alta  .card-contenido .seccion-acciones{
  display: flex;
  justify-content: end;
  align-items: end;
  width: 100%;
  gap: 12px;
  flex-grow: 1;
}


/*****************************************************************/
/**************************** CURSOS *****************************/
/*****************************************************************/
.contenedor-seleccion-color {
  display: flex;
  gap: 16px;

  width: 100%;
  flex-direction: column;
  align-items: initial;
}

.seleccion-color {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

/* COLOR DE MUESTRA */
.color-muestra {
  width: 260px;
  height: 163px;
  border-radius: 6px;
  border: 1px solid var(--color-azul-500);
  background: var(--color-azul-50);
  display: flex;
  flex-direction: column;
  padding-inline: 16px;
  padding-block: 8px;
  gap: 8px;
  position: relative;
}
.color-muestra.small {
  height: 26px;
  justify-content: center;
}

.color-muestra .primera-linea {
  width: 48px;
  background: var(--color-gris-500);
  height: 6px;
  border-radius: 12px;
  margin-top: 4px;
}

.color-muestra.small .primera-linea {
  width: 48px;
  background: var(--color-gris-700);
  height: 4px;
  border-radius: 12px;
  margin-top: 0px;
}

.color-muestra .segunda-linea {
  width: 172px;
  background: var(--color-gris-700);
  height: 6px;
  border-radius: 12px;
}

.color-muestra .tercera-linea {
  width: 130px;
  background: var(--color-gris-500);
  height: 6px;
  border-radius: 12px;
}

.color-muestra .seccion-alumnos{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 8px;
  right: 16px;
}

.color-muestra .seccion-alumnos i {
  font-size: 12px;
}

h3.titulo-card {
  width: 100%;
}

.columna-seleccion-color {
  display: flex;
  gap: 24px;
}

/* COLOR SELECCIONADO */
.contenedor-color-seleccionado {
  width: fit-content;
  height: 26px;
  padding: 4px;
  border-radius: 2px;
  border: 1px solid var(--color-gris-300);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.contenedor-color-seleccionado input[type="color"] {
  display: none;
}

.contenedor-color-seleccionado .color-seleccion {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 0.8px solid var(--color-gris-300);
}

.contenedor-color-seleccionado i {
  color: #495058;
  font-size: 16px
}

/*****************************************************************/
/*************************** REPORTES ****************************/
/*****************************************************************/

.contenedor-tabla-resumen{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction:column;
  padding-top: 32px;
  text-align: left;
}

.contenedor-tabla-resumen .titulo{
  width: 25%;
  border-bottom: 1px solid #dee1e6;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  min-width: 400px;
}

.contenedor-tabla-resumen table{
  min-width: 400px;
  width: 25%;
}

.contenedor-tabla-resumen table tbody td{
  padding: 4px 8px;
}

.contenedor-tabla-resumen table tbody tr.dark{
  background-color: #f2f2f2;
}

.contenedor-tabla-resumen table tbody tr td.border-top-black{
  border-top: 1px solid black !important;
}

.contenedor-contenido.contenido-reporte .row-filtros{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros.align-end{
  align-items: end;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros .columna-filtro{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 350px;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros .columna-filtro.columna-final {
  margin-left: auto;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros .row-filtro{
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 4px;
  max-width: 350px;
  flex-direction: column;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros .row-filtro.minimo{
  width: 300px;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros .columna-filtro label{
  width: 60%;
}

.contenedor-contenido.contenido-reporte .row-filtros .seccion-filtros .columna-filtro.minimo{
  width: 200px;
}

.reporte-alumnos .row-dashboard {
  justify-content: start!important;
}
.reporte-alumnos .card-dashboard {
  width: 500px!important;
  min-width: 500px!important;
  flex-direction: column;
}

.contenedor-nomina-principal{
  display: flex;
  min-width: 1000px;
  justify-content: start;
  align-items: start;
  padding-block: 16px;
}

.contenedor-nomina-principal .contenedor-header{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

.contenedor-nomina-principal .contenedor-header .row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.contenedor-nomina-principal .contenedor-header  .col-info{
  width: 15%;
}

.contenedor-nomina-principal .contenedor-header  .col-info25{
  width: 25%;
}

.contenedor-nomina-principal .contenedor-header .row.info{
  font: var(--fuente-body2-semibold);
  padding: 0px 20px;
}

.contenedor-nomina-principal .contenedor-header .row.detalle{
  height: 56px;
  padding:24px 20px;
  background: var(--color-gris-50);
  border-radius:8px;
  border: 1px solid var(--color-gris-200);
}

.contenedor-detalle-nomina{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  max-height: calc(100% - 186px);
  overflow:auto;
  min-width: 1000px;
}

.contenedor-detalle-nomina .row-info{
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  padding-inline: 24px;
  padding-bottom: 8px;
  font: var(--fuente-body2-semibold);
}

.contenedor-detalle-nomina .seccion-detalles{
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  max-height: calc(100% - 50px);
  overflow: auto;
  gap: 8px;
  flex-direction: column;
}

.contenedor-detalle-nomina .seccion-detalles .row-detalle{
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-inline: 24px;
  border: 1px solid var(--color-gris-200);
  border-radius: 8px;
  background: var(--color-gris-50);
}


.contenedor-detalle-nomina .seccion-detalles .row-detalle .col,
.contenedor-detalle-nomina .seccion-detalles .row-detalle .col20{
  padding: 12px 0px;
}

.contenedor-detalle-nomina .row-info .col{
  width: 10%;
}

.contenedor-detalle-nomina .row-info .col20{
  width: 20%;
}

.contenedor-detalle-nomina .row-info .col.colaborador{
  width: 150px;
  padding-right: 10px;
}

.contenedor-detalle-nomina .seccion-detalles .row-detalle .col{
  width: 10%;
}


.contenedor-detalle-nomina .seccion-detalles .row-detalle .col20{
  width: 20%;
}

.contenedor-detalle-nomina .seccion-detalles .row-detalle .col.colaborador,
.contenedor-detalle-nomina .seccion-detalles .row-detalle .col20.colaborador{
  border-right: 1px solid var(--color-gris-300);
  display: inline-block;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.contenedor-detalle-nomina .seccion-detalles .col.colaborador span.titulo{
  font: var(--fuente-body-semibold);
}


.seccion-tabla-liquidacion{
  width: 100%;
}

.contenedor-perfil-usuario {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 8px;
  padding-block: 32px;
  background-color: var(--color-gris-50);
  width: 100%;
}
/******************************************************************/
/*************************** CAMBIOS  *****************************/
/******************************************************************/
.contenedor-configurar-cambio{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100%;
  background: var(--color-gris-200);
}


.contenedor-configurar-cambio .contenedor-cambios{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 20px;
  padding-block: 40px;
}


.contenedor-configurar-cambio .contenedor-cambios .card-contenido{
  min-width: 650px;
}

.contenedor-configurar-cambio .contenedor-cambios .row-productos{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.contenedor-configurar-cambio .contenedor-cambios .row-productos .col-producto{
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contenedor-configurar-cambio .contenedor-cambios .row-productos .col-separador i{
  font-size: 24px;
}


.contenedor-configurar-cambio .contenedor-cambios .card-contenido{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 40%;
  border-radius: 1px solid var(--color-gris-200);
  background: var(--color-blanco);
  padding: 24px;
  height: 500px;
  gap: 8px;
}

.contenedor-configurar-cambio .contenedor-cambios .seccion-acciones{
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 8px;
  width: 100%;
  flex-grow: 1;
}






.contenedor-perfil-usuario .contenedor-imagen{
  position: relative;
  height: 80px;
  width: 80px;
}

.contenedor-perfil-usuario .contenedor-informacion{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-direction: column;
}

/*****************************************************************/
/************************* Contenedor token *************************/
/*****************************************************************/

.contenedor-token-telefono{
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.contenedor-token-telefono .input-row.telefono{
  flex: 2;
}

.contenedor-token-telefono .input-row.codigo{
  flex: 1;
}

/*****************************************************************/
/**************************** ALUMNOS ****************************/
/*****************************************************************/
.contenedor-plantillas {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contenedor-plantillas .row-plantilla{
  padding-block: 4px;
  padding-inline: 16px;
  border: 1px solid var(--color-gris-300);
  border-radius: 4px;
}

.row-pregunta {
  width: 100%;
  display: flex;
  gap: 20px;
  padding: 8px;
}

.row-pregunta.clase-detalle {
  gap: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-gris-300);
  border-radius: 0px;
}


.row-pregunta .row-pregunta-titulo {
  display: flex;
  gap: 6px;
}

.row-pregunta .row-pregunta-contenido {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
}

.row-pregunta .row-pregunta-respuesta {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.row-pregunta .row-clase-contenido {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: flex-start;
}

.row-pregunta .row-clase-contenido.contenido-centrado {
  align-items: center;
}

.row-pregunta .w5p {
  width: 5%;
}

.row-pregunta .w20p {
  width: 20%;
}

.row-pregunta .w25p {
  width: 25%;
}

.row-pregunta .w30p {
  width: 30%;
}

.row-pregunta .w35p {
  width: 35%;
}

.row-pregunta .w60p {
  width: 60%;
}

.row-pregunta .row-clase-contenido .descripcion {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gris-600);
}

.row-pregunta .row-clase-contenido .parrafo {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gris-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.row-pregunta .row-clase-contenido a {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-azul-800);
}

/*****************************************************************/
/************************* COLABORADORES *************************/
/*****************************************************************/
.contenido-cards {
  position: relative;
}

.contenedor-inscripcion-cards {
  flex: 1;
  position: relative;
  padding: 16px;
  background-color: var(--color-gris-100);
  overflow: auto;
}

.contenedor-inscripcion-cards form {
  gap: 16px;
}

.contenedor-inscripcion-cards form.gap-40 {
  gap: 40px;
}

.contenedor-inscripcion-cards form .seccion-input.select,
.contenedor-inscripcion-cards form label:not(.checkbox-container) {
  color: var(--color-gris-600);
  font-size: 12px;
  display: block;
}

.contenedor-inscripcion-cards form .input-column .input-medio {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contenedor-inscripcion-cards form .input-container-telefono input {
  border-radius: 0 4px 4px 0;
}

.contenedor-inscripcion-cards form .input-container-telefono .input-telefono__prefijo {
  border-radius: 4px 0 0 4px;
}

.contenedor-inscripcion-cards .card-seccion-registro {
  background-color: var(--color-blanco);
  max-width: 739px;
  margin: 0 auto;
}

.contenedor-inscripcion-cards .card-seccion-registro.permisos {
  gap: 0px;
}

/************************* SECCION FOOTER ************************/
.contenido-cards .seccion-footer {
  position: sticky;
  bottom: 0px;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-200);

  width: 100%;
  padding-inline: 32px;
  padding-block: 24px;
}

.contenido-cards .seccion-footer.footer-en-card {
  border: 0px;
  position: initial;
  padding: 0px;
}

.contenido-cards .seccion-footer .contenedor-menu {
  position: relative;
}

.contenido-cards .seccion-footer .contenedor-menu .dropdown-menu-colaborador{
  position: absolute;
  background-color: var(--color-blanco);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 4px;
  width: 180px;
  height: 87px;
  margin-top: 0px;
  padding: 12px 10px;
  bottom: 32px;
  right: 0px;
}

/*****************************************************************/
/**************************** NIVELES ****************************/
/*****************************************************************/
.mensaje-config-niveles {
  font-size: 12px;
  width: 400;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mensaje-config-niveles i {
  font-size: 16px;
  color: #495058;
}

.contenedor-mensaje-config-niveles {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-gris-100);
  border-radius: 6px;
  padding: 16px;
}

/*****************************************************************/
/********************** MODAL AGREGA FALTA ***********************/
/*****************************************************************/

/********************** MODAL AGREGAR FALTA **********************/

.modal .modal-card .modal-body.modal-agregar-falta {
  padding: 0px;
  gap: 0px;
  display: flex;
  flex-direction: row;
  height: 500px;
  overflow-y: initial;
}

.modal .modal-card .modal-body.modal-agregar-falta.md{
  height: 450px;
}

/****************** COLUMNA BUSCAR COLABORADOR *******************/
.col-buscar-colaborador {
  width: 300px;
  padding-block: 16px;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--color-gris-200);
}

.col-buscar-colaborador.no-padding {
  padding: 0px;
  gap: 0px;
}

.modal .modal-card .modal-body.modal-agregar-falta form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 100%;
}

.col-buscar-colaborador .seccion-filtros-vacaciones {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 24px;
  padding-inline: 24px;
  border-bottom: 1px solid var(--color-gris-200);
}

.col-buscar-colaborador .seccion-clases-vacaciones {
  display: flex;
  flex-direction: column;
  padding-block: 16px;
  padding-inline: 24px;
  flex: 1;
  overflow: auto;
}

.col-buscar-colaborador .seccion-clases-vacaciones .contenedor-dias-clase {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.col-buscar-colaborador .seccion-clases-vacaciones .item-lista-clase{
  padding: 8px;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
}

.col-buscar-colaborador .seccion-clases-vacaciones .item-lista-clase:hover,
.col-buscar-colaborador .seccion-clases-vacaciones .item-lista-clase.active{
  background: var(--color-azul-50);
}

.col-buscar-colaborador .seccion-clases-vacaciones span.label-clases-restantes {
  margin-left: auto;
}

/******************* COLUMNA PROFESOR SUPLENTE *******************/
.col-profesor-suplente {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: 24px;
  padding-top: 16px;
  padding-bottom: 24px;
}

.col-profesor-suplente .contenedor-clases-falta {
  width: 100%;
  flex: 1;
  overflow: auto;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta {
  width: 100%;
  border: 0px;
  border-bottom: 0.8px solid var(--color-gris-200);
  margin: 0px;
  gap: 8px;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta.titulo-items {
  border: 0px;
  padding-block: 0px;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta .item-info.w30p {
  width: 30%;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta .item-info.w40p {
  width: 40%;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta .item-info.w100p {
  width: 100%;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta .item-info .subtitulo {
  font-size: 12px;
  color: var(--color-gris-600);
  font-weight: 400;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta .item-info .fecha-clase {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primario);
  display: flex;
  align-items: center;
  gap: 4px;
}

.col-profesor-suplente .contenedor-clases-falta .item-clase-falta .item-info .fecha-clase i {
  font-size: 14px;
  color: var(--color-primario);
}

.col-profesor-suplente .seccion-footer {
  border: 0px;
  padding-top: 24px;
  padding-bottom: 0px;
  margin-top: auto;
}

.col-profesor-suplente .contenedor-clases-falta.clases-no-asociadas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.col-profesor-suplente .contenedor-clases-falta.clases-no-asociadas h3 {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gris-700);
}

.col-profesor-suplente .contenedor-clases-falta.clases-no-asociadas img {
  width: 118px;
  height: 80px;
  object-fit: contain;
}


/*****************************************************************/
/*************************** PERFILES ****************************/
/*****************************************************************/
.titulo-row-generico {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.titulo-row-generico.row-filtros-permisos {
  background-color: var(--color-blanco);
  z-index: 100;
  position: sticky;
  top: -16px;
  padding-block: 20px;
}

.titulo-row-generico .row-filtros-busqueda__input {
  display: flex;
  gap: 12px;
}

.titulo-row-generico.row-filtros-permisos .row-filtros-busqueda__input {
  width: 70%;
}

.titulo-row-generico.row-filtros-permisos .row-filtros-busqueda__input .input-con-icono-contenedor {
  width: 100%;
}

/*****************************************************************/
/**************************** SWITCH *****************************/
/*****************************************************************/

.switch-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-container.switch-config-niveles {
  align-items: flex-start;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gris-200);
}

/* Contenedor del switch */
.switch {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 16px;
}

/* Ocultar el input checkbox por defecto */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* El slider (el fondo del toggle) */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #C7CBD1; /* Color cuando está apagado */
  -webkit-transition: .4s;
  transition: .4s;
}

/* El "círculo" del slider */
.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 1.55px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

/* Cuando el checkbox está marcado: cambia el color de fondo del slider */
input:checked + .slider {
  background-color: #2196F3; /* Color cuando está encendido */
}

/* Cuando el checkbox está marcado: mueve el "círculo" */
input:checked + .slider:before {
  -webkit-transform: translateX(8.8px);
  -ms-transform: translateX(8.8px);
  transform: translateX(8.8px);
}

/* Bordes redondeados para el slider y el círculo */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Label del switch */
.switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 400;
}

.switch-label span {
  font-size: 12px;
  color: var(--color-gris-600);
}

/*****************************************************************/
/**************************** PAQUETES***************************/
/***************************************************************/

.row-reagendar-clases{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.row-reagendar-clases .col-clase{
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.row-reagendar-clases .col-separador .item-separador i{
  font-size: 24px;
}

/*****************************************************************/
/**************************** SUCURSALES ************************/
/***************************************************************/

.card-configuracion{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gris-200);
  border-radius: 4px;
  padding-inline: 24px;
  padding-block: 16px;
}

.card-configuracion.chico{
  width: 416px;
}

.card-configuracion .dos-columnas{
  display: flex;
  flex-direction: row;
  gap: 82px;
}

.card-configuracion .contenedor-configuracion{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-configuracion .contenedor-configuracion .input-row label{
  font: var(--fuente-body2-regular);
  color: var(--color-gris-600)
}

.card-configuracion .contenedor-configuracion .encabezado-configuracion
{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-configuracion .footer{
  display: flex;
  margin-top: auto;
  justify-content: end;
  padding-top: 24px;
  gap: 8px;
}

/*****************************************************************/
/*************************** CROPPIE ****************************/
/***************************************************************/

.croppie-container .cr-slider-wrap{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/******************* MODAL CARROUSEL *******************/
.modal .modal-carrousel {
  width: 100vw;
  height: 100vh !important;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal .modal-carrousel .modal-imagen {
  max-width: 600px;
  margin: 0 auto;
  border-radius: 5px;
  position: relative;
}

.modal .modal-carrousel .modal-imagen img {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  border-radius: 5px;
}

.modal-tipo-carrousel-enter-active,
.modal-tipo-carrousel-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.modal-tipo-carrousel-enter {
  opacity: 0;
  transform: translateY(10px);
}

.modal-tipo-carrousel-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/*****************************************************************/
/*************************** MEDIAQUERYS *************************/
/*****************************************************************/


@media screen and (max-width: 1618px) {
  .vista-web .contenedor-contenido .seccion-menus{
    width: 70%;
  }

  .vista-web .contenedor-contenido .seccion-menus.home{
    top: -90px;
  }
  .contenedor-proceso-full .seccion-contenido .proceso{
    width: 100%;
  }
}

@media screen and (max-width: 1400px) {
  .vista-web .contenedor-contenido .seccion-menus{
    width: 90%;
  }

  .vista-web .contenedor-contenido .seccion-menus.home{
    top: -100px;
  }

  .contenedor-proceso-full .seccion-contenido .proceso{
    width: 100%;
  }
  .contenedor-proceso-full .seccion-contenido .seccion-footer{
    width: 100%;
  }
}

@media screen and (max-width: 966px) {
  .vista-movil .contenedor-contenido .seccion-header.principal{
    width: 100%;
    height: 302px;
    padding: 32px 24px;
    background: url('../img/preregistro/aquara-banner-tablet-inicio.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .vista-movil .contenedor-contenido .seccion-header.imagen{
    padding: 32px 24px;
    height: 265px;
    background: url('../img/preregistro/aquara-banner-tablet-registrardatospersonales.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .vista-movil .contenedor-contenido .seccion-header.codigo{
    width: 100%;
    height: 350px;
    padding: 32px 24px;
    background: url('../img/preregistro/aquara-banner-tablet-codigoverificacion.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
  }

}
@media screen and (max-width: 500px) {
  .vista-movil .contenedor-contenido .seccion-header.principal{
    width: 100%;
    height: 320px;
    padding: 32px 24px;
    background: url('../img/preregistro/aquara-banner-mobile-inicio.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .vista-movil .contenedor-contenido .seccion-header.imagen{
    padding: 32px 24px;
    height: 180px;
    background: url('../img/preregistro/aquara-banner-mobile-registrardatospersonales.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .vista-movil .contenedor-contenido .seccion-header.codigo{
    width: 100%;
    min-height: 295px;
    max-height: 520px;
    height:fit-content;
    padding: 32px 24px;
    background: url('../img/preregistro/aquara-banner-mobile-codigoverificacion.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
  }

  /*Estilos para acomodar iconos de modales en detalle de sucursales*/
  .iconContainer {
    display: flex;
    flex-direction: column;  /* Apila los botones verticalmente */
    gap: 10px;               /* Espacio de 10px entre los botones */
  }
  
  button.iconSucursal {
    width: 100%;             /* Asegura que los botones ocupen el ancho completo de su contenedor */
    display: flex;
    align-items: center;     /* Centra el contenido dentro de los botones */
    justify-content: space-between; /* Espacio entre el ícono y el texto */
    color: #007bff !important;          /* Cambia el color del texto a azul */
  }
  
  button.iconSucursal i {
    margin-right: 8px; /* Espacio entre el ícono y el texto */
  }

}

[v-cloak]{
  display: none;
}