/* JAIME.AI · jaimeai-ui.css v3 (generado por tools/empaquetar-css.py: no editar a mano, editar tokens/ o web/kit.css) */
/* Inter y JetBrains Mono, locales y variables (un archivo cubre todos los pesos). */
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;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+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:'Inter';font-weight:100 900;font-style:normal;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:'JetBrains Mono';font-weight:100 800;font-style:normal;font-display:swap;src:url('fuentes/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-style:normal;font-display:swap;src:url('fuentes/JetBrainsMono-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}

/* ── Color JAIME.AI · v3 ─────────────────────────────────────────────
   Navy, crema y azul. Decisión de Jaime, 2026-10-02: la marca toma la base
   cromática de WPP (navy y crema como únicos dos fondos, tintas de navy como
   neutros) y conserva el azul eléctrico como acento propio, en lugar del
   naranja de WPP. El negro #0A0A0A y el morado de las versiones 1 y 2 se
   retiraron.
   Los contrastes de abajo están calculados (WCAG), no estimados. */

:root{
  /* Fondos: solo dos por pieza */
  --ja-navy:#000050;          /* fondo oscuro y tinta de todo el texto */
  --ja-cream:#FAFAF0;         /* fondo por defecto de páginas y láminas */
  --ja-white:#FFFFFF;         /* solo tarjetas, nunca fondo de página */
  --ja-cream-dim:#F2F1E4;     /* superficie hundida sobre crema */
  --ja-cream-line:#E4E2D2;    /* filete sobre crema */

  /* Tintas de navy: los neutros de la marca (nunca gris neutro) */
  --ja-navy-90:#1A1A63;       /* hover de superficies navy */
  --ja-navy-70:#4D4D8F;       /* texto secundario: 7,2:1 sobre crema */
  --ja-navy-55:#65659A;       /* texto terciario y etiquetas: 5,2:1 sobre crema */
  --ja-navy-45:#8C8CBA;       /* decorativo, deshabilitado: 3,0:1, no es para leer */
  --ja-navy-20:#CCCCDC;       /* bordes de campos */
  --ja-navy-10:#E6E6EE;       /* fondos tenues */

  /* Azul: un solo acento, tres funciones */
  --ja-blue:#3B82F6;          /* marca: ".AI" sobre navy (5,1:1), foco, gráficas, marcadores */
  --ja-blue-action:#2563EB;   /* acción: botón acento y hover. Blanco encima 5,2:1; sobre crema 4,9:1 */
  --ja-blue-action-dark:#1D4ED8; /* texto azul y enlaces sobre crema: 6,4:1 */
  --ja-blue-light:#60A5FA;    /* texto azul sobre navy: 7,4:1 */
  --ja-blue-soft:#93C5FD;     /* detalles sobre navy: 10,4:1 */
  --ja-blue-08:rgba(37,99,235,.08);
  --ja-blue-14:rgba(37,99,235,.14);
  --ja-blue-20:rgba(37,99,235,.20);

  /* Línea sobre navy */
  --ja-line-on-navy:rgba(250,250,240,.18);
  --ja-cream-70:#B9B9D6;      /* texto secundario sobre navy: 9,8:1 */

  /* Estado: solo para estado, siempre con texto o ícono. Calculados para crema/blanco */
  --ja-success:#0F7A5A;       /* 5,3:1 sobre blanco */
  --ja-warning:#B26A00;       /* 4,2:1 sobre blanco: solo con texto grande o en negrita */
  --ja-danger:#B3241F;        /* 6,6:1 sobre blanco */
  --ja-success-08:rgba(15,122,90,.08);
  --ja-warning-10:rgba(178,106,0,.10);
  --ja-danger-08:rgba(179,36,31,.08);
  /* estado sobre navy */
  --ja-success-on-navy:#34D399;
  --ja-warning-on-navy:#FBBF24;
  --ja-danger-on-navy:#F87171;
}

/* ── Tipografía JAIME.AI · v3 ────────────────────────────────────────
   Inter lo hace todo: Black (900) en titulares con tracking negativo, Regular
   (400) en interfaz y Light (300) en párrafos largos y entradillas.
   JetBrains Mono solo para cifras, datos y números de lámina: si un número
   sostiene un argumento, va en mono. Ese contraste es la firma. */
:root{
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --font-core:var(--font-sans);

  --fw-light:300; --fw-regular:400; --fw-bold:700; --fw-black:900; /* @kind other */

  /* Escala web */
  --fs-micro:11px; --fs-caption:13px; --fs-body-sm:14px; --fs-body:16px; --fs-lead:19px;
  --fs-h4:20px; --fs-h3:26px; --fs-h2:36px; --fs-h1:52px; --fs-display:72px; --fs-stat:64px;
  /* Escala sobre lienzo de 1920×1080 (láminas) */
  --fs-slide-display:112px; --fs-slide-h1:76px; --fs-slide-h2:48px; --fs-slide-body:28px; --fs-slide-label:16px; --fs-slide-stat:140px;

  --lh-display:1.02; --lh-heading:1.12; --lh-body:1.6; --lh-tight:1.3; /* @kind other */
  --ls-display:-.04em; --ls-heading:-.03em; --ls-caps:.14em; --ls-caps-wide:.22em; --ls-logo:-.05em; /* @kind other */
  --measure:62ch; /* @kind other */
}

/* Espaciado base 8px. Márgenes generosos: el aire es parte del diseño. */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --page-margin:clamp(20px,5vw,96px);
  --slide-margin-x:96px; --slide-margin-top:72px; --slide-footer-gap:40px;
  --pad-carousel:72px; --pad-story-x:64px; --pad-story-y:100px; --pad-thumb:60px;
  --card-pad:24px; --sidebar-w:268px;
}

/* Forma. Los contenedores son cuadrados; solo las acciones son píldora.
   Planos: sin sombra salvo capas flotantes (modales, menús). */
:root{
  --radius-none:0px; --radius-sm:2px; --radius-pill:999px; --radius-dot:50%;
  --border-hairline:1px; --border-strong:2px; /* @kind other */
  --shadow-none:none;
  --shadow-raised:0 1px 2px rgba(0,0,80,.08),0 8px 24px rgba(0,0,80,.06);
  --shadow-overlay:0 24px 64px rgba(0,0,80,.22);
  --focus-ring:0 0 0 2px var(--ja-cream),0 0 0 4px var(--ja-blue-action);
  --focus-ring-on-navy:0 0 0 2px var(--ja-navy),0 0 0 4px var(--ja-blue-light);
}

/* Movimiento corto y sin rebote. */
:root{
  --ease-standard:cubic-bezier(.2,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:400ms; --dur-reveal:700ms; /* @kind other */
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Texturas. La retícula de puntos es un fondo silencioso; el polvo (ADN) es la
   textura propia de la marca. Una textura por superficie, nunca dos. */
:root{
  --dot-grid-gap:16px; --dot-grid-size:1.5px; /* @kind spacing */
  --dot-grid-ink:rgba(0,0,80,.13); --dot-grid-ink-cream:rgba(250,250,240,.22);
  --pattern-dot-grid:radial-gradient(var(--dot-grid-ink) var(--dot-grid-size),transparent var(--dot-grid-size)); /* @kind other */
}
.ja-dot-grid{background-color:var(--ja-cream);background-image:var(--pattern-dot-grid);background-size:var(--dot-grid-gap) var(--dot-grid-gap)}
.ja-dot-grid-white{background-color:var(--ja-white);background-image:var(--pattern-dot-grid);background-size:var(--dot-grid-gap) var(--dot-grid-gap)}
.ja-dot-grid-navy{background-color:var(--ja-navy);background-image:radial-gradient(var(--dot-grid-ink-cream) var(--dot-grid-size),transparent var(--dot-grid-size));background-size:var(--dot-grid-gap) var(--dot-grid-gap)}
/* Placas de polvo ADN (assets/graphics): se anclan a una esquina y sangran fuera del lienzo */
.ja-dust{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain}
.ja-dust--on-cream{background-image:url("marca/adn-polvo-sobre-crema.svg")}
.ja-dust--on-navy{background-image:url("marca/adn-polvo-sobre-navy.svg")}

/* Alias semánticos: los componentes usan estos, no los colores crudos. */
:root{
  --surface-page:var(--ja-cream); --surface-card:var(--ja-white); --surface-inverse:var(--ja-navy);
  --surface-muted:var(--ja-cream-dim); --surface-accent:var(--ja-blue-action);
  --text-heading:var(--ja-navy); --text-body:var(--ja-navy); --text-muted:var(--ja-navy-70); --text-subtle:var(--ja-navy-55);
  --text-on-inverse:var(--ja-cream); --text-on-inverse-muted:var(--ja-cream-70); --text-on-accent:var(--ja-white);
  --text-accent:var(--ja-blue-action-dark); --text-accent-on-inverse:var(--ja-blue-light);
  --border-subtle:var(--ja-cream-line); --border-field:var(--ja-navy-20); --border-strong-color:var(--ja-navy);
  --action-primary-bg:var(--ja-navy); --action-primary-fg:var(--ja-cream); --action-primary-bg-hover:var(--ja-navy-90);
  --action-secondary-fg:var(--ja-navy); --action-secondary-border:var(--ja-navy);
  --action-accent-bg:var(--ja-blue-action); --action-accent-fg:var(--ja-white); --action-accent-bg-hover:var(--ja-blue-action-dark);
}

/* Reseteo mínimo y elementos base. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-black);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);color:var(--text-heading);text-wrap:balance}
p{margin:0}
a{color:var(--text-accent);text-underline-offset:3px}
a:hover{color:var(--ja-blue-action)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--ja-blue-20)}
.mono{font-family:var(--font-mono)}
.ja-eyebrow{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-accent)}

/* ==========================================================================
   JAIME.AI · Kit web v3 · componentes en CSS puro
   Para plataformas e interfaces sin React. Hay una versión React equivalente
   en components/. Estructura tomada de WPP (navy y crema, contenedores
   cuadrados, acciones en píldora, plano) con el azul, el logo y el ADN de
   JAIME.AI. Mismas clases, mismos tokens.
   ========================================================================== */

.oculto,[hidden]{display:none!important}
body{font-size:var(--fs-body-sm)}
::selection{background:var(--ja-blue-20)}
.mono{font-family:var(--font-mono)}
.grad{color:var(--text-accent)}
.columna{min-width:0}

/* ------------------------------------------------------------------ logo */
.logo-ja{display:inline-block;font-weight:var(--fw-black);letter-spacing:var(--ls-logo);line-height:1;color:var(--ja-navy);font-size:21px}
.logo-ja i{font-style:normal;color:var(--ja-blue-action)}
.lateral .logo-ja,.sobre-navy .logo-ja{color:var(--ja-cream)}
.lateral .logo-ja i,.sobre-navy .logo-ja i{color:var(--ja-blue)}
img.logo-img{display:block;height:26px;width:auto;align-self:flex-start}

/* nombre del producto: sin logo de JAIME.AI; la última palabra va en azul */
.producto{display:block;font-weight:var(--fw-black);letter-spacing:-.035em;line-height:1.1;font-size:23px;color:var(--ja-cream)}
.producto i{font-style:normal;color:var(--ja-blue-light)}
.barra-movil .producto{font-size:19px}
.entrada h1 i{font-style:normal;color:var(--ja-blue-action-dark)}

/* --------------------------------------------------------------- armazón */
.armazon{position:relative;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100dvh;background:var(--surface-page)}
.lateral{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;padding:22px 14px 14px;background:var(--ja-navy);color:var(--ja-cream);z-index:30}
.lateral .marca{display:flex;flex-direction:column;gap:7px;padding:6px 10px 22px}
.lateral .marca small{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ja-cream-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lateral nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -6px;padding:0 6px 10px;scrollbar-width:thin;scrollbar-color:var(--ja-navy-90) transparent}
.nav-lbl{margin:18px 10px 6px;font-size:10px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--ja-navy-45)}
.nav-lbl:first-child{margin-top:4px}
.nav{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;appearance:none;border:0;background:none;
  color:var(--ja-cream-70);font:var(--fw-regular) 13.5px var(--font-sans);padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.nav .i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nav:hover{background:rgba(250,250,240,.08);color:var(--ja-cream)}
.nav[aria-current="page"]{background:rgba(250,250,240,.12);color:var(--ja-white);font-weight:var(--fw-bold)}
.nav[aria-current="page"]::before{content:"";position:absolute;left:-6px;top:8px;bottom:8px;width:3px;background:var(--ja-blue-light)}
.nav[aria-current="page"] .i{stroke:var(--ja-blue-light)}
.nav .cuenta{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:var(--radius-pill);background:var(--ja-danger);color:#fff;font:700 10.5px var(--font-mono);display:grid;place-items:center}
.nav .pronto{margin-left:auto;font-size:9px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--ja-blue-soft);background:rgba(96,165,250,.16);padding:3px 8px;border-radius:var(--radius-pill)}
.lateral .abajo{flex:none;padding-top:12px;border-top:1px solid var(--ja-line-on-navy);display:flex;flex-direction:column;gap:8px}
.usuario-card{display:flex;align-items:center;gap:11px;width:100%;text-align:left;appearance:none;cursor:pointer;color:inherit;
  background:rgba(250,250,240,.06);border:1px solid var(--ja-line-on-navy);border-radius:var(--radius-sm);padding:10px 12px;
  transition:background var(--dur-base) var(--ease-standard)}
.usuario-card:hover{background:rgba(250,250,240,.1)}
.usuario-card .texto{min-width:0;flex:1}
.usuario-card .u-n{display:block;font-size:13px;font-weight:var(--fw-bold);line-height:1.25;color:var(--ja-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-card .u-r{display:block;font-size:11px;color:var(--ja-cream-70)}
.pie-lateral{display:flex;justify-content:space-between;gap:8px;padding:0 4px;font-size:10.5px;color:var(--ja-cream-70);font-family:var(--font-mono)}
.pie-lateral b{font-family:var(--font-sans);font-weight:var(--fw-black);letter-spacing:var(--ls-logo);color:var(--ja-cream)}
.pie-lateral b i{font-style:normal;color:var(--ja-blue)}
.pie-lateral .copy{font-family:var(--font-sans);font-size:11.5px}
.pie-lateral .copy b{margin-left:2px}

/* avatar por rol (círculo) */
.ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;position:relative}
.ava svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ava.s{width:30px;height:30px}.ava.s svg{width:16px;height:16px}
.ava.g{width:56px;height:56px}.ava.g svg{width:28px;height:28px}
.ava.admin{background:var(--ja-navy);color:var(--ja-cream)}
.ava.equipo{background:var(--ja-blue-14);color:var(--ja-blue-action-dark)}
.ava.relator{background:var(--ja-navy-10);color:var(--ja-navy)}
.ava.consulta{background:var(--ja-cream-dim);color:var(--ja-navy-70);box-shadow:inset 0 0 0 1px var(--ja-cream-line)}
.ava.demo{background:transparent;color:var(--ja-navy-70);box-shadow:inset 0 0 0 1.5px var(--ja-navy-45)}
.lateral .ava.admin{background:var(--ja-blue-action);color:#fff}
.lateral .ava.equipo{background:rgba(96,165,250,.2);color:var(--ja-blue-soft)}
.lateral .ava.relator{background:rgba(250,250,240,.14);color:var(--ja-cream)}
.lateral .ava.consulta{background:rgba(250,250,240,.08);color:var(--ja-cream-70);box-shadow:none}
.lateral .ava.demo{color:var(--ja-cream-70);box-shadow:inset 0 0 0 1.5px var(--ja-navy-45)}

main.contenido{min-width:0;padding:34px clamp(18px,3.2vw,48px) 80px;max-width:1360px;width:100%}
.barra-movil{display:none}

/* ------------------------------------------------------ cabecera de página */
.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:0 0 28px}
.cab .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--text-accent)}
.cab .eyebrow::before{content:"";width:24px;height:2px;background:var(--ja-blue-action)}
.cab h1{margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:var(--fw-black);letter-spacing:var(--ls-heading);line-height:var(--lh-heading)}
.cab p{margin:10px 0 0;max-width:var(--measure);color:var(--text-muted);font-size:var(--fs-body);font-weight:var(--fw-light);line-height:var(--lh-body)}
.cab .acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* -------------------------------------------------------------- tarjetas */
.tarjeta{position:relative;min-width:0;background:var(--surface-card);border:1px solid var(--border-subtle);padding:var(--card-pad)}
.tarjeta.sutil{background:var(--surface-muted)}
.tarjeta h2,.tarjeta h3{margin:0 0 4px;font-size:16px;font-weight:var(--fw-bold);letter-spacing:-.01em}
.tarjeta .sub{margin:0 0 18px;font-size:13px;color:var(--text-muted);font-weight:var(--fw-light);line-height:1.55}
.tarjeta.esquina::before{content:"";position:absolute;top:-1px;left:var(--card-pad);width:32px;height:2px;background:var(--ja-blue-action)}
.rejilla{display:grid;gap:16px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-asim{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media(max-width:1100px){.r3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.r2,.r3,.r-asim{grid-template-columns:1fr}}
.espacio{margin-top:16px!important}

.kpi-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.kpi2{background:var(--surface-card);border:1px solid var(--border-subtle);padding:18px 20px;display:flex;flex-direction:column;gap:3px}
.kpi2 .k-n{font:var(--fw-bold) 30px/1.1 var(--font-mono);letter-spacing:-.04em;color:var(--ja-navy)}
.kpi2 .k-n small{font-size:14px;color:var(--ja-navy-55);font-weight:500;letter-spacing:0}
.kpi2 .k-t{font-size:13px;color:var(--ja-navy);font-weight:var(--fw-bold)}
.kpi2 .k-p{font-size:12px;color:var(--text-muted)}
.kpi2.alerta{border-left:3px solid var(--ja-warning)}.kpi2.alerta .k-n{color:var(--ja-warning)}
.kpi2.bueno .k-n{color:var(--ja-success)}
.kpi2.g .k-n{color:var(--ja-blue-action-dark)}

/* ------------------------------------------------------------- botones */
.btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  font:var(--fw-bold) 13px/1 var(--font-sans);letter-spacing:.01em;padding:11px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--ja-navy-20);background:var(--ja-white);color:var(--ja-navy);
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.btn:hover:not(:disabled){border-color:var(--ja-navy);background:var(--ja-white)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primario{background:var(--action-primary-bg);color:var(--action-primary-fg);border-color:var(--action-primary-bg)}
.btn.primario:hover:not(:disabled){background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover)}
.btn.acento{background:var(--action-accent-bg);color:var(--action-accent-fg);border-color:var(--action-accent-bg)}
.btn.acento:hover:not(:disabled){background:var(--action-accent-bg-hover);border-color:var(--action-accent-bg-hover)}
.btn.contorno{background:transparent;border:2px solid var(--ja-navy);padding:10px 19px}
.btn.contorno:hover:not(:disabled){background:var(--ja-navy);color:var(--ja-cream)}
.btn.fantasma{background:transparent;border-color:transparent}
.btn.fantasma:hover:not(:disabled){color:var(--ja-blue-action);border-color:transparent}
.btn.inverso{background:var(--ja-cream);color:var(--ja-navy);border-color:var(--ja-cream)}
.btn.inverso:hover:not(:disabled){background:var(--ja-blue-soft);border-color:var(--ja-blue-soft)}
.btn.peligro{color:var(--ja-danger);border-color:rgba(179,36,31,.35);background:var(--ja-white)}
.btn.peligro:hover:not(:disabled){background:var(--ja-danger-08);border-color:var(--ja-danger)}
.btn.bueno{color:var(--ja-success);border-color:rgba(15,122,90,.4);background:var(--ja-white)}
.btn.bueno:hover:not(:disabled){background:var(--ja-success-08);border-color:var(--ja-success)}
.btn.s{padding:7px 14px;font-size:12px}
.btn.completo{width:100%}

/* ----------------------------------------------------------- formularios */
label.campo{display:block;font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ja-navy-70);margin:0}
label.campo>span.nota{display:block;margin-top:6px;font-size:12px;font-weight:var(--fw-regular);letter-spacing:0;text-transform:none;color:var(--ja-navy-55);line-height:1.5}
.inp,.sel,.area{display:block;width:100%;margin-top:7px;appearance:none;border:1px solid var(--border-field);background:var(--ja-white);color:var(--ja-navy);
  border-radius:var(--radius-none);padding:11px 14px;font:var(--fw-regular) 14px var(--font-sans);letter-spacing:normal;text-transform:none;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4D8F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:36px;cursor:pointer}
.inp:focus,.sel:focus,.area:focus{outline:none;border-color:var(--ja-navy);box-shadow:inset 0 -2px 0 var(--ja-blue-action)}
.inp::placeholder,.area::placeholder{color:var(--ja-navy-45)}
.inp:disabled,.sel:disabled{background:var(--ja-cream-dim);color:var(--ja-navy-55)}
.area{resize:vertical;line-height:1.55;min-height:72px}
.inp.mono,.area.mono{font-family:var(--font-mono);font-size:12.5px}
.rej-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.rej-form .ancho{grid-column:1/-1}
input[type=checkbox],input[type=radio]{accent-color:var(--ja-blue-action)}

.interruptor{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:16px 0;border-top:1px solid var(--border-subtle)}
.interruptor:first-of-type{border-top:0;padding-top:0}
.interruptor .t{font-size:14px;font-weight:var(--fw-bold)}.interruptor .d{font-size:13px;color:var(--text-muted);font-weight:var(--fw-light);line-height:1.55;margin-top:3px;max-width:58ch}
.sw{position:relative;flex:none;width:44px;height:24px;margin-top:2px}
.sw input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.sw span{position:absolute;inset:0;border-radius:var(--radius-pill);background:var(--ja-navy-20);transition:background var(--dur-base) var(--ease-standard)}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--dur-base) var(--ease-standard)}
.sw input:checked+span{background:var(--ja-blue-action)}.sw input:checked+span::after{transform:translateX(20px)}
.sw input:focus-visible+span{box-shadow:var(--focus-ring)}

/* pestañas: negrita y subrayado azul (como WPP) */
.pestanas{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 22px;border-bottom:1px solid var(--border-subtle);max-width:100%}
.pestanas button{appearance:none;border:0;background:none;cursor:pointer;color:var(--ja-navy-70);font:var(--fw-regular) 13.5px var(--font-sans);padding:10px 16px;margin-bottom:-1px;border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.pestanas button:hover{color:var(--ja-navy)}
.pestanas button[aria-selected="true"]{color:var(--ja-navy);font-weight:var(--fw-bold);border-bottom-color:var(--ja-blue-action)}

/* etiquetas */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:var(--radius-pill);border:1px solid currentColor;white-space:nowrap;line-height:1.3}
.pill.gris{color:var(--ja-navy-70)}.pill.azul{color:var(--ja-blue-action-dark)}.pill.blanco{color:var(--ja-navy)}
.pill.verde{color:var(--ja-success)}.pill.ambar{color:var(--ja-warning)}.pill.rojo{color:var(--ja-danger)}
.pill.relleno{border-color:transparent}
.pill.azul.relleno{background:var(--ja-blue-14)}.pill.blanco.relleno{background:var(--ja-navy-10)}.pill.gris.relleno{background:var(--ja-cream-dim)}
.pill.verde.relleno{background:var(--ja-success-08)}.pill.ambar.relleno{background:var(--ja-warning-10)}.pill.rojo.relleno{background:var(--ja-danger-08)}
.punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ja-blue-action)}

/* tablas */
.tabla-caja{overflow-x:auto;margin:0 calc(var(--card-pad)*-1);padding:0 var(--card-pad)}
table.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-size:10px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ja-navy-55);padding:0 14px 11px 0;border-bottom:1px solid var(--ja-navy-20);white-space:nowrap}
.tabla td{padding:13px 14px 13px 0;border-bottom:1px solid var(--border-subtle);vertical-align:middle;color:var(--ja-navy)}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover td{background:rgba(0,0,80,.02)}
.tabla td.cifra,.tabla th.cifra{text-align:right}
.tabla .sec{color:var(--text-muted);font-size:12.5px}
.tabla .acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:180px}
.persona{display:flex;align-items:center;gap:11px;min-width:0}
.persona b{display:block;font-weight:var(--fw-bold);line-height:1.25}.persona em{display:block;font-style:normal;font-size:12px;color:var(--text-muted)}

/* avisos y vacíos */
.aviso{padding:12px 16px;border:1px solid var(--border-subtle);border-left:3px solid var(--ja-navy-45);background:var(--ja-white);font-size:13.5px;line-height:1.55;color:var(--ja-navy)}
.aviso b{font-weight:var(--fw-bold)}
.aviso.info{border-left-color:var(--ja-blue-action);background:var(--ja-blue-08)}
.aviso.bien{border-left-color:var(--ja-success);background:var(--ja-success-08)}
.aviso.ojo{border-left-color:var(--ja-warning);background:var(--ja-warning-10)}
.aviso.malo{border-left-color:var(--ja-danger);background:var(--ja-danger-08)}
.vacio{padding:36px 24px;border:1px dashed var(--ja-navy-20);color:var(--text-muted);font-size:14px;font-weight:var(--fw-light);line-height:1.65;text-align:center;background:transparent}
.vacio b{display:block;color:var(--ja-navy);font-weight:var(--fw-bold);font-size:15px;margin-bottom:5px}
.cargando-p{padding:34px;text-align:center;color:var(--ja-navy-55);font-size:13px}
.esqueleto{height:14px;background:linear-gradient(90deg,var(--ja-navy-10) 25%,var(--ja-cream-dim) 50%,var(--ja-navy-10) 75%);background-size:200% 100%;animation:brillo 1.4s linear infinite}
@keyframes brillo{to{background-position:-200% 0}}

/* modales y avisos flotantes */
.modal-fondo{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,80,.55);animation:aparece var(--dur-base) var(--ease-standard)}
.modal{width:100%;max-width:540px;max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--ja-white);border:1px solid var(--border-subtle);padding:28px 30px;box-shadow:var(--shadow-overlay);animation:sube var(--dur-base) var(--ease-out)}
.modal.ancho{max-width:740px}
.modal h2{margin:0 0 6px;font-size:22px;font-weight:var(--fw-black);letter-spacing:var(--ls-heading)}
.modal .sub{margin:0 0 20px;color:var(--text-muted);font-size:14px;font-weight:var(--fw-light);line-height:1.6}
.modal .pie-modal{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;flex-wrap:wrap}
.modal .campo+.campo,.modal .rej-form{margin-top:16px}
@keyframes aparece{from{opacity:0}to{opacity:1}}@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 40px))}
.toast{padding:13px 16px;font-size:13.5px;line-height:1.5;background:var(--ja-navy);color:var(--ja-cream);border-left:3px solid var(--ja-blue-light);box-shadow:var(--shadow-overlay);animation:sube var(--dur-base) var(--ease-out)}
.toast.bien{border-left-color:var(--ja-success-on-navy)}.toast.malo{border-left-color:var(--ja-danger-on-navy)}
.demo-cinta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 22px;padding:12px 16px;font-size:13.5px;line-height:1.55;color:var(--ja-navy);border:1px solid var(--ja-blue-20);border-left:3px solid var(--ja-blue-action);background:var(--ja-blue-08)}
.demo-cinta b{color:var(--ja-blue-action-dark);font-weight:var(--fw-bold);white-space:nowrap}

/* flujo por pasos, pendientes y listas */
.flujo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.flujo .paso-f{position:relative;padding:16px 16px 14px;background:var(--ja-cream);border:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:3px;text-align:left;
  appearance:none;color:inherit;font:inherit;cursor:pointer;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.flujo .paso-f:hover{border-color:var(--ja-navy);background:var(--ja-white)}
.flujo .paso-f .p-n{font:var(--fw-bold) 26px/1.1 var(--font-mono);letter-spacing:-.04em}
.flujo .paso-f .p-t{font-size:13px;font-weight:var(--fw-bold)}.flujo .paso-f .p-d{font-size:12px;color:var(--text-muted);line-height:1.4}
.flujo .paso-f::after{content:"";position:absolute;right:-8px;top:50%;width:8px;height:8px;border-top:1.5px solid var(--ja-navy-45);border-right:1.5px solid var(--ja-navy-45);transform:translateY(-50%) rotate(45deg);z-index:1}
.flujo .paso-f:last-child::after{display:none}
.flujo .paso-f.pide{border-color:var(--ja-warning);background:var(--ja-warning-10)}.flujo .paso-f.pide .p-n{color:var(--ja-warning)}
.flujo .paso-f.listo .p-n{color:var(--ja-success)}
@media(max-width:980px){.flujo{grid-template-columns:repeat(2,minmax(0,1fr))}.flujo .paso-f::after{display:none}}
.pendientes{display:flex;flex-direction:column;gap:8px}
.pendiente{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--ja-cream);border:1px solid var(--border-subtle);border-left:3px solid var(--ja-navy-45)}
.pendiente .t{flex:1;min-width:0;font-size:14px;line-height:1.45}.pendiente .t b{font-weight:var(--fw-bold)}
.pendiente .t small{display:block;color:var(--text-muted);font-size:12.5px;font-weight:var(--fw-regular)}
.pendiente.ojo{border-left-color:var(--ja-warning)}.pendiente.mal{border-left-color:var(--ja-danger)}
.estado-datos{display:flex;flex-direction:column}
.estado-datos .fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:13px 0;border-top:1px solid var(--border-subtle);align-items:center}
.estado-datos .fila:first-child{border-top:0;padding-top:0}
.estado-datos .fila .t{font-size:14px;font-weight:var(--fw-bold)}.estado-datos .fila .d{grid-column:1;font-size:12.5px;color:var(--text-muted);line-height:1.5}
.lista-simple{display:flex;flex-direction:column}
.lista-simple a,.lista-simple .fila-s{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--border-subtle);font-size:14px;color:inherit;text-decoration:none;cursor:pointer}
.lista-simple>:first-child{border-top:0;padding-top:0}
.lista-simple b{font-weight:var(--fw-bold)}.lista-simple em{font-style:normal;color:var(--text-muted);font-size:12.5px;display:block}
.fila-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
code.c,.paso code{font-family:var(--font-mono);font-size:12px;color:var(--ja-navy);background:var(--ja-cream-dim);padding:2px 7px}

/* gráficas */
.graf{width:100%;height:auto;display:block;overflow:visible}
.graf text{font-family:var(--font-mono);fill:var(--ja-navy-70);font-size:11px}
.graf .eje{stroke:var(--ja-navy-20);stroke-width:1}.graf .rejilla-l{stroke:var(--border-subtle);stroke-width:1}
.graf .barra{transition:opacity var(--dur-fast) var(--ease-standard)}.graf .barra:hover{opacity:.8}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px;color:var(--text-muted)}
.leyenda i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.hbar{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;font-size:13.5px}
.hbar .pista-h{height:10px;background:var(--ja-navy-10);overflow:hidden}
.hbar .pista-h i{display:block;height:100%;background:var(--ja-blue-action)}
.hbar .v{font:var(--fw-bold) 12px var(--font-mono);color:var(--ja-navy);min-width:28px;text-align:right}
.hbar .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip{position:fixed;z-index:150;pointer-events:none;background:var(--ja-navy);color:var(--ja-cream);padding:9px 12px;font-size:12.5px;line-height:1.5;box-shadow:var(--shadow-overlay);max-width:260px}
.tip b{font-family:var(--font-mono);font-size:11px;color:var(--ja-cream-70);display:block;margin-bottom:2px}

/* en desarrollo */
.desarrollo{position:relative;overflow:hidden;padding:44px clamp(22px,4vw,48px);border:1px dashed var(--ja-navy-20);background-color:var(--ja-white);background-image:var(--pattern-dot-grid);background-size:var(--dot-grid-gap) var(--dot-grid-gap)}
.desarrollo>*{position:relative}
.desarrollo .sello{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ja-blue-action-dark);background:var(--ja-blue-14);padding:7px 14px;border-radius:var(--radius-pill)}
.desarrollo .sello i{width:7px;height:7px;border-radius:50%;background:var(--ja-blue-action);animation:late 2s var(--ease-standard) infinite}
@keyframes late{50%{opacity:.35}}
.desarrollo h2{margin:20px 0 10px;font-size:clamp(24px,2.8vw,32px);font-weight:var(--fw-black);letter-spacing:var(--ls-heading)}
.desarrollo p.lead2{margin:0;max-width:62ch;color:var(--text-muted);font-size:var(--fs-body);font-weight:var(--fw-light);line-height:1.65}
.desarrollo .dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.desarrollo .bloque{padding:18px 20px;background:var(--ja-cream);border:1px solid var(--border-subtle)}
.desarrollo .bloque h3{margin:0 0 10px;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-accent)}
.desarrollo ul{margin:0;padding-left:18px;color:var(--ja-navy);font-size:14px;line-height:1.7}
.desarrollo .glow{display:none}

/* configuración y sistema */
.cfg-grupo{max-width:780px}
.cfg-grupo .tarjeta+.tarjeta{margin-top:16px}.cfg-grupo .fila-acciones{margin-top:20px}.cfg-grupo .tarjeta+.aviso{margin-top:16px}
.temas-lista{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tema-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.tema-fila .inp{margin-top:0}
.sistema-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.dato{padding:16px 18px;background:var(--ja-cream);border:1px solid var(--border-subtle)}
.dato .d-t{font-size:10px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ja-navy-55)}
.dato .d-v{margin-top:6px;font:600 16px var(--font-mono);overflow-wrap:anywhere}.dato .d-s{margin-top:3px;font-size:12px;color:var(--text-muted);line-height:1.4}
.rol-desc{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--border-subtle)}.rol-desc:first-child{border-top:0}
.rol-desc b{display:block;font-size:14px}.rol-desc span{font-size:13px;color:var(--text-muted);line-height:1.5}
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 32px}

/* móvil */
@media(max-width:900px){
  .armazon{grid-template-columns:1fr}
  .barra-movil{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--ja-navy);color:var(--ja-cream)}
  .barra-movil button{appearance:none;background:none;border:1px solid var(--ja-line-on-navy);color:var(--ja-cream);width:38px;height:38px;display:grid;place-items:center;cursor:pointer}
  .barra-movil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .lateral{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);padding-top:72px;transform:translateX(-102%);transition:transform var(--dur-slow) var(--ease-standard)}
  .lateral.abierto{transform:none;box-shadow:var(--shadow-overlay)}
  .velo{position:fixed;inset:0;z-index:25;background:rgba(0,0,80,.55)}
  main.contenido{padding-top:24px}
}

/* ============================ entrada (pantalla de acceso) ============================ */
.entrada{position:fixed;inset:0;display:grid;grid-template-columns:minmax(380px,520px) minmax(0,1fr);background:var(--ja-cream);z-index:1}
.entrada-panel{display:flex;flex-direction:column;justify-content:center;padding:44px clamp(28px,5vw,76px);overflow-y:auto;background:var(--ja-cream)}
.entrada .logo-img,.entrada .logo-ja{margin-bottom:44px}
.entrada .logo-img{height:30px}
.entrada .kicker{font-size:11px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--text-accent);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.entrada .kicker::before{content:"";width:24px;height:2px;background:var(--ja-blue-action)}
.entrada h1{margin:0 0 12px;font-size:clamp(34px,4vw,48px);font-weight:var(--fw-black);letter-spacing:var(--ls-display);line-height:var(--lh-display)}
.entrada .lead{margin:0 0 30px;max-width:390px;color:var(--text-muted);font-size:var(--fs-body);font-weight:var(--fw-light);line-height:1.6}
.entrada form{display:flex;flex-direction:column;gap:18px;max-width:390px}
.entrada .error{margin:0;padding:12px 16px;font-size:13.5px;border-left:3px solid var(--ja-danger);background:var(--ja-danger-08);color:var(--ja-navy)}
.entrada .envuelve{position:relative;display:block}
.entrada .ver{position:absolute;right:6px;bottom:6px;appearance:none;border:0;background:none;color:var(--ja-navy-70);cursor:pointer;width:34px;height:34px;display:grid;place-items:center}
.entrada .ver:hover{color:var(--ja-navy)}
.entrada .ver svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.entrada .btn.acento,.entrada .btn.primario{padding:14px 20px;font-size:14px;margin-top:4px}
.entrada .pie-e{margin-top:36px;padding-top:16px;border-top:1px solid var(--border-subtle);max-width:390px;font-size:12px;color:var(--ja-navy-55);line-height:1.7}
.entrada .pie-e b{color:var(--ja-navy);font-weight:var(--fw-black);letter-spacing:var(--ls-logo)}.entrada .pie-e b i{font-style:normal;color:var(--ja-blue-action)}
.entrada-arte{position:relative;overflow:hidden;background:var(--ja-navy)}
.entrada-arte canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.entrada-arte .lema{position:absolute;left:clamp(24px,4vw,56px);bottom:clamp(24px,5vh,52px);max-width:440px;color:var(--ja-cream)}
.entrada-arte .lema b{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:var(--fw-black);letter-spacing:var(--ls-heading);line-height:1.12}
.entrada-arte .lema span{display:block;margin-top:10px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--ja-cream-70)}
.entrada-arte .num-p{position:absolute;right:26px;top:22px;font:500 12px var(--font-mono);color:var(--ja-cream-70)}
@media(max-width:900px){.entrada{grid-template-columns:1fr}.entrada-arte{display:none}}