/* IberMoria · base: letra, tokens (claro y oscuro), armazón del panel.
   Escena: alguien de Iberika en la oficina, con luz de día, mira entre otras tareas que el conmutador cursa y
   factura bien; un cliente mira su saldo desde el móvil a última hora. Claro por defecto, oscuro a un clic.
   Estrategia de color: contenida. Neutros teñidos hacia el teal de Iberika; teal para acción y selección;
   naranja solo para «en vivo» y «pide atención». */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fuentes/inter-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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fuentes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fuentes/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }

:root {
  color-scheme: light;
  --papel: oklch(0.972 0.006 220);
  --superficie: oklch(0.993 0.003 220);
  --superficie-2: oklch(0.955 0.008 220);
  --lateral: oklch(0.948 0.01 218);
  --hover: oklch(0.935 0.012 218);
  --borde: oklch(0.895 0.009 220);
  --borde-fuerte: oklch(0.8 0.012 220);
  --tinta: oklch(0.24 0.02 232);
  --tinta-2: oklch(0.42 0.018 232);
  --tinta-3: oklch(0.52 0.016 232);
  --acento: oklch(0.53 0.09 222);
  --acento-hover: oklch(0.46 0.09 224);
  --acento-suave: oklch(0.935 0.03 215);
  --acento-texto: oklch(0.45 0.085 224);
  --sobre-acento: oklch(0.985 0.004 215);
  --vivo: oklch(0.67 0.16 52);
  --vivo-suave: oklch(0.95 0.035 60);
  --vivo-texto: oklch(0.49 0.13 48);
  --bien: oklch(0.56 0.11 155);
  --bien-suave: oklch(0.95 0.035 155);
  --bien-texto: oklch(0.44 0.1 155);
  --mal: oklch(0.56 0.18 26);
  --mal-suave: oklch(0.955 0.025 25);
  --mal-texto: oklch(0.48 0.16 26);
  --icono-acento: var(--vivo);
  --sombra: 0 1px 1px oklch(0.25 0.03 232 / 0.04), 0 2px 6px oklch(0.25 0.03 232 / 0.05), 0 10px 24px -8px oklch(0.25 0.03 232 / 0.08);
  --sombra-alta: 0 2px 2px oklch(0.25 0.03 232 / 0.05), 0 8px 20px oklch(0.25 0.03 232 / 0.08), 0 28px 56px -16px oklch(0.25 0.03 232 / 0.18);
  --brillo: inset 0 1px 0 oklch(1 0 0 / 0.7);
  --velo: oklch(0.972 0.006 220 / 0.92);
  --grano-opacidad: 0.05;
  --img-hero: image-set(url(../img/hero-claro.avif) type('image/avif'), url(../img/hero-claro.webp) type('image/webp'));
  --img-cab-clientes: image-set(url(../img/cab-clientes-claro.avif) type('image/avif'), url(../img/cab-clientes-claro.webp) type('image/webp'));
  --img-cab-red: image-set(url(../img/cab-red-claro.avif) type('image/avif'), url(../img/cab-red-claro.webp) type('image/webp'));
  --img-cab-dinero: image-set(url(../img/cab-dinero-claro.avif) type('image/avif'), url(../img/cab-dinero-claro.webp) type('image/webp'));

  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --t-meta: .8125rem; --t-tabla: .875rem; --t-cuerpo: 1rem; --t-seccion: 1.125rem; --t-ficha: 1.375rem; --t-pagina: 1.75rem; --t-cifra: 2.25rem;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e12: 48px;
  --r-campo: 8px; --r-panel: 14px; --r-pastilla: 999px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --rapido: 150ms; --normal: 200ms;
  --foco: 0 0 0 2px var(--papel), 0 0 0 4px var(--acento);
  --lateral-ancho: 252px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: oklch(0.172 0.009 235);
  --superficie: oklch(0.212 0.011 235);
  --superficie-2: oklch(0.245 0.012 235);
  --lateral: oklch(0.19 0.011 235);
  --hover: oklch(0.27 0.014 232);
  --borde: oklch(0.3 0.013 235);
  --borde-fuerte: oklch(0.4 0.015 235);
  --tinta: oklch(0.935 0.008 220);
  --tinta-2: oklch(0.78 0.012 225);
  --tinta-3: oklch(0.68 0.012 225);
  --acento: oklch(0.72 0.1 210);
  --acento-hover: oklch(0.79 0.09 208);
  --acento-suave: oklch(0.3 0.045 220);
  --acento-texto: oklch(0.8 0.09 206);
  --sobre-acento: oklch(0.17 0.01 235);
  --vivo: oklch(0.74 0.15 56);
  --vivo-suave: oklch(0.3 0.05 55);
  --vivo-texto: oklch(0.83 0.11 60);
  --bien: oklch(0.72 0.12 155);
  --bien-suave: oklch(0.29 0.045 158);
  --bien-texto: oklch(0.83 0.1 155);
  --mal: oklch(0.7 0.15 25);
  --mal-suave: oklch(0.3 0.06 25);
  --mal-texto: oklch(0.84 0.09 25);
  --sombra: 0 1px 1px oklch(0 0 0 / 0.2), 0 2px 6px oklch(0 0 0 / 0.22), 0 10px 24px -8px oklch(0 0 0 / 0.35);
  --sombra-alta: 0 2px 2px oklch(0 0 0 / 0.25), 0 8px 20px oklch(0 0 0 / 0.3), 0 28px 56px -16px oklch(0 0 0 / 0.55);
  --brillo: inset 0 1px 0 oklch(1 0 0 / 0.05);
  --velo: oklch(0.172 0.009 235 / 0.9);
  --grano-opacidad: 0.07;
  --img-hero: image-set(url(../img/hero-oscuro.avif) type('image/avif'), url(../img/hero-oscuro.webp) type('image/webp'));
  --img-cab-clientes: image-set(url(../img/cab-clientes-oscuro.avif) type('image/avif'), url(../img/cab-clientes-oscuro.webp) type('image/webp'));
  --img-cab-red: image-set(url(../img/cab-red-oscuro.avif) type('image/avif'), url(../img/cab-red-oscuro.webp) type('image/webp'));
  --img-cab-dinero: image-set(url(../img/cab-dinero-oscuro.avif) type('image/avif'), url(../img/cab-dinero-oscuro.webp) type('image/webp'));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--papel); color: var(--tinta);
  font: 400 var(--t-cuerpo)/1.5 var(--fuente); font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Grano: la textura del papel, por encima de todo y sin capturar clics. */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: url(../img/grano.webp) repeat; background-size: 256px; opacity: var(--grano-opacidad); mix-blend-mode: soft-light;
}
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--t-pagina); font-weight: 650; }
h2 { font-size: var(--t-seccion); font-weight: 620; }
h3 { font-size: var(--t-cuerpo); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--acento-texto); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95em; letter-spacing: -.01em; }
.cifra { font-variant-numeric: tabular-nums; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icono.p { width: 16px; height: 16px; }
.icono.g { width: 24px; height: 24px; }
[hidden] { display: none !important; }

/* ---------- Armazón ---------- */
.armazon { display: grid; grid-template-columns: var(--lateral-ancho) minmax(0, 1fr); min-height: 100dvh;
  /* El fondo de la barra lateral lo pinta la rejilla: así llega hasta abajo aunque la página sea muy larga
     (la barra es sticky y solo mide una pantalla). */
  background: linear-gradient(90deg, var(--lateral) 0 calc(var(--lateral-ancho) - 1px),
    var(--borde) calc(var(--lateral-ancho) - 1px) var(--lateral-ancho), var(--papel) var(--lateral-ancho)); }
.lateral {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--e2);
  background: var(--lateral); border-right: 1px solid var(--borde); padding: var(--e5) var(--e3) var(--e3);
}
.marca { display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e2) var(--e4); text-decoration: none; color: var(--tinta); }
.marca svg { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 4px oklch(0.25 0.03 232 / .18)); }
.marca b { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.marca small { display: block; font-size: .72rem; color: var(--tinta-3); letter-spacing: .02em; }
.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; margin: 0 calc(-1 * var(--e1)); padding: 0 var(--e1); }
.nav-grupo { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); padding: var(--e4) var(--e3) var(--e1); }
.nav a {
  display: flex; align-items: center; gap: var(--e3); min-height: 40px; padding: 0 var(--e3); border-radius: var(--r-campo);
  color: var(--tinta-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
  transition: background-color var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.nav a:hover { background: var(--hover); color: var(--tinta); }
.nav a[aria-current="page"] { background: var(--superficie); color: var(--acento-texto); box-shadow: var(--sombra), var(--brillo); }
.nav a .contador { margin-left: auto; }
.yo { border-top: 1px solid var(--borde); padding: var(--e3) var(--e2) 0; display: flex; align-items: center; gap: var(--e2); }
.yo .avatar { width: 34px; height: 34px; }
.yo div { min-width: 0; flex: 1; }
.yo b { display: block; font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo small { color: var(--tinta-3); font-size: .75rem; }

.fondo-menu { display: none; }
.principal { min-width: 0; padding: var(--e6) clamp(16px, 3vw, 40px) var(--e12); }
.barra-movil { display: none; }

.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e6); }
.cabecera p { color: var(--tinta-2); margin-top: var(--e1); max-width: 65ch; }
.cabecera .acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Banda de área: imagen propia a la derecha, velo del color del papel detrás del texto (contraste AA siempre). */
.banda {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel);
  padding: var(--e8) var(--e8) var(--e6); margin-bottom: var(--e6); min-height: 152px;
  background: var(--superficie) var(--img-banda) right center / cover no-repeat;
  box-shadow: var(--sombra), var(--brillo); border: 1px solid var(--borde);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.banda::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--velo) 0%, var(--velo) 38%, transparent 78%); }
.banda.clientes { --img-banda: var(--img-cab-clientes); }
.banda.red { --img-banda: var(--img-cab-red); }
.banda.dinero { --img-banda: var(--img-cab-dinero); }
.banda .cabecera { margin: 0; }
.banda h1 { display: flex; align-items: center; gap: var(--e3); }
.baldosa {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra), inset 0 1px 0 oklch(1 0 0 / .25);
  --icono-acento: oklch(0.86 0.12 70);
}
.baldosa .icono { width: 24px; height: 24px; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .armazon { grid-template-columns: minmax(0, 1fr); background: var(--papel); }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 60; transform: translateX(-104%);
    transition: transform 240ms var(--ease); box-shadow: var(--sombra-alta);
  }
  .menu-abierto .lateral { transform: none; }
  .fondo-menu { display: block; position: fixed; inset: 0; z-index: 55; background: oklch(0.2 0.02 235 / .45); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); }
  .menu-abierto .fondo-menu { opacity: 1; pointer-events: auto; }
  .barra-movil {
    display: flex; align-items: center; gap: var(--e2); position: sticky; top: 0; z-index: 40;
    padding: var(--e2) var(--e4); background: var(--velo); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--borde);
  }
  .barra-movil .marca { padding: 0; gap: var(--e2); }
  .barra-movil .marca svg { width: 28px; height: 28px; }
  .barra-movil .vivo { margin-left: auto; }
  .principal { padding: var(--e4) var(--e4) var(--e12); }
  .banda { padding: var(--e5) var(--e4) var(--e4); min-height: 128px; background-size: auto 100%; }
  .banda::before { background: linear-gradient(90deg, var(--velo) 0%, var(--velo) 55%, oklch(from var(--papel) l c h / .55) 100%); }
  h1 { font-size: 1.5rem; }
  .baldosa { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}