/* ============================================================================
   MI PORTAFOLIO · TOKENS
   Dirección: "terminal financiera × prensa económica mexicana".
   Esta hoja define SOLO fuentes, variables y el neutralizado de la estética
   genérica (radios, sombras, gradientes). Los componentes viven en
   mp-editorial.css.

   Las rutas de fuentes son RELATIVAS a propósito: sync-www reescribe
   /static/ → / en html/js/webmanifest pero NO en .css, así que una ruta
   absoluta se rompería dentro del bundle nativo. "../fonts/" resuelve bien
   tanto en /static/css/ (web) como en /css/ (Capacitor).
   ========================================================================== */

/* ─────────────────────────── FUENTES LOCALES ─────────────────────────────
   Empaquetadas en frontend/fonts (OFL 1.1, ver OFL-*.txt). Sin CDN: la app
   nativa arranca sin red. Subsets latin + latin-ext vía unicode-range, así
   que en español solo baja el subset "latin".                              */

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────── TOKENS ───────────────────────────────── */
/* TEMA ÚNICO: papel claro. No hay modo oscuro, no hay conmutador, no hay
   `prefers-color-scheme`. La identidad editorial no cambia —serif en los
   titulares, mono tabular en las cifras, reglas de sección, cintilla— solo
   se imprime sobre papel en vez de sobre tinta.

   NOMBRES: los tokens viejos (`--tinta` como fondo, `--papel` como texto)
   desaparecieron a propósito en vez de reciclarse con el significado
   invertido. Si quedara una referencia sin migrar, `var(--papel)` ahora es
   una variable INEXISTENTE y la declaración se invalida (se ve roto al
   instante). Reciclando el nombre, en cambio, habría pintado texto blanco
   sobre papel blanco y habría pasado desapercibido. Vocabulario nuevo:
     --sup-*    superficies (el papel)
     --tinta-N  texto (la tinta), 1 = más oscuro
   ========================================================================= */
:root {
  /* Tipografía — tres roles, sin excepción */
  --ff-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ff-sans:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── SUPERFICIES ────────────────────────────────────────────────────────
     Papel cálido (sesgo amarillo), nunca el blanco azulado de pantalla.
     El fondo es un degradado casi imperceptible de gris claro a blanco hueso;
     los paneles van un punto MÁS claros que el fondo, así la jerarquía la da
     la luz y no una sombra.                                               */
  --sup:         #EFF1F5;  /* papel de la página: gris frío, plano */
  --sup-panel:   #FFFFFF;  /* tarjeta / panel: blanco puro sobre el gris */
  --sup-alto:    #FFFFFF;  /* panel elevado, hover */
  --sup-hondo:   #E4E7EE;  /* pozos, inputs (recesivo, no elevado) */
  /* Se conservan los nombres del degradado apuntando al papel plano: quedaban
     referencias sueltas y así ninguna se rompe. El degradado se retiró porque
     se estiraba a lo alto del DOCUMENTO y cualquier barra pegajosa con fondo
     opaco dejaba un escalón de color al hacer scroll. */
  --sup-grad-a:  #EFF1F5;
  --sup-grad-b:  #EFF1F5;

  /* ── REGLAS ─────────────────────────────────────────────────────────────
     Hairlines en gris cálido. Nunca azules, nunca sombras.               */
  --regla:        #E1E4EB;  /* hairline estándar */
  --regla-suave:  #EDEFF3;  /* separador interno */
  --regla-fuerte: #C3C8D4;  /* regla de sección / doble */

  /* ── TINTA (texto) ──────────────────────────────────────────────────────
     Contraste medido contra --sup-panel (#FFFFFF), que es la superficie MÁS
     clara y por tanto el peor caso. Los cuatro pasan AA.                  */
  --tinta-1:  #14161B;  /* 14.2:1 — titulares, cifras protagonistas */
  --tinta-2:  #3B404A;  /*  8.2:1 — texto corrido */
  --tinta-3:  #585E6B;  /*  5.1:1 — meta, etiquetas */
  --tinta-4:  #5A6170;  /*  4.9:1 — mínimo AA para texto tenue */

  /* ── ACENTO ─────────────────────────────────────────────────────────────
     Un solo acento para TODA la interacción: ámbar de tinta de sello,
     bajado a ocre para que pase AA sobre papel (el #D79A3C del tema oscuro
     daba 2.2:1 aquí y era ilegible). Sigue sin ser verde a propósito: el
     verde queda reservado a la dirección de mercado.                      */
  --sello:        #8C520C;  /* 5.0:1 — texto/borde de acento */
  --sello-vivo:   #6F4009;  /* hover: se oscurece, no se aclara */
  --sello-solido: #8C520C;  /* fondo de botón; encima va --sobre-sello */
  --sello-tenue:  rgba(140,82,12,.10);
  --sello-tenue2: rgba(140,82,12,.16);
  --sobre-sello:  #FFFFFF;  /* 7.4:1 sobre --sello-solido */

  /* ── DIRECCIÓN DE MERCADO ───────────────────────────────────────────────
     NUNCA decorativos. Reajustados para papel: el verde menta y el salmón
     del tema oscuro quedaban chillones y sin contraste sobre blanco.     */
  /* Verde y rojo tienen que pasar AA sobre DOS familias de fondo a la vez: el
     papel gris y los cinco colores vivos de tarjeta. Eso obliga a tonos
     profundos; los verdes y rojos "brillantes" no aguantan sobre un amarillo
     claro. Peor caso medido: 4.6:1 y 4.7:1. */
  --alza:       #0F5C33;
  --baja:       #962418;
  --alza-tenue: rgba(15,92,51,.10);
  --baja-tenue: rgba(150,36,24,.10);

  /* ── ESCALA TIPOGRÁFICA ─────────────────────────────────────────────────
     Seis escalones y ni uno más. La vista del Periódico llegó a tener DOCE
     tamaños distintos (8.5, 9, 9.5, 10, 11, 12, 13, 13.5, 14, 15.5, 16, 19):
     con esa densidad de valores casi idénticos nada destaca sobre nada y la
     pantalla se lee como una hoja de cálculo, no como una app diseñada.
     Los saltos son grandes a propósito — el contraste de escala es lo que
     crea jerarquía. */
  --txt-etq:     11px;   /* rótulo mono en versalitas */
  --txt-meta:    13px;   /* metadatos, pies */
  --txt-cuerpo:  15px;   /* texto corrido */
  --txt-titular: 20px;   /* titular de tarjeta (1.33× el cuerpo: la jerarquía
                            la crea el SALTO, no el color) */
  --txt-seccion: 22px;   /* encabezado de sección */
  --txt-vista:   30px;   /* título de pantalla */

  /* ── ESCALA DE ESPACIADO ────────────────────────────────────────────────
     Múltiplos de 4. Antes convivían 14 valores sueltos (1,2,4,5,6,7,8,10,11,
     12,13,14,16,18): eso es lo que hace que nada quede alineado con nada. */
  --paso-1:  4px;
  --paso-2:  8px;
  --paso-3: 12px;
  --paso-4: 16px;
  --paso-5: 24px;
  --paso-6: 32px;
  --paso-7: 48px;

  /* ── GEOMETRÍA ──────────────────────────────────────────────────────────
     UN solo lenguaje de superficie en toda la app. Antes convivían dos: las
     tarjetas del Periódico (redondeadas, con color y sombra) y todo lo demás
     (esquinas de 2px, filetes finos, cero elevación). Dos lenguajes en la
     misma pantalla es exactamente lo que hace que una app parezca ensamblada
     por varias manos. Ahora hay una escala de radios y todo la usa. */
  --radio-chico:  8px;    /* chips, celdas de dato */
  --radio:       12px;    /* controles, campos, botones */
  --radio-tarjeta: 16px;  /* tarjetas y paneles */
  --radio-nulo:   0px;
  --hairline:   1px;

  /* Elevación: mínima y suave. Se usa SOLO en lo que de verdad flota sobre
     la página (tarjetas del Periódico, modales), nunca en celdas de datos. */
  /* Elevación en tres pasos, con sombra fría para que case con el papel gris.
     La sombra de una app bien hecha casi no se ve: separa, no decora. */
  --elev-1: 0 1px 2px rgba(20,22,27,.06), 0 1px 1px rgba(20,22,27,.04);
  --elev-2: 0 2px 4px rgba(20,22,27,.06), 0 8px 20px -6px rgba(20,22,27,.12);
  --elev-3: 0 4px 8px rgba(20,22,27,.08), 0 16px 40px -12px rgba(20,22,27,.20);

  /* Micro-interacciones sobrias */
  --t-rapida: 120ms;
  --t-media:  160ms;
  --easing:   cubic-bezier(.2, 0, .2, 1);
  /* Resorte suave para la expansión de tarjetas (Parte 2). Sin rebote
     exagerado: sobrepasa ~4% y asienta. */
  --resorte:  cubic-bezier(.22, 1.0, .32, 1.0);

  /* Safe areas (se leen desde el harness de verificación) */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
}

/* En pantallas no-retina 0.5px puede desaparecer: subimos a 1px. */
@media (max-resolution: 1.5dppx) {
  :root { --hairline: 1px; }
}

/* ──────────────────── NEUTRALIZADO DE LA ESTÉTICA GENÉRICA ────────────────
   Tailwind se inyecta en runtime DESPUÉS de esta hoja, así que aquí sí hace
   falta !important: es la única forma de ganarle a las utilidades ya
   repartidas por 400 KB de markup sin renombrar una sola clase.            */

/* Cero glow y cero sombras de texto: eso sí sigue prohibido. Las sombras de
   CAJA ya no se barren.
   Antes esta regla las mataba todas salvo en tres clases, y era la razón de
   fondo de que la app pareciera hecha por dos personas: las tarjetas del
   Periódico tenían volumen y absolutamente nada más en la app lo tenía. Ahora
   la elevación la define el sistema (--elev-1/2/3) y la usan por igual
   paneles, modales, menús y tarjetas. */
* , *::before, *::after { text-shadow: none !important; }
.mp-elev   { box-shadow: var(--elev-1) !important; }
.mp-elev-2 { box-shadow: var(--elev-2) !important; }
.mp-elev-3 { box-shadow: var(--elev-3) !important; }

/* Las sombras de Tailwind se reasignan a la escala del sistema en vez de
   anularse: así `shadow-lg` en markup viejo produce la elevación correcta. */
[class*="shadow-"]:not(.mp-elev):not(.mp-elev-2):not(.mp-elev-3):not(.mp-tarjeta) {
  box-shadow: var(--elev-2);
}

/* Los radios ya NO se aplastan. Antes esta regla llevaba cualquier
   `rounded-*` a 2px, así que la app entera tenía esquinas de terminal
   mientras las tarjetas del Periódico eran redondeadas: el choque de
   lenguajes más visible de todos. Ahora el tema de Tailwind define una escala
   real (ver index.html) y cada utilidad da el radio que dice. */
.rounded-none { border-radius: 0 !important; }

/* Cero gradientes de utilidad: se aplanan al color de panel. (El degradado
   de página lo pinta mp-editorial.css sobre `html`, que no lleva estas
   clases, así que no lo alcanza esta regla.) */
[class*="bg-gradient-"] {
  background-image: none !important;
  background-color: var(--sup-panel) !important;
}

/* Cero glassmorphism. */
[class*="backdrop-blur"], [class*="backdrop-filter"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* El fondo radial del shell y el "bg-grid" desaparecen. El degradado de
   página se pinta en mp-editorial.css; aquí solo se limpia `body` para que
   no tape el de `html`. */
body     { background-image: none !important; }
.bg-grid { background-image: none !important; }

/* Un solo tema: se declara `light` para que los controles nativos (scrollbars,
   date pickers, autofill de Safari) también salgan claros y no en su variante
   oscura heredada del sistema. */
:root { color-scheme: light; }

/* Transiciones sobrias: nada por encima de 160ms, sin rebotes. */
.transition, [class*="transition-"] {
  transition-duration: var(--t-media) !important;
  transition-timing-function: var(--easing) !important;
}

.mp-punto,
input[type="radio"],
input[type="checkbox"] { border-radius: 999px !important; }

/* El avatar del portafolio y el logo son marcas: radio de control, no de caja. */
#port-active-avatar { border-radius: var(--radio-chico) !important; }
header img[alt="Mi Portafolio"] { border-radius: var(--radio-chico) !important; }