/* Estilo base */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #ffe0b2, #ffcc80); /* Naranja claro suave */
    height: 100vh; /* Asegura que el body ocupe toda la altura de la ventana */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido en vertical (si sobra espacio) */
    align-items: center; /* Centra el contenido en horizontal */
    transition: background 0.5s, color 0.5s;
    color: #333;
}

body.dark-mode {
    background: linear-gradient(135deg, #212121, #424242);
    color: #eee;
}

/* Wrapper principal para centrar el contenedor */
.main-wrapper {
    flex-grow: 1; /* Permite que main-wrapper ocupe el espacio disponible */
    display: flex;
    justify-content: center; /* Centra el container si no ocupa todo el ancho */
    align-items: center; /* Centra el container si no ocupa todo el alto */
    width: 100%;
    height: 100%; /* Ocupa el 100% de la altura de su padre (body) */
}

/* Contenedor principal */
.container {
    display: flex;
    width: 90%;
    max-width: 1200px;
    height: 90vh; /* Permite que el contenedor principal ocupe una gran parte de la altura en escritorio */
    min-height: 500px; /* Altura mínima para asegurar visibilidad en escritorio */
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transition: background 0.5s;
    overflow: hidden;
    margin: 20px auto; /* Margen para centrar y separación de bordes */
}

body.dark-mode .container {
    background: rgba(66,66,66,0.4);
}

.left, .right {
    flex: 1;
    padding: 30px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
/* Ocultar scrollbars */
.left::-webkit-scrollbar,
.right::-webkit-scrollbar,
.chat-area::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.menu-content::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
.left, .right, .chat-area, .modal-content, .menu-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.left {
    background: rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: background 0.5s;
    flex: 2; /* SophIA (left) toma más espacio */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar horizontalmente el contenido de .left */
    justify-content: space-between; /* Espacio entre header, chat y form */
}

body.dark-mode .left {
    background: rgba(55, 55, 55, 0.6);
    border-right: 1px solid rgba(100,100,100,0.2);
}

.right {
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.5s;
    flex: 1; /* Lado derecho (botones) toma menos espacio */
    position: relative; /* Importante para el posicionamiento absoluto del botón de menú en escritorio */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrar verticalmente su contenido en escritorio */
}

body.dark-mode .right {
    background: rgba(66, 66, 66, 0.6);
}

/* Contenedores para centrar el contenido dentro de left/right */
.right-content-wrapper {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que este wrapper se estire para centrar su contenido */
    align-items: center;
    text-align: center;
    justify-content: center; /* Centra el contenido verticalmente en escritorio */
}

/* Chat Header (logos y título) */
.chat-header {
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin-bottom: 20px;
    flex-shrink: 0; /* No se encoge */
}

.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.logo-img {
    width: 150px;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
    pointer-events: none;
}

.sophia-logo-icon {
    width: 60px !important;
    vertical-align: middle;
    margin-right: 10px;
}

/* TÍTULOS GRANDES Y RESALTANTES */
h1 {
    color: #ff5722;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    line-height: 1.2;
}

body.dark-mode h1 {
    color: #ff9800;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.1);
}

h2 {
    color: #ef6c00;
    margin-bottom: 25px;
    font-size: 2em;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}

body.dark-mode h2 {
    color: #ffb300;
    text-shadow: 1px 1px 3px rgba(255,255,255,0.08);
}

/* Formularios de chat */
.chat-form {
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    max-width: 600px;
    margin-top: auto; /* Empuja el formulario hacia abajo */
    flex-shrink: 0; /* No se encoge */
}

body.dark-mode .chat-form {
    border-top: 1px solid rgba(255,255,255,0.1);
}

textarea#pregunta {
    width: calc(100% - 24px);
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 15px;
    background: rgba(255,255,255,0.7);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
    font-size: 16px;
    color: #5d4037;
    transition: background 0.5s;
    resize: vertical;
    min-height: 50px;
    max-height: 150px;
}

body.dark-mode textarea#pregunta {
    background: rgba(77,77,77,0.8);
    color: #eee;
}

textarea#pregunta:focus {
    outline: none;
    background: rgba(255,255,255,0.9);
}

body.dark-mode textarea#pregunta:focus {
    background: rgba(100,100,100,0.9);
}

/* ESTILOS DE BOTONES MEJORADOS (MÁS PLANOS) */

.chat-form button[type="submit"] {
    background: linear-gradient(45deg, #ff8c00, #ff5722);
    color: white;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(255, 140, 0, 0.3);
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: auto;
    align-self: center;
    margin-bottom: 5px;
    min-width: 150px;
    font-size: 1em;
    letter-spacing: 0.2px;
    border: none;
}

.chat-form button[type="submit"]:hover {
    background: linear-gradient(45deg, #ff5722, #e64a19);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 140, 0, 0.4);
}

.chat-form button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(255, 140, 0, 0.2);
}

.tech-button {
    background: linear-gradient(45deg, #ffb300, #ff8f00);
    color: #424242;
    font-weight: 600;
    padding: 12px 20px;
    margin-bottom: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(255, 179, 0, 0.2);
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 90%;
    max-width: 260px;
    font-size: 1.05em;
    letter-spacing: 0.5px;
    border: none;
}

.tech-button:hover {
    background: linear-gradient(45deg, #ff8f00, #ff6f00);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 179, 0, 0.3);
}

.tech-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 179, 0, 0.1);
}

/* Contenedor de la respuesta (el historial del chat) */
.chat-area {
    flex-grow: 1; /* Permite que chat-area se estire para llenar el espacio */
    overflow-y: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.15);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column-reverse; /* Las burbujas nuevas aparecen abajo */
    width: 100%;
    max-width: 600px;
    min-height: 200px; /* Altura mínima restaurada */
    max-height: 500px; /* Altura máxima restaurada */
    align-self: center; /* Centra la caja del chat */
}

body.dark-mode .chat-area {
    background: rgba(40, 40, 40, 0.85);
    box-shadow: inset 0 3px 8px rgba(255,255,255,0.08);
}

.respuesta {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    box-shadow: none;
    margin-top: auto; /* Mueve el contenido hacia abajo para que el scroll se inicie desde abajo */
    font-size: 16px;
}

/* ESTILOS DE BURBUJAS DE CHAT MEJORADOS */
.chat-bubble {
    padding: 12px 18px;
    border-radius: 20px;
    margin-bottom: 10px;
    max-width: 80%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    word-wrap: break-word;
    font-size: 0.95em; /* Ajuste de fuente para escritorio */
    line-height: 1.4;
}

.chat-bubble.user {
    background-color: #ffe0b2;
    margin-left: auto;
    margin-right: 0;
    text-align: left;
    color: #333;
    border-bottom-right-radius: 5px;
}

body.dark-mode .chat-bubble.user {
    background-color: #5d4037;
    color: #eee;
}

.chat-bubble.sophia {
    background-color: #f0f0f0;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
    color: #333;
    border-bottom-left-radius: 5px;
}

body.dark-mode .chat-bubble.sophia {
    background-color: #424242;
    color: #eee;
}

/* Estilos para el contenido Markdown dentro de las burbujas */
.markdown-content p {
    margin-top: 5px;
    margin-bottom: 5px;
}
.markdown-content ul, .markdown-content ol {
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.markdown-content pre {
    background-color: rgba(0,0,0,0.05);
    padding: 8px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9em;
}
body.dark-mode .markdown-content pre {
    background-color: rgba(255,255,255,0.05);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* Permite scroll en el modal si el contenido es grande */
}

.modal-content {
    background: rgba(255,255,255,0.95);
    padding: 25px;
    border-radius: 20px;
    width: 90%;
    max-width: 800px; /* Aumentado el max-width para las tablas del E-TEK */
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow-y: auto; /* Permite scroll dentro del contenido del modal */
    max-height: 90vh;
    transition: background 0.5s, color 0.5s;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.dark-mode .modal-content {
    background: rgba(45,45,45,0.95);
    color: #eee;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-content p {
    margin-bottom: 20px;
    font-size: 1.1em;
    line-height: 1.5;
}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #555;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

body.dark-mode .close {
    color: #ccc;
}

/* Enlaces especiales (Biblioteca y ZIS) */
a.biblioteca-link, a.zis-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 15px;
    padding: 12px;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    transition: background 0.3s, box-shadow 0.3s;
    width: 90%;
    max-width: 260px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

a.biblioteca-link {
    background: linear-gradient(135deg, #ff8f00, #e65100);
}

a.biblioteca-link:hover {
    background: linear-gradient(135deg, #e65100, #bf360c);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

a.zis-link {
    background: linear-gradient(135deg, #ffab40, #ff8f00);
}

a.zis-link:hover {
    background: linear-gradient(135deg, #ff8f00, #e65100);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* Botón de Modo Oscuro - ESTILO ESCRITORIO */
.modo-oscuro-btn {
    width: 180px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #616161, #424242);
    border: none;
    color: white;
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100;
    display: flex; /* Para centrar el texto/icono */
    align-items: center;
    justify-content: center;
}

.modo-oscuro-btn:hover {
    background: linear-gradient(135deg, #757575, #616161);
}

/* --- ESTILOS DE RESPONSIVIDAD OPTIMIZADOS --- */

/* Título de tecnologías en escritorio */
.tecba-tech-title {
    display: block; /* Visible por defecto en escritorio */
}

/* Botón de Menú Responsivo (Hamburguesa) */
.mobile-menu-icon {
    display: none; /* Oculto por defecto en escritorio */
    position: fixed; /* Posición fija para que flote y no afecte el layout */
    top: 60px !important; /* Ajusta según necesidad para que no choque con el logo de SophIA */
    right: 15px; /* Ajusta según necesidad */
    background: linear-gradient(45deg, #ff9800, #f57c00);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.3em;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(255, 152, 0, 0.4);
    z-index: 1000; /* Un z-index muy alto para asegurar que siempre esté encima */
    pointer-events: all; /* Asegura que sea clickeable */
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.mobile-menu-icon:hover {
    background: linear-gradient(45deg, #f57c00, #e65100);
    transform: scale(1.05);
}

.mobile-menu-icon:active {
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(255, 152, 0, 0.2);
}

.menu-content {
    display: flex; /* Visible por defecto en escritorio */
    flex-direction: column;
    width: 100%;
    align-items: center;
}

@media (max-width: 768px) {
    .main-wrapper {
        height: 100vh;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .container {
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: unset;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .left {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        flex-grow: 1;
        height: auto;
        min-height: 75vh; /* Mantenemos el espacio grande para el chat */
        padding: 15px 10px;
        justify-content: space-between;
        gap: 15px;
    }

    body.dark-mode .left {
        border-bottom: 1px solid rgba(100,100,100,0.2);
    }

    .chat-header {
        margin-bottom: 10px;
        width: 98%;
        max-width: unset;
        padding: 0 5px;
        flex-shrink: 0;
    }

    .logo-container {
        margin-bottom: 10px;
    }

    .logo-img {
        width: 90px;
    }
    .sophia-logo-icon {
        width: 40px !important;
    }
    h1 {
        font-size: 1.6em;
        line-height: 1.1;
    }

    .chat-area {
        flex-grow: 1;
        min-height: 150px;
        max-height: unset; /* Ya no limitamos la altura máxima en móvil */
        padding: 10px;
        margin-bottom: 15px;
        width: 98%;
        border-radius: 15px;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    }

    .respuesta {
        padding-top: 0;
    }

    .chat-bubble {
        max-width: 95%;
        padding: 10px 15px;
        font-size: 0.88em;
        border-radius: 15px;
    }
    .chat-bubble.user {
        border-bottom-right-radius: 4px;
    }
    .chat-bubble.sophia {
        border-bottom-left-radius: 4px;
    }

    .chat-form {
        width: 98%;
        max-width: unset;
        padding: 10px 0;
        border-top: 1px solid rgba(0,0,0,0.08);
        flex-shrink: 0;
    }
    body.dark-mode .chat-form {
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    textarea#pregunta {
        width: calc(100% - 20px);
        padding: 10px;
        margin: 8px 0;
        font-size: 15px;
        border-radius: 12px;
        min-height: 40px;
        max-height: 100px;
    }
    .chat-form button[type="submit"] {
        width: 90%;
        padding: 8px 15px;
        font-size: 0.95em;
        border-radius: 8px;
    }

    /* OCULTA EL CONTENEDOR DERECHO COMPLETAMENTE EN MÓVIL */
    .right {
        display: none;
    }

    /* MUESTRA Y POSICIONA EL BOTÓN DE MENÚ (HAMBURGUESA) EN MÓVIL */
    .mobile-menu-icon {
        display: flex; /* HACERLO VISIBLE SOLO EN MÓVIL */
        position: fixed; /* Asegura que flote sobre todo */
        top: 15px; /* Ajusta su posición final */
        right: 15px;
        z-index: 1000; /* Asegura que esté por encima de casi todo */
    }

    /* BOTÓN DE MODO OSCURO - VERSIÓN RESPONSIVA (SOLO ICONO) */
    .modo-oscuro-btn {
        width: 45px; /* Tamaño cuadrado */
        height: 45px; /* Tamaño cuadrado */
        padding: 0; /* Quitar padding */
        border-radius: 50%; /* Hacerlo redondo */
        font-size: 1.5em; /* Aumentar tamaño del icono */
        display: flex; /* Asegura que el icono esté centrado */
        justify-content: center;
        align-items: center;
        bottom: 15px; /* Ajustar posición */
        right: 15px; /* Ajustar posición */
        box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Sombra para que resalte */
        /* Oculta el texto "Modo Oscuro" */
        text-indent: -9999px; /* Mueve el texto fuera de la vista */
        overflow: hidden; /* Oculta cualquier parte del texto que se desborde */
    }
    .modo-oscuro-btn::before {
        content: "🌙"; /* Muestra solo el icono de luna */
        text-indent: 0; /* Restablece el text-indent para el pseudo-elemento */
        display: block; /* Asegura que el icono esté visible */
    }
    body.dark-mode .modo-oscuro-btn::before {
        content: "☀️"; /* Opcional: icono de sol en modo oscuro */
    }

    /* Modales en móvil */
    #modalTecbaTech .modal-content {
        padding: 15px; /* Reducir padding */
        max-height: 95vh;
        width: 98%; /* Ocupa casi todo el ancho */
        max-width: unset; /* Quitar el max-width para que ocupe todo el ancho disponible */
    }
    #modalTecbaTech .modal-content h2 {
        font-size: 1.6em; /* Un poco más pequeño */
        margin-bottom: 8px; /* Menos margen */
    }
    #modalTecbaTech .modal-content p {
        font-size: 0.9em; /* Texto un poco más pequeño */
        margin-bottom: 10px; /* Menos margen */
    }

    .tech-button, a.biblioteca-link, a.zis-link {
        width: 90%;
        max-width: unset;
        margin-bottom: 10px;
        font-size: 0.95em;
        padding: 10px 15px;
        border-radius: 8px;
    }

    /* Mejora para tablas dentro del modal en móvil */
    .modal-content table {
        display: block; /* Convertir la tabla en un bloque para que pueda tener overflow */
        overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es muy ancha */
        -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
        width: 100%; /* Asegura que la tabla ocupe el ancho disponible */
        max-width: unset; /* Importante para que no se limite el ancho */
        font-size: 0.75em; /* **Clave**: Reducir aún más el tamaño de la fuente de la tabla */
        margin: 5px 0; /* Reducir el margen */
    }

    /* Asegura que el texto dentro de las celdas de la tabla no se rompa prematuramente,
       pero permite el desplazamiento horizontal de la tabla completa si es necesario.
       Si el texto es muy largo, word-wrap lo romperá. */
    .modal-content th,
    .modal-content td {
        white-space: normal; /* Permitir que el texto de las celdas se rompa en varias líneas */
        word-break: break-word; /* Para asegurar que las palabras largas se rompan */
        padding: 3px 5px; /* Reducir el padding de las celdas */
    }

    /* Opcional: si quisieras que cada celda de la tabla se apilara verticalmente,
       pero esto suele ser más complejo y a veces menos legible para tablas.
       Para este caso, el `overflow-x: auto` es la mejor solución. */
    /*
    .modal-content thead,
    .modal-content tbody,
    .modal-content th,
    .modal-content td,
    .modal-content tr {
        // display: block;
    }
    */
}

/* Para pantallas muy pequeñas (ej. iPhone 5/SE) */
@media (max-width: 375px) {
    .logo-img {
        width: 70px;
    }
    .sophia-logo-icon {
        width: 35px !important;
    }
    h1 {
        font-size: 1.4em;
    }
    .chat-bubble {
        font-size: 0.8em;
        padding: 8px 12px;
    }
    textarea#pregunta {
        font-size: 13px;
        padding: 7px;
        min-height: 35px;
    }
    .chat-form button[type="submit"] {
        font-size: 0.85em;
        padding: 6px 10px;
    }
    h2 {
        font-size: 1.3em;
    }
    .mobile-menu-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1em;
        top: 10px;
        right: 10px;
    }
    .modo-oscuro-btn {
        width: 40px;
        height: 40px;
        font-size: 1.3em;
        bottom: 10px;
        right: 10px;
    }
    /* Asegurar que las tablas se vean bien en pantallas muy pequeñas */
    .modal-content table {
        font-size: 0.7em; /* Reducir aún más la fuente de la tabla */
    }
    .modal-content th,
    .modal-content td {
        font-size: 9px; /* Reducir aún más el tamaño de la fuente para caber */
        padding: 1px 2px;
    }
    .modal-content .text-xs,
    .modal-content .text-\[9px\] {
        font-size: 8px; /* Ajuste para fuentes más pequeñas */
    }
    .modal-content .text-\[11px\] {
        font-size: 9px;
    }
}

/* --- Estilos para el Modal E-TEK (tomados y adaptados de tu HTML original) --- */

/* Ajustes generales para tablas dentro de modales (si aplica) */
.modal-content table {
    border-collapse: collapse;
    width: 100%; /* Asegura que la tabla intente ocupar el 100% de su contenedor */
    table-layout: auto; /* Permite que el ancho de las columnas se ajuste al contenido */
    margin: 10px 0; /* Espacio alrededor de las tablas */
}

.modal-content th,
.modal-content td {
    border: 1px solid black;
    font-family: Arial, sans-serif;
    font-size: 12px; /* Base font size */
    padding: 2px 4px;
    color: #333; /* Default text color for light mode */
    word-wrap: break-word; /* Rompe palabras largas para que no se desborden */
    vertical-align: top; /* Alinea el contenido en la parte superior por defecto */
}

/* Dark mode adjustments for tables */
.dark-mode .modal-content th,
.dark-mode .modal-content td {
    border-color: #666; /* Darker border in dark mode */
    color: #eee; /* Lighter text in dark mode */
}

/* Specific text sizes (estas clases las aplicarías directamente en tu HTML) */
.modal-content .text-xs {
    font-size: 10px;
}
.modal-content .text-\[9px\] {
    font-size: 9px;
}
.modal-content .text-\[11px\] {
    font-size: 11px;
}
.modal-content .text-\[13px\] {
    font-size: 13px;
}
.modal-content .text-\[14px\] {
    font-size: 14px;
}


/* Font weights */
.modal-content .font-bold {
    font-weight: 700;
}

/* Background colors */
.modal-content .bg-\[\#ffcc66\] {
    background-color: #ffcc66;
}
.modal-content .bg-\[\#ff9933\] {
    background-color: #ff9933;
}
.modal-content .bg-\[\#fff2cc\] {
    background-color: #fff2cc;
}
.modal-content .bg-\[\#d9d9d9\] {
    background-color: #d9d9d9;
}

/* Dark mode background colors */
.dark-mode .modal-content .bg-\[\#ffcc66\] {
    background-color: #a36f00; /* Darker shade for dark mode */
}
.dark-mode .modal-content .bg-\[\#ff9933\] {
    background-color: #8c4c00; /* Darker shade for dark mode */
}
.dark-mode .modal-content .bg-\[\#fff2cc\] {
    background-color: #554a3a; /* Darker shade for dark mode */
}
.dark-mode .modal-content .bg-\[\#d9d9d9\] {
    background-color: #555555; /* Darker shade for dark mode */
}


/* Text alignment */
.modal-content .text-justify {
    text-align: justify;
}
.modal-content .text-center {
    text-align: center;
}
.modal-content .text-left {
    text-align: left;
}

/* Line height */
.modal-content .leading-tight {
    line-height: 1.1;
}
.modal-content .leading-\[1\.2\] {
    line-height: 1.2;
}

/* White space */
.modal-content .no-wrap {
    white-space: nowrap;
}

/* Padding adjustments */
.modal-content .pl-\[6px\] {
    padding-left: 6px;
}
.modal-content .pr-\[6px\] {
    padding-right: 6px;
}
.modal-content .pt-\[2px\] {
    padding-top: 2px;
}
.modal-content .pb-\[2px\] {
    padding-bottom: 2px;
}
.modal-content .pt-\[4px\] {
    padding-top: 4px;
}
.modal-content .pb-\[4px\] {
    padding-bottom: 4px;
}
.modal-content .py-\[2px\] { /* vertical padding */
    padding-top: 2px;
    padding-bottom: 2px;
}
.modal-content .px-\[4px\] { /* horizontal padding */
    padding-left: 4px;
    padding-right: 4px;
}

/* Margin adjustments */
.modal-content .mb-\[10px\] {
    margin-bottom: 10px;
}
.modal-content .mb-\[20px\] {
    margin-bottom: 20px;
}
.modal-content .ml-\[10px\] {
    margin-left: 10px;
}
.modal-content .mr-\[10px\] {
    margin-right: 10px;
}
.modal-content .mt-\[10px\] {
    margin-top: 10px;
}
.modal-content .mt-1 { /* For tables, assuming 1 unit is small */
    margin-top: 4px; /* Adjust this value if 1 unit is different in your base CSS */
}
.modal-content .mt-4 { /* For the wrapper div, assuming 4 units */
    margin-top: 16px; /* Adjust this value if 4 units is different in your base CSS */
}
.modal-content .mt-10 { /* For the ASP div */
    margin-top: 40px; /* Adjust this value if 10 units is different in your base CSS */
}
.modal-content .mb-2 { /* For the ASP div */
    margin-bottom: 8px; /* Adjust this value if 2 units is different in your base CSS */
}

/* Width adjustments */
.modal-content .w-\[10\%\] { width: 10%; }
.modal-content .w-\[15\%\] { width: 15%; }
.modal-content .w-\[20\%\] { width: 20%; }
.modal-content .w-\[25\%\] { width: 25%; }
.modal-content .w-\[30\%\] { width: 30%; }
.modal-content .w-\[35\%\] { width: 35%; }
.modal-content .w-\[40\%\] { width: 40%; }
.modal-content .w-\[45\%\] { width: 45%; }
.modal-content .w-\[50\%\] { width: 50%; }
.modal-content .w-\[60\%\] { width: 60%; }
.modal-content .w-\[70\%\] { width: 70%; }
.modal-content .w-\[80\%\] { width: 80%; }
.modal-content .w-\[90\%\] { width: 90%; }
.modal-content .w-full { width: 100%; }

/* Alignment */
.modal-content .align-top {
    vertical-align: top;
}
.modal-content .align-middle {
    vertical-align: middle;
}
.modal-content .align-bottom {
    vertical-align: bottom;
}

/* List styles */
.modal-content .list-decimal {
    list-style-type: decimal;
}
.modal-content .list-inside {
    list-style-position: inside;
}

/* Centering a block element (max-w-[900px] mx-auto) */
.modal-content > div { /* Targeting the div that contains the E-TEK tables */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Specific class for padding on the outer div */
.modal-content .px-2 {
    padding-left: 8px; /* Assuming 1 unit of Tailwind is 4px. Adjust if different. */
    padding-right: 8px;
}