/* ============================================================
   PANEL CONTROL · hoja de estilos
   Un único sistema para el tema claro y el oscuro: todo el color sale
   de las variables de :root. El neón del isotipo (cian → violeta →
   magenta) solo aparece en el logo y en un par de toques de marca.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.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: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
}

/* ---------- Tokens · tema claro (por defecto) ---------- */
:root {
  color-scheme: light;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Marca (fijos en los dos temas) */
  --ink-950: #010a26;
  --ink-900: #031035;
  --ink-850: #051848;
  --ink-800: #08205a;
  --sobre-tinta: #f1f4ff;
  --sobre-tinta-2: #b4bee4;
  --sobre-tinta-3: #8e9ac9;
  --neon: linear-gradient(90deg, #01fdff 0%, #8d71fc 58%, #ed5afb 100%);

  /* Superficies */
  --marco: #efede8;
  --lienzo: #fbfaf8;
  --tarjeta: #ffffff;
  --relleno: #f7f6f3;
  --relleno-2: #efede8;
  --nav-activo: #ffffff;
  --linea: #eae8e3;
  --linea-fuerte: #dfddd7;

  /* Texto */
  --t-titulo: #0a1033;
  --t-cuerpo: #2e3350;
  --t-suave: #555a74;
  --t-tenue: #717590;

  /* Acento de interfaz */
  --acento: #6b4bf0;
  --acento-hondo: #4a2bc9;
  --acento-suave: #eeeaff;
  --acento-linea: #d9d1fb;
  --acento-texto: #4a2bc9;
  --sobre-acento: #ffffff;

  /* Semánticos: texto / punto / fondo */
  --ok: #2a6e53;
  --ok-punto: #51b48b;
  --ok-fondo: #e6f3ec;
  --ok-linea: #c5e3d4;
  --sobre-ok: #ffffff;
  --aviso: #8a5d12;
  --aviso-punto: #e1a14f;
  --aviso-fondo: #fcf1dc;
  --aviso-linea: #f1dcb4;
  --malo: #b3323d;
  --malo-punto: #c2414b;
  --malo-fondo: #fbeaeb;
  --malo-linea: #f2c9cd;
  --cian: #0a6b74;
  --cian-punto: #34c6d7;
  --cian-fondo: #e2f5f7;
  --neutro: #555a74;
  --neutro-fondo: #efede8;

  /* Gráficos */
  --g-cobrado: #6b4bf0;
  --g-vencido: #c2414b;
  --g-porcobrar: #6b4bf0;
  --g-gastos: #d98e2c;

  /* Sombras y radios */
  --sombra: 0 1px 2px rgba(10, 16, 51, .05);
  --sombra-media: 0 2px 6px rgba(10, 16, 51, .06), 0 1px 2px rgba(10, 16, 51, .04);
  --sombra-pop: 0 18px 40px -12px rgba(10, 16, 51, .22), 0 3px 8px rgba(10, 16, 51, .08);
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 16px;

  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555a74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --lateral: 244px;
  --barra: 58px;
  --gutter: 32px;
}

/* ---------- Tokens · tema oscuro ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --marco: #010a26;
  --lienzo: #04112f;
  --tarjeta: #071a40;
  --relleno: rgba(140, 165, 255, .055);
  --relleno-2: rgba(140, 165, 255, .1);
  --nav-activo: rgba(141, 113, 252, .16);
  --linea: rgba(140, 165, 255, .14);
  --linea-fuerte: rgba(140, 165, 255, .25);
  --t-titulo: #f1f4ff;
  --t-cuerpo: #d0d7f3;
  --t-suave: #9ba6d2;
  --t-tenue: #8390bd;
  --acento: #8d71fc;
  --acento-hondo: #a690ff;
  --acento-suave: rgba(141, 113, 252, .16);
  --acento-linea: rgba(141, 113, 252, .38);
  --acento-texto: #b5a4ff;
  --sobre-acento: #010a26;
  --ok: #6fd1a7;
  --ok-punto: #51b48b;
  --ok-fondo: rgba(81, 180, 139, .15);
  --ok-linea: rgba(81, 180, 139, .35);
  --sobre-ok: #010a26;
  --aviso: #f0bb6e;
  --aviso-punto: #e1a14f;
  --aviso-fondo: rgba(225, 161, 79, .15);
  --aviso-linea: rgba(225, 161, 79, .35);
  --malo: #ff8f99;
  --malo-punto: #ff6b78;
  --malo-fondo: rgba(255, 107, 120, .14);
  --malo-linea: rgba(255, 107, 120, .35);
  --cian: #6adbe8;
  --cian-punto: #34c6d7;
  --cian-fondo: rgba(52, 198, 215, .13);
  --neutro: #9ba6d2;
  --neutro-fondo: rgba(140, 165, 255, .12);
  --g-cobrado: #8d71fc;
  --g-vencido: #ff6b78;
  --g-porcobrar: #8d71fc;
  --g-gastos: #e1a14f;
  --sombra: 0 1px 2px rgba(0, 0, 0, .25);
  --sombra-media: 0 2px 8px rgba(0, 0, 0, .3);
  --sombra-pop: 0 20px 44px -10px rgba(0, 0, 0, .65), 0 0 0 1px rgba(140, 165, 255, .12);
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba6d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]) {
    color-scheme: dark;
    --marco: #010a26;
    --lienzo: #04112f;
    --tarjeta: #071a40;
    --relleno: rgba(140, 165, 255, .055);
    --relleno-2: rgba(140, 165, 255, .1);
    --nav-activo: rgba(141, 113, 252, .16);
    --linea: rgba(140, 165, 255, .14);
    --linea-fuerte: rgba(140, 165, 255, .25);
    --t-titulo: #f1f4ff;
    --t-cuerpo: #d0d7f3;
    --t-suave: #9ba6d2;
    --t-tenue: #8390bd;
    --acento: #8d71fc;
    --acento-hondo: #a690ff;
    --acento-suave: rgba(141, 113, 252, .16);
    --acento-linea: rgba(141, 113, 252, .38);
    --acento-texto: #b5a4ff;
    --sobre-acento: #010a26;
    --ok: #6fd1a7;
    --ok-punto: #51b48b;
    --ok-fondo: rgba(81, 180, 139, .15);
    --ok-linea: rgba(81, 180, 139, .35);
    --sobre-ok: #010a26;
    --aviso: #f0bb6e;
    --aviso-punto: #e1a14f;
    --aviso-fondo: rgba(225, 161, 79, .15);
    --aviso-linea: rgba(225, 161, 79, .35);
    --malo: #ff8f99;
    --malo-punto: #ff6b78;
    --malo-fondo: rgba(255, 107, 120, .14);
    --malo-linea: rgba(255, 107, 120, .35);
    --cian: #6adbe8;
    --cian-punto: #34c6d7;
    --cian-fondo: rgba(52, 198, 215, .13);
    --neutro: #9ba6d2;
    --neutro-fondo: rgba(140, 165, 255, .12);
    --g-cobrado: #8d71fc;
    --g-vencido: #ff6b78;
    --g-porcobrar: #8d71fc;
    --g-gastos: #e1a14f;
    --sombra: 0 1px 2px rgba(0, 0, 0, .25);
    --sombra-media: 0 2px 8px rgba(0, 0, 0, .3);
    --sombra-pop: 0 20px 44px -10px rgba(0, 0, 0, .65), 0 0 0 1px rgba(140, 165, 255, .12);
    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba6d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 14px/1.5 var(--f-sans);
  color: var(--t-cuerpo);
  background: var(--marco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--t-titulo); font-weight: 650; letter-spacing: -.012em; }
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.024em; }
h2 { font-size: 15px; line-height: 1.3; }
p { margin: 0 0 .7em; }
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--f-mono); font-size: .86em; background: var(--relleno-2); color: var(--t-titulo); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
kbd { font: 500 11px/1 var(--f-sans); color: var(--t-suave); background: var(--relleno-2); border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 18px 0; }
.separador { border: 0; border-top: 1px solid var(--linea); margin: 18px -20px; }
.tarjeta .separador { margin-left: -20px; margin-right: -20px; }
.mono { font-family: var(--f-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--acento-suave); color: var(--t-titulo); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--acento); color: var(--sobre-acento); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.saltar:focus { top: 12px; text-decoration: none; }

/* Iconos */
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.ico-s { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.ico-l { width: 28px; height: 28px; flex: none; }

/* Utilidades de texto */
.texto-suave { color: var(--t-suave); }
.texto-rojo { color: var(--malo); }
.texto-verde { color: var(--ok); }
.texto-ambar { color: var(--aviso); }
.nota-pie { font-size: 12.5px; color: var(--t-suave); margin: 14px 0 0; line-height: 1.55; }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 14px; }
.inline { display: inline; margin: 0; }
.seccion { margin-top: 20px; }
.mb { margin-bottom: 20px; }
.pre-linea { white-space: pre-line; }
p.pre-linea { margin: 0; }

/* ============================================================
   MARCO · barra lateral + superficie de contenido
   ============================================================ */
.marco { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); height: 100vh; height: 100dvh; }
html.lateral-corto .marco { grid-template-columns: 68px minmax(0, 1fr); }

.lateral { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.lateral::-webkit-scrollbar { display: none; }
.lateral-cab { display: flex; align-items: center; gap: 6px; padding: 2px 2px 2px 4px; }
.marca { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; flex: 1; }
.marca:hover { text-decoration: none; }
.marca-iso { width: 38px; height: 38px; border-radius: 11px; background: var(--ink-950); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 1px rgba(140, 165, 255, .22), 0 6px 14px -6px rgba(107, 75, 240, .55); }
.marca-iso .isotipo { width: 23px; height: auto; display: block; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-texto small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t-suave); }
.marca-texto b { font-size: 15px; font-weight: 650; color: var(--t-titulo); letter-spacing: -.015em; white-space: nowrap; }
.plegar { color: var(--t-suave); }

.atajo { display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 8px 0 11px; border-radius: 10px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-suave); font: 500 13px var(--f-sans); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.atajo:hover { border-color: var(--acento-linea); color: var(--t-titulo); }
.atajo .atajo-texto { flex: 1; }
.atajo kbd { font-size: 10.5px; padding: 2px 5px; }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; }
.nav-titulo { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-suave); padding: 18px 11px 6px; white-space: nowrap; }
.nav-titulo:first-child { padding-top: 6px; }
.nav a { position: relative; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 11px; border-radius: 10px; color: var(--t-cuerpo); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; }
.nav a .ico { color: var(--t-suave); transition: color .12s; }
.nav a:hover { background: var(--relleno-2); color: var(--t-titulo); text-decoration: none; }
.nav a.activo { background: var(--nav-activo); color: var(--t-titulo); font-weight: 600; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.nav a.activo .ico { color: var(--acento-texto); }
.nav a.activo::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.insignia { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--malo-punto); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

.usuario-caja { margin-top: auto; }
.usuario-boton { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.usuario-boton:hover, .desplegable.abierto > .usuario-boton { background: var(--relleno-2); }
.usuario-datos { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.usuario-datos b { font-size: 13px; font-weight: 600; color: var(--t-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-datos small { font-size: 11.5px; color: var(--t-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-boton > .ico-s { color: var(--t-suave); }

/* Barra lateral recogida (solo iconos) */
html.lateral-corto .lateral { align-items: center; padding-left: 10px; padding-right: 10px; }
html.lateral-corto .lateral-cab { flex-direction: column; gap: 10px; padding: 0; }
html.lateral-corto .marca-texto, html.lateral-corto .atajo .atajo-texto, html.lateral-corto .atajo kbd,
html.lateral-corto .nav a span.nav-texto, html.lateral-corto .usuario-datos,
html.lateral-corto .usuario-boton > .ico-s { display: none; }
html.lateral-corto .marca { flex: none; }
html.lateral-corto .nav-titulo { width: 24px; height: 1px; margin: 10px 0; padding: 0; font-size: 0; line-height: 0; background: var(--linea-fuerte); overflow: hidden; }
html.lateral-corto .nav-titulo:first-child { display: none; }
html.lateral-corto .atajo { width: 44px; padding: 0; justify-content: center; }
html.lateral-corto .nav { width: 100%; align-items: center; padding-top: 6px; }
html.lateral-corto .nav a { width: 44px; padding: 0; justify-content: center; }
html.lateral-corto .nav a.activo::before { left: -10px; }
html.lateral-corto .nav a .insignia { position: absolute; top: 1px; right: 1px; margin: 0; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
html.lateral-corto .usuario-boton { width: 44px; padding: 4px; justify-content: center; }
html.lateral-corto .plegar .ico { transform: scaleX(-1); }
html.lateral-corto .usuario-caja .desplegable-menu { left: 0; width: 240px; }

.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 8px 8px 8px 0; background: var(--lienzo); border: 1px solid var(--linea); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra); }
.barra { flex: none; display: flex; align-items: center; gap: 14px; height: var(--barra); padding: 0 var(--gutter); border-bottom: 1px solid var(--linea); }
.barra-marca { display: none; }
.migas { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--t-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migas a { color: var(--t-suave); font-weight: 500; }
.migas a:hover { color: var(--t-titulo); text-decoration: none; }
.migas > span { color: var(--t-tenue); }
.migas b { color: var(--t-titulo); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.contenido { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 30px max(var(--gutter), calc((100% - 1380px) / 2)) 64px; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; scroll-padding-top: 20px; }
.contenido:focus { outline: none; }

/* Estado de los datos (pastilla) */
.pastilla-datos { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-cuerpo); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
a.pastilla-datos:hover { text-decoration: none; border-color: var(--acento-linea); }
.pastilla-datos > i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-tenue); flex: none; }
.pastilla-ok > i { background: var(--ok-punto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-punto) 22%, transparent); }
.pastilla-aviso { color: var(--aviso); border-color: var(--aviso-linea); background: var(--aviso-fondo); }
.pastilla-aviso > i { background: var(--aviso-punto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aviso-punto) 25%, transparent); }
.pastilla-datos .texto-suave { color: inherit; opacity: .75; }

/* ============================================================
   COMPONENTES
   ============================================================ */

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-titulo); font: 550 13.5px/1 var(--f-sans); letter-spacing: -.003em; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: var(--sombra); transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; -webkit-tap-highlight-color: transparent; }
.boton:hover { background: var(--relleno); text-decoration: none; border-color: var(--t-tenue); }
.boton:active { transform: translateY(.5px); }
.boton .ico, .boton .ico-s { width: 16px; height: 16px; }
.boton[disabled], .boton:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.boton-s { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-s); gap: 6px; }
.boton-primario { background: var(--acento); color: var(--sobre-acento); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(74, 43, 201, .4); }
.boton-primario:hover { background: var(--acento-hondo); border-color: transparent; }
.boton-fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--t-cuerpo); }
.boton-fantasma:hover { background: var(--relleno-2); border-color: transparent; color: var(--t-titulo); }
.boton-peligro { color: var(--malo); }
.boton-peligro:hover { background: var(--malo-fondo); border-color: var(--malo-linea); }
.boton-exito { background: var(--ok); color: var(--sobre-ok); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(20, 70, 50, .35); }
.boton-exito:hover { background: color-mix(in srgb, var(--ok) 88%, #000); border-color: transparent; }
.boton-icono { width: 36px; padding: 0; }
.boton-s.boton-icono { width: 30px; }
.boton-bloque { width: 100%; }
.boton-texto { white-space: nowrap; }

/* ---------- Estado de salud ---------- */
.salud { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--t-suave); }
.salud i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-tenue); flex: none; }
.salud-ok { color: var(--ok); }
.salud-ok i { background: var(--ok-punto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-punto) 24%, transparent); }
.salud-caida { color: var(--malo); font-weight: 600; }
.salud-caida i { background: var(--malo-punto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--malo-punto) 26%, transparent); }
.salud-aviso { color: var(--aviso); }
.salud-aviso i { background: var(--aviso-punto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso-punto) 26%, transparent); }

/* ---------- Chips de estado ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; background: var(--neutro-fondo); color: var(--neutro); vertical-align: middle; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.sin-punto::before { display: none; }
a.chip:hover { text-decoration: none; filter: brightness(.97); }
.estado-pagado, .estado-activa, .estado-ok, .estado-produccion, .estado-activo, .estado-al_dia { background: var(--ok-fondo); color: var(--ok); }
.estado-pendiente, .estado-parcial, .estado-por_caducar, .estado-demo, .estado-pausa, .estado-pausada { background: var(--aviso-fondo); color: var(--aviso); }
.estado-previsto, .estado-firmado, .estado-sin_canjear, .estado-desarrollo { background: var(--acento-suave); color: var(--acento-texto); }
.estado-vencido, .estado-caducada, .estado-caida, .estado-cancelado { background: var(--malo-fondo); color: var(--malo); }
.estado-borrador, .estado-idea, .estado-finalizado, .estado-sin { background: var(--neutro-fondo); color: var(--neutro); }
.estado-anulado, .estado-revocada, .estado-retirada { background: var(--neutro-fondo); color: var(--t-suave); }
.estado-anulado, .estado-revocada { text-decoration: line-through; }
.estado-alta { background: var(--ok-fondo); color: var(--ok); }
.estado-cambio { background: var(--acento-suave); color: var(--acento-texto); }
.estado-borrado { background: var(--malo-fondo); color: var(--malo); }
.estado-evento { background: var(--neutro-fondo); color: var(--neutro); }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- Avatares ---------- */
.avatar { --c: #6b4bf0; width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; line-height: 1; color: #fff; background: var(--c); overflow: hidden; }
.avatar .ico, .avatar .ico-s { width: 17px; height: 17px; }
@supports (color: color-mix(in srgb, red, blue)) {
  .avatar { background: color-mix(in srgb, var(--c) 16%, var(--tarjeta)); color: color-mix(in srgb, var(--c) 78%, var(--t-titulo)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
}
.avatar-s { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.avatar-m { width: 32px; height: 32px; border-radius: 9px; font-size: 11.5px; }
.avatar-l { width: 56px; height: 56px; border-radius: 16px; font-size: 18px; }
.avatar-persona { border-radius: 50%; background: var(--acento-suave); color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-linea); font-weight: 650; }
.avatar-auto { border-radius: 50%; background: var(--relleno-2); color: var(--t-suave); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.avatar-neutro { --c: #555a74; }
.col-casilla { width: 44px; }
.avatar-usuario { width: 34px; height: 34px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); box-shadow: none; font-size: 13px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 20px; box-shadow: var(--sombra); min-width: 0; }
.tarjeta > header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 30px; margin: -3px 0 14px; }
.tarjeta > header h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 620; letter-spacing: -.008em; }
.tarjeta > header h2 .ico { width: 16px; height: 16px; color: var(--t-suave); }
.tarjeta > header .derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; justify-content: flex-end; }
.tarjeta > header .avatar { flex: none; }
.cab-doble { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cab-doble > span { font-size: 12.5px; }
.tarjeta > header h2 a { color: inherit; }
.tarjeta > header h2 a:hover { color: var(--acento-texto); text-decoration: none; }
.cifra-cab { font-size: 18px; font-weight: 640; letter-spacing: -.02em; color: var(--t-titulo); }
.cifra-cab small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--t-suave); }
.mb-s { margin-bottom: 14px; }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--relleno-2); color: var(--t-cuerpo); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta-vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 34px 20px; color: var(--t-suave); }
.tarjeta-vacia > .ico-l { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--relleno-2); color: var(--t-suave); }
.tarjeta-vacia p { margin: 0; max-width: 46ch; }
section.tarjeta.tarjeta-vacia { padding: 40px 24px; }
.rejilla { display: grid; gap: 20px; align-items: start; }
.rejilla-principal { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pila { display: grid; gap: 20px; align-content: start; min-width: 0; }

/* ---------- Cabecera de página ---------- */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 24px; }
.titulos { min-width: 0; flex: 1 1 380px; }
.antetitulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-suave); margin-bottom: 8px; }
.antetitulo a { color: var(--acento-texto); text-transform: none; letter-spacing: 0; font-weight: 600; }
.cabecera h1 { margin-bottom: 6px; overflow-wrap: anywhere; }
.cabecera p { color: var(--t-suave); max-width: 70ch; margin: 0; font-size: 14px; line-height: 1.55; }
.cabecera p a { font-weight: 550; }
.cabecera > .acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ficha-cabeza { display: flex; align-items: center; gap: 16px; }
.ficha-cabeza > div { min-width: 0; }
.ficha-cabeza .antetitulo { margin-bottom: 4px; }
.enlaces { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.enlaces a { display: inline-flex; align-items: center; gap: 6px; color: var(--t-suave); font-weight: 500; }
.enlaces a:hover { color: var(--acento-texto); }

/* ---------- Cifras (KPIs de las fichas) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra); color: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s; }
a.kpi:hover { text-decoration: none; border-color: var(--acento-linea); box-shadow: var(--sombra-media); }
.kpi .etiqueta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--t-suave); }
.kpi .etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--linea-fuerte); flex: none; }
.kpi-violeta .etiqueta::before { background: var(--acento); }
.kpi-verde .etiqueta::before { background: var(--ok-punto); }
.kpi-ambar .etiqueta::before { background: var(--aviso-punto); }
.kpi-rojo .etiqueta::before { background: var(--malo-punto); }
.kpi .valor { font-size: 25px; line-height: 1.25; font-weight: 640; letter-spacing: -.022em; color: var(--t-titulo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .valor small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--t-suave); margin-left: 2px; }
.kpi-rojo .valor { color: var(--malo); }
.kpi .nota { font-size: 12.5px; color: var(--t-suave); line-height: 1.4; }

/* ---------- Tablas ---------- */
.tabla-envoltorio { overflow-x: auto; margin: 0 -20px -4px; scrollbar-width: thin; }
.tarjeta > .tabla-envoltorio:last-child { margin-bottom: -4px; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabla th { height: 38px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 550; color: var(--t-suave); white-space: nowrap; background: var(--tarjeta); border-bottom: 1px solid var(--linea); }
.tabla td { padding: 12px; vertical-align: middle; border-bottom: 1px solid var(--linea); }
.tabla th:first-child, .tabla td:first-child { padding-left: 20px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 20px; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--relleno); }
.tabla th.derecha, .tabla td.derecha { text-align: right; }
.tabla .sub { display: block; font-size: 12px; font-weight: 400; color: var(--t-suave); margin-top: 1px; }
.tabla .fila-titulo { color: var(--t-titulo); font-weight: 580; }
a.fila-titulo:hover { color: var(--acento-texto); }
.tabla td.acciones-fila { text-align: right; white-space: nowrap; }
.tabla td.acciones-fila > * { vertical-align: middle; }
.tabla td.acciones-fila form { display: inline-block; }
.tabla tfoot td { font-weight: 620; color: var(--t-titulo); background: var(--relleno); border-top: 1px solid var(--linea-fuerte); border-bottom: 0; }
.fila-vencido td:first-child { box-shadow: inset 3px 0 0 var(--malo-punto); }
.fila-apagada td { opacity: .55; }
.fila-actual td { background: var(--acento-suave); }
.margen-pos { color: var(--ok); }
.margen-neg { color: var(--malo); }
.tabla tfoot td.margen-pos { color: var(--ok); }
.tabla tfoot td.margen-neg { color: var(--malo); }
.etiqueta-app { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--t-titulo); font-weight: 520; }
a.etiqueta-app:hover { text-decoration: none; color: var(--acento-texto); }
.etiqueta-app > div { min-width: 0; }
.tabla .chip + .chip { margin-left: 4px; }
.tabla .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 11.5px; }
.tabla .avatar-persona { border-radius: 50%; }
.chip-app { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px 0 8px; margin: 1px 2px 1px 0; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-cuerpo); font-size: 12px; font-weight: 550; white-space: nowrap; vertical-align: middle; }
.chip-app > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--acento)); }
a.chip-app:hover { text-decoration: none; border-color: var(--c, var(--acento)); color: var(--t-titulo); }
@media (min-width: 1280px) {
  .tabla-pegajosa { overflow: visible; }
  .tabla-pegajosa .tabla thead th { position: sticky; top: 0; z-index: 3; }
}

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); min-width: 0; }
.lista > li:first-child { border-top: 0; padding-top: 2px; }
.lista > li:last-child { padding-bottom: 2px; }
.lista > li.texto-suave { display: block; }
.lista .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lista .cuerpo > b, .lista .titulo { color: var(--t-titulo); font-weight: 580; font-size: 13.5px; overflow-wrap: anywhere; }
a.titulo:hover { color: var(--acento-texto); }
.lista .cuerpo > span, .lista .cuerpo > p { font-size: 12.5px; color: var(--t-suave); margin: 0; }
.lista .lado { min-width: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.lista .lado.num { color: var(--t-titulo); font-weight: 580; }
.lista .lado .sub { font-size: 12px; color: var(--t-suave); }
.lista .progreso { margin-top: 7px; }
.datos-lista { display: grid; grid-template-columns: minmax(92px, max-content) minmax(0, 1fr); gap: 11px 20px; margin: 0; }
.datos-lista dt { color: var(--t-suave); font-size: 13px; }
.datos-lista dd { margin: 0; color: var(--t-titulo); font-size: 13.5px; overflow-wrap: anywhere; }
.totales-barra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; padding: 11px 18px; margin-bottom: 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l); font-size: 13px; color: var(--t-suave); box-shadow: var(--sombra); }
.totales-barra b { color: var(--t-titulo); font-weight: 620; font-variant-numeric: tabular-nums; margin-left: 4px; }
.tarjeta > .totales-barra { box-shadow: none; background: var(--relleno); border-color: transparent; margin-bottom: 14px; }

/* ---------- Progreso ---------- */
.progreso { height: 6px; border-radius: 999px; background: var(--relleno-2); overflow: hidden; }
.progreso > span { display: block; height: 100%; border-radius: 999px; background: var(--acento); transition: width .18s ease-out; }
.progreso-medio > span { background: var(--aviso-punto); }
.progreso-alto > span { background: var(--malo-punto); }

/* ---------- Pestañas y filtros ---------- */
.pestanas { display: flex; gap: 2px; padding: 3px; margin-bottom: 14px; width: fit-content; max-width: 100%; background: var(--relleno-2); border-radius: 11px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 8px; color: var(--t-suave); font-size: 13px; font-weight: 550; white-space: nowrap; }
.pestanas a:hover { color: var(--t-titulo); text-decoration: none; }
.pestanas a.activa { background: var(--tarjeta); color: var(--t-titulo); box-shadow: var(--sombra-media), 0 0 0 1px var(--linea); }
.pestanas .insignia { margin-left: 0; height: 18px; min-width: 18px; font-size: 10.5px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros select, .filtros input { width: auto; min-width: 150px; height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.filtros input[type=search] { flex: 1 1 240px; max-width: 380px; }
.chips-rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chips-rapidos button { font: 550 12px var(--f-sans); height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-suave); cursor: pointer; transition: border-color .12s, color .12s; }
.chips-rapidos button:hover { border-color: var(--acento); color: var(--acento-texto); }

/* ---------- Formularios ---------- */
.formulario { max-width: 900px; }
.formulario fieldset { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.formulario legend { padding: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-suave); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo label { font-size: 13px; font-weight: 600; color: var(--t-titulo); }
.campo label::first-letter { text-transform: uppercase; }
.campo .ayuda { font-size: 12.5px; color: var(--t-suave); line-height: 1.45; }
.campo .ayuda ul { margin: 4px 0 0; padding-left: 18px; }
.campo .error { font-size: 12.5px; font-weight: 550; color: var(--malo); }
.campo:has(.error) input:not([type=checkbox]), .campo:has(.error) select, .campo:has(.error) textarea { border-color: var(--malo-punto); }
.campo-casilla { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 26px; }
.campo-casilla label { font-weight: 550; }
.campo-casilla .ayuda, .campo-casilla .error { flex-basis: 100%; padding-left: 28px; margin-top: -2px; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], input[type=datetime-local],
input[type=password], input[type=search], input[type=tel], select, textarea {
  width: 100%; height: 40px; padding: 0 12px; font: 400 14px var(--f-sans); color: var(--t-titulo);
  background: var(--tarjeta); border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
textarea { height: auto; min-height: 96px; max-height: 360px; padding: 10px 12px; resize: vertical; line-height: 1.5; field-sizing: content; }
select { padding-right: 34px; background-image: var(--flecha-select); background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--t-tenue); }
input:hover, select:hover, textarea:hover { border-color: var(--t-tenue); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--acento); flex: none; margin: 0; cursor: pointer; }
input[type=color] { width: 56px; height: 40px; padding: 3px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m); background: var(--tarjeta); cursor: pointer; }
input[type=file] { font: 400 13px var(--f-sans); color: var(--t-cuerpo); width: 100%; }
input[type=file]::file-selector-button { font: 550 12.5px var(--f-sans); height: 30px; padding: 0 12px; margin-right: 12px; border-radius: var(--r-s); border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-titulo); cursor: pointer; }
.errores-form { background: var(--malo-fondo); border: 1px solid var(--malo-linea); color: var(--malo); border-radius: var(--r-m); padding: 10px 14px; margin-bottom: 16px; font-weight: 550; font-size: 13.5px; }
.botonera { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
.botonera .derecha { margin-left: auto; }
.form-linea { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.form-linea .campo { flex: 1 1 170px; }
.form-linea .campo-estrecho { flex: 0 1 150px; }
.form-linea > .boton { margin-top: 25px; }
.form-linea .chips-rapidos { margin-top: 2px; }

/* ---------- Avisos, llamadas y vacíos ---------- */
.callout { display: flex; gap: 12px; align-items: flex-start; background: var(--acento-suave); border: 1px solid var(--acento-linea); border-radius: var(--r-m); padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--t-cuerpo); }
.callout > .ico { color: var(--acento-texto); margin-top: 1px; }
.callout code { background: var(--tarjeta); }
.callout b { color: var(--t-titulo); }
.callout ul { margin: 6px 0 0; padding-left: 18px; }
.callout li + li { margin-top: 3px; }
.callout-ambar { background: var(--aviso-fondo); border-color: var(--aviso-linea); }
.callout-ambar > .ico { color: var(--aviso); }
.callout-ok { background: var(--ok-fondo); border-color: var(--ok-linea); }
.callout-ok > .ico { color: var(--ok); }
.callout-acciones { flex-wrap: wrap; align-items: center; }
.callout-acciones > .boton { margin-left: auto; }
.texto-callout { flex: 1 1 240px; min-width: 0; }
.texto-callout b, .texto-callout span { display: block; }
.texto-callout span { font-size: 12.5px; color: var(--t-suave); margin-top: 1px; }
.recordatorio { background: var(--relleno); border: 1px dashed var(--acento-linea); border-radius: var(--r-m); padding: 12px 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--t-cuerpo); max-height: 280px; overflow: auto; }
.recordatorio-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Línea de tiempo ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo > li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; min-width: 0; }
.linea-tiempo > li:last-child { padding-bottom: 0; }
.linea-tiempo > li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 1px; background: var(--linea); }
.linea-tiempo > li:last-child::before { display: none; }
.linea-tiempo > li.texto-suave { display: block; }
.linea-tiempo > li.texto-suave::before { display: none; }
.hito { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--tarjeta); border: 1px solid var(--linea-fuerte); color: var(--t-suave); }
.hito .ico { width: 15px; height: 15px; }
.t-incidencia .hito { color: var(--malo); border-color: var(--malo-linea); background: var(--malo-fondo); }
.t-cobro .hito { color: var(--ok); border-color: var(--ok-linea); background: var(--ok-fondo); }
.t-despliegue .hito { color: var(--cian); border-color: color-mix(in srgb, var(--cian-punto) 40%, transparent); background: var(--cian-fondo); }
.t-hito .hito, .t-contrato .hito { color: var(--acento-texto); border-color: var(--acento-linea); background: var(--acento-suave); }
.linea-tiempo .cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 3px; }
.linea-tiempo .cuerpo b { color: var(--t-titulo); font-weight: 580; font-size: 13.5px; }
.linea-tiempo .cuerpo span { font-size: 12.5px; color: var(--t-suave); }
.linea-tiempo .cuerpo p { margin: 4px 0 0; font-size: 13px; color: var(--t-cuerpo); }

/* ---------- Desplegables ---------- */
.desplegable { position: relative; }
.desplegable-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 6px; display: none; z-index: 60; background: var(--tarjeta); border: 1px solid var(--linea-fuerte); border-radius: var(--r-l); box-shadow: var(--sombra-pop); }
.desplegable.abierto > .desplegable-menu { display: block; animation: aparece .14s ease-out; }
.desplegable-menu a, .desplegable-menu > form > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--t-titulo); font: 500 13.5px var(--f-sans); text-align: left; cursor: pointer; text-decoration: none; }
.desplegable-menu a:hover, .desplegable-menu > form > button:hover { background: var(--relleno-2); text-decoration: none; }
.desplegable-menu .ico { color: var(--t-suave); }
.desplegable-menu a:hover .ico { color: var(--acento-texto); }
.desplegable-menu hr { margin: 6px -6px; }
.menu-tema { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13px; color: var(--t-suave); }
.segmentos { display: inline-flex; padding: 2px; gap: 2px; background: var(--relleno-2); border-radius: 9px; }
.segmentos button { display: inline-grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--t-suave); cursor: pointer; }
.segmentos button .ico-s { width: 15px; height: 15px; }
.segmentos button:hover { color: var(--t-titulo); }
.segmentos button[aria-pressed="true"] { background: var(--tarjeta); color: var(--acento-texto); box-shadow: var(--sombra-media), 0 0 0 1px var(--linea); }
.desplegable-arriba .desplegable-menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; width: 100%; min-width: 220px; }
.tema-icono > svg { display: none; }
html[data-tema="auto"] .tema-icono > .t-auto, html:not([data-tema]) .tema-icono > .t-auto,
html[data-tema="claro"] .tema-icono > .t-claro, html[data-tema="oscuro"] .tema-icono > .t-oscuro { display: block; }

/* ---------- Avisos emergentes ---------- */
.avisos { position: fixed; right: 24px; bottom: 24px; z-index: 120; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.aviso { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-l); font-size: 13.5px; line-height: 1.45; background: var(--ink-900); color: var(--sobre-tinta); border: 1px solid rgba(140, 165, 255, .25); box-shadow: 0 18px 40px -10px rgba(1, 10, 38, .5); animation: entrar .18s ease-out; }
.aviso > .ico { color: #51d6a5; margin-top: 1px; }
.aviso-error > .ico { color: #ff8f99; }
.aviso-warning > .ico { color: #f0bb6e; }
.aviso > span { flex: 1; min-width: 0; }
.aviso button { margin: 0 -2px 0 auto; padding: 2px; border: 0; background: none; color: var(--sobre-tinta-3); cursor: pointer; border-radius: 6px; }
.aviso button:hover { color: #fff; }
.aviso.saliendo { opacity: 0; transform: translateY(8px); transition: .18s; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Paleta de comandos ---------- */
.paleta { position: fixed; inset: 0; z-index: 140; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(1, 10, 38, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.paleta.abierta { display: flex; }
.paleta-caja { width: min(640px, 100%); background: var(--tarjeta); border: 1px solid var(--linea-fuerte); border-radius: 18px; box-shadow: var(--sombra-pop); overflow: hidden; animation: entrar .18s ease-out; }
.paleta-entrada { display: flex; gap: 12px; align-items: center; padding: 0 18px; height: 56px; border-bottom: 1px solid var(--linea); }
.paleta-entrada > .ico { color: var(--t-suave); }
.paleta-entrada input { border: 0; background: transparent; box-shadow: none !important; height: 100%; padding: 0; font-size: 16px; }
.paleta-lista { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.paleta-lista li a { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--t-cuerpo); }
.paleta-lista li a:hover { text-decoration: none; }
.paleta-lista li.activo a { background: var(--acento-suave); color: var(--t-titulo); }
.paleta-lista .marca-tipo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--relleno-2); color: var(--t-suave); }
.paleta-lista li.activo .marca-tipo { background: var(--tarjeta); color: var(--acento-texto); }
.paleta-lista .marca-tipo .ico-s { width: 16px; height: 16px; }
.paleta-lista b { display: block; font-weight: 580; color: var(--t-titulo); font-size: 14px; }
.paleta-lista small { display: block; font-size: 12.5px; color: var(--t-suave); }
.paleta-lista .tipo { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-tenue); }
.paleta-pie { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--t-suave); background: var(--relleno); }
.paleta-pie kbd { margin-right: 4px; }

/* ============================================================
   INICIO
   ============================================================ */
.inicio-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.inicio-cab h1 { font-size: 27px; }
.inicio-fecha { margin: 4px 0 0; color: var(--t-suave); font-size: 14px; }
.inicio-datos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inicio-datos form { display: contents; }

.briefing { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.brief { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 6px 13px 6px 11px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-titulo); font-size: 13px; font-weight: 520; line-height: 1.25; box-shadow: var(--sombra); transition: border-color .15s, transform .1s; }
.brief:hover { text-decoration: none; border-color: var(--t-tenue); }
.brief::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cian-punto); }
.brief-ok::before { background: var(--ok-punto); }
.brief-aviso::before { background: var(--aviso-punto); }
.brief-critico { background: var(--malo-fondo); border-color: var(--malo-linea); color: var(--malo); font-weight: 600; }
.brief-critico::before { background: var(--malo-punto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--malo-punto) 25%, transparent); }

.kpis-inicio { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px 15px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra); color: inherit; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kpi-tile:hover { text-decoration: none; border-color: var(--acento-linea); box-shadow: var(--sombra-media); }
.kpi-tile-etiqueta { font-size: 12.5px; font-weight: 500; color: var(--t-suave); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-tile-etiqueta .ico-s { color: var(--t-tenue); opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s; }
.kpi-tile:hover .kpi-tile-etiqueta .ico-s { opacity: 1; transform: none; color: var(--acento-texto); }
.kpi-tile-valor { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; font-weight: 640; letter-spacing: -.026em; color: var(--t-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px; }
.kpi-tile-valor small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--t-suave); margin-left: 3px; }
.kpi-malo .kpi-tile-valor { color: var(--malo); }
.kpi-delta { align-self: flex-start; display: inline-flex; align-items: flex-start; gap: 4px; min-height: 22px; padding: 3px 9px 3px 6px; border-radius: 12px; font-size: 11.5px; font-weight: 600; line-height: 16px; background: var(--relleno); box-shadow: inset 0 0 0 1px var(--linea); color: var(--t-suave); max-width: 100%; }
.kpi-delta .ico-s { width: 12px; height: 12px; stroke-width: 2.6; margin-top: 2px; }
.kpi-delta-bueno { background: var(--ok-fondo); box-shadow: none; color: var(--ok); }
.kpi-delta-malo { background: var(--malo-fondo); box-shadow: none; color: var(--malo); }
.mini-linea { display: block; width: 100%; height: 30px; margin: 6px 0 2px; overflow: visible; }
.mini-area { fill: color-mix(in srgb, var(--acento) 12%, transparent); }
.mini-trazo { fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi-malo .mini-trazo { stroke: var(--malo-punto); }
.kpi-malo .mini-area { fill: color-mix(in srgb, var(--malo-punto) 12%, transparent); }
.kpi-tile-nota { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--t-suave); line-height: 1.4; }
.kpi-destacado { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 7%, var(--tarjeta)) 0%, var(--tarjeta) 70%); border-color: var(--acento-linea); }
.kpi-destacado::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--neon); }

.inicio-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.inicio-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.inicio-cols > .tarjeta, .inicio-cols-2 > .tarjeta { height: 100%; }

.acciones-lista { list-style: none; margin: 0; padding: 0; }
.accion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--linea); }
.accion:first-child { border-top: 0; padding-top: 2px; }
.accion:last-child { padding-bottom: 2px; }
.accion-marca { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--cian-fondo); color: var(--cian); }
.accion-critico .accion-marca { background: var(--malo-fondo); color: var(--malo); }
.accion-aviso .accion-marca { background: var(--aviso-fondo); color: var(--aviso); }
.accion-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accion-titulo { font-weight: 600; font-size: 13.5px; color: var(--t-titulo); line-height: 1.35; overflow-wrap: anywhere; }
a.accion-titulo:hover { color: var(--acento-texto); text-decoration: none; }
.accion-detalle { font-size: 12.5px; color: var(--t-suave); line-height: 1.45; overflow-wrap: anywhere; }
.accion-botones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mas-avisos { margin-top: 6px; border-top: 1px solid var(--linea); }
.mas-avisos > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--acento-texto); }
.mas-avisos > summary::-webkit-details-marker { display: none; }
.mas-avisos > summary .ico-s { transition: transform .15s; }
.mas-avisos[open] > summary .ico-s { transform: rotate(180deg); }
.mas-avisos .acciones-lista { padding-top: 8px; }
.vacio-ok { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-m); background: var(--ok-fondo); border: 1px solid var(--ok-linea); color: var(--ok); }
.vacio-ok > .ico-l { width: 34px; height: 34px; }
.vacio-ok b { display: block; color: var(--t-titulo); font-size: 14px; }
.vacio-ok span { font-size: 13px; color: var(--t-cuerpo); }

.apps-lista { list-style: none; margin: 0; padding: 0; }
.app-fila { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid var(--linea); min-width: 0; }
.app-fila:first-child { border-top: 0; padding-top: 2px; }
.app-fila:last-child { padding-bottom: 2px; }
.app-fila-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.app-fila-linea { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.app-nombre { font-weight: 620; font-size: 14px; color: var(--t-titulo); overflow-wrap: anywhere; }
a.app-nombre:hover { color: var(--acento-texto); text-decoration: none; }
.app-estado { font-size: 12px; color: var(--t-suave); white-space: nowrap; }
.app-mrr { margin-left: auto; font-weight: 620; color: var(--t-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-mrr small { font-size: 11.5px; font-weight: 500; color: var(--t-suave); }
.app-fila-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--t-suave); }
.app-fila-meta .chip { height: 20px; font-size: 11px; }
.app-fila .progreso { margin-top: 2px; }

.cobros-prox { list-style: none; margin: 0; padding: 0; }
.cobro-fila { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); min-width: 0; }
.cobro-fila:first-child { border-top: 0; padding-top: 2px; }
.cobro-fila:last-child { padding-bottom: 2px; }
.cobro-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cobro-cuerpo a { font-weight: 580; font-size: 13.5px; color: var(--t-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-cuerpo a:hover { color: var(--acento-texto); text-decoration: none; }
.cobro-cuerpo span { font-size: 12.5px; color: var(--t-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-variant-numeric: tabular-nums; }
.cobro-lado b { font-weight: 620; color: var(--t-titulo); }

.actividad { list-style: none; margin: 0; padding: 0; }
.act-fila { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); min-width: 0; align-items: flex-start; }
.act-fila:first-child { border-top: 0; padding-top: 2px; }
.act-fila:last-child { padding-bottom: 2px; }
.act-cuerpo { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--t-cuerpo); }
.act-cuerpo b { color: var(--t-titulo); font-weight: 620; }
.act-cuerpo a { color: var(--t-cuerpo); }
.act-cuerpo a:hover { color: var(--acento-texto); }
.act-cuando { display: block; margin-top: 1px; font-size: 12px; color: var(--t-suave); }

/* ---------- Gráficos ---------- */
.grafico-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.grafico-flujo { display: block; width: 100%; min-width: 700px; height: auto; }
.eje-linea { stroke: var(--linea); stroke-width: 1; }
.eje-texto { fill: var(--t-suave); font: 500 11px var(--f-sans); font-variant-numeric: tabular-nums; }
.eje-mes { fill: var(--t-suave); font: 500 12px var(--f-sans); text-transform: capitalize; }
.eje-mes-actual { fill: var(--t-titulo); font-weight: 650; }
.eje-hoy { fill: var(--acento-texto); font: 700 9.5px var(--f-sans); text-transform: uppercase; letter-spacing: .1em; }
.banda-actual { fill: var(--acento-suave); opacity: .7; }
.tramo-cobrado { fill: var(--g-cobrado); stroke: var(--tarjeta); stroke-width: 1; }
.tramo-vencido { fill: var(--g-vencido); stroke: var(--tarjeta); stroke-width: 1; }
.tramo-por-cobrar { fill: url(#rayado); }
.rayado-fondo { fill: color-mix(in srgb, var(--g-porcobrar) 14%, transparent); }
.rayado-linea { stroke: var(--g-porcobrar); stroke-width: 1.6; opacity: .55; }
.valor-barra { fill: var(--t-titulo); font: 600 11px var(--f-sans); font-variant-numeric: tabular-nums; }
.linea-gastos { fill: none; stroke: var(--g-gastos); stroke-width: 1.8; stroke-dasharray: 4 4; stroke-linecap: round; }
.punto-gastos { fill: var(--tarjeta); stroke: var(--g-gastos); stroke-width: 2; }
.leyenda-grafico { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--t-suave); }
.leyenda-grafico span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-grafico i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.leyenda-grafico .l-cobrado { background: var(--g-cobrado); }
.leyenda-grafico .l-vencido { background: var(--g-vencido); }
.leyenda-grafico .l-por-cobrar { background: repeating-linear-gradient(45deg, var(--g-porcobrar) 0 1.5px, color-mix(in srgb, var(--g-porcobrar) 14%, transparent) 1.5px 4px); border: 1px solid var(--g-porcobrar); }
.leyenda-grafico .l-gastos { width: 14px; height: 0; border-top: 2px dashed var(--g-gastos); border-radius: 0; }

.donut { width: 150px; height: 150px; flex: none; }
.donut-total { font: 650 15px var(--f-sans); fill: var(--t-titulo); }
.donut-sub { font-size: 9.5px; fill: var(--t-suave); text-transform: uppercase; letter-spacing: .1em; }
.donut-vacio { stroke: var(--linea); }
.reparto { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.reparto ul { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; display: grid; gap: 8px; }
.reparto li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.reparto li .num { margin-left: auto; }

.sparkline { width: 100%; height: 64px; display: block; overflow: visible; }
.spark-area { fill: color-mix(in srgb, var(--acento) 12%, transparent); }
.spark-linea { fill: none; stroke: var(--acento); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-punto { fill: var(--acento); stroke: var(--tarjeta); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark-limite { stroke: var(--aviso-punto); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.spark-limite-txt { fill: var(--aviso); font: 500 10px var(--f-sans); }
.spark-vacio { color: var(--t-suave); font-size: 13px; padding: 14px 0; }
.anillo-uso { width: 116px; height: 116px; flex: none; }
.anillo-fondo { fill: none; stroke: var(--relleno-2); stroke-width: 10; }
.anillo-valor { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .18s ease-out; }
.anillo-ok .anillo-valor { stroke: var(--acento); }
.anillo-medio .anillo-valor { stroke: var(--aviso-punto); }
.anillo-alto .anillo-valor { stroke: var(--malo-punto); }
.anillo-num { font: 650 24px var(--f-sans); fill: var(--t-titulo); }
.anillo-de { font-size: 11px; fill: var(--t-suave); }
.anillo-sin { display: grid; place-items: center; align-content: center; text-align: center; width: 116px; height: 116px; border-radius: 50%; border: 10px solid var(--relleno-2); flex: none; }
.anillo-sin b { font-size: 24px; color: var(--t-titulo); line-height: 1; }
.anillo-sin span, .anillo-sin small { font-size: 10.5px; color: var(--t-suave); line-height: 1.15; }
.uso { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.uso .detalle { flex: 1 1 220px; min-width: 0; }
.uso-cifra { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.uso-cifra .num { font-size: 24px; font-weight: 640; letter-spacing: -.02em; color: var(--t-titulo); }
.grafico-uso svg { display: block; width: 100%; overflow: visible; }
.uso-barra { fill: var(--acento); }
.uso-barra:hover { fill: var(--acento-hondo); }
.uso-hoy { fill: var(--acento-hondo); }
.uso-cero { fill: var(--linea-fuerte); }
.grafico-uso-eje { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--t-suave); }

/* ---------- Fichas de contrato ---------- */
.condiciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.condicion { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 15px 16px; background: var(--relleno); }
.condicion .etiqueta { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-suave); }
.condicion .valor { font-size: 24px; font-weight: 640; letter-spacing: -.02em; color: var(--t-titulo); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.condicion .tachado { text-decoration: line-through; color: var(--t-suave); font-size: 14px; font-weight: 500; margin-right: 8px; }
.condicion p { font-size: 12.5px; color: var(--t-suave); margin: 0; line-height: 1.5; }
.descuento { display: inline-block; background: var(--acento-suave); color: var(--acento-texto); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.meses form { display: block; }
.mes { width: 100%; display: grid; gap: 2px; text-align: left; padding: 10px 11px; border-radius: var(--r-m); border: 1px solid var(--linea-fuerte); background: var(--tarjeta); color: var(--t-cuerpo); font: inherit; cursor: pointer; position: relative; transition: border-color .12s, background .12s; }
.mes b { font-size: 13px; font-weight: 620; color: var(--t-titulo); text-transform: capitalize; }
.mes span { font-size: 11.5px; color: var(--t-suave); display: flex; align-items: center; gap: 4px; }
.mes .num { font-size: 12.5px; font-weight: 600; color: var(--t-titulo); }
.mes:hover:not([disabled]) { border-color: var(--acento); }
.mes[disabled] { cursor: default; }
.mes-pausa { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--relleno-2) 6px 12px); border-style: dashed; }
.mes-pausa b { color: var(--t-suave); }
.mes-pagado { border-color: var(--ok-linea); background: var(--ok-fondo); }
.mes-vencido { border-color: var(--malo-linea); background: var(--malo-fondo); }
.mes-pendiente, .mes-parcial { border-color: var(--aviso-linea); background: var(--aviso-fondo); }
.mes-previsto { border-style: dashed; }
.mes-fuera { opacity: .45; }
.mes.mes-actual { box-shadow: 0 0 0 2px var(--acento); }

/* ---------- Aplicaciones y contratos (tarjetas) ---------- */
.apps-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.app-tarjeta { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; transition: border-color .15s, box-shadow .15s; }
.app-tarjeta:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-media); }
.app-tarjeta .cabeza { display: flex; align-items: center; gap: 12px; }
.app-tarjeta .cabeza > div { min-width: 0; flex: 1; }
.app-tarjeta .cabeza h2 { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tarjeta .cabeza h2 a { color: var(--t-titulo); }
.app-tarjeta .cabeza h2 a:hover { color: var(--acento-texto); text-decoration: none; }
.app-tarjeta .cabeza .sub { font-size: 12.5px; color: var(--t-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tarjeta .datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-tarjeta .datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--relleno); }
.app-tarjeta .datos > div > span:first-child { font-size: 11.5px; color: var(--t-suave); font-weight: 500; }
.app-tarjeta .datos b { font-size: 16px; font-weight: 640; letter-spacing: -.015em; color: var(--t-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-tarjeta .datos b small { font-size: 12px; font-weight: 500; letter-spacing: 0; }
.app-tarjeta .pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--t-suave); }
.app-tarjeta .pie a { display: inline-flex; align-items: center; gap: 5px; color: var(--t-suave); font-weight: 500; }
.app-tarjeta .pie a:hover { color: var(--acento-texto); }
.app-tarjeta .pie .pie-der { margin-left: auto; }
.app-tarjeta .progreso { margin-top: -6px; }
.app-meta { display: grid; gap: 7px; font-size: 12.5px; }
.app-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--t-suave); }
.app-meta > div > :last-child { color: var(--t-titulo); font-weight: 520; text-align: right; font-variant-numeric: tabular-nums; }
.tarjeta-nueva { display: grid; place-items: center; text-align: center; min-height: 160px; border-style: dashed; border-color: var(--linea-fuerte); background: transparent; box-shadow: none; color: var(--t-suave); transition: border-color .15s, color .15s, background .15s; }
.tarjeta-nueva:hover { text-decoration: none; border-color: var(--acento); color: var(--acento-texto); background: var(--acento-suave); }
.tarjeta-nueva b { display: block; margin: 6px 0 2px; font-weight: 600; }
.tarjeta-nueva small { display: block; font-size: 12.5px; opacity: .8; }
.ocupa-fila { grid-column: 1 / -1; }

/* ---------- Historial ---------- */
.historial { list-style: none; margin: 0; padding: 0; }
.historial-dia { padding: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-suave); border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.historial-dia:first-child { padding-top: 0; }
.historial-fila { display: flex; align-items: center; gap: 13px; padding: 11px 0; min-width: 0; }
.historial-icono { width: 30px; height: 30px; border-radius: 9px; background: var(--relleno-2); color: var(--t-suave); display: grid; place-items: center; flex: none; }
.historial-icono .ico { width: 16px; height: 16px; }
.historial-cuerpo { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--t-cuerpo); overflow-wrap: anywhere; }
.historial-cuerpo b { color: var(--t-titulo); font-weight: 620; }
.historial-cuerpo a { color: var(--t-cuerpo); }
.historial-cuerpo a:hover { color: var(--acento-texto); }
.historial-lado { display: flex; align-items: center; gap: 10px; flex: none; font-size: 12.5px; color: var(--t-suave); font-variant-numeric: tabular-nums; }
.filtros-historial { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 16px; }
.filtro-grupo { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.filtro-grupo .pestanas { margin-bottom: 0; }
.filtro-nombre { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-suave); }
.historial-tipo { display: grid; color: var(--t-tenue); }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--t-suave); }
.paginacion .botones { display: flex; gap: 8px; }

/* ---------- Equipo (Ajustes) ---------- */
.equipo-fila { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--linea); min-width: 0; }
.equipo-fila:first-child { border-top: 0; padding-top: 2px; }
.equipo-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.equipo-cuerpo b { color: var(--t-titulo); font-weight: 600; }
.equipo-cuerpo span { font-size: 12.5px; color: var(--t-suave); }
.equipo-lado { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.equipo-alta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
.equipo-alta .form-linea .campo-estrecho { flex: 0 1 220px; }
.equipo-alta h3 { font-size: 13px; font-weight: 620; margin-bottom: 10px; }
.enlace-generado { margin-bottom: 16px; padding: 14px; border-radius: var(--r-m); background: var(--acento-suave); border: 1px solid var(--acento-linea); }
.enlace-generado > b { display: flex; align-items: center; gap: 8px; color: var(--t-titulo); font-size: 13.5px; margin-bottom: 10px; }
.enlace-campo { display: flex; gap: 8px; }
.enlace-campo input { font-family: var(--f-mono); font-size: 12.5px; }
.enlace-generado p { margin: 10px 0 0; font-size: 12.5px; color: var(--t-cuerpo); }

/* ============================================================
   PANTALLAS PÚBLICAS · entrar, activar, errores
   ============================================================ */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: var(--lienzo); }
.entrada-marca { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px clamp(32px, 5vw, 72px); background: var(--ink-950); color: var(--sobre-tinta); }
.entrada-marca::before { content: ""; position: absolute; inset: -20%; z-index: -1; background:
  radial-gradient(42% 38% at 22% 28%, rgba(141, 113, 252, .42), transparent 70%),
  radial-gradient(34% 32% at 82% 18%, rgba(1, 253, 255, .17), transparent 70%),
  radial-gradient(40% 36% at 70% 86%, rgba(237, 90, 251, .22), transparent 70%); }
.entrada-marca::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(140, 165, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 165, 255, .06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent); }
.entrada-logo { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.entrada-logo .isotipo { width: 40px; height: auto; filter: drop-shadow(0 0 14px rgba(141, 113, 252, .55)); }
.entrada-logo small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-tinta-3); }
.entrada-mensaje h2 { color: #fff; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -.032em; font-weight: 650; max-width: 17ch; margin-bottom: 16px; }
.entrada-mensaje p { color: var(--sobre-tinta-2); font-size: 15.5px; max-width: 42ch; margin: 0; line-height: 1.6; }
.entrada-pie { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--sobre-tinta-3); }
.entrada-pie span { display: inline-flex; align-items: center; gap: 7px; }
.entrada-pie i { width: 6px; height: 6px; border-radius: 50%; background: #51d6a5; }
.entrada-form { display: grid; place-items: center; padding: 40px 24px; }
.entrada-caja { width: min(390px, 100%); }
.entrada-caja h1 { font-size: 26px; margin-bottom: 8px; }
.entrada-caja > p { color: var(--t-suave); margin-bottom: 24px; }
.entrada-caja form { display: grid; gap: 16px; }
.entrada-caja .boton { height: 44px; font-size: 14.5px; }
.entrada-caja .pie-nota { margin: 22px 0 0; font-size: 12.5px; color: var(--t-suave); text-align: center; }
.entrada-caja .campo-bloque { display: grid; gap: 6px; }
.entrada-caja .campo-bloque label { font-size: 13px; font-weight: 600; color: var(--t-titulo); }
.entrada-caja .ayuda { font-size: 12.5px; color: var(--t-suave); line-height: 1.5; }
.entrada-caja .ayuda ul { margin: 6px 0 0; padding-left: 18px; }
.entrada-caja .errores-form { margin: 0; }
.entrada-caja .error { font-size: 12.5px; font-weight: 550; color: var(--malo); }
.entrada-icono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--acento-suave); color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-linea); }
.entrada-icono .ico { width: 24px; height: 24px; }
.entrada-icono-malo { background: var(--malo-fondo); color: var(--malo); box-shadow: inset 0 0 0 1px var(--malo-linea); }

/* ---------- Adaptación ---------- */
@media (max-width: 1279.98px) {
  .kpis-inicio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis-inicio .kpi-tile { grid-column: span 2; }
  .kpis-inicio .kpi-tile:nth-child(n+4) { grid-column: span 3; }
  .rejilla-principal { grid-template-columns: minmax(0, 1fr); }
  .inicio-cols, .inicio-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .inicio-cols > .tarjeta, .inicio-cols-2 > .tarjeta { height: auto; }
}
@media (max-width: 1023.98px) {
  :root { --gutter: 24px; }
  html.lateral-corto .marco, .marco { display: block; height: auto; }
  body { background: var(--lienzo); padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .lateral { display: none; }
  .principal { margin: 0; border: 0; border-radius: 0; background: var(--lienzo); box-shadow: none; overflow: visible; min-height: 100vh; }
  .barra { position: sticky; top: 0; z-index: 40; height: 54px; padding: 0 16px; gap: 10px; background: var(--lienzo); background: color-mix(in srgb, var(--lienzo) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
  .barra-marca { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink-950); flex: none; box-shadow: 0 0 0 1px rgba(140, 165, 255, .22); }
  .barra-marca .isotipo { width: 21px; height: auto; display: block; }
  .migas { flex: 1; font-size: 15px; font-weight: 600; }
  .migas a, .migas > span { display: none; }
  .migas b { font-size: 15px; }
  .barra-acciones .pastilla-datos, .barra-acciones [data-tema-alternar] { display: none; }
  .barra-acciones .boton-texto { display: none; }
  .barra-acciones .desplegable > .boton { width: 36px; padding: 0; }
  .contenido { overflow: visible; padding: 22px var(--gutter) 40px; }
  .avisos { right: 16px; left: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .campo-casilla { padding-top: 0; }
  .condiciones { grid-template-columns: minmax(0, 1fr); }
  .rejilla-2, .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .entrada-marca { padding: 26px 24px 28px; gap: 22px; }
  .entrada-pie { display: none; }
  .entrada-mensaje h2 { font-size: 24px; margin-bottom: 8px; }
  .entrada-mensaje p { font-size: 14px; }
  .entrada-form { place-items: start center; padding: 32px 24px 40px; }

  /* Controles táctiles */
  .boton { height: 44px; }
  .boton-s { height: 36px; }
  .boton-icono { width: 44px; }
  .boton-s.boton-icono { width: 36px; }
  .barra-acciones .boton-icono, .barra-acciones .desplegable > .boton { height: 38px; width: 38px; }
  input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], input[type=datetime-local],
  input[type=password], input[type=search], input[type=tel], select { height: 48px; font-size: 16px; }
  textarea { font-size: 16px; }
  .filtros select, .filtros input { height: 44px; font-size: 16px; }
  .form-linea > .boton { margin-top: 0; flex: 1 1 100%; }
  .filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros select, .filtros input, .filtros input[type=search] { width: 100%; min-width: 0; }
  .filtros input[type=search] { grid-column: 1 / -1; }
}
@media (max-width: 559.98px) {
  .filtros { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  :root { --gutter: 16px; }
  h1 { font-size: 23px; }
  .cabecera { margin-bottom: 18px; }
  .cabecera > .acciones { width: 100%; }
  .cabecera > .acciones .boton { flex: 1 1 auto; }
  .tarjeta { padding: 16px; border-radius: 13px; }
  .tabla-envoltorio { margin-left: -16px; margin-right: -16px; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 16px; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 16px; }
  .separador, .tarjeta .separador { margin-left: -16px; margin-right: -16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi .valor { font-size: 20px; }
  .kpis-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis-inicio .kpi-tile, .kpis-inicio .kpi-tile:nth-child(n+4) { grid-column: span 1; }
  .kpis-inicio .kpi-tile:first-child { grid-column: 1 / -1; }
  .kpi-tile { padding: 14px 15px 13px; }
  .kpi-tile-valor { font-size: 24px; }
  .inicio-cab h1 { font-size: 24px; }
  .inicio-datos { width: 100%; }
  .accion { grid-template-columns: auto minmax(0, 1fr); }
  .accion-botones { grid-column: 2; justify-content: flex-start; }
  .apps-rejilla { grid-template-columns: minmax(0, 1fr); }
  .app-tarjeta { padding: 16px; }
  .meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-lista { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .datos-lista dd { margin-bottom: 10px; }
  .historial-fila { align-items: flex-start; }
  .filtro-grupo { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .historial-lado { flex-direction: column; align-items: flex-end; gap: 4px; }
  .equipo-fila { flex-wrap: wrap; }
  .equipo-lado { width: 100%; justify-content: flex-start; padding-left: 49px; }
  .enlace-campo { flex-direction: column; }
  .botonera .boton { flex: 1 1 auto; }
  .cobro-fila { align-items: flex-start; }
  .cobro-cuerpo a, .cobro-cuerpo span { white-space: normal; }
  .tarjeta > header .leyenda-grafico { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }

  /* Tablas apiladas en filas */
  .tarjeta > .tabla-envoltorio:first-child { margin-top: -12px; }
  .tabla-movil thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-movil, .tabla-movil tbody, .tabla-movil tfoot, .tabla-movil tr, .tabla-movil td { display: block; width: 100%; }
  .tabla-movil tr { padding: 14px 16px; border-top: 1px solid var(--linea); }
  .tabla-movil tbody tr:first-child { border-top: 0; }
  .tabla-movil td, .tabla-movil td:first-child, .tabla-movil td:last-child { padding: 3px 0; border: 0; text-align: left; }
  .tabla-movil tbody tr:hover td { background: transparent; }
  .tabla-movil td.derecha { text-align: left; }
  .tabla-movil td[data-t] { text-align: right; overflow: hidden; }
  .tabla-movil td[data-t]::before { content: attr(data-t); float: left; margin-right: 12px; color: var(--t-suave); font-size: 12.5px; font-weight: 500; }
  .tabla-movil td[data-t] .sub { display: inline; margin-left: 6px; }
  .tabla-movil td.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 8px; }
  .tabla-movil tfoot tr { background: var(--relleno); }
  .tabla-movil tfoot td { background: transparent; border: 0; }
  .fila-vencido td:first-child { box-shadow: none; }
  .tabla-movil tr.fila-vencido { box-shadow: inset 3px 0 0 var(--malo-punto); }
  .grafico-flujo { min-width: 640px; }
  .condicion .valor { font-size: 21px; }
}
@media print {
  .lateral, .barra, .avisos, .botonera, .pestanas-movil, .boton { display: none !important; }
  .marco { display: block; height: auto; }
  .principal { margin: 0; border: 0; overflow: visible; }
  .contenido { overflow: visible; }
  .tarjeta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ---------- Navegación móvil: barra inferior y hoja «Más» ---------- */
.pestanas-movil { display: none; }
.hoja { display: none; }
@media (max-width: 1023.98px) {
  .pestanas-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--tarjeta); border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px -12px rgba(10, 16, 51, .12); }
  .pestanas-movil a, .pestanas-movil button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; border: 0; background: transparent; border-radius: 12px; color: var(--t-suave); font: 550 10.5px var(--f-sans); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pestanas-movil .ico { width: 22px; height: 22px; }
  .pestanas-movil a.activo, .pestanas-movil button[aria-expanded="true"] { color: var(--acento-texto); }
  .pestanas-movil a.activo::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--acento); }
  .pestanas-movil .insignia { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  .hoja.abierta { display: block; position: fixed; inset: 0; z-index: 130; }
  .hoja-fondo { position: absolute; inset: 0; background: rgba(1, 10, 38, .5); animation: fundido .18s ease-out; }
  .hoja-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--tarjeta); border-radius: 22px 22px 0 0; box-shadow: var(--sombra-pop); animation: sube .18s ease-out; }
  .hoja-asa { width: 40px; height: 4px; border-radius: 4px; background: var(--linea-fuerte); margin: 0 auto 14px; }
  .hoja-usuario { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .hoja-usuario .usuario-datos b { font-size: 15px; }
  .hoja-titulo { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-suave); margin: 16px 2px 8px; }
  .hoja-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hoja-nav a { position: relative; display: flex; align-items: center; gap: 11px; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--relleno); color: var(--t-titulo); font-weight: 550; font-size: 14px; }
  .hoja-nav a:hover { text-decoration: none; }
  .hoja-nav a .ico { color: var(--t-suave); }
  .hoja-nav a.activo { background: var(--acento-suave); color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-linea); }
  .hoja-nav a.activo .ico { color: var(--acento-texto); }
  .hoja-acciones { display: grid; gap: 8px; margin-top: 8px; }
  .hoja-acciones .boton { justify-content: flex-start; }
  .hoja-tema { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; font-size: 14px; color: var(--t-cuerpo); font-weight: 550; }
  .hoja-tema .segmentos button { width: 42px; height: 34px; }
}
@keyframes fundido { from { opacity: 0; } }
@keyframes sube { from { transform: translateY(40px); opacity: .6; } }

/* El destino de «#pagar» / «#cobrar» destaca un momento */
.tarjeta:target { animation: destello 1.2s ease-out; }
@keyframes destello { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 45%, transparent); border-color: var(--acento); } 60% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--acento) 0%, transparent); border-color: var(--acento); } 100% { box-shadow: var(--sombra); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}