/* ==========================================================================
   CALCULADORA · El Mundo de Manu
   Escribo todo el CSS mobile-first: primero defino cómo se ve en un celular
   chico, y después voy "agrandando" el diseño con media queries a medida
   que hay más espacio disponible. Así me aseguro de que la base funcione
   en el dispositivo más limitado antes de sumar comodidades.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   Guardo toda mi paleta, tipografías y medidas clave en variables CSS.
   Esto es clave de cara a GitHub: si alguien clona el repo y quiere
   cambiar un color, lo hace en un solo lugar en vez de buscar por todo
   el archivo.
   -------------------------------------------------------------------------- */
:root {
    /* Fondo general: un gris-azulado muy pálido, como una hoja cuadriculada de cuaderno. */
    --bg-page: #eef2fa;
    /* Color de las líneas de la cuadrícula de fondo: lo dejo casi invisible para que sea una textura, no un ruido. */
    --grid-line: rgba(91, 95, 239, 0.07);

    /* La tarjeta de la calculadora en sí. */
    --card-bg: #ffffff;
    --card-border: #e2e8f5;
    --card-shadow: 0 20px 45px rgba(24, 34, 65, 0.16), 0 2px 6px rgba(24, 34, 65, 0.08);

    /* La pantalla: la pienso como una mini LCD retro, por eso es oscura con texto tipo "menta fosforescente". */
    --display-bg: #182241;
    --display-bg-soft: #202c52;
    --display-text: #7ff5cf;
    --display-text-dim: #7a86ad;

    /* Colores funcionales de los botones. Cada grupo tiene su propio rol y su propio color, para que el usuario entienda de un vistazo qué hace cada tecla. */
    --btn-number-bg: #eaf0fb;
    --btn-number-bg-hover: #d9e4f7;
    --btn-number-text: #1a2332;

    --btn-operator-bg: #5b5fef;
    --btn-operator-bg-hover: #4347c9;
    --btn-operator-text: #ffffff;

    --btn-utility-bg: #ff6b5b;
    --btn-utility-bg-hover: #e8503f;
    --btn-utility-text: #ffffff;

    --btn-equal-bg: #0ea5a5;
    --btn-equal-bg-hover: #0b8686;
    --btn-equal-text: #ffffff;

    --text-dark: #1a2332;
    --text-muted: #64708a;

    /* Anillo de foco: lo uso en todos los elementos interactivos para cumplir con accesibilidad de teclado. */
    --focus-ring: #182241;

    /* Centralizo el radio de bordes y la fuente del "tap target" mínimo recomendado para accesibilidad táctil (44-48px). */
    --radius-lg: 24px;
    --radius-md: 16px;
    --tap-target-min: 48px;

    --font-display: 'Outfit', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* --------------------------------------------------------------------------
   2. RESET BÁSICO
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    /* Uso border-box en todo para que paddings y bordes nunca me rompan los anchos calculados, algo esencial en un layout responsivo. */
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    /* Habilito scroll suave por si en el futuro agrego anclas dentro de la página de educación. */
    scroll-behavior: smooth;
}

/* Respeto a quienes configuraron su sistema para reducir animaciones: así evito mareos o molestias innecesarias. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-display);
    color: var(--text-dark);
    /* Uso min-height: 100dvh en vez de 100vh porque en móviles con barra de direcciones dinámica (Safari/Chrome), 100vh deja un salto raro al hacer scroll; dvh se ajusta al viewport real visible. */
    min-height: 100dvh;
    background-color: var(--bg-page);
    /* Este es mi "guiño" de diseño: dibujo una cuadrícula sutil con dos gradientes lineales repetidos, simulando una hoja de cuaderno cuadriculado, coherente con que esto es para la sección de educación. */
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Le doy aire alrededor para que la tarjeta nunca toque el borde de la pantalla, ni siquiera en celulares muy angostos. */
    padding: 20px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRINCIPAL
   -------------------------------------------------------------------------- */
.page {
    width: 100%;
    display: flex;
    justify-content: center;
}

.calculator {
    position: relative;
    width: 100%;
    /* En móvil dejo que ocupe casi todo el ancho disponible; el máximo real lo defino más abajo, en la media query de escritorio. */
    max-width: 400px;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    /* Uso clamp() para que el padding interno crezca de forma fluida según el tamaño de pantalla, en vez de saltar bruscamente entre breakpoints. */
    padding: clamp(20px, 5vw, 32px);
}

/* Los "agujeritos de espiral" que simulan una libreta: mi elemento firma, así que lo dejo sutil y no lo repito en ningún otro lugar de la interfaz. */
.calculator__spiral {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(14px, 4vw, 22px);
}

.calculator__spiral span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: inset 0 2px 3px rgba(24, 34, 65, 0.15);
}

.calculator__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   4. LA PANTALLA
   -------------------------------------------------------------------------- */
.calculator__display {
    font-family: var(--font-mono);
    /* "tabular-nums" evita que el ancho del texto "baile" al escribir números de distinto ancho visual, algo típico en una pantalla de calculadora real. */
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    /* clamp() vuelve a ser clave acá: el número de resultado se agranda en pantallas grandes sin desbordar en las chicas. */
    font-size: clamp(2rem, 8vw, 2.75rem);
    color: var(--display-text);
    background: linear-gradient(160deg, var(--display-bg), var(--display-bg-soft));
    border-radius: var(--radius-md);
    padding: 18px 20px 8px;
    text-align: right;
    /* white-space y overflow controlados: si el número es muy largo, prefiero que se achique a que rompa el layout de la tarjeta. */
    overflow-x: auto;
    white-space: nowrap;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
    /* Doy una leve luz al texto para reforzar la sensación de pantalla LCD retro-iluminada. */
    text-shadow: 0 0 12px rgba(127, 245, 207, 0.35);
}

/* Oculto la barra de scroll horizontal de la pantalla mientras conservo la posibilidad de desplazarse si el número es larguísimo. */
.calculator__display::-webkit-scrollbar {
    display: none;
}

.calculator__expression {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: right;
    padding: 6px 20px 0;
    min-height: 1.4em;
    overflow-x: auto;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. EL TECLADO (CSS GRID)
   -------------------------------------------------------------------------- */
.buttons {
    margin-top: 18px;
    display: grid;
    /* Cuatro columnas iguales: es la base del layout clásico de calculadora que cualquier usuario reconoce sin pensar. */
    grid-template-columns: repeat(4, 1fr);
    /* CORRECCIÓN: antes calculaba la altura de cada botón con aspect-ratio, dependiendo del ancho de la columna. En pantallas grandes eso generaba un bug real de Grid en Chrome/Edge (el motor calculaba mal la altura de la columna 3 y la "estiraba" entera, descolocando 9, 6, 3 y el punto). Ahora fijo la altura de cada fila de forma explícita con grid-auto-rows, así ninguna columna depende del cálculo de otra. */
    grid-auto-rows: clamp(52px, 12vw, 78px);
    /* El gap también es fluido, así los botones respiran más en pantallas grandes sin quedar amontonados en las chicas. */
    gap: clamp(8px, 2.5vw, 14px);
}

.btn {
    /* min-height asegura que ningún botón quede por debajo del área táctil mínima recomendada (48px) para accesibilidad en móvil. */
    min-height: var(--tap-target-min);
    /* Como ahora la altura la define grid-auto-rows en .buttons, cada botón solo necesita "estirarse" (comportamiento por defecto de Grid) para ocupar el 100% de su celda, en vez de calcular su propia altura con aspect-ratio. */
    height: 100%;
    width: 100%;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    font-weight: 600;
    cursor: pointer;
    /* Transiciono transform, background y box-shadow juntos para que el "feedback" al tocar un botón se sienta como un solo gesto fluido. */
    transition: transform 0.12s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 3px 8px rgba(24, 34, 65, 0.12);
}

/* Estado hover: solo cambia de color, sin moverse, para no generar "saltos" molestos con el mouse. */
.btn:hover {
    filter: brightness(1.03);
}

/* Estado active (al presionar): lo escalo levemente hacia adentro para simular que el botón físico se hunde. */
.btn:active {
    transform: scale(0.94);
    box-shadow: 0 1px 3px rgba(24, 34, 65, 0.12);
}

/* Foco visible por teclado: uso :focus-visible en vez de :focus para que el anillo solo aparezca al navegar con Tab, no al hacer clic con el mouse. Esto es accesibilidad pura. */
.btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Números: el color más neutro del set, porque son los botones que más se repiten visualmente. */
.btn--number {
    background-color: var(--btn-number-bg);
    color: var(--btn-number-text);
}
.btn--number:hover {
    background-color: var(--btn-number-bg-hover);
}

/* Operadores (+ − × ÷): los pinto de violeta/índigo para diferenciarlos de un vistazo de los números. */
.btn--operator {
    background-color: var(--btn-operator-bg);
    color: var(--btn-operator-text);
}
.btn--operator:hover {
    background-color: var(--btn-operator-bg-hover);
}

/* Utilidades (C, ⌫, %): las agrupo en coral porque son acciones "destructivas o especiales", distintas de operar o de escribir números. */
.btn--utility {
    background-color: var(--btn-utility-bg);
    color: var(--btn-utility-text);
    font-size: clamp(0.95rem, 3.5vw, 1.15rem);
}
.btn--utility:hover {
    background-color: var(--btn-utility-bg-hover);
}

/* El botón "=" es la acción principal de toda la calculadora, así que le doy el color de mayor contraste. CORRECCIÓN: antes tenía "grid-column: span 2", pero sumado a "0" (span 2) y "." (span 1) en la misma fila, totalizaba 5 columnas dentro de una grilla de solo 4. Esa cuenta que no cerraba era, junto con el aspect-ratio, la otra causa del descolocamiento en pantallas grandes. Ahora ocupa 1 sola columna (como cualquier operador), y su altura ya es generosa gracias a grid-auto-rows. */
.btn--equal {
    background-color: var(--btn-equal-bg);
    color: var(--btn-equal-text);
}
.btn--equal:hover {
    background-color: var(--btn-equal-bg-hover);
}

/* El cero ocupa dos columnas porque, en el uso real, es el número que más se toca. Junto con "." (1 columna) y "=" (1 columna), la fila vuelve a sumar exactamente 4. */
.btn--zero {
    grid-column: span 2;
}

.calculator__hint {
    margin-top: 16px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    /* Oculto el tip de teclado en pantallas táctiles chicas, porque ahí no aporta valor: nadie va a conectar un teclado físico a su celular para esto. */
    display: none;
}

/* --------------------------------------------------------------------------
   6. BREAKPOINTS
   Voy de menor a mayor porque así funciona el enfoque mobile-first:
   cada media query solo agrega o ajusta estilos para pantallas MÁS
   grandes que el breakpoint anterior.
   -------------------------------------------------------------------------- */

/* Celulares grandes en vertical (Android grandes, iPhone Pro Max, etc.). */
@media (min-width: 400px) {
    .calculator {
        padding: 30px;
    }
}

/* Tablets en vertical y celulares en horizontal: acá empiezo a mostrar detalles extra que en pantallas muy chicas solo generarían ruido. */
@media (min-width: 600px) {
    .calculator__hint {
        display: block;
    }
}

/* Tablets en horizontal y notebooks: fijo un ancho máximo más generoso y subo un poco la tipografía para aprovechar el espacio. */
@media (min-width: 768px) {
    .calculator {
        max-width: 420px;
        padding: 36px;
    }
}

/* Monitores grandes de escritorio: no quiero que la calculadora se vea "perdida" en medio de una pantalla enorme, así que limito su crecimiento y en cambio agrando un poco el respiro general. */
@media (min-width: 1200px) {
    .calculator {
        max-width: 440px;
    }
}

/* Caso especial: celulares en horizontal con MUY poca altura (ej. un iPhone acostado). Acá priorizo que la calculadora entre completa en pantalla sin necesidad de scroll. */
@media (max-height: 480px) and (orientation: landscape) {
    body {
        padding: 10px;
        align-items: flex-start;
    }

    .calculator {
        padding: 14px 20px;
    }

    .calculator__eyebrow,
    .calculator__hint {
        display: none;
    }

    .buttons {
        gap: 8px;
        grid-auto-rows: 38px;
    }

    .btn {
        min-height: 38px;
    }

    .calculator__display {
        font-size: 1.6rem;
        padding: 10px 16px 4px;
    }
}

/* --------------------------------------------------------------------------
   7. ACCESIBILIDAD: ALTO CONTRASTE Y MOVIMIENTO
   -------------------------------------------------------------------------- */

/* Si el sistema operativo del usuario pide más contraste, refuerzo bordes para que los botones se distingan incluso sin depender solo del color. */
@media (prefers-contrast: more) {
    .btn {
        border: 2px solid var(--text-dark);
    }
}