/* ═══════════════════════════════════════════════════════════
   TEMA DÍA · el MAR lo colorea el SHADER (azul océano frío, con
   reflejos reales). El velo solo pinta el CIELO. — CSS (jun 2026)
   → Enlázalo en el <head> de cada página, o pégalo al final de styles.css ←

   NUEVO ENFOQUE (jun 2026): el agua ya NO se tiñe con el velo, la colorea el
   shader (main.js / ocean.js) con u_dia → tiene reflejos y movimiento reales.
   Por eso aquí:
   · El CIELO sí lleva color (azul de "hora azul", algo saturado).
   · El toque cálido va SUTIL y un poco ARRIBA del horizonte (no en la línea).
   · En la LÍNEA del horizonte el velo es azul claro, IGUAL que el agua del
     shader → la unión agua-cielo se funde azul-con-azul (sin corte raro).
   · Sobre el MAR el velo es casi transparente (el shader hace el color).

   ANIMACIÓN: al cambiar de tema, el cielo hace un FUNDIDO suave de ~1.3s; el
   agua del shader también cambia con un suavizado propio.

   PERILLAS:
   · Color del AGUA de día → NO se toca aquí, se toca en el shader (main.js,
     línea "deepD/shallD"). Aquí solo está el cielo.
   · Cielo más/menos saturado → alpha de las 2 primeras líneas.
   · Toque cálido → la línea del ~52%; baja su alpha para enfriarlo.
   · Altura del color = los % (el horizonte cae ~65%).
   ═══════════════════════════════════════════════════════════ */

/* el velo: invisible por defecto (modo noche) */
.velo-dia {
    position: fixed;
    inset: 0;
    /* z-index:-1 = detrás del texto. tema-dia.js lo agrega DESPUÉS del canvas,
       así queda encima del mar (mismo z-index, gana el último del DOM). */
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    /* ANIMACIÓN del cambio de tema: fundido suave del cielo. */
    transition: opacity 1.3s cubic-bezier(.45, 0, .25, 1);

    /* EL CIELO DE DIA YA NO SE PINTA AQUI: ahora lo renderiza el SHADER
       (main.js → daySkyCol: degradado real + sol). El velo queda transparente
       y solo se conserva por compatibilidad (las tarjetas y botones de abajo
       siguen funcionando igual). Si algun dia quieres darle un tinte extra al
       dia, puedes volver a poner un linear-gradient aqui. */
    background: transparent;

    /* SCREEN = solo aclara: tiñe el cielo sin ensuciar y deja brillar el agua. */
    mix-blend-mode: screen;
}

/* cuando el tema es día, el velo aparece (con la transición de arriba) */
body.tema-dia .velo-dia {
    opacity: 1;
}

/* ── tarjetas: la HORA DORADA mantiene la escena oscura, asi que las tarjetas
   conservan tu diseño original (ya no se vuelven blancas). Solo dejamos la
   transición declarada por si algún día quieres volver a cambiarlas. ── */

/* la transición de las tarjetas se declara siempre (anima en ambos sentidos) */
.card,
.bio,
.tool-box,
.form-box,
.proj,
.track {
    transition: background 1s ease, box-shadow 1s ease,
        transform .35s cubic-bezier(.25, .46, .45, .94), border-color .35s;
}

/* ══════════════════════════════════════════════════════════
   FIX MÓVIL · que la luna/hamburguesa NO se salga en Sobre mí
   (y en cualquier página): bloqueamos el desbordamiento horizontal
   que empujaba el botón fuera del borde derecho.
   ══════════════════════════════════════════════════════════ */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* los tooltips de las herramientas no deben desbordar la pantalla en celular */
@media (max-width: 768px) {
    .tool::after {
        max-width: 70vw;
    }

    /* la luna/menú (.mb-ham) que NO se corte en el borde derecho del celular:
       la empujamos hacia adentro respetando el área segura (bordes curvos /
       notch). Si tu menu.js usa otra clase, dime y lo ajusto. */
    .mb-ham {
        right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        top: calc(14px + env(safe-area-inset-top, 0px)) !important;
        overflow: visible !important;
    }
}

/* ── los botones de tema en el menú ── */
.mb-tema {
    border-top: 0.5px solid rgba(125, 211, 252, .18);
    margin-top: 18px;
    padding-top: 16px;
}

.mb-tema-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #7c87a6;
    text-align: right;
    margin-bottom: 10px;
}

.mb-tema-ops {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.tema-op {
    /* position:relative para colgar el badge "beta" */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e8d5b7;
    background: transparent;
    border: 1px solid rgba(232, 213, 183, .4);
    border-radius: 20px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all .3s;
}

.tema-op:hover {
    border-color: rgba(232, 213, 183, .8);
}

.tema-op.tema-on {
    color: #3a2418;
    background: linear-gradient(135deg, #ffd98a, #f5b25c);
    border-color: transparent;
}

.tema-op svg {
    flex-shrink: 0;
}

/* etiqueta BETA flotando sobre el botón de Día */
.tema-beta {
    position: absolute;
    top: -7px;
    right: -6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #04040c;
    background: linear-gradient(135deg, #7dd3fc, #38bdf8);
    border-radius: 10px;
    padding: 1px 5px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* la luna del menú se ve MAS brillante y fría cuando el tema luna llena está activo */
.mb-luna.mb-es-sol {
    filter: saturate(0.85) brightness(1.3);
    transition: filter 1s ease;
}

/* ══════════════════════════════════════════════════════════
   TARJETAS GLASS (vidrio oscuro) · jul 2026
   Las tarjetas crema deslumbraban de noche. Ahora son VIDRIO OSCURO:
   translúcidas, con el mar desenfocado detrás (backdrop-filter), borde
   sutil, brillo superior (el "gloss") y texto claro.
   El truco: el texto interno usa var(--ink) / var(--ink-soft) / var(--accent),
   así que basta REDEFINIRLAS dentro de las tarjetas para voltear todo.
   PERILLAS:
   · Más/menos transparente → el .52 del background
   · Más/menos desenfoque   → el blur(16px)
   · El gloss               → el inset 0 1px 0 (brillo del filo superior)
   ══════════════════════════════════════════════════════════ */
.card,
.bio,
.tool-box,
.form-box,
.proj,
.track {
    /* texto claro dentro del vidrio */
    --ink: #eef1f8;
    --ink-soft: rgba(238, 241, 248, .62);
    --accent: #a8c4f0;
    color: #eef1f8;
    background: rgba(13, 18, 38, .52) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

.card:hover,
.bio:hover,
.tool-box:hover,
.form-box:hover,
.proj:hover,
.track:hover {
    border-color: rgba(255, 255, 255, .20) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

/* etiquetas (.tag) tenían borde tinta oscura: ahora borde claro sutil */
.tag {
    border-color: rgba(255, 255, 255, .22) !important;
}

/* formulario: inputs de vidrio (antes eran blancos) */
.form-box .campo input,
.form-box .campo textarea {
    color: #eef1f8 !important;
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}

.form-box .campo input::placeholder,
.form-box .campo textarea::placeholder {
    color: rgba(238, 241, 248, .40);
}

.form-box .campo input:focus,
.form-box .campo textarea:focus {
    border-color: rgba(168, 196, 240, .65) !important;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, .14) !important;
}

/* botón de enviar: su fondo usa var(--ink) (ahora claro), así que el texto
   debe ser OSCURO para leerse — queda como CTA claro que resalta en el vidrio */
.form-box .btn-enviar {
    color: #10122a !important;
    border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   ANTI-PANTALLAZO NEGRO entre páginas · jul 2026
   Al navegar, la página nueva pintaba NEGRO un instante (fondo plano +
   canvas WebGL vacío antes de su primer frame). Dos capas de arreglo:
   1) El fondo del body es un degradado que IMITA cielo→mar (se pinta al
      instante, el cambio de página se siente continuo).
   2) El canvas del mar nace invisible y aparece con fundido cuando ya
      dibujó su primer frame (main.js/ocean.js le ponen .mar-listo).
   ══════════════════════════════════════════════════════════ */
body {
    background: linear-gradient(180deg,
            #0c1636 0%,
            #0d1838 45%,
            #0f1a3c 60%,
            #04060e 64%,
            #03040a 100%) !important;
}

#glCanvas {
    opacity: 0;
    transition: opacity .6s ease;
}

#glCanvas.mar-listo {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   RECUADROS MÁS GRANDES · jul 2026
   Contenido más ancho y tarjetas con más aire.
   PERILLAS: ancho total → el 1200px · aire de las tarjetas → los paddings.
   (.proj se maneja aparte: su imagen va al filo, el aire se le da al texto)
   ══════════════════════════════════════════════════════════ */
.wrap {
    max-width: 1440px !important;
}

.card,
.bio,
.tool-box,
.form-box,
.track {
    padding: 36px 40px !important;
}

.proj .pbody {
    padding: 42px 44px !important;
}

@media (max-width: 768px) {

    .card,
    .bio,
    .tool-box,
    .form-box,
    .track {
        padding: 24px 20px !important;
    }

    .proj .pbody {
        padding: 26px 22px !important;
    }
}


/* ══════════════════════════════════════════════════════════
   TARJETAS CREMA EN ANOCHECER · jul 2026
   En NOCHE (luna llena) las tarjetas son vidrio oscuro (arriba). En ANOCHECER
   (body.tema-noche) se vuelven BLANCO PERLA (lavanda, como el brillo del horizonte) y
   dar contraste "de día". El texto interno usa variables (--ink/--accent), así
   que solo hay que voltearlas a tinta oscura y ya cambia todo el contenido.
   PERILLAS: perla → rgba(234, 233, 242) · tinta → #171a2e · acento → #2d5a8c
   ══════════════════════════════════════════════════════════ */
body.tema-noche .card,
body.tema-noche .bio,
body.tema-noche .tool-box,
body.tema-noche .form-box,
body.tema-noche .proj,
body.tema-noche .track {
    --ink: #171a2e;
    --ink-soft: rgba(23, 26, 46, .66);
    --accent: #2d5a8c;
    color: #171a2e;
    background: rgba(234, 233, 242, .90) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(96, 92, 130, .22) !important;
    box-shadow: 0 18px 40px rgba(20, 20, 40, .26),
        inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

body.tema-noche .card:hover,
body.tema-noche .bio:hover,
body.tema-noche .tool-box:hover,
body.tema-noche .form-box:hover,
body.tema-noche .proj:hover,
body.tema-noche .track:hover {
    border-color: rgba(96, 92, 130, .38) !important;
    box-shadow: 0 22px 50px rgba(20, 20, 40, .32),
        inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

/* etiquetas: borde tinta suave sobre perla */
body.tema-noche .tag {
    border-color: rgba(23, 26, 46, .28) !important;
    color: rgba(23, 26, 46, .72) !important;
}

/* formulario: inputs claros con tinta oscura */
body.tema-noche .form-box .campo input,
body.tema-noche .form-box .campo textarea {
    color: #171a2e !important;
    background: rgba(255, 255, 255, .55) !important;
    border-color: rgba(23, 26, 46, .20) !important;
}

body.tema-noche .form-box .campo input::placeholder,
body.tema-noche .form-box .campo textarea::placeholder {
    color: rgba(23, 26, 46, .42);
}

body.tema-noche .form-box .campo input:focus,
body.tema-noche .form-box .campo textarea:focus {
    border-color: rgba(45, 90, 140, .6) !important;
    box-shadow: 0 0 0 3px rgba(45, 90, 140, .14) !important;
}

/* botón enviar: en perla, su fondo var(--ink) es oscuro → texto claro */
body.tema-noche .form-box .btn-enviar {
    color: #eceaf3 !important;
    border-color: transparent !important;
}