/* --- Variables y Estilos Globales --- */
:root {
    --primary-color: #007BFF;
    --secondary-color: #6C757D;
    --light-bg: #F8F9FA;
    --dark-text: #212529;
    --light-text: #FFFFFF;
    --light-grey; #;
    --border-color: #DEE2E6;
    --footer-bg: #E9ECEF;
}

/* ==========================================================================
   Principios Globales de Responsividad (Base para todo el proyecto)
   ========================================================================== */

/* 1. Asegura que el tamaño de los elementos incluya padding y borde */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Previene desbordamiento horizontal en el layout principal */
html,
body {
    max-width: 100vw; /* El ancho máximo es el 100% del ancho de la ventana */
    /* Quitamos overflow-x:hidden para permitir zoom del usuario si es necesario */
}

/* 3. Regla de oro para que imágenes y videos nunca se desborden */
img,
video,
iframe,
picture {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacios extra debajo de las imágenes */
}

/* 4. Permite que el texto largo se corte de forma inteligente */
h1, h2, h3, h4, h5, h6, p, li, a, span {
   overflow-wrap: break-word;
   word-wrap: break-word;
}

/* ========================================================================== */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background-color: var(--light-bg); /* Fondo general gris claro */
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3 {
    margin-bottom: 0.75rem;
}

p {
     margin-bottom: 1rem;
}

ul {
    list-style: none;
}

.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 7px 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1rem;
}

.btn:hover {
    background-color: #0056b3; /* Azul más oscuro */
    text-decoration: none;
}

/* --- Header y Navegación --- */
.navbar {
    background-color: var(--light-bg); /* Fondo blanco para el nav */
    padding: 0rem 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky; /* Para que se quede fija arriba */
    top: 0;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}



.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-size: 0rem;
    font-weight: bold;
    color: var(--primary-color);
}
.navbar-brand:hover {
    text-decoration: none;
}


.navbar-nav {
    display: flex;
    gap: 15px; /* Espacio entre elementos del menú */
}

.navbar-nav a {
    color: var(--dark-text);
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.navbar-nav a:hover,
.navbar-nav a.active { /* Para marcar la página activa (requiere JS o clases manuales) */
    color: var(--primary-color);
}


/* --- Contenido Principal --- */
.page-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--light-text); /* Fondo blanco para el contenido */
    min-height: calc(100vh - 150px - 100px); /* Ajustar según altura de header y footer */
}

/* --- Página de Inicio (Hero y Grid) --- */
.hero {
    text-align: center;
    padding: 3rem 0;
    margin-bottom: 2rem;
}

.tool-grid-container h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Columnas adaptables */
    gap: 1.5rem;
}

.tool-card {
    background-color: var(--light-text);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--dark-text);
}

.tool-card i { /* Estilo para los iconos */
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 2.5rem; /* Tamaño ícono ajustado */
}

.tool-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
     color: var(--dark-text);
}
.tool-card p {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 0; /* Quitar margen inferior del párrafo */
    flex-grow: 1; /* Para que ocupe espacio si hay diferencias de altura */
}


.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    text-decoration: none;
    border-color: var(--primary-color);
}

/* --- Página de Contacto (Formulario) --- */
.contact-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #fff; /* Fondo blanco para el form */
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
}
.form-group textarea {
    resize: vertical; /* Permitir redimensionar verticalmente */
}

#form-status {
    margin-top: 1rem;
    font-weight: bold;
}


/* --- Página de Herramienta (Layout 3 Columnas) --- */
.tool-page-layout {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr; /* Col izq, Centro (más ancha), Col der */
    gap: 1.5rem; /* Espacio entre columnas */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.left-column, .right-column {
    background-color: #fff; /* Fondo blanco para columnas laterales */
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: fit-content; /* Para que se ajuste al contenido */
}
.left-column h2, .right-column h2 {
     font-size: 1.1rem;
     margin-bottom: 1rem;
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 0.5rem;
}

.left-column ul, .right-column ul {
    padding-left: 0;
}
.left-column li, .right-column li {
    margin-bottom: 0.5rem;
}


.center-column {
     background-color: #fff; /* Fondo blanco para la columna central */
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.center-column h1 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.ad-placeholder {
    border: 2px dashed var(--border-color);
    padding: 2rem 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    background-color: var(--light-bg);
}
.ad-placeholder p {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--secondary-color);
}
.ad-placeholder small {
    color: var(--secondary-color);
}


/* --- Estilos Específicos Calculadora de porcentajes (Ejemplo) --- */
.calculator {
    margin-bottom: 2rem;
}

.calculator-result {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-weight: bold;
}
.tool-description {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.tool-description h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}


/* --- Footer --- */
.site-footer {
    background-color: var(--footer-bg); /* Fondo gris claro para el footer */
    color: var(--secondary-color); /* Texto gris medio */
    padding: 2rem 0 1rem 0; /* Más padding arriba, menos abajo */
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Para que se ajuste en pantallas pequeñas */
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-section {
    flex: 1; /* Ocupan espacio equitativo */
    min-width: 200px; /* Ancho mínimo antes de envolver */
}

.footer-section h3 {
    color: var(--dark-text); /* Encabezados del footer más oscuros */
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.footer-section ul {
    padding: 0;
}
.footer-section li {
    margin-bottom: 0.5rem;
}
.footer-section a {
    color: var(--secondary-color);
}
.footer-section a:hover {
    color: var(--primary-color);
}

.footer-section i { /* Iconos en el footer */
    margin-right: 8px;
    color: var(--primary-color);
}


.footer-bottom {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.footer-bottom i {
     color: var(--primary-color);
}

/* --- Responsividad --- */
@media (max-width: 992px) {
    .tool-page-layout {
        grid-template-columns: 1.5fr 1fr; /* Centro y columna derecha */
    }
    .left-column {
        display: none; /* Ocultar columna izquierda en tablets */
    }
    .container {
         max-width: 960px;
    }
}


@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-nav {
        margin-top: 1rem;
        flex-direction: column; /* Menú vertical en móviles */
        width: 100%;
    }
     .navbar-nav li {
        margin-bottom: 0.5rem;
    }
     .navbar-nav a {
        display: block; /* Que ocupen todo el ancho */
    }

    .tool-page-layout {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
    .left-column, .right-column {
        display: block; /* Mostrar ambas columnas laterales ahora */
        margin-bottom: 1.5rem;
    }

    .footer-content {
        flex-direction: column; /* Columnas del footer una debajo de otra */
        text-align: center;
    }
     .footer-section {
        margin-bottom: 1rem;
    }
     .footer-content .links ul {
        padding-left: 0; /* Quitar padding si estaba centrado */
    }
}


/* En style.css */
@media (max-width: 576px) {
    .tool-grid, .filter-grid { /* Aplicar a ambas clases por si acaso */
        /* Cambia a 2 columnas iguales */
        grid-template-columns: repeat(2, 1fr);
        /* Puedes ajustar el gap si se ven muy apretados */
        /* gap: 1rem; */
    }
     /* ... otros estilos ... */
     h1 { font-size: 1.8rem; }
     h2 { font-size: 1.5rem; }
}





/* --- ESTILOS AÑADIDOS PARA LAYOUT DE 2 COLUMNAS --- */

/* Contenedor principal para el layout de 2 columnas */
.tool-page-layout-2col {
    display: grid;
    /* Define dos columnas: la primera ocupa 2 partes, la segunda 1 parte */
    grid-template-columns: 2fr 0.8fr;
    gap: 1.5rem; /* Espacio entre las columnas */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Estilos para la columna principal (la herramienta) */
.tool-column {
    background-color: #fff; /* Fondo blanco */
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.tool-column h1 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.resultado p {
    margin-bottom: 1.5rem;
    font-size: 1.3rem; 
    color: var(--primary-color);
}

/* Estilos para la columna lateral (sidebar) */
.sidebar-column {
    background-color: #fff; /* Fondo blanco */
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: fit-content; /* Ajusta la altura al contenido */
}

.sidebar-column h2 {
     font-size: 1.1rem;
     margin-bottom: 1rem;
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 0.5rem;
}

.sidebar-column ul {
    list-style: none;
    padding-left: 0;
}

.sidebar-column li {
    margin-bottom: 0.5rem;
}

/* Los estilos para .ad-placeholder y .tool-description/.calculator ya existen y se aplican */


/* --- AJUSTES DE RESPONSIVIDAD PARA EL LAYOUT DE 2 COLUMNAS --- */

@media (max-width: 992px) {
    /* En pantallas medianas, podríamos mantener las 2 columnas o ajustarlas */
    /* .tool-page-layout-2col {
        grid-template-columns: 1.5fr 1fr; // Ejemplo de ajuste
    } */
    /* Mantendremos 2fr 1fr por ahora, pero se puede ajustar */
}


@media (max-width: 768px) {
    /* En pantallas pequeñas (tablets/móviles), las columnas se apilan */
    .tool-page-layout-2col {
        grid-template-columns: 1fr; /* Una sola columna */
    }

    /* Añadir un margen inferior a la columna de herramienta cuando se apila */
    .tool-column {
        margin-bottom: 1.5rem;
    }
}

/* (Asegúrate de que el resto de tus estilos responsivos no entren en conflicto) */

/* --- ESTILOS AÑADIDOS PARA LAYOUT DE 2 COLUMNAS INVERTIDO --- */


/* Los estilos para .tool-column y .sidebar-column ya están definidos */
/* No necesitas redefinirlos a menos que quieras que se vean diferente */
/* en este layout específico. */


/* --- AJUSTES DE RESPONSIVIDAD PARA EL LAYOUT DE 2 COLUMNAS INVERTIDO --- */



/* (Asegúrate de que el resto de tus estilos responsivos no entren en conflicto) */

/* --- ESTILOS AÑADIDOS PARA MENÚ MÓVIL RESPONSIVO --- */

/* Botón Hamburguesa */
.navbar-toggler {
    display: none; /* Oculto por defecto en desktop */
    background: none;
    border: none;
    padding: 0.5rem;
    font-size: 1.5rem; /* Tamaño del icono */
    color: var(--primary-color); /* O var(--dark-text) */
    cursor: pointer;
    line-height: 1; /* Alinear mejor el icono */
}

/* Media Query para pantallas pequeñas (ej. 768px o menos) */
@media (max-width: 768px) {

    .navbar .containerr {
        /* Asegurar que el contenedor permita espacio para el botón */
        flex-wrap: wrap; /* Permitir que los elementos se envuelvan si es necesario */
        justify-content: space-between; /* Mantiene brand a la izq, toggler a la der */
        align-items: center; /* Centrar verticalmente */
    }

    .navbar-togglerr {
        display: block; /* Mostrar el botón hamburguesa en móvil */
    }

    .navbar .container {
    /* Asegúrate que estas propiedades estén definidas para el contenedor en móvil,
       probablemente ya las tienes: */
    display: flex;
    justify-content: space-between; /* Mantiene los elementos en extremos opuestos */
    align-items: center;
    flex-wrap: wrap; /* Permite que .navbar-nav baje si no cabe */
    }

    .navbar-toggler {
        display: block; /* Asegura que sea visible en móvil */
        order: 1;       /* <<-- AJUSTE CLAVE: Haz que el toggler sea el primer elemento en el orden visual */
        margin-right: auto;
        padding: 1rem;
    }

    .navbar-brand {
    order: 2;
    display: none;       /* <<-- AJUSTE CLAVE: Haz que el logo sea el segundo elemento */
    /* Puede que necesites ajustar el margen si el toggler es muy grande,
       o si el logo se ve muy pegado. Por ejemplo: */
    margin-left: auto;  /* // Si solo quieres empujarlo totalmente a la derecha
                           // pero con order: 2 y justify-content: space-between debería ser suficiente.
    */
    }

    .navbar-nav {
        /* Tus estilos existentes para el menú desplegable, por ejemplo: */
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        width: 100%;
        order: 3;       /* <<-- IMPORTANTE: Asegura que la lista de navegación vaya después */
        /* ... (resto de tus estilos para .navbar-nav.active, etc.) ... */
    }

    .navbar-navr {
        /* Ocultar el menú normal y prepararlo para desplegarse */
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column; /* Enlaces en vertical */
        width: 100%; /* Ocupar todo el ancho */
        order: 3; /* Asegurar que vaya después del brand y toggler en el flujo flex */
        background-color: var(--light-text); /* Fondo del menú desplegado */
        position: absolute; /* Sacarlo del flujo normal */
        top: 100%; /* Posicionarlo justo debajo del header */
        left: 0;
        z-index: 998; /* Asegurar que esté sobre el contenido pero debajo del header sticky */
        border-top: 1px solid var(--border-color);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

        /* Para animación suave (Alternativa a display:none/flex) */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    }

    .navbar-nav.active {
        display: flex; /* Mostrar el menú cuando tenga la clase 'active' */
        /* Para animación suave (Alternativa a display:none/flex) */
        max-height: 100vh; /* Altura máxima suficiente para todos los items */
        opacity: 1;
    }

    .navbar-nav li {
        width: 100%;
        text-align: left; /* O 'center' si prefieres */
        border-bottom: 1px solid var(--border-color); /* Línea separadora */
    }
    .navbar-nav li:last-child {
        border-bottom: none;
    }

    .navbar-nav a {
        display: block; /* Hacer que el enlace ocupe todo el 'li' */
        padding: 1rem 1.5rem; /* Espaciado interno */
        width: 100%;
        color: var(--dark-text);
    }

    .navbar-nav a:hover {
        background-color: var(--light-bg); /* Un fondo sutil al pasar el ratón */
        color: var(--primary-color);
        text-decoration: none;
    }

     /* Ajustar el contenedor navbar si es necesario */
    .navbar {
        position: relative; /* Necesario para el posicionamiento absoluto del menú */
        /* Si tu navbar es sticky, asegúrate que .navbar-nav tenga un z-index menor */
    }
}

/* --- ESTILOS AÑADIDOS PARA SUBMENÚ DESPLEGABLE --- */

/* Contenedor del elemento dropdown */
.navbar-nav .dropdown {
    position: relative; /* Contexto para posicionar el submenú */
}

/* Estilo para el enlace que activa el dropdown (opcional) */
.navbar-nav .dropdown-toggle::after {
     /* Si no usas el icono Font Awesome, puedes crear una flecha con CSS */
     /* content: ' ▼'; */
     /* display: inline-block; */
     /* margin-left: 0.3em; */
     /* font-size: 0.7em; */
}
.navbar-nav .dropdown-toggle .fa-chevron-down {
    margin-left: 0.3em;
    font-size: 0.7em; /* Hacer el icono un poco más pequeño */
    transition: transform 0.2s ease-in-out; /* Transición para rotación */
}


/* Submenú (oculto por defecto en desktop) */
.dropdown-menu {
    display: none; /* Oculto inicialmente */
    position: absolute;
    top: 100%; /* Justo debajo del elemento padre */
    left: 0;
    z-index: 1001; /* Por encima de otros elementos */
    min-width: 200px; /* Ancho mínimo del desplegable */
    background-color: var(--light-text);
    border: 1px solid var(--border-color);
    border-radius: 0 0 5px 5px; /* Redondear esquinas inferiores */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0.5rem 0; /* Espaciado vertical interno */
    margin: 0; /* Resetear margen */

     /* Para animación suave (alternativa a display: none/block) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Empezar ligeramente abajo */
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
}

/* Mostrar submenú al hacer hover sobre el LI padre (SOLO DESKTOP) */
@media (min-width: 769px) { /* Aplicar solo en pantallas mayores a la móvil */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block; /* O la alternativa con transiciones */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Rotar flecha en hover (SOLO DESKTOP) */
    .navbar-nav .dropdown:hover > .dropdown-toggle .fa-chevron-down {
        transform: rotate(180deg);
    }
}


/* Estilo de los items dentro del submenú */
.dropdown-menu li {
    /* Resetear bordes si vienen del menú móvil */
    border-bottom: none;
}
.dropdown-item {
    display: block;
    padding: 0.6rem 1.5rem; /* Espaciado interno */
    color: var(--dark-text);
    text-decoration: none;
    white-space: nowrap; /* Evitar que el texto se divida en líneas */
    background-color: transparent;
    width: 100%;
    text-align: left;
    border: none; /* Asegurar que no tenga borde si era un botón */
}

.dropdown-item:hover {
    background-color: var(--light-bg);
    color: var(--primary-color);
}

/* --- AJUSTES PARA EL SUBMENÚ EN MÓVIL --- */
@media (max-width: 768px) {

    /* Cuando el menú móvil está desplegado, el submenú se comporta diferente */
    .navbar-nav .dropdown-menu {
        position: static; /* Volver al flujo normal del documento */
        display: none; /* Sigue oculto por defecto DENTRO del menú móvil */
        width: 100%;
        box-shadow: none;
        border: none;
        border-top: 1px dashed var(--border-color); /* Línea superior para separar */
        background-color: var(--light-bg); /* Fondo ligeramente diferente para indicar anidación */
        padding-left: 1.5rem; /* Indentar los sub-items */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
         margin-top: 0; /* Resetear margen si es necesario */

         /* Resetear transiciones de escritorio */
         opacity: 1;
         visibility: visible;
         transform: none;
         transition: none;
         max-height: none; /* Resetear si usamos max-height en el menú principal */
    }

    /* Mostrar el submenú móvil cuando el LI padre tenga la clase 'active' (controlado por JS) */
    .navbar-nav .dropdown.active > .dropdown-menu {
        display: block;
    }

     /* Rotar la flecha cuando el submenú móvil esté activo */
    .navbar-nav .dropdown.active > .dropdown-toggle .fa-chevron-down {
        transform: rotate(180deg);
    }
    /* Evitar rotación por hover en móvil */
     .navbar-nav .dropdown:hover > .dropdown-toggle .fa-chevron-down {
          transform: none; /* O rotate(0deg) */
     }

    .dropdown-item {
        padding: 0.75rem 1.5rem 0.75rem 2.5rem; /* Más indentación para los items en móvil */
    }
}

/* --- ESTILOS PARA FILTRADO DE ELEMENTOS --- */

.filter-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center; /* Centrar botones */
}

.filter-nav {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap; /* Permitir que los botones pasen a la siguiente línea */
    justify-content: center; /* Centrar botones */
    gap: 0.75rem; /* Espacio entre botones */
}

.filter-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-text);
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Botones redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    text-transform: capitalize; /* Poner en mayúscula la primera letra */
}

.filter-btn:hover {
    background-color: var(--border-color);
    color: var(--primary-color);
}

/* Estilo del botón activo */
.filter-btn.active {
    background-color: var(--primary-color);
    color: var(--light-text);
    border-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}

/* --- Estilos para los Items Filtrables y Efectos --- */

/* Contenedor de la cuadrícula (ya deberías tener estilos para .tool-grid) */
.filter-grid {
   /* Asegúrate que tu .tool-grid tenga display: grid; y gap */
   /* Ejemplo: */
   /* display: grid; */
   /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */
   /* gap: 1.5rem; */
}

/* Estilos base para los items (ya deberías tener .tool-card) */
.filter-grid .tool-card {
    /* Añadir transiciones para el efecto */
    transition: transform 0.4s ease, opacity 0.4s ease;
    backface-visibility: hidden; /* Ayuda a prevenir parpadeos en transformaciones */
    will-change: transform, opacity; /* Optimización para el navegador */
    display: block; /* O flex, grid si tu card es más compleja */
}

/* Clase para ocultar elementos filtrados */
.filter-grid .tool-card.hide {
    transform: scale(0.8); /* Encoger ligeramente */
    opacity: 0;
    /* Hacemos que no ocupe espacio DESPUÉS de la animación */
    /* Para esto, necesitamos JS para añadir display:none o manejarlo con altura/margen */
    /* Por simplicidad, JS añadirá display: none después de un pequeño delay */
    /* O podemos dejar que ocupen espacio transparente */
    pointer-events: none; /* Evitar interacción mientras está oculto/transicionando */
    /* Opcional si quieres que colapsen el espacio más rápido: */
    /* transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease 0.1s, height 0.3s ease 0.1s, margin 0.3s ease 0.1s, padding 0.3s ease 0.1s; */
    /* width: 0 !important; */
    /* height: 0 !important; */
    /* padding: 0 !important; */
    /* margin: 0 !important; */
    /* overflow: hidden !important; */
}

/* Clase para mostrar elementos (cuando se quita .hide) */
.filter-grid .tool-card.show {
    transform: scale(1);
    opacity: 1;
}

/* --- ESTILOS ADICIONALES PARA CALCULADORA IVA V2 --- */

/* Grupo de Radio Buttons */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espacio horizontal */
    margin-top: 0.5rem;
}

.radio-label {
    display: flex; /* Alinear radio y texto */
    align-items: center;
    cursor: pointer;
    gap: 0.4rem; /* Espacio entre radio y texto */
}
/* Ocultar el radio button por defecto (opcional, si quieres un look custom) */
/* .radio-label input[type="radio"] { appearance: none; -webkit-appearance: none; ... } */


/* Campos de Salida (Readonly) */
.output-group label {
    color: var(--secondary-color); /* Color de etiqueta más suave */
     font-size: 0.9em;
}

.output-field {
    background-color: var(--light-bg) !important; /* Fondo gris claro */
    border: 1px solid var(--border-color) !important;
    font-weight: bold;
    color: var(--dark-text) !important;
    cursor: not-allowed;
}
.output-field:focus {
    outline: none; /* Quitar outline en foco */
    box-shadow: none;
}

/* Campo de salida para el total (más destacado) */
.output-total {
    font-size: 1.1em;
    color: var(--primary-color) !important; /* Color primario para el total */
}

/* Encabezado de Resultados */
.results-header {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.2em;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}


/* --- AJUSTES CSS PARA IMPRESIÓN (añadir o modificar en @media print) --- */
@media print {
    /* ... tus otros estilos de @media print ... */

    .radio-group {
        display: none !important; /* Ocultar radios en impresión */
        /* Podrías mostrar la opción seleccionada con JS si es necesario */
    }

     /* Estilo para los inputs de salida en impresión */
    .output-field {
        background-color: #eee !important; /* Fondo gris muy claro */
        color: #000 !important;
        border: 1px solid #ccc !important;
        font-weight: normal !important; /* Resetear bold si no se quiere */
        padding: 5px !important;
    }
     .output-total {
         font-weight: bold !important; /* Mantener bold para total */
         color: #000 !important;
     }

     .results-header {
         margin-top: 1cm;
         padding-top: 0.5cm;
         border-top: 1px solid #ccc;
         font-size: 14pt;
     }
}

/* --- ESTILOS ADICIONALES PARA GENERADOR DE NÚMEROS --- */

/* Estilo para el área de resultado del número aleatorio */
.random-result {
    padding: 1.5rem 1rem; /* Más padding */
    text-align: center; /* Centrar el número */
    min-height: 80px; /* Altura mínima para que no salte tanto */
    display: flex; /* Centrar verticalmente también */
    justify-content: center;
    align-items: center;
}

.random-result span { /* Estilo para el número en sí */
    font-size: 3em; /* Mucho más grande */
    font-weight: bold;
    color: var(--primary-color); /* Color primario */
    line-height: 1;
    /* Animación opcional de aparición */
    animation: fadeInScale 0.4s ease-out;
}

/* Animación opcional */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- AJUSTES CSS PARA IMPRESIÓN (añadir o modificar en @media print) --- */
@media print {
     /* ... tus otros estilos de @media print ... */

     .random-result span {
        font-size: 24pt !important; /* Tamaño grande para impresión */
        color: #000 !important;
        animation: none !important; /* Quitar animación en impresión */
     }
     .results-header {
         text-align: left; /* Alinear a la izquierda en impresión */
     }
}


/* --- AJUSTE LAYOUT PARA GENERADOR DE NÚMEROS (Sidebar 1/3, Tool 2/3) --- */
/* Añade esta regla a tu style.css */

.tool-page-layout-2col-reversed.random-generator-page {
    /* Opción 1: Usando fracciones (proporción exacta 1/3 vs 2/3) */
    grid-template-columns: 1fr 2fr;

    /* Opción 2: Sidebar con ancho fijo (ajusta 280px o 300px según tu preferencia) */
    /* grid-template-columns: 280px 1fr; */

    gap: 1.5rem; /* Mantener o ajustar el espacio */
}

/* Asegúrate que la regla responsiva para apilar en móvil siga aplicando */
@media (max-width: 768px) {
    .tool-page-layout-2col-reversed.random-generator-page {
        grid-template-columns: 1fr !important; /* Forzar 1 columna */
    }
    /* Mantener las reglas de 'order' para .tool-column y .sidebar-column */
    .tool-page-layout-2col-reversed.random-generator-page > .tool-column { order: 1; margin-bottom: 1.5rem; }
    .tool-page-layout-2col-reversed.random-generator-page > .sidebar-column { order: 2; margin-bottom: 0; }
}





/* --- ESTILOS ADICIONALES PARA HERRAMIENTA DE EMOJIS --- */

/* Área de Copiado */
.copy-area {
    margin-bottom: 1rem;
    position: relative; /* Para posicionar mensajes si es necesario */
}

#emoji-output {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1.2em; /* Hacer los emojis un poco más grandes en el output */
    resize: vertical; /* Permitir redimensionar verticalmente */
    min-height: 100px;
}

.copy-actions {
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.copy-status-message {
    font-weight: bold;
    color: green;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
}
.copy-status-message.visible {
    opacity: 1;
}


/* Pestañas de Categorías */
.emoji-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1 rem;
    padding-bottom: 0.3 rem;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    color: var(--dark-text);
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.tab-btn:hover {
    background-color: var(--border-color);
}
.tab-btn.active {
    background-color: var(--primary-color);
    color: var(--light-text);
    border-color: var(--primary-color);
    font-weight: bold;
}

/* Área de Visualización de Emojis */
.emoji-display-area {
    margin-top: 1rem;
    max-height: 2000px; /* Altura máxima con scroll si hay muchos emojis */
    overflow-y: auto; /* Scroll vertical */
    padding-right: 10px; /* Espacio para la barra de scroll */
}

.emoji-category-section h2 {
    font-size: 1.2em;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color);
}
.emoji-category-section:first-child h2 {
    margin-top: 0; /* Sin margen superior para la primera categoría */
}


.emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* Espacio pequeño entre emojis */
}

.emoji-item {
    font-size: 1.8em; /* Tamaño de los emojis en la cuadrícula */
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    line-height: 1;
    display: inline-block; /* O inline-flex */
    text-align: center;
    min-width: 40px; /* Ancho mínimo para consistencia */
}

.emoji-item:hover {
    background-color: var(--light-bg);
    transform: scale(1.1);
}

/* --- AJUSTES CSS PARA IMPRESIÓN (añadir o modificar en @media print) --- */
@media print {
    /* ... tus otros estilos de @media print ... */

     .copy-area textarea {
          border: 1px solid #ccc !important;
          background-color: #f8f8f8 !important;
          color: #000 !important;
          min-height: 5cm !important; /* Altura mínima en impresión */
     }
     .copy-actions,
     .emoji-category-tabs,
     .emoji-display-area /* Ocultar selección de emojis en impresión  https://codingartistweb.com/*/
     {
        display: none !important;
     }
} 

/* --- ESTILOS ADICIONALES PARA RULETA ALEATORIA --- */

.roulette-tool {
    display: flex;
    flex-direction: column; /* Apilar controles debajo de la ruleta */
    align-items: center; /* Centrar horizontalmente */
    gap: 2rem;
}

.roulette-inputs {
    width: 100%;
    max-width: 500px; /* Limitar ancho del área de texto */
}

#options-input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.75rem;
    font-size: 1rem;
    min-height: 150px; /* Reducir altura mínima */
}

.roulette-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roulette-container {
    position: relative;
    /* Usar max-width y aspect-ratio para hacerlo algo responsivo */
    width: 100%;
    max-width: 420px; /* Ancho máximo del contenedor */
    aspect-ratio: 1 / 1; /* Mantenerlo cuadrado */
    margin: 0 auto 1rem auto;
    overflow: hidden;
}

#roulette-wheel {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Asegurar que el canvas sea redondo visualmente */
    /* La transición se añade/quita con JS para controlar el easing de parada */
}

/* Clase para aplicar durante el giro */
#roulette-wheel.spinning {
     /* Duración más larga, easing de desaceleración */
    transition: transform 5s cubic-bezier(0.2, 0.8, 0.4, 1);
}


/* Puntero (Triángulo rojo a la derecha) */

/*
.roulette-pointer {
    width: 0;
    height: 0;
    border-top: 18px solid transparent; /* Ajustar tamaño */
  /*  border-bottom: 18px solid transparent;
    border-left: 28px solid #E71D36; /* Rojo similar al de colores */
  /*  position: absolute;
    right: -5px; /* Ligeramente fuera a la derecha */
  /*  top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Sombra sutil */
   /* filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.3));
}

/* Botón central para girar */
.spin-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;  /* Tamaño relativo al canvas */
    height: 90px;
    background-color: rgba(40, 40, 40, 0.85); /* Fondo oscuro semi-transparente */
    color: white;
    border: 3px solid #f0f0f0; /* Borde blanco */
    border-radius: 50%;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.spin-button span {
    display: block;
    line-height: 1.1;
}

.spin-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.05);
}
.spin-button:active {
    transform: translate(-50%, -50%) scale(0.95);
}
.spin-button:disabled {
    background-color: rgba(100, 100, 100, 0.7);
    cursor: not-allowed;
    box-shadow: none;
}

/* Área de resultado debajo de la ruleta */
.roulette-final-result {
    margin-top: 0.5rem; /* Menos margen superior */
    font-size: 1.6em;
    text-align: center;
    background-color: white;
    padding: 0.8rem 1.5rem;
    min-height: 2em;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 450px; /* Ancho máximo un poco mayor */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.roulette-final-result span {
     color: var(--primary-color);
     font-weight: bold;
}

/* Ajustes responsivos */
@media (max-width: 480px) {
     .roulette-container {
         max-width: 300px; /* Reducir más en móviles pequeños */
     }
     .spin-button {
         width: 70px;
         height: 70px;
         font-size: 1em;
         border-width: 2px;
     }
      .roulette-pointer {
          border-top-width: 15px;
          border-bottom-width: 15px;
          border-left-width: 25px;
          right: -8px; /* Ajustar posición si es necesario */
     }
     .roulette-final-result {
        font-size: 1.3em;
     }
}

/* --- ESTILOS DE IMPRESIÓN (Añadir/Modificar en @media print) --- */
@media print {
    /* ... (ocultar header, footer, sidebar, ads, etc. como antes) ... */
     .roulette-inputs, /* Ocultar área de texto y botones */
     .calculator-actions,
     .spin-button,     /* Ocultar botón de girar */
     .roulette-final-result /* Ocultar resultado específico del giro */
     {
         display: none !important;
     }
      .roulette-tool {
          align-items: center;
      }
     .roulette-display {
         min-width: auto;
         margin: 0;
         padding: 0;
     }
     .roulette-container {
         width: 16cm; /* Tamaño fijo para impresión */
         height: 16cm;
         max-width: 100%;
         margin: 1cm auto;
         border: 1px solid #ccc;
         border-radius: 50%;
         overflow: hidden; /* Evitar que el texto se salga */
     }
      #roulette-wheel {
         transition: none !important; /* Quitar animación */
         transform: rotate(0deg) !important; /* Resetear rotación */
     }
    /* .roulette-pointer { /* Ocultar puntero en impresión */
       /*   display: none !important;
     }

     /* Ajustar tamaño de fuente en canvas para impresión */
     /* Nota: Esto requiere redibujar el canvas específicamente para impresión, lo cual es complejo. */
     /* Por simplicidad, aceptamos el tamaño de fuente de pantalla. */
}



/* --- AJUSTE LAYOUT PRINCIPAL (para dar más espacio a herramientas) --- */
.tool-page-layout-2col-reversed {
    display: grid;
    /* Sidebar más estrecho (ej. 280px), Tool el resto */
    grid-template-columns: 280px 1fr;
    /* O proporción: grid-template-columns: 0.8fr 2.2fr; */
    gap: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* --- NUEVOS ESTILOS PARA LAYOUT INTERNO DE RULETA --- */
.roulette-content-wrapper {
    display: flex;
    gap: 2rem; /* Espacio entre ruleta e inputs */
    align-items: flex-start; /* Alinear arriba */
    flex-wrap: wrap; /* Permitir que se apilen en pantallas pequeñas */
}

.roulette-display {
    flex: 1 1 420px; /* Permitir crecer/encoger, base de 420px */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px; /* Ancho mínimo para la ruleta */
}

.roulette-inputs {
    flex: 1 1 250px; /* Permitir crecer/encoger, base de 250px */
    min-width: 200px;
}

/* Mantener estilos de .roulette-container, #roulette-wheel, etc. */
/* Ajustar tamaño si es necesario para el nuevo layout */
.roulette-container {
    position: relative;
    width: 100%; /* Ocupar ancho del contenedor padre (.roulette-display) */
    max-width: 470px; /* Limitar tamaño máximo */
    aspect-ratio: 1 / 1;
    margin: 0 auto 1rem auto;
    overflow: hidden;
}

/* Aumentar tamaño de fuente en el botón de giro */
.spin-button {
    /* ... otros estilos ... */
    font-size: 1.1em; /* Un poco más pequeño para que quepa "GIRAR" */
}
.spin-button span { /* Centrar mejor texto corto */
    line-height: 1.1;
    display: block;
}

/* Ajustes Responsivos para el layout interno */
@media (max-width: 992px) {
     /* Podrían seguir lado a lado o apilarse antes */
}
@media (max-width: 768px) {
    /* Ajuste del layout principal (ya definido antes, sidebar va abajo) */
     .tool-page-layout-2col-reversed {
        grid-template-columns: 1fr;
     }
     .sidebar-column {
         margin-bottom: 1.5rem;
     }
     /* Apilar ruleta e inputs en pantallas más pequeñas */
     .roulette-content-wrapper {
         flex-direction: column;
         align-items: center; /* Centrar todo */
         gap: 1.5rem;
     }
     .roulette-inputs {
         width: 100%;
         max-width: 450px; /* Limitar ancho del textarea */
     }
     .roulette-display {
         width: 100%;
         max-width: 400px; /* Limitar ancho de ruleta */
     }
}


/* --- (Asegúrate que los estilos anteriores para la ruleta, puntero, resultado, etc. sigan existiendo y se apliquen) --- */
/* --- (Verifica también los estilos de @media print para ocultar/mostrar lo correcto) --- */
@media print {
     /* ... (ocultar header, footer, sidebar, ads, botones...) ... */
     .roulette-inputs { display: none !important; } /* Ocultar textarea */
     .tool-page-layout-2col-reversed, main.container, .tool-column {
         grid-template-columns: 1fr !important; /* Asegurar 1 columna */
         width: 100% !important; padding: 0 !important; margin: 0 !important;
     }
     .roulette-content-wrapper { display: block; } /* Quitar flex en print */
     .roulette-display { max-width: 100%; width: 18cm; margin: auto;} /* Centrar y dar tamaño fijo */
     .roulette-container { width: 16cm; height: 16cm; }
     /* ... otros estilos de impresión ... */
}



/* --- AJUSTE LAYOUT PRINCIPAL (DAR MÁS ESPACIO A HERRAMIENTA) --- */
.tool-page-layout-2col-reversed {
    display: grid;
    /* Sidebar más estrecho (ej. 250px), Tool el resto */
    grid-template-columns: 250px 1fr; /* Ajusta 250px si necesitas */
    /* O proporción más agresiva: grid-template-columns: 0.7fr 2.3fr; */
    gap: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* --- AJUSTE LAYOUT INTERNO RULETA (LADO A LADO 70/30 aprox) --- */
.roulette-content-wrapper {
    display: flex;
    gap: 1.5rem; /* Espacio entre ruleta e inputs */
    align-items: flex-start;
    flex-wrap: wrap;
}

.roulette-display {
    flex: 2.1; /* Más peso para la ruleta (aprox 70%) */
    min-width: 280px; /* Ancho mínimo ruleta */
    /* ... otros estilos existentes ... */
}

.roulette-inputs {
    flex: 0.9; /* Menos peso para inputs (aprox 30%) */
    min-width: 200px; /* Ancho mínimo inputs */
     /* ... otros estilos existentes ... */
}

/* --- MODIFICACIÓN DEL PUNTERO --- */
.roulette-pointer {
    width: 0;
    height: 0;
    /* Cambiado a border-right para apuntar desde la izquierda */
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid #D80032; /* Rojo más vivo */
    position: absolute;
    /* Cambiado a left */
    left: 0px;
    right: auto; /* Asegurar que no haya conflicto con 'right' */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/* --- (Asegúrate que los otros estilos de la ruleta, botones, etc., sigan existiendo) --- */

/* --- (Ajustes responsivos existentes deberían funcionar, pero revisa si el cambio de layout principal requiere ajustes adicionales en @media) --- */
@media (max-width: 992px) {
     /* Puede que quieras apilar antes con el sidebar más estrecho */
     .tool-page-layout-2col-reversed {
          /* Quizás volver a 1fr 2fr o ya a 1fr si se ve apretado */
          grid-template-columns: 1fr 2fr;
     }
}
@media (max-width: 768px) {
     /* Se apilan de todas formas, revisar que el orden sea correcto */
     .tool-page-layout-2col-reversed {
         grid-template-columns: 1fr;
     }
     .sidebar-column { margin-bottom: 1.5rem; order: 2; } /* Sidebar abajo */
     .tool-column { order: 1; } /* Herramienta arriba */
     .roulette-content-wrapper { flex-direction: column; align-items: center; }
     .roulette-display, .roulette-inputs { flex-basis: auto; width: 100%; max-width: 450px; }
}


/* ============================================================= */
/* === CSS COMPLETO (REVISADO) PARA CRONÓMETRO DIGITAL (v11) === */
/* ============================================================= */



/* --- Clase opcional para la página y ajuste layout --- */
/* Aplica esta clase al <main> en cronometro.html si quieres sidebar más estrecho */
.tool-page-layout-2col-reversed.stopwatch-page {
    display: grid;
    /* Sidebar ~33%, Tool ~67% */
    grid-template-columns: 1fr 2fr; /* Proporción estándar */
    /* O Sidebar fijo: grid-template-columns: 300px 1fr; */
    gap: 1.5rem;
    /* Otros estilos heredados de .tool-page-layout-2col-reversed */
}

/* --- Estilos Generales de la Herramienta --- */
.stopwatch-tool {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido de la herramienta */
    width: 100%;
}

/* --- Display Principal (Fondo Claro, Texto Negro) --- */
.stopwatch-display-container {
    width: 100%;
    max-width: 700px; /* Limitar ancho máximo del display */
    background-color: #ffffff; /* Fondo blanco explícito */
    padding: 1.5rem 1rem; /* Padding vertical e horizontal */
    border-radius: 8px; /* Esquinas redondeadas */
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color); /* Borde sutil */
    box-shadow: 0 2px 5px rgba(0,0,0,0.07); /* Sombra externa suave */
}

.stopwatch-time {
    /* Fuente segura Monospace */
    font-family: 'Courier New', Courier, monospace;
    /* Tamaño grande y fluido ajustado */
    font-size: clamp(3em, 16vw, 7.5em); /* Reducido ligeramente */
    /* Color de texto oscuro/negro */
    color: var(--dark-text);
    text-align: center;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: bold;
    text-shadow: none; /* Sin sombra */
    white-space: nowrap; /* Evitar saltos */
}

/* Estilo separado para milisegundos */
.stopwatch-time .milliseconds {
    font-size: 0.45em; /* Tamaño relativo */
    color: var(--secondary-color); /* Gris secundario */
    font-weight: normal;
    vertical-align: baseline;
    margin-left: 4px; /* Espacio */
}

/* --- Controles --- */
.stopwatch-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    margin-bottom: 1rem;
}
.stopwatch-controls-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    margin-bottom: 2rem;
}

/* Estilos botones (heredados + ajustes) */
.stopwatch-controls .btn,
.stopwatch-controls-secondary .btn {
    min-width: 125px; /* Ancho mínimo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
.stopwatch-controls .btn-lg {
    padding: 0.7rem 1.5rem;
    font-size: 1.1em;
    /* font-weight: bold; */ /* Ya heredado de .btn? */
}
/* Colores específicos botones (ejemplos) */
.btn-success { background-color: #28a745; border-color: #28a745; color: white;}
.btn-success:hover { background-color: #218838; border-color: #1e7e34;}
.btn-danger { background-color: #dc3545; border-color: #dc3545; color: white;}
.btn-danger:hover { background-color: #c82333; border-color: #bd2130;}
.btn-warning { background-color: #ffc107; border-color: #ffc107; color: #212529;}
.btn-warning:hover { background-color: #e0a800; border-color: #d39e00; color: #212529;}
.btn-info { background-color: #17a2b8; border-color: #17a2b8; color: white;}
.btn-info:hover { background-color: #138496; border-color: #117a8b;}
.btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); color: white;}
.btn-secondary:hover { background-color: #5a6268; border-color: #545b62;}


/* --- Área de Vueltas --- */
.laps-area {
    width: 100%;
    max-width: 600px;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}
.laps-area h3 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    font-weight: normal;
    font-size: 1.1em;
}
.laps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
}
.laps-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: #fff;
}
.laps-list li:last-child { border-bottom: none; }
.laps-list li:nth-child(even) { /* Fondo alterno más sutil */
    background-color: #fdfdfd;
}
.lap-number { color: var(--secondary-color); font-weight: bold; min-width: 40px; flex-basis: 40px; flex-shrink: 0; }
.lap-time { min-width: 130px; text-align: right; flex-grow: 1; margin: 0 1rem; color: var(--dark-text); }
.lap-total-time { min-width: 130px; text-align: right; font-weight: bold; color: var(--primary-color); flex-grow: 1; }
.lap-placeholder { color: var(--secondary-color); font-style: italic; text-align: center; padding: 1rem; justify-content: center; display: block; }

/* Animación para resaltar nueva vuelta */
.laps-list li.new-lap { animation: highlightLap 0.8s ease-out; }
@keyframes highlightLap {
  from { background-color: #cfe2ff; transform: scale(1.01); } /* Azul primario claro */
  to { background-color: #fff; transform: scale(1); } /* Terminar en blanco */
}
/* Quitar el cambio de color de texto forzado en la animación */
.laps-list li.new-lap span { animation: none; }


/* --- Estilos para Pantalla Completa (Usando Clase JS) --- */
body.stopwatch-fullscreen-active {
    overflow: hidden !important; /* Ocultar scroll del body */
}
/* Ocultar header, footer, sidebar cuando body tiene la clase */
body.stopwatch-fullscreen-active > header,
body.stopwatch-fullscreen-active > footer,
body.stopwatch-fullscreen-active > main > aside.sidebar-column {
    display: none !important;
}

/* Estilos para el CONTENEDOR de la herramienta cuando tiene la clase */
#stopwatch-tool-container.stopwatch-fullscreen-active {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background-color: #FFFFFF !important; /* Fondo blanco */
    z-index: 2147483647 !important; /* Z-index muy alto */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2vw !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Estilos para el CONTENEDOR DEL DISPLAY dentro de pantalla completa */
#stopwatch-tool-container.stopwatch-fullscreen-active .stopwatch-display-container {
    display: block !important; background: none !important; box-shadow: none !important;
    border: none !important; margin: 0 !important; padding: 0 !important;
    width: auto !important; max-width: 95%;
}

/* Estilos para el TIEMPO dentro de pantalla completa */
#stopwatch-tool-container.stopwatch-fullscreen-active .stopwatch-time {
    font-size: clamp(8em, 25vw, 20em) !important;
    color: black !important; /* Texto negro */
    text-shadow: none !important;
    line-height: 1.1 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estilos para MILISEGUNDOS dentro de pantalla completa */
#stopwatch-tool-container.stopwatch-fullscreen-active .stopwatch-time .milliseconds {
     font-size: 0.4em !important;
     color: #444 !important; /* Gris oscuro */
     font-weight: normal !important;
}

/* Ocultar otros elementos DENTRO del contenedor principal en fullscreen */
#stopwatch-tool-container.stopwatch-fullscreen-active > *:not(.stopwatch-display-container) {
    display: none !important;
}


/* --- Ajustes Responsivos (Revisados) --- */
@media (max-width: 992px) {
     /* Ajustar layout principal si se definió diferente */
     .tool-page-layout-2col-reversed.stopwatch-page {
         grid-template-columns: 1fr 2fr; /* Proporción estándar tablet */
     }
}
/* En style.css */

/* --- AJUSTES RESPONSIVOS MÁS AGRESIVOS PARA CRONÓMETRO --- */

@media (max-width: 768px) { /* Tablets y móviles grandes en vertical */
    /* ... otros estilos responsivos ... */

    .stopwatch-time {
        /* Reducir más el tamaño base y el escalado */
        font-size: clamp(2.8em, 15vw, 5em); /* <<-- VALOR ANTERIORMENTE SUGERIDO: clamp(3em, 16vw, 5.5em); */
        letter-spacing: 1px; /* Mantener o reducir si es necesario */
    }
     .stopwatch-time .milliseconds {
         font-size: 0.45em; /* Ajustar si el principal cambia mucho */
     }

     /* Para layout normal (Herramienta Izq | Sidebar Der) */
    .tool-page-layout-2col-reversed.stopwatch-page {
        grid-template-columns: 1fr; /* Apilar: 1 sola columna */
    }


    .tool-page-layout-2col-reversed.stopwatch-page > .tool-column { order: 1; margin-bottom: 1.5rem; }
    .tool-page-layout-2col-reversed.stopwatch-page > .sidebar-column { order: 2; margin-bottom: 0; }

         
    }

    /* ... (reglas de layout y laps como estaban) ... */
}

@media (max-width: 500px) { /* Móviles pequeños */
    /* ... otros estilos responsivos ... */

    .stopwatch-time {
        /* Reducción significativa aquí */
        /* font-size: clamp(2.4em, 18vw, 4.5em); */ /* <- Valor anteriormente sugerido */
        font-size: clamp(2.0em, 16vw, 4.0em); /* <<-- NUEVO VALOR MÁS PEQUEÑO */
        letter-spacing: 0px; /* Sin espaciado extra */
    }
    .stopwatch-time .milliseconds {
        font-size: 0.45em; /* Ajustar si es necesario */
    }

    /* Ajuste botones (igual que antes) */
    .stopwatch-controls .btn, .stopwatch-controls-secondary .btn {
         flex-basis: calc(50% - 0.5rem);
         font-size: 0.9rem; padding: 0.6rem; min-width: auto;
    }
    .laps-list { font-size: 0.9em;}

    /* Reducir padding del contenedor principal del display si ayuda */
    .stopwatch-display-container {
        padding: 1rem 0.5rem;
    }


    /* Para layout normal (Herramienta Izq | Sidebar Der) */
    .tool-page-layout-2col-reversed.stopwatch-page {
        grid-template-columns: 1fr; /* Apilar: 1 sola columna */
    }


    .tool-page-layout-2col-reversed.stopwatch-page > .tool-column { order: 1; margin-bottom: 1.5rem; }
    .tool-page-layout-2col-reversed.stopwatch-page > .sidebar-column { order: 2; margin-bottom: 0; }

         
    }

}

/* --- (Estilos de @media print como estaban) --- */


/* --- Estilos de Impresión --- */
@media print {
    body > header, body > footer, .sidebar-column, .stopwatch-controls, .stopwatch-controls-secondary, .calculator-actions, .tool-description, .ad-placeholder {
        display: none !important; visibility: hidden !important;
    }
    .tool-page-layout-2col-reversed, main.container, .tool-column {
        display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
        border: none !important; box-shadow: none !important; grid-template-columns: 1fr !important;
    }
    .stopwatch-display-container {
        background: none !important; border: 1px solid #ccc !important; box-shadow: none !important; padding: 1cm !important; margin-bottom: 1cm;
    }
    .stopwatch-time {
        font-size: 18pt !important; color: black !important; text-shadow: none !important;
        font-family: monospace !important; letter-spacing: 1px !important; font-weight: normal !important;
    }
    .stopwatch-time .milliseconds {
        font-size: 0.6em !important; color: #333 !important;
    }
    .laps-area { border-top: 1px solid #ccc !important; margin-top: 1cm; padding-top: 0.5cm; }
    .laps-list { max-height: none !important; border: 1px solid #ccc !important; page-break-inside: auto; }
    .laps-list li { background-color: transparent !important; font-size: 11pt; display: block; padding: 0.2cm 0.5cm; }
    .laps-list span { display: inline-block; margin-right: 1cm; }
    .laps-list .lap-number { min-width: 3em; }
    .laps-list .lap-time { color: #333; }
    .laps-list .lap-total-time { color: black !important; font-weight: bold;}
    h1 { font-size: 16pt; text-align: left; margin-bottom: 1cm; }
    p { font-size: 12pt; margin-bottom: 0.5cm; }
}

/* =========================================== */
/* == FIN CSS CRONÓMETRO DIGITAL (v11 - Fix) == */
/* =========================================== */

/* ==================================================== */
/* === CSS REVISADO PARA ALEATORIZAR LISTA (Layout) === */
/* ==================================================== */

/* --- AJUSTE LAYOUT PRINCIPAL (OPCIONAL: Sidebar 1/3, Tool 2/3) --- */
/* Aplicar esta clase al <main> en aleatorizar-lista.html */
/* O modifica directamente .tool-page-layout-2col-reversed si quieres que afecte a todas */
.tool-page-layout-2col-reversed.list-randomizer-page {
    display: grid;
    /* Sidebar ~30-35%, Tool ~65-70% */
    /* Usando fr: */
    grid-template-columns: 1fr 2.2fr; /* Ajusta proporción según veas */
    /* O usando píxeles fijos para sidebar: */
    /* grid-template-columns: 280px 1fr; */
    gap: 1.5rem;
}

/* --- LAYOUT INTERNO: Textarea y Botones Lado a Lado (Desktop) --- */
.list-shuffler-tool {
    display: flex;           /* Activar Flexbox */
    gap: 1.5rem;           /* Espacio entre textarea y botones */
    align-items: flex-start; /* Alinear elementos arriba */
}

/* Contenedor del Textarea (que ya tiene .form-group) */
.list-shuffler-tool > .form-group {
    flex: 2.3; /* Más espacio para el textarea (aprox. 70%) */
    margin-bottom: 0; /* Quitar margen inferior si lo tenía */
}

/* Textarea: Altura reducida */
#list-input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.75rem;
    font-size: 1rem;
    /* Altura reducida (antes 250px, ahora 200px - ajusta si es necesario) */
    min-height: 200px;
    height: 350px; /* Altura inicial fija, pero con resize vertical */
    resize: vertical;
    font-family: 'Courier New', Courier, monospace; /* Monospace recomendado */
    line-height: 1.5;
}

/* Contenedor de Botones */
.list-shuffler-tool .shuffle-actions {
    flex: 0.7; /* Menos espacio para botones (aprox. 30%) */
    display: flex;
    flex-direction: column; /* Apilar botones verticalmente */
    gap: 0.75rem;
    align-items: stretch; /* Estirar botones al ancho del contenedor */
    margin-top: 1.9rem; /* Alinear visualmente con el textarea (después del label) */
}

/* Botones dentro del contenedor */
.list-shuffler-tool .shuffle-actions .btn {
    width: 100%; /* Ocupar todo el ancho disponible en su columna */
    text-align: center;
    padding: 0.7rem 1rem; /* Ajustar padding si es necesario */
}
.list-shuffler-tool .shuffle-actions .btn i {
    margin-right: 0.5em;
}

/* Área de estado (sin cambios necesarios) */
.status-area {
    margin-top: 1rem;
    text-align: center;
    min-height: 1.2em;
    width: 100%; /* Ocupar todo el ancho debajo de los flex items */
    /* Necesita estar fuera del .list-shuffler-tool O ajustar flex */
}
/* Ajuste para que el status quede debajo */
.list-shuffler-tool {
    flex-wrap: wrap; /* Permitir que el status area vaya abajo */
}
.status-area {
     flex-basis: 100%; /* Que ocupe toda la línea */
}

/* --- AJUSTES RESPONSIVOS PARA Layout Interno (Móvil) --- */
@media (max-width: 768px) {
    .list-shuffler-tool {
        flex-direction: column; /* Apilar textarea y botones */
        align-items: stretch; /* Ocupar ancho */
    }

    .list-shuffler-tool > .form-group {
        margin-bottom: 1.5rem; /* Restaurar margen inferior */
        flex-basis: auto; /* Resetear flex-basis */
    }

    .list-shuffler-tool .shuffle-actions {
        flex-basis: auto; /* Resetear flex-basis */
        flex-direction: row; /* Botones en fila */
        flex-wrap: wrap; /* Permitir que se envuelvan si no caben */
        justify-content: center; /* Centrar botones */
        margin-top: 0; /* Quitar margen superior */
        gap: 0.5rem; /* Menos espacio */
    }

    .list-shuffler-tool .shuffle-actions .btn {
         width: auto; /* Ancho automático para los botones */
         flex-grow: 1; /* Permitir que crezcan un poco si hay espacio */
         min-width: 100px; /* Ancho mínimo */
    }

    /* En style.css DENTRO de @media (max-width: 768px) { ... } */

/* --- Forzar Apilamiento para Aleatorizar Lista en Móvil --- */

    .tool-page-layout-2col-reversed.list-randomizer-page {
        grid-template-columns: 1fr !important; /* ¡Forzar UNA SOLA columna! */
    }

    /* Ordenar columnas: Herramienta arriba (order: 1), Sidebar abajo (order: 2) */
    .tool-page-layout-2col-reversed.list-randomizer-page > .tool-column {
        order: 1;
        margin-bottom: 1.5rem; /* Espacio debajo de la herramienta */
    }

    .tool-page-layout-2col-reversed.list-randomizer-page > .sidebar-column {
        order: 2;
        margin-bottom: 0; /* Sin margen extra debajo del sidebar */
    }

    /* --- FIN de reglas específicas para Aleatorizar Lista en móvil --- */

/* ... otros estilos responsivos que ya tenías ... */
    /* Opcional: botones 2x2 en móvil pequeño */
     @media (max-width: 480px) {
          .list-shuffler-tool .shuffle-actions .btn {
               flex-basis: calc(50% - 0.25rem); /* 2 botones por fila */
          }
     }
}

/* --- (Estilos de Impresión como antes) --- */
@media print {
     /* ... */
     .roulette-inputs, /* Si usaste este nombre para el div de inputs */
     .list-shuffler-tool .form-group, /* O directamente el form-group */
     .calculator-actions.shuffle-actions,
     .status-area,
     .tool-description {
          display: none !important;
     }
      /* Si quieres imprimir la lista del textarea */
      #list-input {
         display: block !important; /* Asegurar que sea visible */
         min-height: auto !important; height: auto !important;
         border: none !important; box-shadow: none !important;
         padding: 0 !important; font-size: 10pt !important;
         font-family: sans-serif !important; white-space: pre-wrap !important;
         color: black !important; background: white !important;
     }
     /* ... */
}

/* ============================================================ */
/* == FIN CSS ALEATORIZAR LISTA (v2 - Layout y Altura) == */
/* ============================================================ */






/* ======================================================= */
/* === CSS PARA CONTADOR DE PALABRAS Y CARACTERES (v1) === */
/* ======================================================= */

/* --- Layout Principal (Sidebar 1/3, Tool 2/3) --- */
/* Clase específica para esta página en el <main> */
.tool-page-layout-2col-reversed.word-counter-page {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar fijo, Tool flexible */
    gap: 1.5rem;
}

/* --- Layout Interno: Textarea | Stats --- */
.word-counter-wrapper {
    display: flex;
    gap: 1.5rem; /* Espacio entre textarea y stats */
    align-items: flex-start; /* Alinear por arriba */
    flex-wrap: wrap; /* Permitir apilar en móvil */
}

.text-input-area {
    flex: 1 1 55%; /* Más espacio para el textarea */
    min-width: 250px;
    margin-bottom: 0 !important; /* Anular margen de .form-group */
}

#text-input {
    width: 100%;
    min-height: 400px; /* Altura inicial considerable */
    height: 60vh;      /* Altura relativa al viewport */
    max-height: 70vh;  /* Límite máximo */
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.8rem 1rem;
    font-size: 1.05rem; /* Fuente un poco más grande para texto */
    line-height: 1.6;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
#text-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

/* Área de Estadísticas y Controles */
.stats-controls-area {
    flex: 1 1 35%; /* Menos espacio para stats */
    min-width: 280px;
    background-color: #fff; /* Fondo blanco para esta columna */
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.stat-actions { /* Contenedor para botones Borrar/Copiar */
    display: flex;
    justify-content: flex-end; /* Botones a la derecha */
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.stat-actions .btn {
    padding: 0.4rem 0.8rem; /* Botones más pequeños */
    font-size: 0.9rem;
}
.stat-actions .btn i {
    margin-right: 0.3em;
}

.stats-section {
    margin-bottom: 1.5rem;
}
.stats-section:last-child {
    margin-bottom: 0;
}
.stats-section h3 {
    font-size: 1.1em;
    margin-bottom: 0.8rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.stats-section h3 i {
    font-size: 0.9em;
}


/* Lista de Estadísticas Principales */
.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95em;
}
.stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--border-color);
}
.stats-list li:last-child {
    border-bottom: none;
}
.stats-list li span { /* Etiqueta */
    color: var(--secondary-color);
}
.stats-list li strong { /* Valor */
    font-weight: bold;
    color: var(--dark-text);
    background-color: var(--light-bg); /* Resaltar valor */
    padding: 0.1em 0.4em;
    border-radius: 4px;
    min-width: 30px; /* Ancho mínimo para números pequeños */
    text-align: right;
}

/* Lista de Densidad de Palabras */
.density-note {
    font-size: 0.8em;
    color: var(--secondary-color);
    margin-top: -0.5rem;
    margin-bottom: 0.8rem;
}
.density-list {
    list-style: decimal inside; /* Números dentro */
    padding-left: 0;
    margin: 0;
    font-size: 0.9em;
    max-height: 180px; /* Scroll si hay muchas */
    overflow-y: auto;
}
.density-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    margin-left: 1.5em; /* Indentación después del número */
    border-bottom: 1px dotted var(--border-color);
}
.density-list li:last-child { border-bottom: none; }

.density-word {
    font-weight: bold;
    flex-grow: 1;
    margin-right: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Acortar palabras largas */
}
.density-count {
    color: var(--secondary-color);
    margin-right: 0.5em;
    min-width: 20px; /* Espacio para el conteo */
    text-align: right;
}
.density-percent {
    font-weight: bold;
    min-width: 45px; /* Espacio para ej. (10.5%) */
    text-align: right;
    color: var(--primary-color);
}

/* Mensajes de estado (ya definidos antes, asegurarse que funcionen aquí) */
.status-area { margin-top: 1rem; text-align: right; min-height: 1.2em; }
.copy-status-message { /* Reutilizar estilo */ }
.copy-status-message.visible { /* Reutilizar estilo */ }
.copy-status-message.error { /* Reutilizar estilo */ }


/* --- AJUSTES RESPONSIVOS PARA CONTADOR --- */
@media (max-width: 992px) {
    /* Ajustar layout principal si se necesita */
    .tool-page-layout-2col-reversed.word-counter-page {
         grid-template-columns: 1fr 2fr;
    }
}
@media (max-width: 768px) {
    /* Apilar layout principal */
     .tool-page-layout-2col-reversed.word-counter-page {
         grid-template-columns: 1fr;
     }
     /* Apilar layout interno */
     .word-counter-wrapper {
         flex-direction: column;
     }
     .text-input-area { margin-bottom: 1.5rem; flex-basis: auto; width: 100%; }
     .stats-controls-area { flex-basis: auto; width: 100%; padding: 1rem; }
     #text-input { min-height: 250px; height: 40vh; }
}
@media (max-width: 480px) {
     #text-input { font-size: 1rem; }
     .stats-list { font-size: 0.9em; }
     .density-list { font-size: 0.85em; }
}

/* --- Estilos de Impresión --- */
@media print {
     /* ... (ocultar header, footer, sidebar, ads...) ... */
     .stats-controls-area, .tool-description { display: none !important; }
     .word-counter-wrapper { display: block !important; } /* Quitar flex */
     #text-input {
         display: block !important; width: 100% !important;
         min-height: auto !important; height: auto !important;
         border: 1px solid #ccc !important; box-shadow: none !important;
         padding: 0.5cm !important; font-size: 10pt !important;
         font-family: sans-serif !important; white-space: pre-wrap !important;
         color: black !important; background: white !important; resize: none !important;
     }
      h1 { font-size: 16pt; text-align: left; margin-bottom: 0.5cm; }
     /* ... */
}

/* ======================================================= */
/* == FIN CSS CONTADOR DE PALABRAS Y CARACTERES (v1) == */
/* ======================================================= */




/* ===================================================== */
/* === CSS REVISADO PARA CALCULADORA IVA v2 (Layout) === */
/* ===================================================== */

/* --- AJUSTE LAYOUT PRINCIPAL (Sidebar 1/3, Tool 2/3) --- */


.tool-page-layout-2col-reversed.iva-v2-page {
     display: grid;
    /* Sidebar ~33%, Tool ~67% */
    grid-template-columns: 1fr 2fr; /* Proporción estándar */
    /* O Sidebar fijo: grid-template-columns: 300px 1fr; */
    gap: 1.5rem;
    /* Otros estilos heredados de .tool-page-layout-2col-reversed */
}

/*
 * 2. ESTILOS PARA ESCRITORIO (A partir de 768px)
 * Cambiamos a un layout de 2 columnas usando CSS Grid.
*/


/* --- LAYOUT INTERNO: Inputs | Outputs (Desktop) --- */
.iva-calculator-tool {
    /* Puede heredar de .calculator */
}

.iva-main-content {
    display: flex;
    flex-wrap: wrap; /* Permitir que Outputs baje si no cabe */
    gap: 2rem; /* Espacio entre inputs y outputs */
    align-items: flex-start;
    padding: 1rem 0; /* Espacio vertical */
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color); /* Separador antes de botones */
}

/* Columna de Inputs */
.iva-inputs {
    flex: 1 1 320px; /* Crece, base de 320px */
    min-width: 280px;
}

/* Radios con un look más moderno (opcional) */
.modern-radios {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.modern-radios .radio-label {
    flex: 1 1 auto; /* Ocupar espacio */
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Más redondeado */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: white;
    font-size: 0.9em;
}
.modern-radios .radio-label input[type="radio"] {
    margin-right: 0.5em;
    accent-color: var(--primary-color); /* Color del check del radio */
}
.modern-radios .radio-label:hover {
    background-color: var(--light-bg);
    border-color: #aaa;
}
.modern-radios .radio-label input[type="radio"]:checked + span {
    font-weight: bold;
    color: var(--primary-color);
}
.modern-radios .radio-label input[type="radio"]:checked {
   /* Estilos adicionales para el radio checkeado si es necesario */
}


/* Input principal más destacado */
.main-amount-input {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.7rem 1rem;
}

/* Columna de Outputs */
.iva-outputs {
    flex: 1 1 280px; /* Crece, base 280px */
    min-width: 250px;
    padding: 0 0 0 1.5rem; /* Padding izquierdo para separar */
    border-left: 2px solid var(--primary-color); /* Línea separadora azul */
}

.iva-outputs .results-header {
    margin-top: 0; /* Quitar margen superior */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-top: none; /* Quitar borde superior si lo tenía */
    border-bottom: 1px solid var(--border-color);
    font-size: 1.15em;
    color: var(--dark-text);
}
.iva-outputs .results-header i {
    color: var(--primary-color);
    margin-right: 0.5em;
}

/* Grupo de Salida */
.output-group {
    margin-bottom: 0.8rem; /* Menos espacio entre resultados */
}
.output-group label {
    font-size: 0.85em;
    color: var(--secondary-color);
    margin-bottom: 0.2rem;
}
.output-field { /* Readonly inputs */
    background-color: #f0f3f5 !important; /* Fondo gris más claro */
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--dark-text) !important;
    padding: 0.5rem 0.8rem;
    cursor: text; /* Permitir seleccionar texto */
    box-shadow: none !important;
    outline: none !important;
}
.output-group-total label {
    font-size: 0.9em;
    color: var(--primary-color); /* Etiqueta del total en azul */
}
.output-total { /* Campo de Total */
    font-size: 1.3em; /* Más grande */
    color: var(--primary-color) !important; /* Texto azul */
    background-color: #e7f1ff !important; /* Fondo azul muy claro */
    border-color: var(--primary-color) !important; /* Borde azul */
}

/* Botones de Acción (Debajo) */
.iva-actions {
    justify-content: flex-end; /* Alinear a la derecha */
    padding-top: 1rem;
    width: 100%;
}
.iva-actions .btn {
    min-width: 110px; /* Ancho mínimo */
}

/* --- AJUSTES RESPONSIVOS (Móvil) --- */
@media (max-width: 768px) {
    /* Apilar Inputs y Outputs */
    .iva-main-content {
        flex-direction: column;
        gap: 1rem;
         border-bottom: none; /* Quitar separador inferior en móvil */
         padding-bottom: 0;
         margin-bottom: 1rem;
    }
    .iva-outputs {
        border-left: none; /* Quitar separador izquierdo */
        padding-left: 0;
        width: 100%; /* Ocupar ancho */
        border-top: 1px solid var(--border-color); /* Poner separador arriba */
        padding-top: 1.5rem;
        margin-top: 1rem;
    }
    .iva-inputs, .iva-outputs {
        flex-basis: auto; /* Resetear base flex */
    }
    .modern-radios .radio-label {
         flex-basis: calc(50% - 0.5rem); /* Dos radios por fila */
         justify-content: center;
         font-size: 0.85em;
    }
     /* Centrar botones de acción en móvil */
     .iva-actions {
        justify-content: center;
        margin-top: 1rem;
     }

/* Para layout normal (Herramienta Izq | Sidebar Der) */
.tool-page-layout-2col-reversed.iva-v2-page {
    grid-template-columns: 1fr; /* Apilar: 1 sola columna */
}
/* (Mantener margen inferior para .tool-column si estaba) */
.tool-page-layout-2col-reversed.iva-v2-page.tool-column { margin-bottom: 1.5rem; }
.tool-page-layout-2col-reversed.iva-v2-page.sidebar-column { margin-bottom: 0; } /* Resetear por si acaso */


     .tool-page-layout-2col-reversed {
    grid-template-columns: 1fr; /* Apilar: 1 sola columna */
}

     
}

/* --- Estilos de Impresión --- */
@media print {
    /* ... (ocultar header, footer, sidebar, ads, etc. como antes) ... */
     .iva-main-content { display: block !important; border-bottom: none !important; }
     .iva-inputs, .iva-outputs, .calculator-actions.iva-actions, .tool-description { display: none !important; } /* Ocultar todo menos H1/P? O mostrar inputs/outputs? */

     /* Opción: Mostrar inputs y outputs en impresión */
      .iva-inputs, .iva-outputs {
           display: block !important;
           border: none !important; padding: 0 !important; margin: 0 0 1cm 0 !important;
      }
       .modern-radios { display: none !important; } /* Ocultar radios */
       .iva-outputs h3 { margin-top: 0.5cm !important; font-size: 12pt !important; border-top: 1px solid #ccc; padding-top: 0.5cm; }
       .output-field { background: #eee !important; color: black !important; border: 1px solid #ccc !important; font-size: 11pt !important;}
       .output-total { font-weight: bold !important; color: black !important;}
       label { font-size: 10pt !important; color: #333 !important; }
       input[type="number"].form-control { border: 1px solid #ccc !important; }


     /* ... (resto de estilos print generales) ... */
}

/* ============================================================ */
/* == FIN CSS CALCULADORA IVA v2 (v2 - Layout y Estilo) == */
/* ============================================================ */






/* --- Estilos Marcador Puntuaciones --- */
.marcador-page .tool-column {
    padding-top: 1rem; /* Menos padding arriba si se necesita espacio */
}

.scoreboard-container {
    background-color: var(--light-bg); /* Fondo general de la app */
    padding: clamp(1rem, 3vw, 1.5rem); /* Padding adaptable */
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.scoreboard {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: clamp(0.5rem, 3vw, 1.5rem); /* Espacio adaptable */
    margin-bottom: 1.5rem;
}

.team-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(0.8rem, 2vw, 1.2rem);
    border-radius: 6px;
    text-align: center;
    color: var(--light-text); /* Texto blanco por defecto para paneles de color */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-height: 250px; /* Altura mínima */
}

.team-panel.team-1 { background-color: #E74C3C; } /* Rojo/Naranja */
.team-panel.team-2 { background-color: var(--primary-color); } /* Azul primario */

.team-header {
    display: flex;
    flex-direction: column; /* Apilar nombre e indicadores */
    align-items: center;
    margin-bottom: 0.8rem;
    gap: 0.4rem;
}

.team-name {
    font-size: clamp(1.2em, 4vw, 1.8em);
    font-weight: bold;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    outline: none;
    cursor: text;
    transition: background-color 0.2s;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil */
    border: 1px dashed transparent; /* Borde invisible hasta hover/focus */
    display: inline-block; /* Para que el padding funcione bien */
}
.team-name:hover, .team-name:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}
.team-name.hidden { visibility: hidden; height: 1.2em; } /* Ocultar pero mantener espacio */

.indicators {
    font-size: 0.8em;
    opacity: 0.8;
}
.indicators.hidden { display: none; }

.indicator-label {
    margin-right: 0.5em;
    font-weight: normal;
}
.indicator {
    display: inline-block;
    font-size: 1.1em;
    font-weight: bold;
    min-width: 1.8em;
    padding: 0.1em 0.5em;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 3px;
    margin-left: 0.2em;
    cursor: pointer;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s;
}
.indicator:hover { background-color: rgba(255, 255, 255, 0.25); }
.indicator.hidden { display: none; }

.score-area {
    margin-top: auto; /* Empujar hacia abajo */
    width: 100%;
}

.score {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Fuente más estándar */
    font-size: clamp(4em, 18vw, 9em); /* Tamaño dinámico */
    font-weight: bold;
    line-height: 1;
    padding: 0.1em 0;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.3em;
    transition: transform 0.1s ease-out;
    color: inherit; /* Heredar color del panel */
}
.score:active { transform: scale(0.97); }

.btn-decrement {
    font-size: 1em;
    padding: 0.4em 1em;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: inherit;
    transition: background-color 0.2s;
}
.btn-decrement:hover { background-color: rgba(0,0,0,0.35); }
.btn-decrement:active { transform: scale(0.95); background-color: rgba(0,0,0,0.5); }

.scoreboard-controls { margin-top: 1rem; border-top: none; } /* Quitar borde superior */

.settings-panel {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
}
/* Ajustes menores para el panel de ajustes */
.settings-panel h3 { margin-top: 0; color: var(--primary-color); }
.settings-panel .form-group { margin-bottom: 1rem; }
.settings-panel .form-check-label { margin-bottom: 0; font-weight: normal;}
.settings-actions { margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; }

/* --- Temas --- */
/* Tema Oscuro (Default basado en imagen) */
body.theme-dark #scoreboard-app { /* Aplicar al contenedor principal */
    background-color: #343a40; /* Fondo general app oscuro */
    border-color: #495057;
}
body.theme-dark .marcador-page h1,
body.theme-dark .marcador-page p:first-of-type { color: #f8f9fa; } /* Texto claro para títulos */

body.theme-dark .marcador-page .team-panel.team-1 { background-color: #c84031; } /* Rojo oscuro */
body.theme-dark .marcador-page .team-panel.team-2 { background-color: #0056b3; } /* Azul oscuro */
body.theme-dark .marcador-page .team-name { color: #fff; background-color: rgba(255, 255, 255, 0.1); }
body.theme-dark .marcador-page .team-name:hover,
body.theme-dark .marcador-page .team-name:focus { background-color: rgba(255, 255, 255, 0.2); }
body.theme-dark .marcador-page .indicators { color: rgba(255, 255, 255, 0.7); }
body.theme-dark .marcador-page .indicator { background-color: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.2); color: #fff; }
body.theme-dark .marcador-page .indicator:hover { background-color: rgba(0,0,0,0.35); }
body.theme-dark .marcador-page .score { color: #fff; }
body.theme-dark .marcador-page .btn-decrement { background-color: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.2); color: #fff; }
body.theme-dark .marcador-page .btn-decrement:hover { background-color: rgba(0,0,0,0.45); }
/* Ajustes tema oscuro para settings panel */
body.theme-dark .marcador-page .settings-panel { background-color: #495057; border-color: #6c757d; color: #f8f9fa; }
body.theme-dark .marcador-page .settings-panel h3 { color: #61dafb; } /* Azul claro react */
body.theme-dark .marcador-page .settings-panel label { color: #ced4da; }
body.theme-dark .marcador-page .settings-panel input[type="text"],
body.theme-dark .marcador-page .settings-panel select {
    background-color: #6c757d; color: #f8f9fa; border-color: #5a6268;
}
body.theme-dark .marcador-page .settings-panel .form-check-input { background-color: #6c757d; border-color: #5a6268;}

/* Tema Claro (Default Todito) */
body.theme-light #scoreboard-app { background-color: var(--light-bg); border-color: var(--border-color); }
body.theme-light .marcador-page h1,
body.theme-light .marcador-page p:first-of-type { color: var(--dark-text); }
body.theme-light .marcador-page .team-panel { color: var(--dark-text); } /* Texto oscuro por defecto */
body.theme-light .marcador-page .team-panel.team-1 { background-color: #ffebee; border: 1px solid #ffcdd2; color: #c62828;} /* Rojo claro */
body.theme-light .marcador-page .team-panel.team-2 { background-color: #e7f1ff; border: 1px solid var(--primary-color); color: #0056b3;} /* Azul claro */
body.theme-light .marcador-page .team-name { color: inherit; background-color: rgba(0,0,0,0.03); }
body.theme-light .marcador-page .team-name:hover,
body.theme-light .marcador-page .team-name:focus { background-color: rgba(0,0,0,0.08); }
body.theme-light .marcador-page .indicators { color: var(--secondary-color); }
body.theme-light .marcador-page .indicator { background-color: #fff; border-color: var(--border-color); color: var(--dark-text); }
body.theme-light .marcador-page .indicator:hover { background-color: #eee; }
body.theme-light .marcador-page .score { color: inherit; }
body.theme-light .marcador-page .btn-decrement { background-color: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
body.theme-light .marcador-page .btn-decrement:hover { background-color: #5a6268; }
/* Ajustes tema claro para settings panel */
body.theme-light .marcador-page .settings-panel { background-color: #fff; border-color: var(--border-color); color: var(--dark-text); }
body.theme-light .marcador-page .settings-panel h3 { color: var(--primary-color); }
body.theme-light .marcador-page .settings-panel label { color: var(--dark-text); }
body.theme-light .marcador-page .settings-panel input[type="text"],
body.theme-light .marcador-page .settings-panel select { background-color: #fff; color: var(--dark-text); border-color: var(--border-color); }
body.theme-light .marcador-page .settings-panel .form-check-input { background-color: #fff; border-color: var(--border-color);}

/* --- Responsividad --- */
@media (max-width: 768px) {
    /* Layout principal ya se apila */
    .scoreboard {
        grid-template-columns: 1fr; /* Apilar equipos */
        gap: 1rem;
    }
    .team-panel { min-height: auto; } /* Altura automática en móvil */
    .score { font-size: clamp(4em, 25vw, 8em); } /* Ajustar tamaño de fuente */
}

@media (max-width: 480px) {
    .score { font-size: clamp(3.5em, 28vw, 7em); }
    .team-name { font-size: 1.4em; }
    .scoreboard-controls .btn { font-size: 0.9rem; padding: 0.5rem 0.8rem; }
}

/* --- Estilos Marcador Puntuaciones (RESPONSIVO Landscape Móvil) --- */
@media (orientation: landscape) and (max-height: 550px) { /* Ajusta 550px si es necesario */

    .marcador-page .scoreboard {
        /* Volver a 2 columnas */
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem; /* Menos espacio */
        align-items: stretch; /* Ocupar altura */
        margin-bottom: 0.8rem; /* Reducir margen inferior */
    }

    .marcador-page .team-panel {
        padding: 0.5rem; /* Menos padding interno */
        min-height: unset; /* Quitar altura mínima */
    }

    /* Ajustar tamaños de fuente para que quepan */
    .marcador-page .team-name {
        font-size: clamp(1em, 6vh, 1.5em);
        padding: 1px 3px;
    }
    .marcador-page .indicators {
        font-size: 0.65em;
        margin-top: 2px;
    }
     .marcador-page .indicator {
        font-size: 1em; /* Relativo al .indicators */
        padding: 1px 4px;
        min-width: 1.5em;
    }
    .marcador-page .score {
        font-size: clamp(2.5em, 20vh, 7em); /* Reducir tamaño del score */
        margin-bottom: 0.1em;
    }
    .marcador-page .btn-decrement {
        font-size: 0.8em;
        padding: 0.2em 0.6em;
    }

    /* Ocultar elementos menos críticos en este modo */
     .marcador-page .sidebar-column,
     .marcador-page .tool-description,
     .marcador-page .scoreboard-controls { /* Ocultar botones inferiores también? */
        display: none !important;
     }

    /* Asegurar que el layout principal se ajuste */
     .tool-page-layout-2col-reversed.marcador-page {
         grid-template-columns: 1fr; /* Forzar 1 columna para el contenido principal */
         padding: 0.5rem; /* Reducir padding general */
     }
     .marcador-page .tool-column {
         padding: 0.5rem; /* Reducir padding de la columna */
         margin-bottom: 0;
         order: 1; /* Asegurar que se muestre */
     }
      .scoreboard-container {
          padding: 0.5rem; /* Reducir padding del contenedor de la app */
          border: none;
          box-shadow: none;
     }
}

/* --- Estilos para Pantalla Completa (Marcador) --- */
body.scoreboard-fullscreen-active {
    overflow: hidden !important; /* Evitar scroll en body */
}

/* Ocultar todo EXCEPTO el contenedor del marcador cuando está en fullscreen */
body.scoreboard-fullscreen-active > *:not(main), /* Oculta header, footer, etc. */
body.scoreboard-fullscreen-active > main > *:not(.marcador-page), /* Oculta otros elementos dentro de main si los hubiera */
body.scoreboard-fullscreen-active > main.marcador-page > *:not(.tool-column), /* Oculta sidebar */
body.scoreboard-fullscreen-active > main.marcador-page .tool-column > *:not(#scoreboard-app) /* Oculta H1, P, descripción dentro de tool-column */
{
    display: none !important;
    visibility: hidden !important;
}

/* Estilos del contenedor principal de la app en fullscreen */
#scoreboard-app.fullscreen-active {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important; /* Cubrir toda la pantalla */
    background-color: var(--fullscreen-bg, #333); /* Fondo (variable opcional) */
    z-index: 2147483647 !important; /* Máximo z-index */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2vmin !important; /* Padding relativo al viewport */
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Ajustar layout interno en fullscreen */
#scoreboard-app.fullscreen-active .scoreboard {
    width: 95%; /* Ancho casi total */
    height: 85%; /* Ocupar mayoría de altura */
    gap: 2vmin;
    margin: 0 auto;
    flex-grow: 1; /* Permitir que crezca */
}

#scoreboard-app.fullscreen-active .team-panel {
    height: 100%; /* Paneles ocupan altura */
    padding: 2vmin;
    justify-content: space-between; /* Distribuir contenido verticalmente */
}

/* Ajustar fuentes en fullscreen */
#scoreboard-app.fullscreen-active .team-name { font-size: clamp(1.8em, 8vh, 4em); }
#scoreboard-app.fullscreen-active .indicators { font-size: clamp(1em, 4vh, 2em); }
#scoreboard-app.fullscreen-active .indicator { font-size: 1em; padding: 0.2em 0.6em; }
#scoreboard-app.fullscreen-active .score { font-size: clamp(8em, 40vh, 30em); } /* Score MUY grande */

/* Ocultar botón -1 y controles/settings en fullscreen */
#scoreboard-app.fullscreen-active .btn-decrement,
#scoreboard-app.fullscreen-active .scoreboard-controls,
#scoreboard-app.fullscreen-active .settings-panel {
    display: none !important;
}

/* Variables de tema para el fondo en fullscreen */
body.theme-dark #scoreboard-app.fullscreen-active { --fullscreen-bg: #212529; }
body.theme-light #scoreboard-app.fullscreen-active { --fullscreen-bg: #e9ecef; } /* Fondo claro grisáceo */

/* Ajustar colores de texto para tema claro en fullscreen */
body.theme-light #scoreboard-app.fullscreen-active .team-panel.team-1 { background-color: #d32f2f; color: white; } /* Rojo más fuerte */
body.theme-light #scoreboard-app.fullscreen-active .team-panel.team-2 { background-color: #0056b3; color: white; } /* Azul más fuerte */
body.theme-light #scoreboard-app.fullscreen-active .score,
body.theme-light #scoreboard-app.fullscreen-active .team-name,
body.theme-light #scoreboard-app.fullscreen-active .indicator-label,
body.theme-light #scoreboard-app.fullscreen-active .indicator { color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
body.theme-light #scoreboard-app.fullscreen-active .indicator { background-color: rgba(0,0,0,0.1); border-color: rgba(255,255,255,0.3); }








/* ====================================================== */
/* === CSS PARA CREADOR DE EQUIPOS AL AZAR (v1) === */
/* ====================================================== */

/* Ajuste opcional del layout principal si se quiere sidebar más estrecho */
.tool-page-layout-2col-reversed.team-creator-page {
    /* Sidebar ~30%, Tool ~70% */
    grid-template-columns: 1fr 2.3fr;
    /* O fijo: grid-template-columns: 280px 1fr; */
}


/* Contenedor de Inputs */
.team-creator-inputs {
    display: flex;
    flex-wrap: wrap; /* Para que # equipos baje en pantallas pequeñas */
    gap: 1.5rem;
    align-items: flex-end; /* Alinear por abajo */
    margin-bottom: 1.5rem;
}
.team-creator-inputs .form-group:first-child {
    flex: 3; /* Más espacio para el textarea */
    min-width: 250px;
}
.team-creator-inputs .form-group:last-child {
    flex: 1; /* Menos espacio para el número de equipos */
    min-width: 150px;
}
.team-creator-inputs .form-group label {
    margin-bottom: 0.3rem; /* Menos espacio en label */
}
#num-teams {
    max-width: 100px; /* Limitar ancho del input numérico */
}

/* Botones de acción */
.team-creator-actions {
    justify-content: flex-start; /* Alinear botones a la izquierda */
    flex-wrap: wrap; /* Permitir que se envuelvan */
    gap: 0.7rem;
}
.team-creator-actions .btn-lg {
    padding: 0.8rem 1.6rem;
}

/* Área de resultados */
.result-area {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fff; /* Fondo blanco para destacar */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.result-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-color);
}
.result-header-controls h2 {
    margin: 0;
    font-size: 1.3em;
    color: var(--primary-color);
}

/* Botones de formato */
.format-toggle-buttons {
    display: flex;
    gap: 0.3rem;
}
.btn-format {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--secondary-color);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}
.btn-format:hover {
    background-color: var(--light-bg);
    border-color: #aaa;
}
.btn-format.active {
    background-color: var(--primary-color);
    color: var(--light-text);
    border-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-format i {
    font-size: 0.9em;
}

/* Resultado en Columnas (Inspirado en imagen) */
#result-columns {
    display: grid;
    /* Columnas dinámicas, mínimo 150px */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem; /* Espacio antes del botón Copiar */
}
.team-column {
    border-left: 3px dotted var(--border-color);
    padding-left: 1rem;
}
.team-column:first-child {
    border-left: none;
    padding-left: 0;
}
.team-column h3 {
    font-size: 1em;
    color: var(--dark-text);
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--secondary-color);
    /* Estilo tipo "=== Equipo X ===" */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
/* Para añadir las líneas "===" (opcional) */
/* .team-column h3::before, .team-column h3::after { content: '==='; color: var(--secondary-color); font-weight: normal; font-size: 0.9em; } */

.team-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.team-column li {
    padding: 0.2rem 0;
    font-size: 0.95em;
}

/* Resultado en Lista */
#result-list ul {
    list-style: none;
    padding: 0;
}
#result-list > ul > li { /* Cada equipo */
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--primary-color);
}
#result-list h3 {
    font-size: 1.1em;
    margin-bottom: 0.5rem;
}
#result-list ul ul { /* Lista de jugadores dentro */
    padding-left: 1rem;
    list-style: disc;
}

/* Resultado en Línea */
#result-inline p {
    line-height: 1.8;
}
#result-inline strong {
    color: var(--primary-color);
    margin-right: 0.5em;
}

/* Área de copiar resultados */
.copy-actions-results {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}
.copy-actions-results .btn {
    min-width: 150px;
}

/* Animación botón Copiar */
.btn.copied-flash {
    animation: flash-success 0.6s ease-out;
}
@keyframes flash-success {
  0%, 100% { background-color: #28a745; } /* Verde éxito */
  50% { background-color: #a3e9b3; } /* Verde más claro */
}
.btn.copied-flash i {
   animation: icon-flash 0.6s ease-out;
}
@keyframes icon-flash {
   50% { transform: scale(1.2); }
}

/* --- Responsividad Específica Herramienta --- */
@media (max-width: 768px) {
    /* Apilar layout principal ya está cubierto */

    .team-creator-inputs {
        flex-direction: column;
        align-items: stretch; /* Estirar elementos */
    }
    .team-creator-inputs .form-group {
        flex-basis: auto; /* Resetear base flex */
    }
     #num-teams {
        max-width: none; /* Ancho completo en móvil */
    }

    .result-header-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    #result-columns {
        /* Pasar a 2 columnas como máximo en móvil, o 1 si es muy pequeño */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
    }
    .team-column {
        padding-left: 0.8rem;
    }

    .copy-actions-results {
        justify-content: center; /* Centrar botón copiar */
    }


    /* Para layout normal (Herramienta Izq | Sidebar Der) */
    .tool-page-layout-2col-reversed.team-creator-page {
        grid-template-columns: 1fr; /* Apilar: 1 sola columna */
    }
    /* (Mantener margen inferior para .tool-column si estaba) */
    .tool-page-layout-2col-reversed.team-creator-page.tool-column { margin-bottom: 1.5rem; }
    .tool-page-layout-2col-reversed.team-creator-page.sidebar-column { margin-bottom: 0; } /* Resetear por si acaso */


         .tool-page-layout-2col-reversed {
        grid-template-columns: 1fr; /* Apilar: 1 sola columna */
    }


}

@media (max-width: 480px) {
     #result-columns {
        /* Forzar 1 columna en pantallas muy pequeñas */
        grid-template-columns: 1fr;
        gap: 1.5rem; /* Más espacio vertical entre equipos */
    }
    .team-column {
        border-left: none;
        padding-left: 0;
        border-bottom: 1px dashed var(--border-color); /* Separar equipos con línea abajo */
        padding-bottom: 1rem;
    }
     .team-column:last-child { border-bottom: none; padding-bottom: 0; }
     .team-column h3 { justify-content: flex-start; } /* Alinear título a la izq */

     .team-creator-actions .btn {
        flex-basis: 100%; /* Botones ocupan todo el ancho */
     }
     .btn-format { padding: 0.4rem 0.6rem; }
     .btn-format i { font-size: 0.8em; }
}


/* --- Estilos de Impresión --- */
@media print {
    /* ... (ocultar header, footer, sidebar, ads, controles como antes) ... */
    .team-creator-inputs, .team-creator-actions, .result-header-controls, .copy-actions-results, .tool-description, .status-area {
        display: none !important;
    }
    .result-area {
        display: block !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 1cm !important;
    }
    /* Mostrar SIEMPRE el formato de columnas para impresión (más legible) */
    #result-columns { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); page-break-inside: avoid; }
    #result-list, #result-inline { display: none !important; }

    .team-column { border-left: 1px solid #ccc !important; padding-left: 0.5cm !important; page-break-inside: avoid; }
    .team-column:first-child { border-left: none !important; padding-left: 0 !important; }
    .team-column h3 { font-size: 11pt !important; color: black !important; border-bottom: 1px solid #ccc !important; }
    .team-column ul { list-style: none; padding: 0; margin: 0; }
    .team-column li { font-size: 10pt !important; margin-bottom: 0.1cm; }
    h1 { font-size: 16pt; }
}

/* ====================================================== */
/* === FIN CSS CREADOR EQUIPOS AL AZAR (v1) === */
/* ====================================================== */










/* ========================================================= */
/* === CSS PARA GENERADOR NÚMEROS ALEATORIOS AVANZADO (v2) === */
/* ========================================================= */

/* Ajuste layout específico si se necesita */
.tool-page-layout-2col-reversed.rng-page {
    /* grid-template-columns: 1fr 2fr; // Proporción estándar ya definida */
}

.rng-tool h1 {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.5rem; /* Menos margen bajo el H1 editable */
}
.rng-tool h1 span[contenteditable="true"] {
    outline: 1px dashed var(--primary-color);
    padding: 0 0.2em;
    cursor: text;
}
.btn-icon {
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    padding: 0.2em;
    line-height: 1;
}
.btn-icon:hover {
    color: var(--primary-color);
}
.btn-icon.btn-danger-icon:hover {
    color: #dc3545; /* Rojo para borrar */
}

/* Inputs en línea */
.rng-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid var(--border-color);
    padding: 1rem 1.2rem;
    border-radius: 8px;
    background-color: #fff;
}
.rng-inputs label {
    margin-bottom: 0; /* Quitar margen inferior de label */
    font-weight: normal;
    color: var(--secondary-color);
    font-size: 0.9em;
}
.rng-inputs input[type="number"] {
    padding: 0.4rem 0.6rem;
    font-size: 1em;
    width: 80px; /* Ancho fijo para números */
    text-align: center;
    border-radius: 4px;
}
.rng-inputs #num-results {
    width: 65px; /* Más estrecho para cantidad */
}
.rng-separator {
    font-weight: bold;
    color: var(--secondary-color);
}

/* Opciones (Checkbox) */
.rng-options {
    margin-top: 0.8rem;
    margin-bottom: 1.5rem;
}
.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95em;
    gap: 0.4em;
}
.checkbox-label input[type="checkbox"] {
    margin-right: 0.3em;
    accent-color: var(--primary-color);
    transform: scale(1.1); /* Hacer checkbox un poco más grande */
}

/* Botones de acción */
.rng-actions {
    justify-content: flex-start; /* Alinear a la izquierda */
    gap: 1rem;
}
.rng-actions .btn-lg {
    padding: 0.7rem 1.5rem;
}

/* Área de resultados */
.rng-results {
    margin-top: 2rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.2rem;
}
.rng-results .result-header-controls {
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
}
.rng-results h2 {
    font-size: 1.2em;
}

/* Display de resultados */
#result-display {
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    min-height: 80px;
    margin-bottom: 0.8rem;
    overflow-x: auto; /* Scroll horizontal si hay muchos números */
}

/* Estilo Columnas (separados por espacio) */
.result-display-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em 1.2em; /* Espacio vertical y horizontal */
    justify-content: center; /* Centrar números */
    font-size: 1.7em;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    color: var(--primary-color);
}
.result-display-columns span {
    display: inline-block;
    padding: 0.1em 0.3em;
    /* background-color: #fff; */ /* Opcional: fondo para cada número */
    /* border-radius: 3px; */
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.1); */
}

/* Estilo Lista */
.result-display-list {
    font-size: 1em;
    line-height: 1.6;
    font-family: 'Courier New', Courier, monospace;
    padding: 0.5rem 1rem;
    max-height: 300px; /* Scroll si la lista es muy larga */
    overflow-y: auto;
}
.result-display-list ul {
    list-style: decimal;
    padding-left: 2em;
    margin: 0;
}
.result-display-list li {
    margin-bottom: 0.2em;
}


/* Timestamp */
.timestamp {
    text-align: right;
    font-size: 0.8em;
    color: var(--secondary-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* Botón Copiar y status */
.rng-results .copy-actions-results {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end; /* Alinear a la derecha */
}

/* Responsividad específica RNG */
@media (max-width: 768px) {
    /* Apilar layout general ya se maneja globalmente */
    .rng-inputs {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }
    .rng-inputs label {
        margin-bottom: 0.2rem;
    }
    .rng-inputs input[type="number"] {
        width: 100%;
        max-width: none;
        text-align: left;
        margin-bottom: 0.5rem;
    }
    .rng-inputs .rng-separator {
        display: none; /* Ocultar separadores en móvil */
    }
     .rng-actions {
        justify-content: center; /* Centrar botones */
     }
     .rng-results .result-header-controls {
         flex-direction: column;
         align-items: flex-start;
     }
     .rng-results .format-toggle-buttons {
         margin-top: 0.5rem;
         width: 100%;
         justify-content: flex-start;
     }
}

@media (max-width: 480px) {
    .tool-column h1 { font-size: 1.6rem; }
    .result-display-columns { font-size: 1.2em; gap: 0.5em 0.8em;}
    .rng-actions .btn { flex-grow: 1; font-size: 0.9rem; } /* Botones ocupan más espacio */

      .team-creator-actions .btn {
        flex-basis: 100%; /* Botones ocupan todo el ancho */
        /* Añadir margen inferior si se apilan */
        margin-bottom: 0.8rem;
     }
      .team-creator-actions .btn:last-child {
          margin-bottom: 0; /* Quitar margen al último botón */
      }

      /* Ajustar para los botones del generador RNG */
      .rng-actions {
          flex-direction: column; /* Forzar columna si no lo hace solo */
          align-items: stretch; /* Estirar botones */
          gap: 0.8rem; /* Usar gap para espaciado vertical */
      }
       /* Quitar flex-basis si usamos gap en columna */
      /* .rng-actions .btn { flex-basis: 100%; } */


      /* Espacio para botones de formato si se apilan o están muy juntos */
     .rng-results .format-toggle-buttons {
         gap: 0.6rem; /* Aumentar un poco el gap horizontal/vertical */
         /* Si se vuelven columna, añadir gap */
         /* flex-direction: column; */
         /* align-items: flex-start; */
     }

      /* Espacio para botones de Copiar/Status en móvil */
     .copy-actions-results {
         flex-direction: column; /* Apilar botón y mensaje */
         align-items: center; /* Centrar */
         gap: 0.8rem; /* Espacio entre botón y mensaje */
     }
     /* Quitar margen superior/inferior automático del mensaje si usamos gap */
     .copy-status-message {
         margin-top: 0;
         flex-basis: auto;
     }
}

/* --- Estilos de Impresión --- */
@media print {
    /* Ocultar elementos no necesarios */
    .rng-page .sidebar-column,
    .rng-options,
    .rng-actions,
    .rng-results .result-header-controls,
    .rng-results .copy-actions-results,
    .rng-results .timestamp,
    .rng-page .tool-description,
    .rng-tool .btn-icon {
        display: none !important;
    }

    .rng-page .tool-column h1 { font-size: 16pt !important; border: none !important; padding-bottom: 0.5cm !important; margin-bottom: 0.5cm; }
    .rng-page .tool-column h1 span { display: inline !important; } /* Asegurar que el título se vea */
    .rng-page .tool-column > p { display: none !important; } /* Ocultar descripción */

    .rng-inputs {
        display: block !important; border: none !important; padding: 0 !important; background: none !important;
    }
     .rng-inputs label, .rng-inputs span { display: none !important; } /* Ocultar labels/separadores */
     .rng-inputs input {
         display: inline-block !important; width: auto !important; border: none !important; font-size: 11pt !important;
         padding: 0 5px !important; margin: 0 2px !important;
         background: #eee !important; /* Fondo ligero para verlos */
         -moz-appearance: textfield !important; /* Para que no se vean como numéricos */
     }
     .rng-inputs input::-webkit-inner-spin-button,
     .rng-inputs input::-webkit-outer-spin-button { display: none !important; }


    .rng-results { border: none !important; padding: 0 !important; margin-top: 1cm !important; box-shadow: none !important; background: none !important; }
    .rng-results h2 { display: block !important; font-size: 12pt !important; margin-bottom: 0.5cm !important; }

    #result-display {
        border: 1px solid #ccc !important; background: #fff !important; padding: 0.5cm !important;
        display: block !important; /* Forzar block para asegurar contenido visible */
        font-size: 11pt !important;
        color: black !important;
        font-family: monospace !important;
        page-break-inside: avoid !important;
        overflow: visible !important; /* Mostrar todo el contenido */
        max-height: none !important;
    }
     /* Forzar formato lista si es más legible para imprimir */
     /* O dejar el que estuviera activo antes de imprimir */
    #result-display.result-display-columns {
        /* Convertir flex a block o inline para mejor impresión */
        display: block !important;
        word-spacing: 0.5em;
        line-height: 1.5;
    }
     #result-display.result-display-list {
         display: block !important; /* Ya es block */
     }
     #result-display span, #result-display li { /* Estilos para números */
         color: black !important;
         font-weight: normal !important;
         background: none !important;
     }

}
/* ========================================================= */
/* === FIN CSS GENERADOR NÚMEROS ALEATORIOS AVANZADO (v2) === */
/* ========================================================= */



/* ====================================================== */
/* ===     ESTILOS FAQ SECTION v2 (DINÁMICA)        === */
/* ====================================================== */

.faq-section-v2 {
    margin-top: 3rem; /* Más espacio arriba */
    padding-top: 1.5rem;
    /* Sin borde superior, el H2 puede crear la separación visual */
}

.faq-section-v2 h2 {
    font-size: 1.6em;
    color: var(--dark-text);
    margin-bottom: 2rem; /* Más espacio bajo el título */
    text-align: center; /* Título centrado para un look moderno */
    font-weight: 600;
}

.faq-item-v2 {
    margin-bottom: 0.75rem; /* Espacio entre items reducido */
    border-bottom: 1px solid var(--border-color); /* Separador sutil */
}
.faq-item-v2:last-child {
    border-bottom: none; /* Sin borde en el último item */
}

.faq-question {
    /* Reset de estilos de botón */
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    outline: none; /* Quitar outline por defecto en focus */

    /* Estilos propios */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0.5rem; /* Ajustar padding para un look más limpio */
    cursor: pointer;
    font-weight: 500; /* Ligeramente menos bold que un summary */
    color: var(--dark-text);
    transition: color 0.2s ease;
}

.faq-question:hover,
.faq-question:focus { /* Estilo para focus para accesibilidad */
    color: var(--primary-color);
    background-color: rgba(0, 123, 255, 0.03); /* Fondo muy sutil al pasar el mouse/focus */
}
.faq-question:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Outline de focus sutil */
    border-radius: 4px;
}


.faq-question span {
    flex-grow: 1;
    margin-right: 1rem; /* Espacio entre texto e ícono */
}

.faq-question i.fas {
    font-size: 1em; /* Ícono un poco más grande */
    color: var(--primary-color);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición con rebote */
}

.faq-question.active i.fas { /* Cuando la pregunta está activa/respuesta abierta */
    transform: rotate(45deg); /* El '+' rota a 'x' */
}

¡Entendido! El problema es que la parte inferior del texto en la respuesta del FAQ (dentro de .faq-answer.open) está siendo cortada o no tiene suficiente espacio debajo.

Esto suele ocurrir por cómo se calcula el max-height para la animación o por el padding interno. En nuestro caso, estamos usando answerDiv.scrollHeight + 'px' para el max-height y luego aplicando padding-top y padding-bottom a la clase .open.

Hay dos áreas principales donde podemos ajustar esto en el CSS:

Ajustar el padding-bottom de la clase .faq-answer.open: Esta es la solución más directa. Simplemente necesitamos asegurarnos de que el padding inferior sea suficiente para que la última línea de texto no quede pegada al borde inferior del contenedor visible.
Ajustar el padding del contenedor interno .faq-answer-content: Actualmente tiene padding: 0 0.5rem;. Si la altura del .faq-answer se calcula solo con el scrollHeight del .faq-answer-content sin su propio padding vertical, y luego .faq-answer.open añade su propio padding-top y padding-bottom, entonces el padding-bottom del .faq-answer.open es el que realmente da el espacio final.
Vamos a enfocarnos en la primera opción, que es más explícita para el espacio visible cuando está abierto.

Modificación CSS (en toditoapp/css/style.css):

Busca la regla para .faq-answer.open y asegúrate de que el padding-bottom sea adecuado. La que teníamos era padding-bottom: 1.5rem;. Es posible que esta cantidad sea suficiente, pero si el line-height o el tamaño de la fuente es grande, podría necesitarse un poco más, o quizás el problema está en cómo se calcula el scrollHeight si el box-sizing no está bien configurado (aunque por defecto box-sizing: content-box; es usual, y * { box-sizing: border-box; } fue una de las primeras reglas que establecimos, lo cual es bueno).

Intento 1: Incrementar padding-bottom en .faq-answer.open

Revisa esta regla en tu CSS. Vamos a aumentarla ligeramente para dar más "aire" abajo.

CSS

/* === (DENTRO DE) ESTILOS FAQ SECTION v2 (DINÁMICA) === */

/* ... (otros estilos) ... */

.faq-answer.open {
    opacity: 1;
    /* max-height se establece con JS */
    padding-top: 0.5rem;
    padding-bottom: 1.8rem; /* Originalmente 1.5rem, aumentado a 1.8rem o incluso 2rem si es necesario */
                               /* Prueba con diferentes valores aquí */
}

.faq-answer-content {
    padding: 0 0.5rem; /* Este padding es solo horizontal */
    font-size: 0.95em;
    line-height: 1.7;
    color: #333;
}



/* Alternativa si el padding en .faq-answer.open no es suficiente */
/* === (DENTRO DE) ESTILOS FAQ SECTION v2 (DINÁMICA) === */

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out 0.1s;
    /* Quitar transiciones de padding aquí si estaban */
    will-change: max-height, opacity;
}

.faq-answer.open {
    opacity: 1;
    /* max-height se establece con JS */
    /* No añadir padding vertical aquí directamente */
}

.faq-answer-content {
    /* Añadir todo el padding vertical y horizontal aquí */
    padding: 1rem 0.5rem 1.8rem 0.5rem; /* Arriba, Derecha, Abajo (AUMENTADO), Izquierda */
    font-size: 0.95em;
    line-height: 1.7;
    color: #333;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}
.faq-answer-content ul, .faq-answer-content ol {
    margin-left: 1.2rem;
    margin-bottom: 1rem;
}
.faq-answer-content li {
    margin-bottom: 0.4rem;
}

/* === FIN ESTILOS FAQ SECTION v2 === */


















/* ===================================================== */
/* === CSS PARA MARCADOR DIGITAL DE PUNTUACIONES === */
/* ===================================================== */

/* Layout específico para la página del marcador si se necesita ajustar el sidebar */
/* .tool-page-layout-2col-reversed.marcador-page { */
    /* Ejemplo: grid-template-columns: 0.8fr 2.2fr; */
/* } */

.marcador-page .tool-column {
    padding-top: 1rem; /* Menos padding arriba si se necesita espacio */
}

#scoreboard-app { /* Contenedor principal de la herramienta */
    background-color: var(--light-bg);
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.scoreboard {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales para los equipos */
    gap: clamp(0.8rem, 2vw, 1.5rem); /* Espacio adaptable entre paneles */
    margin-bottom: 1.5rem;
}

.team-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border-radius: 8px;
    color: var(--light-text);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    min-height: 280px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.team-panel.team-1 { background-color: #E74C3C; } /* Rojo anaranjado */
.team-panel.team-2 { background-color: var(--primary-color); } /* Azul primario */

.team-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.8rem;
    gap: 0.5rem;
    width: 100%;
}

.team-name {
    font-size: clamp(1.5em, 5vw, 2.2em);
    font-weight: bold;
    padding: 0.2em 0.5em;
    border-radius: 5px;
    outline: none;
    cursor: text;
    transition: background-color 0.2s, border-color 0.2s;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px dashed transparent;
    display: inline-block;
    min-width: 100px;
    word-break: break-word;
}
.team-name:hover, .team-name:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}
.team-name.hidden {
    visibility: hidden;
    height: 1.5em; /* Mantener algo de espacio */
    margin-bottom: 0.5rem;
}


.indicators {
    font-size: clamp(0.8em, 2.5vw, 1em);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.indicators.hidden { display: none !important; }

.indicator-label {
    margin-right: 0.3em;
    font-weight: normal;
}
.indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em; /* Relativo al .indicators */
    font-weight: bold;
    min-width: 1.8em;
    padding: 0.2em 0.6em;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.15);
    transition: background-color 0.2s, transform 0.1s;
}
.indicator:hover { background-color: rgba(255, 255, 255, 0.3); }
.indicator:active { transform: scale(0.92); }
.indicator.hidden { display: none !important; }

.score-area {
    margin-top: auto;
    padding-top: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.score {
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: clamp(5em, 22vw, 10em);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    color: inherit;
    padding: 0.05em 0;
    transition: transform 0.1s ease-out;
    width: 100%;
    text-align: center;
}
.score:active { transform: scale(0.96); }

.btn-decrement {
    font-size: clamp(0.9em, 3vw, 1.1em);
    padding: 0.4em 1.2em;
    background-color: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    color: inherit;
    transition: background-color 0.2s;
    border-radius: 20px;
    width: auto;
    min-width: 60px;
}
.btn-decrement i { margin-right: 0.3em;}
.btn-decrement:hover { background-color: rgba(0,0,0,0.4); }
.btn-decrement:active { transform: scale(0.95); background-color: rgba(0,0,0,0.55); }

.scoreboard-controls {
    margin-top: 1.5rem;
    border-top: none; /* Si hereda de .calculator-actions */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}
.scoreboard-controls .btn {
    min-width: 130px;
}
.scoreboard-controls .btn i { margin-right: 0.4em; }

.settings-panel {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f0f3f5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.settings-panel h3 {
    margin-top: 0;
    margin-bottom: 1.2rem;
    color: var(--primary-color);
    font-size: 1.25em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.6rem;
}
.settings-panel .form-group {
    margin-bottom: 1.2rem;
}
.settings-panel .form-check-label {
    margin-bottom: 0;
    font-weight: normal;
}
.settings-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

/* --- TEMAS ADICIONALES PARA MARCADOR --- */

/* Tema Oscuro (Default) */
body.theme-dark #scoreboard-app {
    background-color: #343a40;
    border-color: #495057;
}
body.theme-dark .marcador-page h1,
body.theme-dark .marcador-page > p:first-of-type { /* El párrafo introductorio */
    color: #f8f9fa;
}
body.theme-dark .marcador-page .team-panel.team-1 { background-color: #c84031; } /* Rojo oscuro */
body.theme-dark .marcador-page .team-panel.team-2 { background-color: #0056b3; } /* Azul oscuro */
body.theme-dark .marcador-page .team-name { color: #fff; background-color: rgba(255, 255, 255, 0.1); }
body.theme-dark .marcador-page .team-name:hover,
body.theme-dark .marcador-page .team-name:focus { background-color: rgba(255, 255, 255, 0.2); }
body.theme-dark .marcador-page .indicators { color: rgba(255, 255, 255, 0.75); }
body.theme-dark .marcador-page .indicator { background-color: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.25); color: #fff; }
body.theme-dark .marcador-page .indicator:hover { background-color: rgba(0,0,0,0.35); }
body.theme-dark .marcador-page .score { color: #fff; }
body.theme-dark .marcador-page .btn-decrement { background-color: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.25); color: #fff; }
body.theme-dark .marcador-page .btn-decrement:hover { background-color: rgba(0,0,0,0.45); }
body.theme-dark .marcador-page .settings-panel { background-color: #495057; border-color: #6c757d; color: #f8f9fa; }
body.theme-dark .marcador-page .settings-panel h3 { color: #61dafb; }
body.theme-dark .marcador-page .settings-panel label,
body.theme-dark .marcador-page .settings-panel .form-check-label { color: #ced4da; }
body.theme-dark .marcador-page .settings-panel .form-control {
    background-color: #6c757d; color: #f8f9fa; border-color: #5a6268;
}
body.theme-dark .marcador-page .settings-panel .form-check-input { background-color: #6c757d; border-color: #5a6268;}

/* Tema Claro */
body.theme-light #scoreboard-app { background-color: var(--light-bg); border-color: var(--border-color); }
body.theme-light .marcador-page h1,
body.theme-light .marcador-page > p:first-of-type { color: var(--dark-text); }
body.theme-light .marcador-page .team-panel.team-1 { background-color: #ffebee; border: 1px solid #ffcdd2; color: #c62828;}
body.theme-light .marcador-page .team-panel.team-2 { background-color: #e3f2fd; border: 1px solid #90caf9; color: #0d47a1;}
body.theme-light .marcador-page .team-name { color: inherit; background-color: rgba(0,0,0,0.03); }
body.theme-light .marcador-page .team-name:hover,
body.theme-light .marcador-page .team-name:focus { background-color: rgba(0,0,0,0.08); }
body.theme-light .marcador-page .indicators { color: var(--secondary-color); }
body.theme-light .marcador-page .indicator { background-color: #fff; border-color: var(--border-color); color: var(--dark-text); }
body.theme-light .marcador-page .indicator:hover { background-color: #eee; }
body.theme-light .marcador-page .score { color: inherit; }
body.theme-light .marcador-page .btn-decrement { background-color: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.2); color: inherit; }
body.theme-light .marcador-page .btn-decrement:hover { background-color: rgba(0,0,0,0.2); }
body.theme-light .marcador-page .settings-panel { background-color: #fff; border-color: var(--border-color); color: var(--dark-text); }
body.theme-light .marcador-page .settings-panel h3 { color: var(--primary-color); }
body.theme-light .marcador-page .settings-panel .form-control { background-color: #fff; color: var(--dark-text); border-color: var(--border-color); }
body.theme-light .marcador-page .settings-panel .form-check-input { background-color: #fff; border-color: var(--border-color);}

/* Tema "Sporty" */
body.theme-sporty #scoreboard-app { background-color: #e0e0e0; }
body.theme-sporty .marcador-page h1,
body.theme-sporty .marcador-page > p:first-of-type { color: #2c3e50; }
body.theme-sporty .marcador-page .team-panel.team-1 { background-color: #d32f2f; }
body.theme-sporty .marcador-page .team-panel.team-2 { background-color: #1976d2; }
body.theme-sporty .marcador-page .team-name { color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); font-family: 'Impact', Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
body.theme-sporty .marcador-page .score { color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.4); font-family: 'Digital-7 Mono', 'DS-Digital', 'Orbitron', sans-serif; }
body.theme-sporty .marcador-page .indicator { background-color: rgba(0,0,0,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
body.theme-sporty .marcador-page .btn-decrement { background-color: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.3); color: #fff;}
body.theme-sporty .marcador-page .settings-panel { background-color: #bdbdbd; color: #2c3e50; }
body.theme-sporty .marcador-page .settings-panel h3 { color: #1a237e; } /* Azul oscuro deportivo */
body.theme-sporty .marcador-page .settings-panel .form-control { background-color: #f5f5f5; color: #2c3e50; border-color: #9e9e9e;}

/* Tema "Retro" */
body.theme-retro #scoreboard-app { background-color: #f5e6cc; }
body.theme-retro .marcador-page h1,
body.theme-retro .marcador-page > p:first-of-type { color: #5a3e2b; }
body.theme-retro .marcador-page .team-panel.team-1 { background-color: #8c5319; } /* Marrón */
body.theme-retro .marcador-page .team-panel.team-2 { background-color: #2a5a4e; } /* Verde oscuro */
body.theme-retro .marcador-page .team-name { color: #f5e6cc; font-family: 'Georgia', 'Times New Roman', serif; text-shadow: 1px 1px 1px #333; }
body.theme-retro .marcador-page .score { color: #f5e6cc; font-family: 'Lucida Console', Monaco, monospace; text-shadow: 1px 1px 1px #333; }
body.theme-retro .marcador-page .indicator { background-color: rgba(0,0,0,0.1); border-color: rgba(245,230,204,0.4); color: #f5e6cc; }
body.theme-retro .marcador-page .btn-decrement { background-color: rgba(0,0,0,0.2); border-color: rgba(245,230,204,0.3); color: #f5e6cc; }
body.theme-retro .marcador-page .settings-panel { background-color: #e9d8b4; color: #5a3e2b; }
body.theme-retro .marcador-page .settings-panel h3 { color: #4a301c; }
body.theme-retro .marcador-page .settings-panel .form-control { background-color: #fff9f0; color: #5a3e2b; border-color: #d1bfa3;}


/* --- Estilos Pantalla Completa (Marcador) --- */
/* Clase en body para ocultar elementos externos */
body.scoreboard-fullscreen-active > header,
body.scoreboard-fullscreen-active > footer,
body.scoreboard-fullscreen-active > main > aside.sidebar-column {
    display: none !important;
    visibility: hidden !important;
}

/* Ocultar elementos no deseados DENTRO de .tool-column */
body.scoreboard-fullscreen-active .tool-column > h1,
body.scoreboard-fullscreen-active .tool-column > p:not(#fullscreen-helper-text),
body.scoreboard-fullscreen-active .tool-column > .tool-description,
body.scoreboard-fullscreen-active .tool-column > .faq-section-v2,
body.scoreboard-fullscreen-active #scoreboard-app .scoreboard-controls, /* Controles del marcador */
body.scoreboard-fullscreen-active #scoreboard-app .settings-panel { /* Panel de ajustes del marcador */
    display: none !important;
    visibility: hidden !important;
}

/* Estilos del contenedor de la app en fullscreen */
#scoreboard-app.fullscreen-active {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background-color: var(--fullscreen-bg, #222); /* Default oscuro, puede ser sobrescrito por tema */
    z-index: 2147483640 !important; /* Muy alto */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2vmin !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#scoreboard-app.fullscreen-active .scoreboard {
    width: 95%;
    height: auto;
    flex-grow: 1;
    max-height: 90vh;
    gap: 2vmin;
    margin: 0 auto;
}

#scoreboard-app.fullscreen-active .team-panel {
    padding: 2vmin;
    justify-content: space-around;
}

#scoreboard-app.fullscreen-active .team-name { font-size: clamp(1.8em, 8vh, 5em); }
#scoreboard-app.fullscreen-active .score { font-size: clamp(7em, 38vh, 30em); } /* Score MUY grande */

/* Ocultar elementos específicos del marcador en modo pantalla completa */
#scoreboard-app.fullscreen-active .btn-decrement,
#scoreboard-app.fullscreen-active .indicators { /* También ocultar indicadores */
    display: none !important;
}

/* Variables de tema para el fondo en fullscreen */
body.theme-dark #scoreboard-app.fullscreen-active { --fullscreen-bg: #1a1a1a; }
body.theme-light #scoreboard-app.fullscreen-active { --fullscreen-bg: #f0f0f0; }
body.theme-sporty #scoreboard-app.fullscreen-active { --fullscreen-bg: #2c3e50; }
body.theme-retro #scoreboard-app.fullscreen-active { --fullscreen-bg: #4a3b28; }

/* Ajustar colores de texto para tema claro en fullscreen (contraste) */
body.theme-light #scoreboard-app.fullscreen-active .team-panel.team-1 { background-color: #E74C3C; color: white; }
body.theme-light #scoreboard-app.fullscreen-active .team-panel.team-2 { background-color: var(--primary-color); color: white; }
body.theme-light #scoreboard-app.fullscreen-active .score,
body.theme-light #scoreboard-app.fullscreen-active .team-name {
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* --- Responsividad del Marcador --- */
@media (max-width: 768px) {
    /* Layout principal ya se apila globalmente */
    .marcador-page .scoreboard { /* Aplica solo a la página del marcador */
        grid-template-columns: 1fr; /* Apilar equipos */
        gap: 1rem;
    }
    .marcador-page .team-panel { min-height: auto; }
    .marcador-page .score { font-size: clamp(4em, 25vw, 8em); }
    .marcador-page .team-name { font-size: clamp(1.3em, 4.5vw, 1.7em); }
    .marcador-page .settings-actions { flex-direction: column; gap: 0.8rem; align-items: stretch; }
    .marcador-page .settings-actions .btn { width: 100%; }
}

@media (max-width: 480px) {
    .marcador-page .score { font-size: clamp(3.5em, 28vw, 7em); }
    .marcador-page .team-name { font-size: clamp(1.1em, 4vw, 1.5em); }
    .marcador-page .scoreboard-controls .btn { font-size: 0.9rem; padding: 0.6rem 0.8rem; flex-grow: 1; }
    .marcador-page .indicators { font-size: 0.75em; }
    .marcador-page .indicator { font-size: 1.1em; padding: 0.1em 0.4em; }
}

/* Paisaje en móviles pequeños */
@media (orientation: landscape) and (max-height: 550px) {
    .marcador-page .scoreboard {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        align-items: stretch;
        margin-bottom: 0.8rem;
    }
    .marcador-page .team-panel {
        padding: 0.5rem;
        min-height: unset;
    }
    .marcador-page .team-name { font-size: clamp(1em, 6vh, 1.5em); padding: 1px 3px;}
    .marcador-page .indicators { font-size: 0.65em; margin-top: 2px;}
    .marcador-page .indicator { font-size: 1em; padding: 1px 4px; min-width: 1.5em;}
    .marcador-page .score { font-size: clamp(2.5em, 20vh, 7em); margin-bottom: 0.1em;}
    .marcador-page .btn-decrement { font-size: 0.8em; padding: 0.2em 0.6em;}

    /* AJUSTE: Mostrar .scoreboard-controls y ocultar solo otros elementos */
    .marcador-page .sidebar-column,
    .marcador-page .tool-description,
    .marcador-page .faq-section-v2 {
        display: none !important;
     }
    .marcador-page .scoreboard-controls {
        display: flex !important; /* Asegurar que sea visible */
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem; /* Espacio reducido entre botones */
        margin-top: 0.8rem; /* Margen sobre los botones */
    }
    .marcador-page .scoreboard-controls .btn {
        font-size: 0.8rem; /* Botones más pequeños */
        padding: 0.4rem 0.6rem;
        min-width: auto; /* Ancho automático */
    }

    .tool-page-layout-2col-reversed.marcador-page {
         grid-template-columns: 1fr;
         padding: 0.5rem;
    }
    .marcador-page .tool-column {
         padding: 0.5rem; margin-bottom: 0; order: 1;
    }
    #scoreboard-app { padding: 0.5rem; border: none; box-shadow: none; }

    /* Fullscreen en paisaje móvil */
    #scoreboard-app.fullscreen-active .scoreboard {
        width: 100%; height: 100%; padding: 1vmin; gap: 1vmin;
    }
    #scoreboard-app.fullscreen-active .score { font-size: clamp(4em, 25vh, 15em); }
    #scoreboard-app.fullscreen-active .team-name { font-size: clamp(1.2em, 7vh, 3em); }
    #scoreboard-app.fullscreen-active .team-panel { padding: 1vmin; }
}
/* ===================================================== */
/* === FIN CSS MARCADOR DIGITAL DE PUNTUACIONES === */
/* ===================================================== */




/* Estilos para el Juego del Ahorcado */

/* Fuentes y Títulos */
.game-title-ahorcado, .modal-content-ahorcado #correct-word {
    font-family: 'Kalam', cursive;
}

.game-title-ahorcado {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.theme-display-ahorcado {
    color: var(--info-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    min-height: 25px;
}

/* Pantalla de Configuración */
.setup-screen-ahorcado {
    width: 100%;
    max-width: 500px;
    margin: auto;
    text-align: center;
    padding: 2rem;
    background-color: var(--light-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.setup-screen-ahorcado h1 {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.setup-screen-ahorcado p {
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}
.setup-screen-ahorcado .form-group {
    text-align: left;
    margin-bottom: 1rem;
}
.setup-screen-ahorcado button {
    margin-top: 1rem;
    width: 100%;
}
.setup-screen-ahorcado .btn-secondary {
    margin-top: 0.5rem;
}

/* Layout del Juego */
.game-container-ahorcado {
    width: 100%;
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.game-layout-ahorcado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .game-layout-ahorcado {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Área del Dibujo */
.drawing-area-ahorcado {
    width: 100%;
    max-width: 320px;
    padding: 1rem;
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}
#hangman-drawing svg {
    transition: all 0.3s ease-in-out;
}

/* Área de Información del Juego */
.game-info-ahorcado {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.word-display-ahorcado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.letter-box {
    width: 40px;
    height: 50px;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 5px;
    text-transform: uppercase;
    color: var(--dark-text);
    font-family: 'Kalam', cursive;
}
@media (min-width: 640px) {
    .letter-box {
        width: 50px;
        height: 60px;
    }
}

.wrong-letters-container-ahorcado {
    min-height: 50px;
}
.wrong-letters-container-ahorcado p:first-child {
    color: var(--secondary-color);
    font-size: 0.9rem;
}
.wrong-letters-container-ahorcado #wrong-letters {
    font-size: 1.25rem;
    color: var(--danger-color);
    font-weight: bold;
    letter-spacing: 0.2em;
}

/* Teclado */
.keyboard-ahorcado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 480px;
}

.key {
    background-color: #e9ecef; /* footer-bg as base */
    color: var(--dark-text);
    border: 1px solid var(--border-color);
    font-weight: bold;
    height: 48px;
    width: 42px;
    border-radius: 6px;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    cursor: pointer;
}
.key:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
    transform: translateY(-2px);
}
.key:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #e9ecef;
    color: var(--dark-text);
    transform: none;
}

/* Modal de Fin de Juego */
.modal-ahorcado-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content-ahorcado {
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
    max-width: 90%;
    width: 400px;
}

.modal-content-ahorcado h2 {
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.modal-content-ahorcado .message-won {
    color: var(--success-color);
}
.modal-content-ahorcado .message-lost {
    color: var(--danger-color);
}

.modal-content-ahorcado p:first-of-type {
    margin-bottom: 0.25rem;
}
.modal-content-ahorcado #correct-word {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}
#hangman-drawing {
    width: 100%;
    height: 100%;
}
/* === Layout de 3 Columnas === */
.tool-page-layout-3col {
    display: grid;
    grid-template-columns: 1fr; /* Vista móvil: una sola columna */
    gap: 1.5rem;
}

/* En pantallas más grandes, cambiamos a 3 columnas */
@media (min-width: 1024px) {
    .tool-page-layout-3col {
        /* Columna Izq. | Contenido Central | Columna Der. */
        grid-template-columns: 280px 1fr 280px; 
    }
}


/*
/* --- INICIO: Mejoras de Responsividad para Calculadoras --- 

* @media (max-width: 768px) {
    /*
     * Apila verticalmente el contenido principal de la calculadora de IVA
     * (la sección de entradas y la de resultados) en móviles.
    
    .iva-calculator-tool .iva-main-content {
        flex-direction: column;
        gap: 1.5rem; /* Añade un espacio entre el bloque de entradas y el de salidas */
    }

    /*
     * Ajusta el grupo de botones de radio ("Subtotal", "Total", "IVA")
     * para que puedan pasar a la siguiente línea si no caben.
    
    .radio-group.modern-radios {
        flex-wrap: wrap;
        justify-content: center;
    }

    /*
     * Mejora el espaciado y tamaño de los botones de acción
     * ("Limpiar", "Imprimir") en móviles.
  
    .calculator-actions {
        flex-direction: column; /* Apila los botones verticalmente 
        gap: 0.75rem; /* Añade espacio entre ellos 
    }

    .calculator-actions .btn {
        width: 100%; /* Hace que los botones ocupen todo el ancho 
        text-align: center;
    }

    /* Pega estas nuevas reglas DENTRO de tu bloque @media (max-width: 768px) */

    /*
     * Arregla el layout de los resultados detallados ("Cálculo Detallado") en móviles.
    
    .output-group {
        flex-direction: column; /* Apila la etiqueta sobre el campo de texto 
        align-items: flex-start; /* Alinea la etiqueta a la izquierda
        gap: 0.25rem;          /* Añade un pequeño espacio entre la etiqueta y su campo 
    }

    .output-group label {
        margin-bottom: 0; /* Quita márgenes que puedan causar problemas */
    }

    /*
     * Asegura que los campos de resultado ocupen todo el ancho y se alineen bien.
    
    .output-group .output-field {
        width: 100%;
        text-align: left; /* Es más legible en móvil que el texto esté a la izquierda */
    }

    /* Pega esta nueva regla DENTRO de tu bloque @media (max-width: 768px) */

/*
 * Previene que los títulos (h1) se desborden en pantallas pequeñas
 * al forzar el corte de palabras largas si es necesario.

.tool-column h1 {
    overflow-wrap: break-word;
    word-wrap: break-word; /* Compatibilidad con navegadores más antiguos 
    -webkit-hyphens: auto; /* Intenta cortar la palabra con guion de forma inteligente 
    -ms-hyphens: auto;
    hyphens: auto;
}

}

/* --- FIN: Mejoras de Responsividad para Calculadoras --- */



/* ==========================================================================
   TÉCNICA AVANZADA: Reseteo y Control Forzado de Layout
   ========================================================================== */
/*
  Este código está diseñado para anular cualquier otro estilo en conflicto.
*/

/* 1. Reseteamos el contenedor principal para que se comporte en móvil */
.tool-page-layout-2col-reversed {
    display: block;  /* Reseteamos a un display simple y predecible */
    width: 100%;
    max-width: 100%;
}

/* 2. Forzamos a los hijos directos (aside y section) a no desbordarse */
.tool-page-layout-2col-reversed > * {
    width: 100% !important;         /* Regla de alta prioridad */
    max-width: 100% !important;      /* Regla de alta prioridad */
    min-width: 0 !important;         /* Truco clave para anular anchos mínimos */
    float: none !important;          /* Anulamos cualquier 'float' que pueda existir */
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;      /* Anulamos transformaciones que puedan afectar el layout */
}


/* 3. A partir de 768px, RE-CREAMOS el grid con alta especificidad */
@media (min-width: 768px) {
    /* Usamos un selector muy específico para ganar cualquier "guerra de CSS" */
    main.container.tool-page-layout-2col-reversed {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 2.5rem;
    }
}