/* ================================================================
   Bakabia Retail Analytics · app.css
   Copia de prototipo\styles.css (que a su vez copia la base de
   ModernWebAppSpecs del 2026-09-23), sin las partes que solo existen en
   el prototipo (ESPECIFICACION §4.2): la rejilla .app, la vista de
   teléfono, la barra .demo, los botones .sim y el catálogo .spec/.states.
   El encabezado y la columna se ajustan para vivir dentro de RadzenHeader
   y RadzenSidebar; el cajón y el riel los pone radzen-tema.css.
   Lo propio de este producto va al final, en el bloque «BRA».
   ----------------------------------------------------------------
   U1: sistema visual
   La identidad NO cambia entre modos: #036D80 y su escala son las
   mismas en claro y en oscuro. Lo que cambia son los neutros, que van
   teñidos del mismo tono de la marca, nunca grises.
   ================================================================ */
:root{
  /* --- marca, idéntica en los dos modos --- */
  --brand:#036D80;
  --brand-light:#0492AC;
  --brand-lighter:#05B1CF;
  --brand-dark:#025868;
  --brand-darker:#024652;
  --glow:#9FE3EF;

  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --r-card:14px; --r-field:10px; --r-pill:999px;
  --sidebar:252px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* --- oscuro: neutros teñidos del tono de la marca --- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F2429; --ground-2:#132C32;
  --surface:#0A2329; --surface-2:#132C32; --surface-3:#1A3A42;
  --line:#22464F; --line-soft:#1C3A40;
  --text:#E6F1F2; --muted:#A9C5C9; --faint:#86A7AC;
  --accent:#2CC3DE;
  --on-brand:#FFFFFF;
  --ok:#5BD1A0; --warn:#E7B96A; --err:#F0A0A2;
  --ok-bg:rgba(91,209,160,.12); --warn-bg:rgba(231,185,106,.12); --err-bg:rgba(240,160,162,.12);
  --brand-bg:rgba(44,195,222,.13);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.85);
  --skeleton:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  --chart:var(--accent);
}
/* --- muy oscuro: el lienzo toma el fondo del chrome de medio oscuro, y el chrome baja un
   escalón más, con la misma proporción que separa lienzo y chrome en medio oscuro. Los textos
   son los de medio oscuro: pasan AA en todos estos fondos (§3.3). Medio oscuro no cambia.
   (Base 1.2.0; se copia tal cual porque la marca de la app es la de la base.) --- */
html[data-theme="deep"]{
  color-scheme:dark;
  --ground:#051519; --ground-2:#071B20;
  --surface:#0A2126; --surface-2:#0E2B31; --surface-3:#123740;
  --line:#16393F; --line-soft:#102E34;
  --text:#E6F1F2; --muted:#A9C5C9; --faint:#86A7AC;
  --accent:#2CC3DE;
  --on-brand:#FFFFFF;
  --ok:#5BD1A0; --warn:#E7B96A; --err:#F0A0A2;
  --ok-bg:rgba(91,209,160,.12); --warn-bg:rgba(231,185,106,.12); --err-bg:rgba(240,160,162,.12);
  --brand-bg:rgba(44,195,222,.13);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.95);
  --skeleton:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  --chart:var(--accent);
}
/* ================================================================ modos extendidos
   Se definen en la base y cada app habilita los que usa (§3.3, MODOS.md). Pueden traer su
   propia marca. Sus neutros conservan el brillo exacto de los de «muy oscuro», con el tono de su
   marca: así la intensidad de cada zona y el contraste son los mismos.
   En esta app: Cobalto, habilitado para Comercial Treviño (su modo de arranque). */

/* --- Cobalto: azul rey. Lienzo y chrome con el brillo de muy oscuro, en azul. Base 1.4.1: el azul
   exacto de su marca (#2D44B5) y todos sus colores en ese tono, sin irse al violeta. --- */
html[data-theme="cobalto"]{
  color-scheme:dark;
  --brand:#2D44B5;
  --brand-light:#5472D5;
  --brand-lighter:#869EE2;
  --brand-dark:#253893;
  --brand-darker:#1C2C74;
  --ground:#060D39; --ground-2:#091246;
  --surface:#0E184F; --surface-2:#121F63; --surface-3:#1A297D;
  --line:#1D2D74; --line-soft:#162464;
  --text:#EBEEF8; --muted:#B7C1DA; --faint:#94A1C3;
  --accent:#96B1FF;
  --on-brand:#FFFFFF;
  --ok:#5BD1A0; --warn:#E7B96A; --err:#F0A0A2;
  --ok-bg:rgba(91,209,160,.12); --warn-bg:rgba(231,185,106,.12); --err-bg:rgba(240,160,162,.12);
  --brand-bg:rgba(150,177,255,.13);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.95);
  --skeleton:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  --chart:var(--accent);
}

/* --- claro: mismos tonos, luminancia invertida. Ningún gris neutro --- */
html[data-theme="light"]{
  color-scheme:light;
  --ground:#F1F7F8; --ground-2:#E8F1F2;
  --surface:#FFFFFF; --surface-2:#F6FBFB; --surface-3:#EAF3F4;
  --line:#D2E2E4; --line-soft:#E3EDEF;
  /* --faint es el tono más claro que pasa AA (4.5:1) en todos los fondos donde hay texto,
     incluido el de los campos (--ground-2). Más claro se ve más fino y ya no se lee. */
  --text:#062329; --muted:#4A6E75; --faint:#547278;
  --accent:#026C7F;              /* el acento se oscurece para leerse sobre blanco */
  --on-brand:#FFFFFF;
  --ok:#137D57; --warn:#8A5D06; --err:#A32E28;
  --ok-bg:rgba(19,125,87,.10); --warn-bg:rgba(138,93,6,.10); --err-bg:rgba(163,46,40,.09);
  --brand-bg:rgba(3,109,128,.09);
  --shadow:0 1px 2px rgba(6,35,41,.06), 0 14px 30px -18px rgba(6,35,41,.28);
  --skeleton:linear-gradient(90deg,var(--surface-3) 25%,var(--ground-2) 37%,var(--surface-3) 63%);
  --chart:var(--brand-light);
}

/* --- chrome más hondo que el canvas ---------------------------------------------
   El encabezado y la columna de navegación se hunden un paso más que el lienzo, y
   el contenido flota al frente. Se redefinen las variables dentro del chrome, así
   que todo lo que vive ahí —marca, menú, pastillas, bordes— se acomoda solo.
   Cuelga de .chrome y no de .top/.side para que en Blazor baste con ponerle la
   clase a RadzenHeader y a RadzenSidebar. */
html[data-theme="dark"] .chrome{
  --ground:#051519; --ground-2:#071B20;
  --surface:#0A2126; --surface-2:#0E2B31; --surface-3:#123740;
  --line:#16393F; --line-soft:#102E34;
  --text:#E4F0F1; --muted:#93B3B8; --faint:#729499;   /* AA también sobre el hover y el activo del menú */
  --accent:#05B1CF;
  --brand-bg:rgba(5,177,207,.14);
  background-color:#051519;
}
/* Muy oscuro: el chrome un escalón debajo del lienzo. Las líneas no bajan en proporción: sobre un
   fondo tan oscuro desaparecerían; se separan del fondo lo mismo que en medio oscuro. */
html[data-theme="deep"] .chrome{
  --ground:#020C0F; --ground-2:#021014;
  --surface:#031317; --surface-2:#05191E; --surface-3:#062027;
  --line:#0E2B31; --line-soft:#0A2126;
  --text:#E4F0F1; --muted:#93B3B8; --faint:#729499;
  --accent:#05B1CF;
  --brand-bg:rgba(5,177,207,.14);
  background-color:#020C0F;
}
html[data-theme="cobalto"] .chrome{
  --ground:#030725; --ground-2:#040736;
  --surface:#05093A; --surface-2:#070E48; --surface-3:#0B1258;
  --line:#131F61; --line-soft:#0E194D;
  --text:#EBEEF7; --muted:#A2AECC; --faint:#818EB0;
  --accent:#7E9EFF;
  --brand-bg:rgba(126,158,255,.14);
  background-color:#030725;
}
/* En claro la jerarquía es la misma, al revés: el chrome se tiñe y el canvas queda limpio. */
html[data-theme="light"] .chrome{
  --ground:#E2EDEF; --ground-2:#D6E6E9;
  --surface:#FFFFFF; --surface-2:#F1F7F8; --surface-3:#E3EDEF;
  --line:#C6DADD; --line-soft:#D8E6E8;
  /* El chrome claro es más oscuro que el lienzo: sus textos se oscurecen para seguir en AA
     (el elemento activo del menú es el fondo más difícil). */
  --muted:#375960; --faint:#49676D;
  background-color:#E2EDEF;
}


*{box-sizing:border-box}
html,body{height:100%}
/* Lo que se enfoca o se lleva a la vista (un error, un ancla) no queda debajo del
   encabezado pegado arriba ni de la barra de acciones pegada abajo. */
html{scroll-padding-top:84px;scroll-padding-bottom:96px}
body{
  margin:0;background:var(--ground);color:var(--text);
  font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease),color .25s var(--ease);
}
h1,h2,h3,h4{margin:0}
h1{font:400 clamp(26px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.02em}
h2{font:400 22px/1.2 var(--display);letter-spacing:-.015em}
h3{font:600 15px/1.35 var(--sans)}
p{margin:0}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.mono{font-family:var(--mono);font-size:.92em}
.num{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column}
.rowf{display:flex;align-items:center}
.gap8{gap:8px} .gap12{gap:12px} .gap16{gap:16px}
.wrapf{flex-wrap:wrap}

/* ================================================================ U2: chrome */


.top{position:relative;display:flex;align-items:center;gap:18px;height:var(--rz-header-min-height,64px);padding:0 20px}
.brand{display:flex;align-items:center;gap:9px;min-width:calc(var(--sidebar) - 20px)}
.brand svg{width:28px;height:28px;flex:none}
.wordmark{font:400 21px/1 "Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:-.4px;color:var(--text)}
.wordmark b{font-weight:700}
.spacer{flex:1}

.client-chip{
  display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);font-size:13.5px;transition:border-color .15s
}
.client-chip:hover{border-color:var(--brand-light)}
.client-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.client-chip svg{width:14px;height:14px;color:var(--faint)}

.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-pill);color:var(--muted);
  transition:background .15s,color .15s}
.iconbtn svg{width:19px;height:19px;stroke-width:1.7}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.user{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line-soft)}
.user .who{line-height:1.25;font-size:13.5px} .user .who small{display:block;color:var(--faint);font-size:11.5px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--brand-light),var(--brand-darker));color:#fff;font:600 13px/1 var(--sans)}
/* Menú de cuenta: sale del avatar. Nombre, correo y rol arriba (en teléfono son lo único
   que dice quién eres, porque el nombre del encabezado se esconde), y la salida al final. */
.user{position:relative}
.usermenu{position:absolute;right:0;top:calc(100% + 12px);z-index:40;width:260px;padding:6px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.usermenu[hidden]{display:none}
.um-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px 12px;margin-bottom:4px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--faint)}
.um-head b{font-size:14.5px;font-weight:500;color:var(--text)}
.um-head .pill{margin-top:6px}
.usermenu [role^="menuitem"]{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;font-size:14px;text-align:left}
.usermenu [role^="menuitem"]:hover,.usermenu [role^="menuitem"]:focus-visible{background:var(--surface-2)}
.usermenu [role^="menuitem"] svg{width:16px;height:16px;color:var(--faint)}
/* Selector de modo: el mismo menú, con una palomita en el modo activo. Tres botones sueltos no
   caben en el encabezado del teléfono; un menú sí, y dice el nombre de cada modo. */
.themewrap{position:relative}
.thememenu{width:220px}
.thememenu .eyebrow{padding:8px 12px 6px}
/* Los extendidos van después de los estándar, separados: nunca se mezclan con ellos. */
.thememenu .eyebrow.sep{margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft)}
.thememenu [role="menuitemradio"] .ck{margin-left:auto;color:var(--accent);visibility:hidden}
.thememenu [aria-checked="true"]{font-weight:500}
.thememenu [aria-checked="true"] .ck{visibility:visible}
.kbd{font:500 11px/1 var(--mono);border:1px solid var(--line);border-radius:5px;padding:4px 6px;color:var(--faint);background:var(--surface)}
/* Caja del encabezado: se teclea para buscar; el botón «Ctrl K» abre la paleta. */
.quickwrap{position:absolute;left:50%;transform:translateX(-50%);display:flex;justify-content:center;width:min(32rem,36vw)}
.quick{display:flex;align-items:center;gap:10px;width:min(34rem,100%);padding:5px 6px 5px 14px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);transition:border-color .15s}
.quick:focus-within{border-color:var(--brand-light)}
.quick>svg{width:17px;height:17px;color:var(--faint);flex:none}
.quick input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text);font:400 14.5px var(--sans)}
.quick input::placeholder{color:var(--faint)}
.kbdbtn{cursor:pointer;padding:6px 8px;background:var(--ground-2);transition:color .15s,border-color .15s}
.kbdbtn:hover{color:var(--text);border-color:var(--brand-light)}
.menubtn{display:none}
/* El velo del cajón solo existe abajo de 1024 px (U6). Arriba no se pinta: como vive dentro
   de la rejilla de la app, si se quedara visible ocuparía una celda y empujaría el contenido
   abajo del menú. */
.drawer-scrim{display:none}

/* --- barra lateral --- */
/* Menú compacto (base 1.3.0): 20 % menos aire, opciones de 41 a 37 px, para que un menú de varias
   secciones quepa sin scroll vertical. El texto y los íconos no cambian. */
.side{min-height:100%;padding:14px 12px 10px;display:flex;flex-direction:column;gap:16px}
.side .group{display:flex;flex-direction:column;gap:2px}
.side .group .eyebrow{padding:0 12px 6px}
.navitem{display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:10px;color:var(--muted);
  transition:background .15s var(--ease),color .15s var(--ease);width:100%;text-align:left;font-size:14.5px}
.navitem svg{width:18px;height:18px;flex:none;stroke-width:1.6}
.navitem:hover{background:var(--surface-2);color:var(--text)}
.navitem.on{background:var(--brand-bg);color:var(--text);font-weight:500}
.navitem.on svg{color:var(--accent)}
.navitem .count{margin-left:auto;font:500 11px/1 var(--mono);color:var(--faint)}
.side .foot{padding:12px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--faint);line-height:1.5}

/* Menú encogido a iconos: la columna no desaparece, se hace angosta. El control va al tope. */
.menutop{display:flex;justify-content:flex-end;padding:0 2px 6px}
.railtoggle{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  color:var(--faint);transition:background .15s,color .15s}
.railtoggle svg{width:16px;height:16px;transform:rotate(180deg);transition:transform .2s}
.railtoggle:hover{background:var(--surface-2);color:var(--text)}

/* La marca del producto vive al pie de la columna. */
.menubrand{display:flex;align-items:center;gap:10px;margin-top:auto;padding:11px 10px 5px;
  border-top:1px solid var(--line-soft)}
.menubrand svg{width:30px;height:30px;flex:none}
.menubrand-version{font:400 12px/1.2 var(--mono);color:var(--faint)}

/* El riel solo existe de 1024 px para arriba. Abajo la columna es cajón y siempre lleva
   etiquetas, aunque la preferencia guardada sea «riel». */
@media (min-width: 1024px){
  html[data-menu="rail"]{--sidebar:4.5rem}
  /* La etiqueta se esconde a la vista, no al lector de pantalla: con display:none el botón
     se quedaría sin nombre. El título (tooltip) lo pone app.js al encoger. */
  html[data-menu="rail"] .navlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-menu="rail"] .side .eyebrow,html[data-menu="rail"] .navitem .count{display:none}
  html[data-menu="rail"] .navitem{justify-content:center;padding-inline:0}
  html[data-menu="rail"] .menutop,html[data-menu="rail"] .menubrand{justify-content:center;padding-inline:0}
  html[data-menu="rail"] .railtoggle svg{transform:none}
  html[data-menu="rail"] .side{padding-inline:8px}
}

/* ================================================================ contenido */
.main{padding:28px 32px 70px;max-width:1180px;width:100%}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.pagehead p{color:var(--muted);font-size:14px;margin-top:6px;max-width:62ch}
.crumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--faint);margin-bottom:8px}
.crumbs a:hover{color:var(--text)} .crumbs a{color:var(--muted)}
.section{margin-top:34px}
.section>header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid transparent;font:500 14px/1 var(--sans);transition:all .15s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:1.8}
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand-light)}
/* Hover: la marca con un velo blanco del 8 %, igual que hace Radzen en sus botones. Antes era
   --brand-light, y el texto blanco daba 3.7:1 sobre el teal: no pasaba AA (base 1.2.0). */
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 92%,#fff)}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--surface)}
.btn-ghost:hover{border-color:var(--brand-light);background:var(--surface-2)}
.btn-quiet{color:var(--muted)} .btn-quiet:hover{color:var(--text);background:var(--surface-2)}
/* Destructivo: el rojo solo aquí y en errores. Relleno, porque se lee antes que el texto. */
.btn-danger{background:var(--err);color:var(--surface);border-color:var(--err)}
.btn-danger:hover{background:color-mix(in srgb,var(--err) 86%,var(--text))}
.btn-sm{padding:7px 13px;font-size:13px}
.btn[disabled]{opacity:.42;pointer-events:none}
/* Ocupado: el botón dice qué está haciendo («Creando…») y no se puede volver a pulsar.
   Sin spinner: el texto ya es la respuesta. */
.btn[aria-busy="true"]{pointer-events:none;cursor:progress;opacity:.8}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.pad{padding:18px 20px}

/* --- U4: mosaico de cifras --- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;
  position:relative;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s var(--ease),border-color .2s}
.tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand-light) 45%,var(--line))}
.tile::after{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-lighter));opacity:.8}
.tile .big{font:300 32px/1.1 var(--sans);letter-spacing:-.02em;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.tile .big em{font-style:normal;font-size:15px;font-weight:400;color:var(--muted);margin-left:5px}
.tile .sub{font-size:12.5px;color:var(--faint)}
.tile .sub b{color:var(--ok);font-weight:500}
.tile .sub .stale{display:block;color:var(--warn);margin-top:2px}

/* --- gráfica --- */
.chartwrap{position:relative}
.chart{width:100%;height:auto;aspect-ratio:900/190;display:block;overflow:visible}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .line{fill:none;stroke:var(--chart);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .marker{fill:var(--surface);stroke:var(--chart);stroke-width:2;opacity:0;transition:opacity .12s}
.chart .vline{stroke:var(--line);stroke-width:1;opacity:0}
.chart.live .marker,.chart.live .vline{opacity:1}
.chart text{font:400 10.5px var(--mono);fill:var(--faint)}
.tip{position:absolute;pointer-events:none;background:var(--surface-3);border:1px solid var(--line);border-radius:9px;
  padding:7px 11px;font-size:12.5px;box-shadow:var(--shadow);opacity:0;transform:translate(-50%,-120%);
  transition:opacity .12s;white-space:nowrap;font-variant-numeric:tabular-nums}
.tip b{display:block;font:400 11px var(--mono);color:var(--faint)}

/* --- pastillas --- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);font:500 12px/1.5 var(--sans)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:var(--ok-bg)} .pill.warn{color:var(--warn);background:var(--warn-bg)}
.pill.err{color:var(--err);background:var(--err-bg)} .pill.info{color:var(--accent);background:var(--brand-bg)}
.pill.flat{color:var(--muted);background:var(--surface-2)}

/* --- tarjetas por entidad --- */
.entities{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.entity{display:flex;flex-direction:column;gap:14px;padding:18px 20px}
.entity .entitytop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.entity .path{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:4px}
.bar{height:5px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),var(--brand-lighter));transition:width .9s var(--ease)}
.facts{display:flex;gap:24px;flex-wrap:wrap}
.facts div{line-height:1.35}
.facts span{display:block;font-size:11.5px;color:var(--faint)}
.facts strong{font-weight:500;font-variant-numeric:tabular-nums}

/* ================================================================ U3: contenido, no tablas */
.searchbar{display:flex;align-items:center;gap:12px;padding:0 18px;height:54px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow);transition:border-color .15s}
.searchbar:focus-within{border-color:var(--brand-light)}
.searchbar svg{width:19px;height:19px;color:var(--faint);flex:none}
.searchbar input{flex:1;border:0;background:none;color:var(--text);font:400 16px var(--sans);outline:none;min-width:0}
.searchbar input::placeholder{color:var(--faint)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px}
.chip{padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);font-size:13px;
  background:var(--surface);transition:all .15s}
.chip:hover{color:var(--text);border-color:var(--brand-light)}
.chip.on{background:var(--brand-bg);border-color:color-mix(in srgb,var(--brand-light) 55%,transparent);color:var(--text)}

.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;border:1px solid transparent;
  transition:background .15s var(--ease),border-color .15s,box-shadow .15s}
.row+.row{box-shadow:0 -1px 0 var(--line-soft)}
.row:hover{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.ftype{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;
  font:500 10px/1 var(--mono);letter-spacing:.06em;background:var(--surface-3);color:var(--muted)}
.ftype.pdf{color:#E0736F;background:rgba(224,115,111,.14)}
.ftype.doc{color:#5D9BF5;background:rgba(93,155,245,.14)}
.ftype.img{color:var(--ok);background:var(--ok-bg)}
.ftype.xml{color:var(--warn);background:var(--warn-bg)}
.ftype.org{color:var(--accent);background:var(--brand-bg)}
.ftype.org svg{width:19px;height:19px;stroke-width:1.6}
.row .name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
mark{background:color-mix(in srgb,var(--brand-lighter) 26%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.row .where{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.row .meta{margin-left:auto;text-align:right;font-size:12.5px;color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
.row .acts{display:flex;gap:6px;flex:none;opacity:0;transform:translateX(4px);transition:all .15s var(--ease)}
.row:hover .acts,.row:focus-within .acts{opacity:1;transform:none}
.row .grow{min-width:0;flex:1}
.row .pick{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center}
.row .pick svg{width:12px;height:12px;color:#fff;opacity:0;stroke-width:2.6}
.row.sel .pick{background:var(--brand);border-color:var(--brand)}
.row.sel .pick svg{opacity:1}

/* --- línea de tiempo --- */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--line)}
.ev{position:relative;padding:11px 0;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.ev::before{content:"";position:absolute;left:-23px;top:18px;width:9px;height:9px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px var(--ground)}
.ev.warn::before{background:var(--warn)} .ev.err::before{background:var(--err)}
.ev .when{width:158px;flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ev .what{flex:1;min-width:230px}
.ev .dur{font:400 12.5px var(--mono);color:var(--faint)}

/* --- estado vacío --- */
.empty{display:grid;place-items:center;text-align:center;padding:54px 24px;gap:6px}
.empty svg{width:88px;height:88px;color:var(--line);stroke-width:1.1;margin-bottom:8px}
.empty h3{font:400 20px/1.3 var(--display)}
.empty p{max-width:46ch;color:var(--muted);font-size:14px}

/* ================================================================ flujo guiado y trabajos largos */
.steps{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;padding:8px 15px 8px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);font-size:13.5px;color:var(--muted)}
.step i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);
  font:500 11px/1 var(--mono);font-style:normal;color:var(--muted)}
.step.on{border-color:color-mix(in srgb,var(--brand-light) 55%,transparent);background:var(--brand-bg);color:var(--text)}
.step.on i{background:var(--brand);color:#fff}
.step.done i{background:var(--ok-bg);color:var(--ok)}
/* .field e .input viven en U7: formularios */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.summary div{background:var(--surface);padding:16px 18px}
.summary .v{font:300 25px/1.1 var(--sans);margin-top:6px;font-variant-numeric:tabular-nums}
.note{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-card);background:var(--brand-bg);
  border:1px solid color-mix(in srgb,var(--brand-light) 30%,transparent);font-size:13.5px;line-height:1.55}
.note.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.note svg{width:19px;height:19px;flex:none;color:var(--accent);margin-top:2px}
.note.warn svg{color:var(--warn)}
.note.err{background:var(--err-bg);border-color:color-mix(in srgb,var(--err) 32%,transparent)}
.note.err svg{color:var(--err)}
.code{display:flex;gap:8px;max-width:100%}
.code input{flex:0 1 46px;min-width:0;width:46px;height:56px;text-align:center;font:500 22px var(--mono);border-radius:var(--r-field);
  border:1px solid var(--line);background:var(--ground-2);color:var(--text);outline:none}
.code input:focus{border-color:var(--brand-light)}
.job{display:flex;flex-direction:column;gap:13px;padding:18px 20px}
.job .head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}

/* ================================================================ U7: formularios
   La etiqueta va arriba y siempre visible; la ayuda, debajo. Cuando hay error, el
   mensaje ocupa el lugar de la ayuda y dice qué hacer. El error se marca con borde
   Y con texto: nunca solo con color (§5.6). */
.form{max-width:760px}
.fsec{padding:22px 24px;margin-bottom:16px}
.fsec>header{margin-bottom:18px}
.fsec>header h2{font-size:20px}
.fsec>header p{color:var(--muted);font-size:13.5px;margin-top:4px}
/* Dos columnas solo para campos cortos que van juntos (fecha y hora, importe y avance). */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;min-width:0}
.field:last-child{margin-bottom:0}
.field>label,.field>legend{display:flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:500;padding:0}
.field .opt{font-weight:400;font-size:12.5px;color:var(--faint)}
.field .hint{font-size:12.5px;color:var(--faint);line-height:1.5}
.field .counter{margin-left:auto;font:400 11.5px var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.field .counter.over{color:var(--err)}
.field .error{display:none;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.45;color:var(--err)}
.field .error svg{width:14px;height:14px;flex:none;margin-top:2px;stroke-width:2}
.field.bad .error{display:flex}
.field.bad .hint{display:none}
/* Grupo de opciones: fieldset con legend, para que el lector de pantalla lea la pregunta. */
fieldset.field{border:0;margin:0 0 18px;padding:0;display:block}
fieldset.field>legend{margin-bottom:10px}
fieldset.field>.hint,fieldset.field>.error{margin-top:8px}

.input{width:100%;min-width:0;padding:10px 14px;border-radius:var(--r-field);border:1px solid var(--line);
  background:var(--ground-2);color:var(--text);font:400 14.5px var(--sans);outline:none;
  transition:border-color .15s,box-shadow .15s}
.input.mono{font-family:var(--mono);font-size:14px}
.input::placeholder,.input input::placeholder{color:var(--faint)}
.input:hover{border-color:color-mix(in srgb,var(--brand-light) 50%,var(--line))}
.input:focus,.input:focus-within,.input.is-focus{border-color:var(--brand-light);box-shadow:0 0 0 3px var(--brand-bg)}
.field.bad .input,.field.bad .seg,.field.bad .drop{border-color:var(--err)}
.field.bad .input:focus,.field.bad .input:focus-within{box-shadow:0 0 0 3px var(--err-bg)}
/* Deshabilitado: no aplica ahora (se atenúa y no se enfoca).
   Solo lectura: el dato vale y se puede copiar (se lee completo, sin caja). */
.input:disabled,.input.is-disabled{opacity:.5;cursor:not-allowed}
.input[readonly],.input.is-readonly{background:var(--surface-2);border-color:transparent;box-shadow:none}
textarea.input{min-height:96px;resize:vertical;line-height:1.55}

.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.select::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;pointer-events:none;
  border:solid var(--faint);border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg)}

/* Caja con prefijo o sufijo: importe, contraseña, búsqueda. */
.affix{display:flex;align-items:center;gap:8px;padding-block:0}
.affix input{flex:1;min-width:0;border:0;background:none;outline:none;color:inherit;font:inherit;padding:10px 0}
.affix input.num{text-align:right;font-variant-numeric:tabular-nums}
.affix .pre,.affix .suf{font:400 13px var(--mono);color:var(--faint)}
.affix .reveal{display:grid;place-items:center;width:30px;height:30px;margin-right:-8px;border-radius:8px;color:var(--faint)}
.affix .reveal:hover{color:var(--text);background:var(--surface-2)}
.affix .reveal svg{width:17px;height:17px}

/* Casillas y radios nativos, vestidos: el navegador sigue haciendo el trabajo de accesibilidad. */
.checks{display:flex;flex-direction:column;gap:11px}
.checks.inline{flex-direction:row;flex-wrap:wrap;gap:10px 22px}
.check{display:inline-flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line);border-radius:5px;background:var(--ground-2);cursor:pointer;transition:background .15s,border-color .15s}
.check input[type=radio]{border-radius:50%}
.check input:hover{border-color:var(--brand-light)}
.check input:checked,.check input:indeterminate{background:var(--brand);border-color:var(--brand)}
.check input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:solid var(--on-brand);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.check input[type=checkbox]:indeterminate::after{content:"";width:9px;height:2px;border-radius:1px;background:var(--on-brand)}
.check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-brand)}
.check input:disabled{opacity:.5;cursor:not-allowed}
.check:has(input:disabled){color:var(--faint);cursor:not-allowed}
.check small{display:block;margin-top:2px;font-size:12.5px;color:var(--faint)}
.field.bad .check input:not(:checked){border-color:var(--err)}

/* Interruptor: para lo que surte efecto de inmediato o prende una sección del formulario. */
.switch{display:inline-flex;align-items:center;gap:12px;font-size:14px;text-align:left;cursor:pointer}
.switch .track{position:relative;flex:none;width:40px;height:23px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--line);transition:background .15s,border-color .15s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--muted);transition:transform .18s var(--ease),background .15s}
.switch[aria-checked="true"] .track{background:var(--brand);border-color:var(--brand)}
.switch[aria-checked="true"] .track::after{transform:translateX(17px);background:var(--on-brand)}
.switch:disabled{opacity:.5;cursor:not-allowed}

/* Barra de opciones (SelectBar): de 2 a 5 opciones cortas, todas a la vista. */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ground-2)}
.seg label{position:relative}
.seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.seg span{display:block;padding:6px 15px;border-radius:var(--r-pill);font-size:13.5px;color:var(--muted);transition:background .15s,color .15s}
.seg input:checked+span{background:var(--surface);color:var(--text);font-weight:500;box-shadow:var(--shadow)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.btn.toggle[aria-pressed="true"]{background:var(--brand-bg);border-color:color-mix(in srgb,var(--brand-light) 55%,transparent)}

.range{display:flex;align-items:center;gap:14px}
.range input[type=range]{flex:1;min-width:0;accent-color:var(--brand);cursor:pointer}
.range output{min-width:48px;text-align:right;font:500 13px var(--mono);font-variant-numeric:tabular-nums}

.rating{display:inline-flex;gap:2px}
.rating button{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;color:var(--line)}
.rating button svg{width:21px;height:21px;fill:currentColor;stroke:none}
.rating button.on{color:var(--accent)}

.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:28px;height:28px;border-radius:8px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}

/* Archivo: zona para soltar que también es botón (teclado y lector de pantalla). */
.drop{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:24px 18px;text-align:center;
  border:1.5px dashed var(--line);border-radius:var(--r-card);background:var(--ground-2);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--brand-light);background:var(--brand-bg)}
.drop>svg{width:26px;height:26px;color:var(--faint);margin-bottom:4px}
.drop b{font-weight:500;color:var(--accent)}
.drop .hint{font-size:12.5px;color:var(--faint)}
.file{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface)}
.file .ftype{width:36px;height:36px;font-size:9.5px}
.file .n{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .s{font:400 12px var(--mono);color:var(--faint)}
.file .grow{min-width:0;flex:1}
.file .bar{margin-top:6px}

/* Lista con fichas (DropDown múltiple): se ve lo elegido sin abrir nada. */
.chipsin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;min-height:44px;cursor:text}
.chipsin input{flex:1;min-width:130px;border:0;background:none;outline:none;color:var(--text);font:inherit;padding:4px 6px}
.tag{display:inline-flex;align-items:center;gap:3px;padding:3px 5px 3px 11px;border-radius:var(--r-pill);background:var(--brand-bg);font-size:13px}
.tag button{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;color:var(--muted)}
.tag button:hover{background:var(--surface-3);color:var(--text)}
.tag button svg{width:11px;height:11px;stroke-width:2.2}

/* Menú desplegable de sugerencias (AutoComplete, DropDown con filtro). */
.combo{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;list-style:none;margin:0;padding:6px;max-height:240px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.suggest[hidden]{display:none}
.suggest li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;cursor:pointer}
.suggest li small{color:var(--faint)}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--brand-bg)}
.suggest li.none{color:var(--faint);cursor:default;background:none}

.listbox{list-style:none;margin:0;padding:6px;max-height:190px;overflow:auto}
.listbox li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:14px;cursor:pointer}
.listbox li:hover{background:var(--surface-2)}
.listbox li[aria-selected="true"]{background:var(--brand-bg)}
.picklist{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.picklist .mid{display:flex;flex-direction:column;gap:6px}

.editor{padding:0;overflow:hidden}
.editor .tools{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--line-soft)}
.editor .tools button{min-width:30px;height:30px;padding:0 6px;border-radius:7px;color:var(--muted);font:600 13px var(--sans)}
.editor .tools button:hover{background:var(--surface-2);color:var(--text)}
.editor [contenteditable]{min-height:110px;padding:12px 14px;outline:none;font-size:14.5px;line-height:1.6}
.sign{display:block;width:100%;height:120px;border:1.5px dashed var(--line);border-radius:var(--r-field);background:var(--ground-2);touch-action:none;cursor:crosshair}
fieldset.fs{border:1px solid var(--line);border-radius:var(--r-card);margin:0;padding:12px 18px 18px}
fieldset.fs>legend{padding:0 6px}

/* Resumen de errores: aparece solo al intentar guardar, arriba del formulario, y
   recibe el foco. Cada renglón lleva al campo. */
.errsum{margin-bottom:16px}
.errsum:focus{outline:2px solid var(--err);outline-offset:3px}
.errsum ul{margin:6px 0 0;padding-left:18px}
.errsum li+li{margin-top:2px}
.errsum a{color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Barra de acciones pegada abajo: siempre a la mano, sin buscar el botón al final. */
.formbar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px;padding:16px 0 18px;
  background:linear-gradient(to top,var(--ground) 72%,transparent)}
.formbar .state{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:13px;color:var(--faint)}
.formbar .state .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.formbar .state.dirty{color:var(--warn)}


/* ================================================================ U8: estados de error
   Toda pantalla de error dice qué pasó, qué hacer y da una salida. Si es una falla
   nuestra, además una referencia corta para soporte. Nunca un callejón sin salida,
   nunca el nombre técnico del error. */
.stateview{padding-top:7vh}
.stateview h1{font:400 26px/1.25 var(--display);letter-spacing:-.02em;max-width:24ch}
.empty .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.empty .who{margin-top:22px;font-size:12.5px;color:var(--faint)}
.empty .who a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.empty .find{width:min(420px,100%);margin-top:18px}
/* Referencia para soporte: corta para dictarla por teléfono, y se selecciona de un clic. */
.ref{font:500 12.5px var(--mono);padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--text);user-select:all;white-space:nowrap}

/* Falla de una sección: el resto de la pantalla sigue viva. */
.secerr{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px}
.secerr>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--warn)}
.secerr .grow{flex:1;min-width:200px}
.secerr p{margin-top:2px;font-size:13.5px;color:var(--muted)}

/* Reconexión. Mismo id y clases que el ReconnectModal de la plantilla de .NET 10:
   esta hoja se copia tal cual a ReconnectModal.razor.css. Cada texto se ve solo en su
   estado; Blazor cambia la clase del <dialog>. */
#components-reconnect-modal{width:min(400px,92vw);padding:28px 26px 24px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);color:var(--text);box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
#components-reconnect-modal::backdrop{background:color-mix(in srgb,var(--ground) 70%,transparent);backdrop-filter:blur(3px)}
.components-reconnect-container{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.components-reconnect-container p{font-size:14px;color:var(--muted);line-height:1.55}
.components-reconnect-container p b{display:block;margin-bottom:2px;font:400 20px/1.3 var(--display);color:var(--text)}
.components-reconnect-container button{margin-top:6px}
.components-reconnect-first-attempt-visible,.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,.components-pause-visible,.components-resume-failed-visible,
.components-rejoining-animation{display:none}
.components-reconnect-show .components-reconnect-first-attempt-visible,
.components-reconnect-show .components-rejoining-animation,
.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
.components-reconnect-retrying .components-rejoining-animation,
.components-reconnect-failed .components-reconnect-failed-visible,
.components-reconnect-paused .components-pause-visible,
.components-reconnect-resume-failed .components-resume-failed-visible{display:block}
.components-reconnect-container button.components-reconnect-failed-visible,
.components-reconnect-container button.components-pause-visible{display:none}
.components-reconnect-failed button.components-reconnect-failed-visible,
.components-reconnect-paused button.components-pause-visible,
.components-reconnect-resume-failed button.components-resume-failed-visible{display:inline-flex}
/* El único indicador girando que se permite: aquí no hay contenido que dibujar con esqueleto. */
.components-rejoining-animation{position:relative;width:44px;height:44px;margin-bottom:4px}
.components-rejoining-animation div{position:absolute;inset:0;border:3px solid var(--accent);border-radius:50%;opacity:0;
  animation:rejoin 1.6s cubic-bezier(0,.2,.8,1) infinite}
.components-rejoining-animation div:last-child{animation-delay:-.8s}
@keyframes rejoin{0%{transform:scale(.15);opacity:1}100%{transform:scale(1);opacity:0}}

/* Error inesperado: mismo id y clases que la plantilla de .NET (#blazor-error-ui,
   .reload). Blazor le pone display:block al fallar; el diseño vive en el hijo. */
#blazor-error-ui{display:none;position:fixed;left:50%;bottom:22px;z-index:1000;transform:translateX(-50%);width:min(560px,calc(100vw - 32px))}
#blazor-error-ui .in{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;padding:16px 18px;border-radius:14px;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--err) 45%,var(--line));box-shadow:0 30px 80px -30px rgba(0,0,0,.6);font-size:14px;line-height:1.5}
#blazor-error-ui .in>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--err)}
#blazor-error-ui .grow{flex:1;min-width:220px}
#blazor-error-ui .grow span{display:block;color:var(--muted);font-size:13.5px}

/* Páginas sin sesión (error general, entrada rechazada): sin menú ni usuario, porque
   no hay a quién enseñárselos. Solo la marca, el aviso y la salida. */
.anon{position:fixed;inset:0;z-index:75;display:grid;grid-template-rows:auto 1fr;background:var(--ground);overflow:auto}
.anon[hidden]{display:none}
.anon>header{display:flex;align-items:center;gap:9px;padding:20px 24px}
.anon>header svg{width:28px;height:28px}
.anon .box{place-self:center;width:min(460px,calc(100% - 32px));margin:24px 0 80px;padding:30px 28px;text-align:center}
.anon .box>svg{width:52px;height:52px;color:var(--faint);stroke-width:1.3;margin-bottom:12px}
.anon .box h1{font:400 26px/1.25 var(--display);letter-spacing:-.02em;margin-bottom:10px}
.anon .box p{color:var(--muted);font-size:14.5px;line-height:1.6}
.anon .box p+p{margin-top:10px}
.anon .box .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}

/* ================================================================ U5: vida */
.sk{background:var(--skeleton);background-size:400% 100%;animation:sh 1.3s ease-in-out infinite;border-radius:8px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
.view{animation:in .32s var(--ease) both}
/* Quien pide menos movimiento no ve entradas, brillos de esqueleto ni el pulso de
   reconexión (§5.6). Los estados siguen cambiando; solo dejan de animarse. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@keyframes in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--ground) 66%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
.modal{place-self:center;width:min(440px,92vw);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);padding:26px;transform:scale(.97);transition:transform .18s var(--ease)}
.scrim.on .modal{transform:none}
.modal h2{margin-bottom:8px}
.modal .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

.palette{place-self:start center;margin-top:11vh;width:min(600px,94vw);background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);overflow:hidden;
  transform:translateY(-8px);transition:transform .18s var(--ease)}
.scrim.on .palette{transform:none}
.palette .q{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.palette .q input{flex:1;border:0;background:none;outline:none;color:var(--text);font:400 17px var(--sans)}
.palette .q svg{width:19px;height:19px;color:var(--faint)}
.palette ul{list-style:none;margin:0;padding:8px;max-height:340px;overflow:auto}
.palette li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:14.5px;cursor:pointer}
.palette li svg{width:17px;height:17px;color:var(--faint);stroke-width:1.7;flex:none}
.palette li .k{margin-left:auto;font:400 11px var(--mono);color:var(--faint)}
.palette li.sel{background:var(--brand-bg)} .palette li.sel svg{color:var(--accent)}
.palette .cap{padding:8px 14px 4px}

.toasts{position:fixed;right:22px;bottom:22px;z-index:85;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);max-width:370px;font-size:14px;animation:pop .3s var(--ease) both}
.toast svg{width:18px;height:18px;flex:none;color:var(--ok);margin-top:2px;stroke-width:2}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ================================================================ U6: pantallas angostas
   Tres cortes, con @media de verdad: este CSS se copia a la app y tiene que funcionar
   sin ningún JavaScript que ponga clases. (ESPECIFICACION.md §5.5) */

/* --- 1. Menos de 1200: sale la caja de búsqueda del encabezado. Ctrl K y la pantalla
   Buscar siguen ahí; la caja, en cambio, se encimaría con la marca y el usuario. */
@media (max-width: 1199.98px){
  .quickwrap{display:none}
}

/* --- 2. Menos de 1024: la columna se vuelve cajón. Abajo de eso le roba al contenido
   un cuarto del ancho. El cajón se sobrepone con un velo, se cierra con Esc, con un
   toque fuera o al elegir, y siempre lleva etiquetas (el riel no aplica). */
@media (max-width: 1023.98px){
  .top{padding:0 14px;gap:10px}
  .brand{min-width:0} .wordmark{font-size:18px}
  .menubtn{display:grid}
  .menutop{display:none}

  .drawer-scrim{display:block;position:fixed;inset:56px 0 0;z-index:45;background:color-mix(in srgb,var(--ground) 55%,transparent);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .main{padding:24px 24px 64px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  html{scroll-padding-top:76px}
}

/* --- 3. Menos de 620: teléfono. El contenido se reacomoda en una sola columna. */
@media (max-width: 619.98px){
  .main{padding:18px 16px 60px}
  .hide-sm{display:none}
  /* Dos columnas de cifras dejan de leerse: el mosaico se apila. */
  .tiles{grid-template-columns:1fr;gap:10px}
  .tile{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;padding:14px 16px}
  .tile .big{grid-row:span 2;margin:0;font-size:28px;text-align:right}
  .entities,.summary{grid-template-columns:1fr}
  .ev{gap:2px} .ev .when{width:auto}
  /* Los renglones de lista se vuelven tarjetas: sin cursor no hay «acciones al pasar»,
     así que se ven siempre. */
  .row{align-items:flex-start;flex-wrap:wrap;background:var(--surface);border-color:var(--line);margin-bottom:10px;box-shadow:var(--shadow)}
  .row+.row{box-shadow:var(--shadow)}
  .row .meta{margin-left:54px;text-align:left;width:calc(100% - 54px)}
  .row .acts{opacity:1;transform:none;margin-left:54px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
  .pagehead h1{font-size:24px}
  .summary div{padding:14px 16px}
  .frow,.picklist{grid-template-columns:1fr}
  .fsec{padding:18px 16px}
  /* La barra de acciones no se pega: con tres botones taparía un tercio de la pantalla.
     Va al final del formulario, con el primario primero y a todo lo ancho. */
  .formbar{position:static;display:grid;grid-template-columns:1fr 1fr;background:none;padding-bottom:0}
  .formbar .state{grid-column:1/-1;order:0}
  .formbar .btn{justify-content:center}
  .formbar .btn-primary{grid-column:1/-1;order:1}
  .formbar .btn-ghost{order:2}
  .formbar .btn-quiet{order:3}
  .section>header{flex-direction:column;align-items:flex-start;gap:4px}
  /* Objetivos táctiles de 44 px (§5.6). */
  .iconbtn,.railtoggle{width:44px;height:44px}
  .navitem{min-height:44px}
  .btn-sm{min-height:40px}
}

/* ================================================================ BRA
   Bakabia Retail Analytics: lo que la base no trae. Todo es propuesta;
   lo que funcione se reporta a la base con nombres ficticios.
   ================================================================ */

/* El atributo hidden tiene que ganar siempre. Sin esto, cualquier clase con display:flex
   (.note, .formbar, .group) lo ignora y el elemento sigue a la vista. En la base pasa con el
   aviso de borrador del diálogo «Tu sesión terminó»: se reporta. */
[hidden]{display:none !important}

/* --- logo del cliente en el encabezado (§5.1: en apps multi-cliente, el lugar es del
   cliente). En la app es la imagen que sube el operador; aquí, un monograma de relleno. */
.clientmark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--brand-light),var(--brand-darker));color:#fff;font:600 12px/1 var(--sans);letter-spacing:.02em}
/* --- marca del producto: «retana by Bakabia» (ProductMark.razor). Reemplaza a .menubrand-name.
   El ícono lleva sus colores fijos; el texto sigue al tema. La versión, si va, es un tercer renglón
   con el estilo de .menubrand-version. */
/* La marca es un enlace a bakabia.com: se acomoda igual que antes dentro de su contenedor. */
.pm{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;border-radius:10px}
.pm:hover .pm-name{color:var(--accent)}
.pm-name{font:600 20px/1 "Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:-.4px;color:var(--text)}
.pm-by{font:400 12.5px/1.2 "Segoe UI","Helvetica Neue",Arial,sans-serif;color:var(--muted);margin-top:3px}
.pm-by b{font-weight:600;color:var(--brand)}
/* En todos los modos oscuros (medio, muy oscuro y los extendidos) «Bakabia» va en el acento. */
html:not([data-theme="light"]) .pm-by b{color:var(--accent)}
.menubrand .menubrand-version{margin-top:5px}
/* En las pantallas sin sesión el ícono va a 32 px. */
.anon>header svg.pm-icon{width:32px;height:32px}
/* La regla del riel que esconde las etiquetas es global (U2): en las pantallas sin sesión no hay
   menú, así que la marca se ve completa aunque la preferencia guardada sea «riel». */
html[data-menu="rail"] .anon .navlabel{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}

/* Logo del cliente, cuando existe (Tenant.LogoUrl). Igual en claro y oscuro: la placa de color es
   parte del logo (el de CTV trae texto blanco sobre azul), así que no lleva filtros ni fondo. */
.clientlogo{height:40px;width:auto;display:block;border-radius:8px;flex:none}
/* El mismo corte en el que el nombre baja a 18 px (U6). Va aquí y no allá: este bloque está después
   en la hoja y, con la misma especificidad, la regla de 40 px le ganaría. */
@media (max-width: 1023.98px){ .clientlogo{height:32px} }
.brand .wordmark small{display:block;font:400 11px/1.3 var(--mono);color:var(--faint);letter-spacing:0;margin-top:2px}


/* --- barra arriba de la rejilla --- */
.capbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.capbar .grow{flex:1}
.capbar .filter{display:flex;align-items:center;gap:8px;width:min(240px,100%);padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface)}
.capbar .filter:focus-within{border-color:var(--brand-light)}
.capbar .filter svg{width:15px;height:15px;color:var(--faint);flex:none}
.capbar .filter input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text);font:400 13.5px var(--sans)}
.capbar .filter input::placeholder{color:var(--faint)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--faint);margin:12px 2px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid var(--line)}
.legend i.dirty{background:var(--brand-bg);border-color:color-mix(in srgb,var(--brand-light) 55%,transparent)}
.legend i.bad{background:var(--err-bg);border-color:var(--err)}
.legend i.empty{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}

/* --- la rejilla de captura: sucursales × meses ------------------------------------
   Es de los pocos lugares donde una rejilla sí toca (§5.2): se comparan columnas.
   La tarjeta es el contenedor con scroll, para que el encabezado y la columna de
   sucursal se queden pegados en los dos sentidos. En Blazor: RadzenDataGrid con
   edición en celda, o marcado propio si Radzen no alcanza (a decidir en la app). */
/* La captura usa todo el ancho: doce meses no caben en la columna de lectura de 1180 px. */
.main.wide{max-width:none}
.gridwrap{overflow:auto;max-height:min(66vh,760px);padding:0;overscroll-behavior:contain}
.capgrid{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
.capgrid th,.capgrid td{padding:0;border-bottom:1px solid var(--line-soft);background:var(--surface);white-space:nowrap}
.capgrid thead th{position:sticky;top:0;z-index:2;padding:12px 10px 10px;text-align:right;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.capgrid thead th.miss{color:var(--warn)}
.capgrid .loc{position:sticky;left:0;z-index:1;text-align:left;min-width:200px;padding:6px 8px 6px 16px;border-right:1px solid var(--line-soft)}
.capgrid thead .loc{z-index:3;padding-left:16px}
.capgrid tbody th{font-weight:400}
.capgrid .loc .locin{display:flex;align-items:center;gap:10px}
.capgrid .loc .code{font:500 12px/1 var(--mono);color:var(--accent);min-width:34px}
.capgrid .loc .nm{overflow:hidden;text-overflow:ellipsis;max-width:170px;font-size:13.5px}
.capgrid .loc .hist{margin-left:auto;opacity:0;transition:opacity .15s}
.capgrid tr:hover .loc .hist,.capgrid .loc .hist:focus-visible{opacity:1}
.capgrid .hist{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--faint)}
.capgrid .hist:hover{background:var(--surface-2);color:var(--text)}
.capgrid .hist svg{width:15px;height:15px}
.capgrid td.c{padding:3px 3px}
.capgrid tbody tr:hover td{background:var(--surface-2)}
.capgrid .tot{padding:6px 14px 6px 10px;text-align:right;font-weight:500;color:var(--muted);background:var(--surface-2);min-width:104px}
.capgrid tfoot td{position:sticky;bottom:0;z-index:2;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:0;
  padding:10px;text-align:right;font-weight:500;color:var(--muted)}
.capgrid tfoot .loc{z-index:3;background:var(--surface-2)}

.cell{width:100%;min-width:80px;padding:7px 6px;border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--text);font:400 13.5px var(--mono);text-align:right;font-variant-numeric:tabular-nums;outline:none;
  transition:border-color .12s,background .12s,box-shadow .12s}
.cell::placeholder{color:var(--faint)}
.cell:hover{border-color:var(--line)}
.cell:focus{border-color:var(--brand-light);box-shadow:0 0 0 3px var(--brand-bg);background:var(--surface)}
td.empty .cell{background:var(--warn-bg)}
td.dirty .cell{background:var(--brand-bg);font-weight:500}
td.bad .cell{border-color:var(--err);background:var(--err-bg)}
td.bad .cell:focus{box-shadow:0 0 0 3px var(--err-bg)}
.cell[readonly]{cursor:default}
.cell[readonly]:hover{border-color:transparent}

/* Mensaje del error de la celda que tiene el foco: debajo de la rejilla, no en un globo. */
.cellmsg{display:flex;align-items:center;gap:8px;min-height:22px;margin:10px 2px 0;font-size:12.5px;color:var(--err)}
.cellmsg svg{width:14px;height:14px;flex:none}
.cellmsg:empty{display:none}

/* --- historial de una sucursal: diálogo ancho con línea de tiempo --- */
.modal.wide{width:min(620px,94vw);max-height:84vh;overflow:auto}
.modal .timeline{margin-top:14px}
.modal .ev .when{width:120px}
.chg{font:400 13px var(--mono);color:var(--muted)}
.chg b{font-weight:500;color:var(--text)}
.chg s{color:var(--faint)}

/* --- usuarios: pastillas de rol en la lista --- */
.roles{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}

/* --- pantallas angostas: la rejilla se hace densa (§5.5) y en teléfono se consulta,
   con su propio scroll horizontal; la página nunca se sale de lado. */
@media (max-width: 1023.98px){
  .capgrid,.cell{font-size:12.5px}
  .cell{min-width:82px;padding:6px 6px}
  .capgrid .loc{min-width:170px}
  .capgrid .loc .nm{max-width:110px}
}
@media (max-width: 619.98px){
  .capgrid .loc{min-width:92px;padding-left:10px}
  .capgrid .loc .nm{display:none}
  .capgrid .loc .hist{opacity:1}
  .gridwrap{max-height:62vh}
  .capbar .filter{width:100%}
}

/* ================================================================ solo de la app
   Lo que el prototipo no necesita porque no es Blazor. */

/* FocusOnNavigate (Routes.razor) le da el foco al h1 al cambiar de pantalla, para que el lector
   de pantalla lo anuncie (§5.8). Es un foco programático: sin esto el título sale con el anillo
   de foco como si fuera un control. */
h1[tabindex="-1"]:focus{outline:none}

/* La captura usa todo el ancho (bloque BRA, .main.wide del prototipo). En la app la página no le
   pone clase al contenedor del layout: lo dice su propia vista. */
.main:has(.view.wide){max-width:none}

/* Alto de los controles de Radzen (BASE-FEEDBACK R29). De fábrica miden 36 px
   (--rz-input-size-md) y el .input del prototipo 40: se igualan, con el mismo relleno a los lados.
   En teléfono suben a 44 px, el objetivo táctil de §5.6, y el .input con ellos. Radzen declara estas
   variables en :root; html[data-theme] pesa más. */
html[data-theme]{--rz-input-size-md:2.5rem;--rz-input-padding-inline-md:.875rem}
@media (max-width: 619.98px){
  html[data-theme]{--rz-input-size-md:2.75rem}
  .input{min-height:44px}
}

/* Pestañas de página (Shared/PageTabs.razor): una línea bajo el encabezado, la activa subrayada
   con la marca. Cada pestaña es un enlace a su dirección. En teléfono, 44 px de toque. */
.pagetabs{display:flex;gap:4px;margin:-6px 0 22px;border-bottom:1px solid var(--line);overflow-x:auto}
.pagetab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;
  color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.pagetab svg{width:16px;height:16px}
.pagetab:hover{color:var(--text)}
.pagetab.on{color:var(--text);border-bottom-color:var(--brand-light)}
@media (max-width: 619.98px){ .pagetab{min-height:44px} }

/* Tarjetas del Inicio que llevan a su sección: el mosaico entero es el enlace. */
.tilelink{display:block;color:inherit;text-decoration:none;border-radius:var(--r-card)}
.tilelink .tile{height:100%;transition:border-color .15s,background .15s}
.tilelink:hover .tile{border-color:var(--brand-light)}
.tilelink .go{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:12.5px;color:var(--accent)}
.tilelink .go svg{width:13px;height:13px}

/* Acciones al pie de un diálogo de Radzen, como .modal .acts del prototipo. */
.dlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

/* Un botón que se ve como enlace («¿No es tu cuenta?»): es un POST, no un enlace. */
.linkbtn{padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer}
.linkbtn:hover{color:var(--text)}

/* Entrada de prueba local (solo Debug): empresa arriba y la tabla de permisos con un botón por rol. */
.anon .box:has(.devlogin){width:min(940px,calc(100% - 32px));text-align:left}
.devlogin>svg{width:44px;height:44px;color:var(--faint);stroke-width:1.3;margin-bottom:10px}
.devlogin>p{margin-bottom:8px}
.anon .box form{margin:0}
/* Mismo peso que «.anon .box form{margin:0}» para que el margen sí aplique. */
.anon .box form.devcompany{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 28px}
.devcompany label{font-size:13.5px;font-weight:500}
.devcompany .select{width:min(320px,100%)}
.devnote{margin-bottom:14px}
/* Cada rol es un botón: se nota que se entra con un clic. */
.devrole{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);text-align:left;transition:border-color .15s,background .15s}
.devrole:hover{border-color:var(--brand-light);background:var(--brand-bg)}
.devrole-name{display:flex;align-items:center;gap:6px;font:600 14px/1.2 var(--sans);color:var(--text)}
.devrole-name svg{width:14px;height:14px;color:var(--accent)}
.anon .box form.devother{margin-top:12px}
.devpending{margin-top:22px}
.devpending h2{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.anon .box .devpending form{display:inline-block;margin:0 8px 8px 0}

/* Qué puede hacer cada rol (Shared/RoleMatrix.razor): en Usuarios y roles y en la entrada de
   prueba. Sale de Permissions.Matrix, así que nunca se desfasa de lo que la app hace. */
.rolematrix{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
/* Columnas fijas: la de pantalla un poco más ancha y las cinco de rol iguales. */
.rolematrix table{width:100%;min-width:720px;table-layout:fixed;border-collapse:collapse;font-size:13.5px;line-height:1.4}
.rolematrix th:first-child{width:19%}
.rolematrix thead th{padding:8px;vertical-align:bottom;background:var(--surface-2);border-bottom:1px solid var(--line);text-align:left}
.rolematrix thead th:first-child{padding:12px 14px 12px;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.rolematrix .rm-role{display:block;padding:4px 6px;font:600 14px/1.2 var(--sans);color:var(--text)}
.rolematrix td,.rolematrix tbody th{padding:10px 14px;border-top:1px solid var(--line-soft);vertical-align:top;text-align:left}
.rolematrix tbody tr:first-child :is(td,th){border-top:0}
.rolematrix .rm-screen{font-weight:500;white-space:nowrap}
.rolematrix td.rm-no{color:var(--faint)}

/* Usuarios y roles: la casilla de cada rol lleva su descripción (RadzenCheckBoxList con plantilla). */
.rolechecks .rz-checkbox-list-item,.rolechecks .rz-checkbox-list > div{align-items:flex-start}
.rolechecks .rz-chkbox{margin-top:2px}
.rolepick{display:block;font-size:14px;line-height:1.35}
.rolepick small{display:block;margin-top:2px;font-size:12.5px;color:var(--faint)}
/* Solo lectura (§5.7): el dato se lee completo, sin caja. */
.field .readonly{font-size:14.5px;overflow-wrap:anywhere}

/* Configuración (solo Superadmin, C30 y C31): una tarjeta por tema, con el ancho de un formulario. */
.settings .setcard{max-width:720px;padding:22px 24px;margin-bottom:20px}
.settings .setcard h2{font-size:17px;font-weight:500;margin:0 0 4px}
.settings .setcard > p.muted{font-size:13.5px;margin:0 0 18px}
.methodpick .rz-radio-button-list-item,.methodpick .rz-radio-button-list > div{align-items:flex-start}
.methodpick .rz-radiobutton{margin-top:2px}
.note.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.note.ok svg{color:var(--ok)}
.lockedout{margin:6px 0 0;padding-left:18px;font-size:13px}
.switchrow{display:flex;align-items:center;gap:10px}
.switchlabel{font-size:14px;font-weight:500}
@media (max-width:640px){.settings .setcard{padding:18px 16px}}

/* ================================================================ reportes de auditoría
   Un informe que lee Dirección: se lee como documento, no como pantalla de captura. Texto a
   ancho de lectura, títulos en serifa, cifras alineadas y en mono, y un índice al lado.
   Aún no está en el prototipo; si funciona, se lleva al prototipo y a la base. */
.reportrow{color:inherit}
/* El informe se lee más ancho que las pantallas de trabajo: sus tablas tienen muchas columnas. */
.main:has(.report-view){max-width:1360px}
.reportrow:hover .name{color:var(--accent)}
.report-view .pagehead{align-items:flex-start}
.report-kind{margin-bottom:10px;color:var(--accent)}
.report-view h1{max-width:30ch}
.report-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.report-meta span{color:var(--line)}
/* Nota de la IA al pie del reporte: texto tenue bajo una línea, sin fondo; también en el PDF. */
.report-ainote{margin-top:36px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13px;line-height:1.55;color:var(--faint)}

.report-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:40px;align-items:start}
.report-toc{position:sticky;top:8px;padding:4px 0 0 18px;border-left:1px solid var(--line-soft)}
.report-toc .eyebrow{margin-bottom:10px}
.report-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.report-toc a{display:block;padding:5px 0;font-size:13px;line-height:1.4;color:var(--muted)}
.report-toc a:hover{color:var(--text)}

.report{font-size:15px;line-height:1.65;min-width:0}
.report p,.report li{max-width:78ch}
.report p{margin:10px 0}
.report ul,.report ol{margin:10px 0;padding-left:22px}
.report li+li{margin-top:5px}
.report li>ul{margin:5px 0 0}
.report strong{font-weight:600;color:var(--text)}
.report em{color:var(--muted)}
.report code{font:500 12.5px var(--mono);padding:1px 6px;border-radius:6px;background:var(--surface-2);color:var(--text);white-space:nowrap}
.report h3{font:600 16.5px/1.35 var(--sans);margin:30px 0 8px;letter-spacing:-.005em}
.report h4{font:600 14.5px/1.4 var(--sans);margin:24px 0 6px;color:var(--text)}
.report h3+p,.report h4+p,.report h3+ul,.report h4+ul{margin-top:6px}

/* El resumen ejecutivo va arriba, en tarjeta con la cinta de marca, como las cifras del tablero. */
.report-summary{position:relative;overflow:hidden;padding:24px 28px 18px}
.report-summary::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-lighter));opacity:.8}
.report-summary>h2{font-size:22px;margin-bottom:6px}
.report-summary ul{padding-left:20px}
.report-summary li{margin-top:8px}

.rsec{margin-top:44px;scroll-margin-top:16px}
.rsec>h2{padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
.report-summary{scroll-margin-top:16px}

/* Tablas: la tabla lleva su propio desplazamiento; la página nunca se sale de lado. */
.report .tablewrap{overflow-x:auto;margin:14px 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.report table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.report th{padding:11px 12px 9px;text-align:left;vertical-align:bottom;background:var(--surface-2);border-bottom:1px solid var(--line);
  font:500 10.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);min-width:64px}
.report td{padding:9px 12px;border-top:1px solid var(--line-soft);vertical-align:top}
.report tr:first-child td{border-top:0}
.report tbody tr:hover td{background:var(--surface-2)}
/* Las cifras no se parten; los encabezados sí, para que la tabla quepa. */
.report td.num,.report th.num{text-align:right}
.report td.num{white-space:nowrap}
.report td.num{font:400 13px var(--mono)}
.report td.num strong{font-weight:600}
/* Negativos: rojo tenue. En una conciliación un negativo no es un error: solo dice de qué lado va. */
.report td.neg{color:color-mix(in srgb,var(--err) 70%,var(--text))}
.report td strong{font-weight:600}

@media (max-width: 1199.98px){
  .report-layout{grid-template-columns:minmax(0,1fr)}
  .report-toc{display:none}
}
@media (max-width: 619.98px){
  .report-summary{padding:18px 16px 12px}
  .report{font-size:14.5px}
}

/* Imprimir o guardar PDF: hoja limpia, sin chrome, en claro aunque la app esté en oscuro. El
   layout de Radzen fija la altura a la ventana y desplaza adentro: sin esto se imprime una hoja. */
@media print{
  html[data-theme]{--ground:#fff;--ground-2:#fff;--surface:#fff;--surface-2:#F3F6F7;--surface-3:#EEF2F3;
    --line:#C9D6D8;--line-soft:#DEE7E8;--text:#0B1F23;--muted:#3A4F54;--faint:#51666B;--accent:#026C7F;--err:#A32E28;--shadow:none}
  html:root[data-theme] body{background:#fff}
  .rz-header,.rz-sidebar,.drawer-scrim,.noprint,.report-toc,.crumbs,#blazor-error-ui,.rz-notification{display:none !important}
  .rz-layout{display:block;height:auto;overflow:visible}
  html .rz-layout .rz-body{overflow:visible;transform:none;padding:0;margin:0}
  .main{padding:0;max-width:none}
  .view{animation:none}
  .report-layout{display:block}
  .report .tablewrap{overflow:visible;box-shadow:none;break-inside:avoid}
  .report-summary{box-shadow:none;break-inside:avoid}
  .rsec>h2,.report h3{break-after:avoid}
  a{color:inherit}
}

/* Entrar y elegir cliente (identidad, ronda 0). Los botones de camino, a todo lo ancho, con su
   explicación debajo; la casilla alineada a la izquierda, con su aviso. */
.anon .box .signin-failed{text-align:left;margin:0 0 14px}
.signin-paths{display:grid;gap:10px;margin-top:20px}
.signin-paths .btn{flex-direction:column;align-items:center;gap:2px;width:100%;min-height:52px;padding:9px 16px;height:auto}
.signin-paths .btn small{font-size:12.5px;font-weight:400;opacity:.8}
.signin-first{justify-self:center;background:none;border:0;padding:6px 4px;color:var(--accent);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.remember{display:flex;align-items:flex-start;gap:10px;margin-top:18px;text-align:left;font-size:14px;cursor:pointer}
.remember input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand)}
.remember small{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}
.anon .box p.signin-dev{margin-top:18px;font-size:13px}
.clientpick{display:grid;gap:8px;margin-top:20px}
.clientbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
.clientbtn:hover,.clientbtn:focus-visible{border-color:var(--brand-light);background:var(--brand-bg)}
.clientbtn[aria-current="true"]{border-color:var(--brand)}
.clientbtn img{height:32px;width:auto;max-width:120px;object-fit:contain}
.clientbtn .clientmark{flex:none}
.clientbtn .clientname{flex:1;font-weight:600;font-size:15px}
.clientbtn .clientname small{display:block;font-weight:400;font-size:12.5px;color:var(--faint)}
.clientbtn>svg{width:16px;height:16px;color:var(--accent)}
.usermenu a[role="menuitem"]{color:var(--text);text-decoration:none}