.is-flex {
   display: flex;
}

.is-flex.wait,
[class*="grid"].wait {
   opacity: .25;
   pointer-events: none;
}

.flex-wrap {
   flex-wrap: wrap;
}

.justify-content-space-between {
   justify-content: space-between;
}

.align-items-center {
   align-items: center;
}

.flex-1 {
   flex: 1;
}

.flex-2 {
   flex: 2;
}

.flex-3 {
   flex: 3;
}

.m-0 {
   margin: 0 !important;
}

.mt-0 {
   margin-top: 0 !important;
}

.my-2 {
   margin-top: 0.5rem !important;
   margin-bottom: 0.5rem !important;
}

.gap-4 {
   gap: 1rem !important;
}

.px-4 {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
}

.py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
}

.pr-4 {
   padding-right: 1rem !important;
}

.pl-1 {
   padding-left: 0.25rem !important;
}

.p-0 {
   padding: 0 !important;
}


pre {
   display: block;
   background-color: #333;
   padding: 1em;
   border-radius: 0;
   color: #ccc;
   font-size: 12px !important;
   line-height: 1.1;
   text-align: left;
   /* Alinea el texto a la izquierda */
   overflow: hidden;
   /* Elimina el overflow scrollable */
   white-space: pre-wrap;
   /* Permite que el texto se envuelva */
}


.form-rebuild.complex-form .collapse-simulacion__parent.deployed .collapse-simulacion__title .text:after {
   content: none;
}


/* --- ESTILOS PARA EL SLIDER DE NIVEL SOCIOECONÓMICO --- */

/* Contenedor principal */
.slider-wrapper {
   width: 100%;
   max-width: 700px;
   /* Ajusta el ancho máximo según tu diseño */
   margin: 2rem 0;
   font-family: 'Roboto', sans-serif;
   /* Usando una fuente similar a la del sitio */
}

.slider-label {
   display: block;
   font-weight: 500;
   color: #006a56;
   /* Color corporativo de Santo Tomás */
   margin-bottom: 1.5rem;
   /* Espacio entre el título y el slider */
   font-size: 1rem;
}

.slider-container {
   position: relative;
   width: 100%;
}

/* Estilos para el input tipo range (el slider) */
.slider-input {
   -webkit-appearance: none;
   /* Quita estilos por defecto en Chrome/Safari */
   appearance: none;
   width: 100%;
   height: 8px;
   /* Altura de la barra */
   background: #e0e7e6;
   /* Color de la barra de fondo */
   border-radius: 5px;
   outline: none;
   cursor: pointer;
}

/* Estilo para el "pulgar" o manejador del slider (Chrome/Safari) */
.slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 24px;
   /* Ancho del círculo */
   height: 24px;
   /* Alto del círculo */
   background: #fff;
   border: 2px solid #008272;
   /* Color del borde del círculo */
   border-radius: 50%;
   margin-top: 0;
   /* Centra el círculo verticalmente */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Estilo para el "pulgar" o manejador del slider (Firefox) */
.slider-input::-moz-range-thumb {
   width: 20px;
   height: 20px;
   background: #fff;
   border: 2px solid #008272;
   border-radius: 50%;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Etiquetas de porcentaje debajo del slider */
.slider-ticks {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   padding: 0 5px;
   /* Pequeño ajuste para alinear con los extremos */
   font-size: 0.8rem;
   color: #555;
}

#slider-value-tooltip {
   /* Posicionamiento y centrado */
   position: absolute;
   top: -35px;
   /* Lo posiciona arriba del slider */
   left: 50%;
   /* Se posicionará dinámicamente con JS */
   transform: translateX(-50%);
   /* Centra el tooltip horizontalmente sobre el manejador */

   /* Apariencia */
   background-color: #006a56;
   /* Color corporativo principal */
   color: #fff;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 0.9rem;
   font-weight: 500;
   white-space: nowrap;
   /* Evita que el texto "100%" se parta en dos líneas */
   transition: opacity 0.2s ease;
}

/* Flecha del tooltip (creada con un pseudo-elemento) */
#slider-value-tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
   /* Se posiciona justo debajo del tooltip */
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: #006a56 transparent transparent transparent;
   /* Crea el triángulo */
}


/* --- ESTILOS PARA EL CONTROL TIPO SWITCH --- */

.switch-control-wrapper {
   margin: 2rem 0;
}

.switch-label {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   /* Evita que el texto se seleccione al hacer clic */
}

/* Oculta el checkbox por defecto */
.switch-checkbox {
   display: none;
}

/* Estilo del riel del interruptor */
.switch-track {
   position: relative;
   width: 50px;
   height: 28px;
   background-color: #ccc;
   border-radius: 15px;
   transition: background-color 0.3s ease;
   flex-shrink: 0;
   /* Evita que se encoja */
}

/* Estilo del círculo (manejador) */
.switch-handle {
   position: absolute;
   top: 3px;
   left: 3px;
   width: 22px;
   height: 22px;
   background-color: white;
   border: 2px solid #008272;
   border-radius: 50%;
   transition: transform 0.3s ease;
}

/* Texto al lado del interruptor */
.switch-text {
   margin-left: 12px;
   font-family: 'Roboto', sans-serif;
   color: #333;
}

/* --- LÓGICA VISUAL: CAMBIOS CUANDO EL SWITCH ESTÁ ACTIVADO --- */

/* Cuando el checkbox está "checked", su hermano (el track) cambia de color */
.switch-checkbox:checked~.switch-track {
   background-color: #008272;
   /* Color corporativo activo */
}

/* Cuando el checkbox está "checked", el handle dentro del track se mueve */
.switch-checkbox:checked~.switch-track .switch-handle {
   transform: translateX(22px);
   /* Mueve el círculo a la derecha */
}


/* --- ESTILOS PARA LA TABLA DE NIVEL SOCIOECONÓMICO --- */

/* Contenedor para aplicar bordes redondeados y sombra */
.table-container {
   border: 1px solid #ddd;
   border-radius: 8px;
   overflow: hidden;
   /* Clave para que el border-radius afecte a la tabla interior */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   margin-top: 0;
   /* Espacio superior para alinear con los controles */
}

/* Estilos base de la tabla */
.socioeconomic-table {
   width: 100%;
   border-collapse: collapse;
   font-family: 'Roboto', sans-serif;
   font-size: 0.9rem;
}

/* Estilos del encabezado (th) */
.socioeconomic-table th {
   background-color: #f0f3f2;
   /* Color gris claro del encabezado */
   color: #333;
   padding: 12px 15px;
   text-align: left;
   font-weight: bold;
   border-bottom: 1px solid #ddd;
}

/* Estilos de las celdas de datos (td) */
.socioeconomic-table td {
   padding: 12px 15px;
   border-top: 1px solid #ddd;
   color: #555;
   background-color: #fff;
}

/* Elimina el borde superior de la primera fila para un look más limpio */
.socioeconomic-table tbody tr:first-child td {
   border-top: none;
}


/* --- ESTILOS PARA EL RESUMEN DE SIMULACIÓN --- */

/* Contenedor principal del resumen */
.simulation-summary {
   background-color: #f7f7f7;
   border-radius: 8px;
   overflow: hidden;
   /* Asegura que los bordes redondeados se apliquen correctamente */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
   border: 1px solid #e0e0e0;
}

/* Encabezado verde ("Tu simulación") */
.summary-header {
   background-color: #008272;
   /* Tono verde corporativo */
   color: white;
   padding: 12px 20px;
}

.summary-header h3 {
   margin: 0;
   font-size: 1.2rem;
   font-weight: 500;
}

/* Cuerpo con las filas de detalles */
.summary-body {
   padding: 0 20px;
}

.summary-row {
   display: flex;
   justify-content: space-between;
   padding: 15px 0;
   border-bottom: 1px solid #e9e9e9;
   font-size: 0.95rem;
}

.summary-row.is-header {
   color: #333;
   font-size: 1rem;
}

/* Elimina la línea divisoria de la última fila */
.summary-body .summary-row:last-child {
   border-bottom: none;
}

/* Fila del total ("Copago estimado") */
.summary-total {
   display: flex;
   justify-content: space-between;
   background-color: #008272;
   color: white;
   padding: 15px 20px;
   font-size: 1.1rem;
}

/* Nota informativa inferior */
.summary-note {
   background-color: #eaf3f2;
   /* Un verde muy pálido */
   margin: 0;
   padding: 15px 20px;
   font-size: 0.85rem;
   color: #333;
}

/* Contenedor y estilos para el botón de descarga */
.simulation-actions {
   text-align: center;
   margin-top: 20px;
}

.summary-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 1px solid #006a56;
   color: #006a56;
   padding: 10px 25px;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
}

.summary-button:hover {
   background-color: #006a56;
   color: white;
}

.summary-button svg {
   vertical-align: middle;
}

/* --- ESTILOS PARA EL SKELETON --- */

.skeleton .table-container,
.skeleton .simulation-summary-wrapper {
   position: relative;
   overflow: hidden;
}

.skeleton .table-container::after,
.skeleton .simulation-summary-wrapper::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
   animation: skeleton-loading 1.5s infinite;
}

.skeleton .socioeconomic-table td,
.skeleton .socioeconomic-table th,
.skeleton .summary-row span,
.skeleton .summary-row strong,
.skeleton .summary-total strong,
.skeleton .summary-note,
.skeleton .summary-header h3,
.skeleton .summary-button,
.skeleton .summary-note * {
   background-color: #e0e7e6 !important;
   color: transparent !important;
   border-radius: 4px;
}

@keyframes skeleton-loading {
   0% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(100%);
   }
}

/* Utility classes for switch component element ordering */
.switch-text-order-last {
   order: 2;
}

.switch-track-order-first {
   order: 1;
}

#print-version {
   display: none;
}


.w-full {
   width: 100%;
}

.is-flex {
   display: flex;
}

.flex-wrap {
   flex-wrap: wrap;
}

.justify-content-space-between {
   justify-content: space-between;
}

.align-items-center {
   align-items: center;
}

.flex-1 {
   flex: 1;
}

.flex-2 {
   flex: 2;
}

.flex-3 {
   flex: 3;
}

.m-0 {
   margin: 0 !important;
}

.mt-0 {
   margin-top: 0 !important;
}

.gap-4 {
   gap: 1rem !important;
}

.px-4 {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
}

.py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
}

.pr-4 {
   padding-right: 1rem !important;
}

.pl-1 {
   padding-left: 0.25rem !important;
}

.p-0 {
   padding: 0 !important;
}


pre {
   display: block;
   background-color: #333;
   padding: 1em;
   border-radius: 0;
   color: #ccc;
   font-size: 12px !important;
   line-height: 1.1;
   text-align: left;
   /* Alinea el texto a la izquierda */
   overflow: hidden;
   /* Elimina el overflow scrollable */
   white-space: pre-wrap;
   /* Permite que el texto se envuelva */
}


.form-rebuild.complex-form .collapse-simulacion__parent.deployed .collapse-simulacion__title .text:after {
   content: none;
}


/* --- ESTILOS PARA EL SLIDER DE NIVEL SOCIOECONÓMICO --- */

/* Contenedor principal */
.slider-wrapper {
   width: 100%;
   max-width: 700px;
   /* Ajusta el ancho máximo según tu diseño */
   margin: 2rem 0;
   font-family: 'Roboto', sans-serif;
   /* Usando una fuente similar a la del sitio */
}

.slider-label {
   display: block;
   font-weight: 500;
   color: #006a56;
   /* Color corporativo de Santo Tomás */
   margin-bottom: 1.5rem;
   /* Espacio entre el título y el slider */
   font-size: 1rem;
}

.slider-container {
   position: relative;
   width: 100%;
}

/* Estilos para el input tipo range (el slider) */
.slider-input {
   -webkit-appearance: none;
   /* Quita estilos por defecto en Chrome/Safari */
   appearance: none;
   width: 100%;
   height: 8px;
   /* Altura de la barra */
   background: #e0e7e6;
   /* Color de la barra de fondo */
   border-radius: 5px;
   outline: none;
   cursor: pointer;
}

/* Estilo para el "pulgar" o manejador del slider (Chrome/Safari) */
.slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 24px;
   /* Ancho del círculo */
   height: 24px;
   /* Alto del círculo */
   background: #fff;
   border: 2px solid #008272;
   /* Color del borde del círculo */
   border-radius: 50%;
   margin-top: 0;
   /* Centra el círculo verticalmente */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Estilo para el "pulgar" o manejador del slider (Firefox) */
.slider-input::-moz-range-thumb {
   width: 20px;
   height: 20px;
   background: #fff;
   border: 2px solid #008272;
   border-radius: 50%;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Etiquetas de porcentaje debajo del slider */
.slider-ticks {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   padding: 0 5px;
   /* Pequeño ajuste para alinear con los extremos */
   font-size: 0.8rem;
   color: #555;
}

#slider-value-tooltip {
   /* Posicionamiento y centrado */
   position: absolute;
   top: -35px;
   /* Lo posiciona arriba del slider */
   left: 50%;
   /* Se posicionará dinámicamente con JS */
   transform: translateX(-50%);
   /* Centra el tooltip horizontalmente sobre el manejador */

   /* Apariencia */
   background-color: #006a56;
   /* Color corporativo principal */
   color: #fff;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 0.9rem;
   font-weight: 500;
   white-space: nowrap;
   /* Evita que el texto "100%" se parta en dos líneas */
   transition: opacity 0.2s ease;
}

/* Flecha del tooltip (creada con un pseudo-elemento) */
#slider-value-tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
   /* Se posiciona justo debajo del tooltip */
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: #006a56 transparent transparent transparent;
   /* Crea el triángulo */
}


/* --- ESTILOS PARA EL CONTROL TIPO SWITCH --- */

.switch-control-wrapper {
   margin: 2rem 0;
}

.switch-label {
   display: flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   /* Evita que el texto se seleccione al hacer clic */
}

/* Oculta el checkbox por defecto */
.switch-checkbox {
   display: none;
}

/* Estilo del riel del interruptor */
.switch-track {
   position: relative;
   width: 50px;
   height: 28px;
   background-color: #ccc;
   border-radius: 15px;
   transition: background-color 0.3s ease;
   flex-shrink: 0;
   /* Evita que se encoja */
}

/* Estilo del círculo (manejador) */
.switch-handle {
   position: absolute;
   top: 3px;
   left: 3px;
   width: 22px;
   height: 22px;
   background-color: white;
   border-radius: 50%;
   transition: transform 0.3s ease;
}

/* Texto al lado del interruptor */
.switch-text {
   margin-left: 12px;
   font-family: 'Roboto', sans-serif;
   color: #333;
}

/* --- LÓGICA VISUAL: CAMBIOS CUANDO EL SWITCH ESTÁ ACTIVADO --- */

/* Cuando el checkbox está "checked", su hermano (el track) cambia de color */
.switch-checkbox:checked+.switch-track {
   background-color: #008272;
   /* Color corporativo activo */
}

/* Cuando el checkbox está "checked", el handle dentro del track se mueve */
.switch-checkbox:checked+.switch-track .switch-handle {
   transform: translateX(22px);
   /* Mueve el círculo a la derecha */
}


/* --- ESTILOS PARA LA TABLA DE NIVEL SOCIOECONÓMICO --- */

/* Contenedor para aplicar bordes redondeados y sombra */
.table-container {
   border: 1px solid #ddd;
   border-radius: 8px;
   overflow: hidden;
   /* Clave para que el border-radius afecte a la tabla interior */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   margin-top: 0;
   /* Espacio superior para alinear con los controles */
}

/* Estilos base de la tabla */
.socioeconomic-table {
   width: 100%;
   border-collapse: collapse;
   font-family: 'Roboto', sans-serif;
   font-size: 0.9rem;
}

/* Estilos del encabezado (th) */
.socioeconomic-table th {
   background-color: #f0f3f2;
   /* Color gris claro del encabezado */
   color: #333;
   padding: 12px 15px;
   text-align: left;
   font-weight: bold;
   border-bottom: 1px solid #ddd;
}

/* Estilos de las celdas de datos (td) */
.socioeconomic-table td {
   padding: 12px 15px;
   border-top: 1px solid #ddd;
   color: #555;
   background-color: #fff;
}

/* Elimina el borde superior de la primera fila para un look más limpio */
.socioeconomic-table tbody tr:first-child td {
   border-top: none;
}


/* --- ESTILOS PARA EL RESUMEN DE SIMULACIÓN --- */

.simulation-summary-wrapper {
   /* margin-top: 2rem; */
   /* Espacio entre la tabla de ingresos y este bloque */
}

/* Contenedor principal del resumen */
.simulation-summary {
   background-color: #f7f7f7;
   border-radius: 8px;
   overflow: hidden;
   /* Asegura que los bordes redondeados se apliquen correctamente */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
   border: 1px solid #e0e0e0;
}

/* Encabezado verde ("Tu simulación") */
.summary-header {
   background-color: #008272;
   /* Tono verde corporativo */
   color: white;
   padding: 12px 20px;
}

.summary-header h3 {
   margin: 0;
   font-size: 1.2rem;
   font-weight: 500;
}

/* Cuerpo con las filas de detalles */
.summary-body {
   padding: 0 20px;
}

.summary-row {
   display: flex;
   justify-content: space-between;
   padding: 15px 0;
   border-bottom: 1px solid #e9e9e9;
   font-size: 0.95rem;
}

.summary-row.is-header {
   color: #333;
   font-size: 1rem;
}

/* Elimina la línea divisoria de la última fila */
.summary-body .summary-row:last-child {
   border-bottom: none;
}

/* Fila del total ("Copago estimado") */
.summary-total {
   display: flex;
   justify-content: space-between;
   background-color: #008272;
   color: white;
   padding: 15px 20px;
   font-size: 1.1rem;
}

/* Nota informativa inferior */
.summary-note {
   background-color: #eaf3f2;
   /* Un verde muy pálido */
   margin: 0;
   padding: 15px 20px;
   font-size: 0.85rem;
   color: #333;
}

/* Contenedor y estilos para el botón de descarga */
.simulation-actions {
   text-align: center;
   margin-top: 20px;
}

.summary-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 1px solid #006a56;
   color: #006a56;
   padding: 10px 25px;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
}

.summary-button:not([class*="bg-"]) {
   background-color: transparent;
}

.summary-button:hover {
   background-color: #006a56;
   color: white;
}

.summary-button svg {
   vertical-align: middle;
}

/* --- ESTILOS PARA EL SKELETON --- */

.skeleton .table-container,
.skeleton .simulation-summary-wrapper {
   position: relative;
   overflow: hidden;
}

.skeleton .table-container::after,
.skeleton .simulation-summary-wrapper::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
   animation: skeleton-loading 1.5s infinite;
}

.skeleton .socioeconomic-table td,
.skeleton .socioeconomic-table th,
.skeleton .summary-row span,
.skeleton .summary-row strong,
.skeleton .summary-total strong,
.skeleton .summary-note,
.skeleton .summary-header h3,
.skeleton .summary-button {
   background-color: #e0e7e6 !important;
   color: transparent !important;
   border-radius: 4px;
}

@keyframes skeleton-loading {
   0% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(100%);
   }
}


.regular-input {
   padding: calc(var(--spacing) * 3) !important;
   font-size: 16px !important;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   border-style: var(--tw-border-style) !important;
   border-width: 1px !important;
   border-color: var(--color-gray-100) !important;
   border-radius: var(--radius-lg) !important;
}

.regular-input:hover {
   border-color: var(--color-gray-100) !important;
}

.regular-input:focus {
   --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.regular-input.select {
   padding: calc(var(--spacing) * 3.325) !important;
}


/* --- Clases Base --- */

.bg-\[\#008272\] {
   background-color: #008272;
}

.border-\[\#008272\] {
   border-color: #008272;
}


/* --- Clases Hover --- */

.hover\:bg-\[\#006a5e\]:hover {
   background-color: #006a5e;
}

.hover\:border-\[\#006a5e\]:hover {
   border-color: #006a5e;
}


/* --- Clases Disabled --- */

.disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
}

.disabled\:border-gray-400:disabled {
   border-color: #9ca3af;
   /* gray-400 */
}

.disabled\:bg-gray-400:disabled {
   background-color: #9ca3af;
   /* gray-400 */
}

.text-white {
   color: white !important;
}

.bg-gray-400 {
   background-color: #999999;
}

.border-gray-400 {
   border-color: #999999;
}

.bg-gray-100 {
   background-color: #f5f5f5;
}

.py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
}

.py-8 {
   padding-top: 2rem !important;
   padding-bottom: 2rem !important;
}

.px-8 {
   padding-left: 2rem !important;
   padding-right: 2rem !important;
}

.px-4 {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
}

.p-8 {
   padding: 2rem !important;
}

.skeleton {
   user-select: none;
}


/* Estilos base */
.modal__verde {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, #004f45 46.98%, rgba(0, 79, 69, 0) 100%);
   display: flex;
   justify-content: center;
   align-items: center;
   /* Centrado verticalmente para mejor apariencia */
   padding: 2rem 1rem;
   /* Padding para pantallas pequeñas y grandes */
   z-index: 999999;
   box-sizing: border-box;
   /* Asegura que el padding no afecte el tamaño total */
}

.modal__verde__box {
   background: #ffffff;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   display: flex;
   flex-direction: column;
   /* Organiza los elementos en columna */
   gap: 1rem;
   width: 100%;
   max-width: 800px;
   /* Un ancho máximo para que no sea gigante en desktop */
   height: 100%;
   /* Ocupa toda la altura disponible que le da el contenedor */
   max-height: 90vh;
   /* Límite para que no toque los bordes de la pantalla */
}

.modal__verde__excerpt {
   padding: 0 1.5rem;
   /* Padding interno para que el texto no pegue al borde */
   /* CLAVE: Crece para ocupar el espacio y permite scroll interno */
   flex-grow: 1;
   overflow-y: auto;
}

.modal__verde__excerpt h3 {
   margin-bottom: 1rem;
   /* Espacio debajo del título "Textos Legales" */
}

.modal__verde__excerpt p {
   line-height: 1.6;
}

.modal__verde__excerpt a {
   color: #FF9B02;
}

.modal__verde__actions {
   display: flex;
   justify-content: flex-end;
   padding: 1rem 1.5rem;
   /* Espacio para el botón de cierre */
   border-top: 1px solid #eee;
   /* Línea sutil para separar el contenido de las acciones */
}

.modal__verde__actions .button {
   font-size: 16px;
   padding: 0.75rem 1.5rem;
   background-color: #004f45;
   color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
}

body.modal-abierto {
   overflow: hidden;
   /* Impide el scroll de la página de fondo */
}