/* CRM_JPM · _shell.css · sistema de interfaz institucional
 * ---------------------------------------------------------------------------
 * Hoja UNICA del shell. Se sirve como archivo suelto (GET /ui/_shell.css);
 * no hay build, no hay preprocesador, no hay framework. Todo lo que una
 * pantalla necesita esta aqui y se consume por las clases publicadas en el
 * contrato. Quien escribe una pantalla NO define estilos propios.
 *
 * Orden del archivo:
 *   1. Tokens                    5. Estados e interaccion
 *   2. Reset y base tipografica  6. Responsive (drawer, split)
 *   3. Shell                     7. Movimiento reducido
 *   4. Componentes               8. Impresion
 * ------------------------------------------------------------------------- */

/* ===========================================================================
 * 1 · TOKENS
 * ======================================================================== */

:root{
  /* --- Baseline cerrado del contrato · literal, no se altera --- */

  /* Gradiente institucional */
  --grad-amarillo:#ECC545; --grad-naranja:#CC654B; --grad-morado:#510B44;
  --grad-jpm:linear-gradient(90deg,#ECC545 0%,#CC654B 55%,#510B44 100%);

  /* Tipografía */
  --font-display:Rubik,"Nunito Sans",Arial,sans-serif;
  --font-body:"Nunito Sans",Rubik,Arial,sans-serif;
  --font-mono:"SF Mono",Monaco,Consolas,monospace;

  /* Estados — nombres NEUTROS. Nunca se asocian a una escala de niveles. */
  --st-ok:#2f7d32;        --st-ok-bg:#EAF3DE;
  --st-warn:#B5731A;      --st-warn-bg:#FDF0E4;
  --st-alto:#973E48;      --st-alto-bg:#F8E4E2;
  --st-critico:#510B44;   --st-critico-bg:#F0E6EE;

  /* Neutros */
  --bg:#F5EDF3; --rule:#E3DCE1; --card:#FFFFFF; --gray:#444441;

  /* Slot de acento del shell */
  --current-context:#510B44;

  /* --- Ampliaciones propias de CRM_JPM (el baseline no las formaliza) --- */

  /* Tinta. Los tres niveles estan medidos contra --card y contra --bg:
   * --ink 15.4:1, --ink-2 8.1:1, --ink-3 5.9:1 sobre blanco. El gris
   * habitual de los paneles operativos (#9A8F98) da 3.8:1 y NO se usa:
   * texto secundario tambien tiene que cumplir AA. */
  --ink:#221A20;
  --ink-2:#4E434B;
  --ink-3:#6B606A;

  /* Tinta de los chips. Los colores de estado del baseline son correctos
   * como ACENTO (borde, barra, icono) pero dos de ellos no alcanzan 4.5:1
   * como TEXTO sobre su propio fondo claro (--st-ok da 4.48:1 y --st-warn
   * 3.45:1). Se deriva una tinta oscurecida SOLO para texto pequeno; el
   * color del baseline se conserva intacto para todo lo demas. */
  --chip-ok-ink:#256B29;
  --chip-warn-ink:#8A5310;
  --chip-alto-ink:#973E48;      /* 5.5:1 sobre su fondo · sirve sin retocar */
  --chip-critico-ink:#510B44;   /* 12.7:1 · sirve sin retocar */
  --chip-neutral-ink:#453E43;   --chip-neutral-bg:#EEEBEC;

  /* Informativo. El baseline no declara un azul; se anade aqui porque el
   * contrato exige .alert--info. 8.4:1 sobre su fondo. */
  --st-info:#0C447C;      --st-info-bg:#E6F1FB;

  /* Tinta sobre la topbar · ver el bloque 3 para el razonamiento */
  --topbar-ink-oscura:#2A0722;
  --topbar-ink-clara:#FFFFFF;
  --topbar-placa:#3E0733;

  /* Escala de espaciado · progresion 4/6/8/12/16/20/26/34 */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px;
  --sp-5:16px; --sp-6:20px; --sp-7:26px; --sp-8:34px;

  /* Radios */
  --r-xs:5px; --r-sm:7px; --r-md:9px; --r-lg:12px; --r-pill:999px;

  /* Sombras */
  --sh-1:0 1px 2px rgba(81,11,68,.08);
  --sh-2:0 2px 8px rgba(81,11,68,.14);
  --sh-3:0 14px 44px rgba(81,11,68,.28);

  /* Planos. Un unico eje declarado evita el z-index improvisado. */
  --z-base:1; --z-topbar:30; --z-scrim:35; --z-drawer:40;
  --z-modal:60; --z-toast:70;

  /* Duraciones */
  --dur-1:.12s; --dur-2:.18s; --dur-3:.26s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* Tipografia · densidad de panel operativo, no de sitio de marketing */
  --fs-2xs:10px; --fs-xs:10.5px; --fs-sm:11.5px; --fs-md:12.5px;
  --fs-base:13px; --fs-lg:15px; --fs-xl:21px; --fs-kpi:26px;
  --lh-tight:1.25; --lh-base:1.45;

  /* Metricas del shell */
  --topbar-h:48px;
  --sidebar-w:248px;
  --split-min:320px;

  /* Foco. Dos anillos: uno para superficies claras y otro para el
   * gradiente y los fondos oscuros. */
  /* `--rule` (#E3DCE1) da 1.35:1 sobre la tarjeta: sirve para separar
   * bloques, no para dibujar el limite de un control. WCAG 1.4.11 pide
   * 3:1 en el contorno de un componente de interfaz. */
  --rule-control:#8E8189;
  --focus:#510B44;
  --focus-inverso:#FFFFFF;
}

/* ===========================================================================
 * 2 · RESET MINIMO Y BASE TIPOGRAFICA
 * ======================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}

body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
}

h1,h2,h3,h4,.card__title,.page-header__title,.kpi__value,.empty__title{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-tight);
}

/* Datos tecnicos e identificadores: monoespaciado y cifras de ancho fijo,
 * para que un folio o un identificador se pueda comparar de un vistazo. */
.mono,code,kbd,samp{
  font-family:var(--font-mono);
  font-size:.94em;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

a{color:var(--current-context);}
a:hover{text-decoration:underline;}

button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
img,svg{max-width:100%;display:block;}
table{border-collapse:collapse;}
hr{border:0;border-top:1px solid var(--rule);margin:var(--sp-5) 0;}
[hidden]{display:none !important;}

/* ===========================================================================
 * 3 · SHELL
 * ======================================================================== */

.app{display:flex;flex-direction:column;min-height:100vh;}

/* Enlace de salto: invisible hasta que recibe foco. */
.skip-link{
  position:fixed;left:var(--sp-3);top:-100px;z-index:calc(var(--z-toast) + 1);
  background:var(--card);color:var(--current-context);
  border:2px solid var(--current-context);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-5);font-weight:700;font-size:var(--fs-md);
  text-decoration:none;transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{top:var(--sp-3);}

/* --- Topbar ---------------------------------------------------------------
 * El gradiente va de amarillo (izquierda) a morado (derecha). Ningun color
 * de texto pasa AA sobre las TRES paradas a la vez:
 *   blanco sobre #ECC545 -> 1.8:1   (inaceptable)
 *   blanco sobre #CC654B -> 3.8:1   (insuficiente)
 *   #2A0722 sobre #510B44 -> 1.1:1  (inaceptable)
 * La solucion tiene tres capas y ninguna toca el gradiente del baseline:
 *   a) Un velo direccional superpuesto: aclara el tramo izquierdo (donde va
 *      tinta oscura) y oscurece el tramo derecho (donde va tinta clara).
 *      El centro queda intacto, y ahi no se coloca texto: lo ocupa el
 *      __spacer.
 *   b) Zonas de tinta: la izquierda (menu + marca) usa #2A0722 -> 11:1 sobre
 *      el amarillo y 4.8:1 en el peor caso, ya sobre el naranja central.
 *      La derecha (identidad + salir) usa blanco.
 *   c) Placas solidas bajo los elementos de la derecha y bajo el boton de
 *      menu, para que el resultado no dependa del ancho de la ventana: sobre
 *      la placa el contraste es fijo (16.4:1) sea cual sea el punto del
 *      gradiente que quede debajo. */
.topbar{
  position:sticky;top:0;z-index:var(--z-topbar);
  flex:0 0 auto;
  display:flex;align-items:center;gap:var(--sp-4);
  height:var(--topbar-h);min-height:var(--topbar-h);
  padding:0 var(--sp-5);
  color:var(--topbar-ink-oscura);
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,0)  40%,
      rgba(42,7,34,0)      56%,
      rgba(42,7,34,.45)   100%),
    var(--grad-jpm);
  box-shadow:0 2px 8px rgba(81,11,68,.18);
}

.topbar__menu{
  display:none;                       /* solo existe por debajo del corte */
  align-items:center;justify-content:center;
  width:34px;height:30px;flex:0 0 auto;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(42,7,34,.28);
  color:var(--topbar-ink-oscura);
  font-size:15px;line-height:1;
}
.topbar__menu:hover{background:#fff;}

.topbar__brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0;}

/* Marca isotipica: cuadro solido con el morado institucional. No depende de
 * ningun archivo de imagen, porque no hay StaticFiles montado. */
/* Isotipo JPM oficial. Es un <img> del asset de WEB_JPM, no una forma
 * dibujada aqui: el gradiente institucional forma parte del lenguaje visual
 * del shell, pero NO es la marca y no la sustituye.
 *
 * Va sobre una placa blanca porque su propio degradado termina en amarillo
 * (#FFCF3D) y el extremo izquierdo de la topbar tambien es amarillo
 * (#ECC545): sin placa, la mitad inferior de la marca se disuelve en el
 * fondo. La placa protege el area de respeto; no altera el asset.
 *
 * `height:auto` y `object-fit:contain` garantizan que nunca se deforme,
 * pase lo que pase con el espacio disponible. */
.topbar__logo{
  width:26px;height:auto;aspect-ratio:1;flex:0 0 auto;
  object-fit:contain;
  padding:2px;
  border-radius:var(--r-xs);
  background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(42,7,34,.22);
}

.topbar__product{
  font-family:var(--font-display);
  font-size:14px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--topbar-ink-oscura);
}
.topbar__product b{font-weight:800;}

.topbar__spacer{flex:1 1 auto;min-width:var(--sp-5);}

.topbar__identity{
  display:flex;align-items:center;gap:var(--sp-3);min-width:0;
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-pill);
  background:var(--topbar-placa);
  color:var(--topbar-ink-clara);
}
.topbar__user{
  font-size:var(--fs-md);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch;
}
/* El rol es un chip claro sobre la placa oscura: contraste garantizado y
 * lectura de "etiqueta", no de "boton". */
.topbar__role{
  background:rgba(255,255,255,.94);
  color:var(--grad-morado);
  border:0;
  /* Un rol largo con `nowrap` y sin tope empuja la topbar hasta que el
   * documento entero gana scroll horizontal en 360px. El tope de
   * escritorio deja entrar entero el nombre de rol mas largo del catalogo
   * (`dg_direccion_general`, 20 caracteres): recortar un rol legitimo en
   * una pantalla ancha seria cambiar un defecto por otro. El recorte de
   * verdad se aplica solo donde falta sitio, en el bloque responsive. */
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;
}

.topbar__logout{
  flex:0 0 auto;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-sm);
  background:var(--topbar-placa);
  color:var(--topbar-ink-clara);
  border:1px solid rgba(255,255,255,.38);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.03em;
}
.topbar__logout:hover{background:#2A0722;border-color:rgba(255,255,255,.6);}

/* En la topbar el anillo de foco es claro: sobre gradiente y placas oscuras
 * el morado se pierde. */
.topbar__menu:focus-visible,
.topbar__logout:focus-visible{
  outline:2px solid var(--focus-inverso);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(42,7,34,.55);
}

/* --- Cuerpo: sidebar + main ---------------------------------------------- */

.shell{display:flex;align-items:flex-start;flex:1 1 auto;min-height:0;}

.sidebar{
  flex:0 0 var(--sidebar-w);width:var(--sidebar-w);
  position:sticky;top:var(--topbar-h);
  max-height:calc(100vh - var(--topbar-h));
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);
  border-right:1px solid var(--rule);
  padding:var(--sp-3) 0 var(--sp-8);
}

.sidebar__group{padding:var(--sp-1) 0;}
.sidebar__group + .sidebar__group{border-top:1px solid var(--rule);margin-top:var(--sp-1);}

/* La cabecera de grupo es un boton: pliega y despliega su lista. Es la
 * unica preferencia que el shell recuerda entre visitas. */
.sidebar__group-title{
  width:100%;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-display);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-align:left;
  color:var(--ink-3);
}
.sidebar__group-title:hover{background:var(--bg);color:var(--ink-2);}
.sidebar__group-title::after{
  content:"";margin-left:auto;flex:0 0 auto;
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform var(--dur-2) var(--ease);
}
.sidebar__group[data-plegado="si"] .sidebar__group-title::after{transform:rotate(-90deg);}
.sidebar__group[data-plegado="si"] > ul{display:none;}

.sidebar__item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-7);
  font-size:var(--fs-md);
  color:var(--ink-2);
  text-decoration:none;
  border-left:3px solid transparent;
}
.sidebar__item:hover{background:var(--bg);color:var(--ink);text-decoration:none;}
.sidebar__item--active{
  background:var(--bg);
  border-left-color:var(--current-context);
  color:var(--current-context);
  font-weight:700;
}

/* Velo del drawer. En escritorio nunca se muestra. */
.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(34,26,32,.48);
  border:0;
}

/* --- Main ---------------------------------------------------------------- */

/* min-width:0 es obligatorio: sin el, una tabla ancha empuja el flex item y
 * el layout se desborda en un portatil de 1280px. */
.main{
  flex:1 1 auto;min-width:0;
  padding:var(--sp-6) var(--sp-7) var(--sp-8);
}
.main:focus{outline:none;}
.main:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;}

.page-header{
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-4);
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
  border-bottom:2px solid var(--current-context);
}
.page-header__title{
  font-size:var(--fs-xl);color:var(--current-context);letter-spacing:.02em;
}
.page-header__meta{
  flex:1 1 auto;min-width:0;
  font-size:var(--fs-sm);color:var(--ink-3);
}
.page-header__actions{
  margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
}

.page-body{display:block;min-width:0;}

/* ===========================================================================
 * 4 · COMPONENTES
 * ======================================================================== */

/* --- Boton --------------------------------------------------------------- */

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:700;line-height:1.2;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease);
}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--current-context);color:#fff;}
.btn--primary:hover{background:#3D0832;}
.btn--secondary{background:var(--card);color:var(--current-context);border-color:var(--current-context);}
.btn--secondary:hover{background:var(--st-critico-bg);}
.btn--ghost{background:transparent;color:var(--ink-2);border-color:var(--rule);}
.btn--ghost:hover{background:var(--bg);color:var(--ink);}
.btn--danger{background:var(--st-alto);color:#fff;}
.btn--danger:hover{background:#7A2F38;}
.btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);}
.btn--block{display:flex;width:100%;}

.btn:active:not([disabled]){transform:translateY(1px);}

.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.48;cursor:not-allowed;pointer-events:none;
}

/* Boton ocupado: el rotulo se mantiene en su sitio (no cambia el ancho) y
 * se sustituye por el giro. */
.btn[aria-busy="true"]{color:transparent !important;pointer-events:none;}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;top:50%;left:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;border-radius:50%;
  animation:shell-giro .7s linear infinite;
}
.btn--secondary[aria-busy="true"]::after,
.btn--ghost[aria-busy="true"]::after{
  border-color:rgba(81,11,68,.28);border-top-color:var(--current-context);
}

@keyframes shell-giro{to{transform:rotate(360deg);}}

/* --- Formulario ---------------------------------------------------------- */

.field{display:block;margin-bottom:var(--sp-4);min-width:0;}
.field__label{
  display:block;margin-bottom:var(--sp-2);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);
}
.field__hint{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-3);}
.field__error{
  margin-top:var(--sp-1);font-size:var(--fs-sm);font-weight:700;
  color:var(--chip-alto-ink);
}

.input,.select,.textarea{
  display:block;width:100%;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--rule-control);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);
  font-size:var(--fs-md);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#A99FA6;}
.input:hover,.select:hover,.textarea:hover{border-color:#C9BFC7;}
.textarea{min-height:76px;resize:vertical;line-height:var(--lh-base);}
.select{
  appearance:none;padding-right:var(--sp-8);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.input[disabled],.select[disabled],.textarea[disabled]{
  background:#F6F4F5;color:var(--ink-3);cursor:not-allowed;
}

/* Invalidez: la clase la pone quien renderiza; aria-invalid la pone quien
 * valida. Ambas pintan igual, para que nunca haya un campo rojo sin
 * anuncio ni un anuncio sin senal visible. */
.input--invalid,
[aria-invalid="true"]{
  border-color:var(--st-alto) !important;
  box-shadow:0 0 0 3px rgba(151,62,72,.14);
}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-5);}
/* Un campo que ocupa la fila entera se marca con el atributo, no con una
 * clase nueva: el catalogo de clases es cerrado. */
.form-grid > [data-ancho="completo"]{grid-column:1 / -1;}

/* --- Tarjeta ------------------------------------------------------------- */

.card{
  background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  margin-bottom:var(--sp-5);min-width:0;
}
.card__header{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--rule);
}
.card__title{
  font-size:var(--fs-base);color:var(--current-context);letter-spacing:.02em;
}
.card__body{padding:var(--sp-5);}
.card__footer{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--rule);background:#FCFAFC;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* --- KPI ----------------------------------------------------------------- */

.kpi-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-5);
}
.kpi{
  background:var(--card);
  border:1px solid var(--rule);border-top:3px solid var(--current-context);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);min-width:0;
}
/* Numero grande primero, etiqueta pequena despues: el ojo lee la cifra y
 * solo despues busca de que es. */
.kpi__value{
  font-size:var(--fs-kpi);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.kpi__label{
  margin-top:var(--sp-1);
  font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.02em;
  line-height:1.3;
}

/* --- Chip ---------------------------------------------------------------- */

.chip{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:2px var(--sp-3);
  border-radius:var(--r-pill);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;
  white-space:nowrap;vertical-align:middle;
  background:var(--chip-neutral-bg);color:var(--chip-neutral-ink);
}
.chip--ok{background:var(--st-ok-bg);color:var(--chip-ok-ink);}
.chip--warn{background:var(--st-warn-bg);color:var(--chip-warn-ink);}
.chip--alto{background:var(--st-alto-bg);color:var(--chip-alto-ink);}
.chip--critico{background:var(--st-critico-bg);color:var(--chip-critico-ink);}
.chip--neutral{background:var(--chip-neutral-bg);color:var(--chip-neutral-ink);}

/* --- Alerta -------------------------------------------------------------- */

.alert{
  border:1px solid var(--rule);border-left-width:4px;
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-4);
  font-size:var(--fs-md);
}
.alert__title{
  font-family:var(--font-display);
  font-size:var(--fs-base);font-weight:700;margin-bottom:var(--sp-1);
}
.alert__body{color:var(--ink);line-height:var(--lh-base);}
.alert__body p + p{margin-top:var(--sp-2);}

.alert--ok{background:var(--st-ok-bg);border-color:var(--st-ok);}
.alert--ok .alert__title{color:var(--chip-ok-ink);}
.alert--warn{background:var(--st-warn-bg);border-color:var(--st-warn);}
.alert--warn .alert__title{color:var(--chip-warn-ink);}
.alert--alto{background:var(--st-alto-bg);border-color:var(--st-alto);}
.alert--alto .alert__title{color:var(--chip-alto-ink);}
.alert--critico{background:var(--st-critico-bg);border-color:var(--st-critico);}
.alert--critico .alert__title{color:var(--chip-critico-ink);}
.alert--info{background:var(--st-info-bg);border-color:var(--st-info);}
.alert--info .alert__title{color:var(--st-info);}

/* --- Tabla --------------------------------------------------------------- */

/* El contenedor con scroll propio es lo que impide que una tabla ancha
 * rompa el layout. Nunca se pone una .table suelta en la pagina. */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--card);
  -webkit-overflow-scrolling:touch;
}
.table{width:100%;font-size:var(--fs-md);background:var(--card);}
.table th{
  position:sticky;top:0;z-index:var(--z-base);
  background:var(--current-context);color:#fff;
  font-family:var(--font-display);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;
  text-align:left;white-space:nowrap;
  padding:var(--sp-3) var(--sp-4);
}
.table td{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--rule);
  vertical-align:top;line-height:1.4;
}
.table tbody tr:hover td{background:#FBF8FB;}
.table--dense th{padding:var(--sp-2) var(--sp-3);}
.table--dense td{padding:var(--sp-2) var(--sp-3);font-size:12px;}

/* Cifras: alineadas a la derecha y con anchos de digito iguales, para que
 * las columnas se comparen verticalmente sin leerlas. */
.table__num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.table th.table__num{text-align:right;}

/* --- Modal --------------------------------------------------------------- */

.modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:flex-start;justify-content:center;
  padding:6vh var(--sp-5) var(--sp-5);
  background:rgba(34,26,32,.55);
  overflow-y:auto;
}
.modal__dialog{
  width:100%;max-width:620px;
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  display:flex;flex-direction:column;max-height:88vh;min-width:0;
}
.modal__dialog:focus{outline:none;}
.modal__header{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--rule);
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;
  color:var(--current-context);
}
.modal__body{padding:var(--sp-5);overflow-y:auto;min-height:0;}
.modal__footer{
  display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--rule);background:#FCFAFC;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
/* Con un modal abierto la pagina de fondo no se desplaza. */
body[data-modal-abierto="si"]{overflow:hidden;}

/* --- Pestanas ------------------------------------------------------------ */

.tabs{
  display:flex;flex-wrap:wrap;gap:2px;
  border-bottom:1px solid var(--rule);margin-bottom:var(--sp-5);
}
.tab{
  padding:var(--sp-3) var(--sp-5);
  font-size:var(--fs-md);font-weight:600;color:var(--ink-3);
  border-bottom:2px solid transparent;
  border-radius:var(--r-xs) var(--r-xs) 0 0;
  margin-bottom:-1px;
}
.tab:hover{color:var(--ink);background:var(--bg);}
.tab--active{
  color:var(--current-context);
  border-bottom-color:var(--current-context);
  background:var(--card);
}
.tab[aria-selected="true"]{
  color:var(--current-context);
  border-bottom-color:var(--current-context);
}

/* --- Paginacion ----------------------------------------------------------
 * El backend de la bandeja solo acepta `limite`: no hay offset ni cursor.
 * Este control NO finge paginas. Sirve para declarar el corte y ofrecer
 * ampliarlo. */
.pager{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.pager__btn{
  padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:700;
}
.pager__btn:hover{background:var(--bg);color:var(--ink);}
.pager__btn[disabled]{opacity:.48;cursor:not-allowed;pointer-events:none;}
.pager__status{font-size:var(--fs-sm);color:var(--ink-3);}

/* --- Estado vacio -------------------------------------------------------- */

.empty{
  text-align:center;
  padding:var(--sp-8) var(--sp-5);
  border:1px dashed var(--rule);border-radius:var(--r-lg);
  background:var(--card);color:var(--ink-3);
}
.empty__title{font-size:var(--fs-lg);color:var(--ink-2);margin-bottom:var(--sp-2);}
.empty__text{font-size:var(--fs-md);max-width:52ch;margin:0 auto;line-height:var(--lh-base);}
.empty__action{margin-top:var(--sp-5);display:flex;justify-content:center;gap:var(--sp-3);}

/* --- Toast --------------------------------------------------------------- */

.toast-stack{
  position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--sp-3);
  width:min(380px,calc(100vw - 2 * var(--sp-5)));
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--rule);border-left-width:4px;border-radius:var(--r-md);
  background:var(--card);box-shadow:var(--sh-2);
  font-size:var(--fs-md);color:var(--ink);
  animation:shell-toast-entra var(--dur-3) var(--ease);
}
.toast--ok{border-left-color:var(--st-ok);background:var(--st-ok-bg);}
.toast--error{border-left-color:var(--st-alto);background:var(--st-alto-bg);}
.toast__cerrar{
  margin-left:auto;flex:0 0 auto;
  color:var(--ink-3);font-size:15px;line-height:1;padding:0 var(--sp-1);
  min-width:24px;min-height:24px;
}
.toast__cerrar:hover{color:var(--ink);}
@keyframes shell-toast-entra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* --- Maestro / detalle ---------------------------------------------------
 * Dos columnas solo cuando hay sitio de verdad. El umbral es 1100px y no el
 * corte del shell (860px): a 900px caben dos columnas en teoria, pero la
 * lista queda por debajo de su ancho util y la tabla se vuelve ilegible. */
.split{display:grid;grid-template-columns:1fr;gap:var(--sp-5);align-items:start;}
.split__list,.split__detail{min-width:0;}
@media (min-width:1100px){
  .split{grid-template-columns:minmax(var(--split-min),38%) minmax(0,1fr);}
  /* El detalle acompana al desplazamiento de una lista larga. */
  .split__detail{position:sticky;top:calc(var(--topbar-h) + var(--sp-5));}
}

/* --- Linea de tiempo ----------------------------------------------------- */

.timeline{position:relative;padding-left:var(--sp-6);}
.timeline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;
  width:2px;background:var(--rule);
}
.timeline__item{position:relative;padding-bottom:var(--sp-5);min-width:0;}
.timeline__item::before{
  content:"";position:absolute;left:calc(-1 * var(--sp-6) + 1px);top:5px;
  width:9px;height:9px;border-radius:50%;
  background:var(--current-context);
  box-shadow:0 0 0 2px var(--card);
}
.timeline__when{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.timeline__what{font-size:var(--fs-md);color:var(--ink);line-height:var(--lh-base);}
.timeline__who{font-size:var(--fs-sm);color:var(--ink-2);}

/* --- Utilidades ---------------------------------------------------------- */

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.skeleton{
  display:block;min-height:12px;border-radius:var(--r-xs);
  background:linear-gradient(90deg,#EFEAEE 25%,#F7F3F6 37%,#EFEAEE 63%);
  background-size:400% 100%;
  animation:shell-skeleton 1.4s ease-in-out infinite;
}
@keyframes shell-skeleton{from{background-position:100% 50%;}to{background-position:0 50%;}}

.spinner{
  display:inline-block;width:15px;height:15px;vertical-align:-2px;
  border:2px solid rgba(81,11,68,.22);border-top-color:var(--current-context);
  border-radius:50%;
  animation:shell-giro .7s linear infinite;
}

.stack{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);min-width:0;}
.muted{color:var(--ink-3);}

/* ===========================================================================
 * 5 · ESTADOS E INTERACCION
 * ======================================================================== */

/* Foco visible en TODO lo interactivo. Se usa :focus-visible para no
 * castigar al raton, pero no se elimina el foco: si el navegador no
 * distingue, el anillo aparece igual. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--current-context);
  box-shadow:0 0 0 3px rgba(81,11,68,.14);
  outline-offset:0;
}
/* Sobre superficies oscuras el anillo morado desaparece: se invierte.
 *
 * Solo vale donde el anillo cae SOBRE la superficie oscura. En un boton
 * primario o de peligro no es el caso: el boton es oscuro, pero el anillo
 * se dibuja FUERA de el, sobre la pagina clara, y un anillo blanco sobre
 * #F5EDF3 da 1.06:1 -- desaparece justo en los dos botones que ejecutan la
 * accion mas importante de cada pantalla. */
.table th a:focus-visible,
.table th button:focus-visible{
  outline-color:var(--focus-inverso);
  box-shadow:0 0 0 4px rgba(81,11,68,.45);
}
/* El boton oscuro lleva anillo oscuro por fuera -- que es donde se ve -- y
 * un filo claro por dentro, para que tambien se lea contra su propio
 * relleno. Doble borde: uno de los dos contrasta siempre. */
.btn--primary:focus-visible,
.btn--danger:focus-visible{
  outline-color:var(--focus);
  box-shadow:inset 0 0 0 2px var(--focus-inverso);
}

/* Cualquier region que declare estar cargando baja su opacidad y deja de
 * aceptar clics: lo que se ve es lo de antes, y no se puede tocar. */
[aria-busy="true"]:not(.btn){cursor:progress;}
.card[aria-busy="true"],
.table-wrap[aria-busy="true"],
.page-body[aria-busy="true"]{opacity:.6;pointer-events:none;}

/* ===========================================================================
 * 6 · RESPONSIVE · corte unico en 860px
 * ======================================================================== */

@media (max-width:860px){
  .topbar{padding:0 var(--sp-4);gap:var(--sp-3);}
  .topbar__menu{display:inline-flex;}
  .topbar__user{max-width:14ch;}
  /* Aqui si falta sitio de verdad: el rol cede antes que el nombre. */
  .topbar__role{max-width:12ch;}

  /* La sidebar sale del flujo y se convierte en cajon. El estado lo lleva
   * el atributo data-abierto que pone _shell.js, no una clase de layout. */
  .sidebar{
    position:fixed;left:0;top:var(--topbar-h);bottom:0;
    z-index:var(--z-drawer);
    max-height:none;height:calc(100vh - var(--topbar-h));
    transform:translateX(-100%);
    /* `transform` por si solo NO saca el cajon del orden de tabulacion ni
     * del arbol de accesibilidad: sus enlaces siguen recibiendo el foco a
     * 248px fuera de la pantalla, y quien navega con teclado o lector
     * recorre una navegacion que no puede ver. `visibility` si lo saca, y
     * se retrasa hasta el final de la transicion para no cortar la
     * animacion de cierre. */
    visibility:hidden;
    transition:transform var(--dur-3) var(--ease),
               visibility 0s linear var(--dur-3);
    box-shadow:6px 0 24px rgba(34,26,32,.22);
  }
  .sidebar[data-abierto="si"]{
    transform:translateX(0);
    visibility:visible;
    transition:transform var(--dur-3) var(--ease), visibility 0s;
  }

  .main{padding:var(--sp-5) var(--sp-5) var(--sp-8);}
  .page-header{align-items:flex-start;flex-direction:column;gap:var(--sp-2);}
  .page-header__actions{margin-left:0;width:100%;}
  .form-grid{grid-template-columns:minmax(0,1fr);}
  .kpi-row{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .modal{padding:var(--sp-5) var(--sp-3);}
  .toast-stack{left:var(--sp-3);right:var(--sp-3);width:auto;}
}

/* Por encima del corte el cajon no existe: ni transformado, ni con velo. */
@media (min-width:861px){
  .scrim{display:none;}
}

/* ===========================================================================
 * 7 · MOVIMIENTO REDUCIDO
 * ======================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* El cajon sigue funcionando: aparece y desaparece, sin deslizarse. */
  .sidebar{transition:none !important;}
  .btn:active:not([disabled]){transform:none;}
  .skeleton{background:#EFEAEE;}
}

/* ===========================================================================
 * 8 · IMPRESION · la ficha en papel
 * ======================================================================== */

@media print{
  @page{margin:14mm;}

  body,.app{background:#fff !important;color:#000 !important;}

  /* Fuera todo lo que es navegacion o accion: en papel no se pulsa nada. */
  .topbar,.sidebar,.scrim,.skip-link,
  .page-header__actions,.toast-stack,.tabs,.pager,
  .btn,.empty__action{display:none !important;}

  .shell{display:block;}
  .main{padding:0;}

  .card,.table-wrap,.kpi,.alert,.empty{
    border:1px solid #000 !important;
    box-shadow:none !important;
    background:#fff !important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .card__footer,.modal__footer{background:#fff !important;}

  .page-header{border-bottom:2px solid #000 !important;}
  .page-header__title,.card__title,.kpi__value,.kpi__label,
  .alert__title,.muted,a{color:#000 !important;}
  a[href]::after{content:"";}          /* sin URLs impresas: ruido inutil */

  .table th{
    background:#fff !important;color:#000 !important;
    border-bottom:1.5px solid #000 !important;position:static;
  }
  .table td{border-top:1px solid #666 !important;}
  .table-wrap{overflow:visible !important;}
  thead{display:table-header-group;}   /* la cabecera se repite por pagina */
  tr{break-inside:avoid;page-break-inside:avoid;}

  /* Los chips pierden el color de fondo: se imprimen como etiqueta con
   * marco, para que sigan siendo distinguibles en blanco y negro. */
  .chip{
    background:#fff !important;color:#000 !important;
    border:1px solid #000 !important;
  }

  .split{grid-template-columns:1fr !important;}
  .split__detail{position:static !important;}
  .modal{position:static;background:none;padding:0;overflow:visible;}
  .modal__dialog{max-width:none;max-height:none;box-shadow:none;}
}

/* ===========================================================================
 * 9 · CONTROL Y SERVICE WORKSPACE · ampliacion
 * ---------------------------------------------------------------------------
 * Anadido al FINAL de la hoja, sin tocar una sola regla anterior. Resuelve
 * lo que el sistema no cubria y que dos pantallas nuevas necesitan de
 * verdad: el aviso permanente de vista simulada, la declaracion de efecto
 * de un control, la caja de credencial de una sola vez y el selector de
 * modo del Service Workspace.
 *
 * Ninguna de estas clases redefine un componente existente. Todas se
 * apoyan en los tokens ya declarados en el bloque 1.
 * ======================================================================== */

/* --- Lista de definiciones densa · usada por las dos pantallas nuevas --- */
.def-list{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-1) var(--sp-5);margin:0;}
.def-list dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;color:var(--ink-3);align-self:baseline;}
.def-list dd{margin:0;min-width:0;overflow-wrap:anywhere;}

/* ---------------------------------------------------------------------------
 * AVISO DE VISTA SIMULADA
 *
 * Requisito duro: NO puede confundirse con la sesion real y NO puede
 * depender del color. Por eso lleva, a la vez, cuatro senales
 * independientes:
 *
 *   1. texto explicito -- "VISTA SIMULADA" y "No estas operando como este
 *      usuario" -- que es lo unico que un lector de pantalla anuncia;
 *   2. una marca con icono y trama diagonal, que se distingue en escala de
 *      grises y sobrevive a la impresion en blanco y negro;
 *   3. un filo izquierdo grueso mas un borde discontinuo, que es forma y no
 *      color;
 *   4. posicion fija bajo la topbar: acompana al desplazamiento y no se
 *      pierde al bajar por un listado largo.
 *
 * El contenedor vive dentro de una region `role="status"` que la pantalla
 * mantiene SIEMPRE en el arbol: asi el cambio se anuncia al aplicarse.
 * ------------------------------------------------------------------------ */
.sim-banner{
  position:sticky;top:var(--topbar-h);z-index:var(--z-topbar);
  display:flex;gap:var(--sp-4);align-items:flex-start;
  margin:0 0 var(--sp-5);padding:var(--sp-4) var(--sp-5);
  background:var(--st-warn-bg);color:var(--ink);
  border:2px dashed var(--st-warn);
  border-left:10px solid var(--st-warn);
  border-radius:var(--r-md);
  box-shadow:var(--sh-2);
}
.sim-banner__marca{
  flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;
  border:2px solid var(--st-warn);
  background:repeating-linear-gradient(45deg,
    #FFFFFF 0 5px, var(--st-warn-bg) 5px 10px);
}
.sim-banner__cuerpo{min-width:0;flex:1 1 auto;}
.sim-banner__titulo{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-lg);line-height:var(--lh-tight);
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--chip-warn-ink);
}
.sim-banner__real{margin-top:var(--sp-1);font-size:var(--fs-md);color:var(--ink-2);}
.sim-banner__nota{margin-top:var(--sp-2);font-weight:700;color:var(--ink);}
.sim-banner__acciones{flex:0 0 auto;display:flex;gap:var(--sp-2);align-items:flex-start;}
@media (max-width:640px){
  .sim-banner{flex-wrap:wrap;}
  .sim-banner__acciones{width:100%;}
}

/* ---------------------------------------------------------------------------
 * DECLARACION DE EFECTO
 *
 * Todo control que pueda producir un efecto lo dice ANTES de ejecutarse.
 * El precedente que esto impide repetir es concreto: un boton rotulado
 * "calculadora" que en realidad registraba una captacion. Si un boton crea
 * una captacion, el boton lo dice, y lo dice aqui.
 * ------------------------------------------------------------------------ */
.efecto{
  margin:var(--sp-4) 0;padding:var(--sp-4) var(--sp-5);
  background:var(--card);
  border:1px solid var(--rule-control);
  border-left:6px double var(--st-alto);
  border-radius:var(--r-sm);
}
.efecto__titulo{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--chip-alto-ink);margin-bottom:var(--sp-2);
}
.efecto__cuerpo{color:var(--ink);}
.efecto .def-list{margin-top:var(--sp-3);}

/* ---------------------------------------------------------------------------
 * CREDENCIAL DE UNA SOLA VEZ
 *
 * Se muestra, se copia y se olvida. La caja es ancha, monoespaciada y
 * seleccionable de una pasada; no hay nada que la persista.
 * ------------------------------------------------------------------------ */
.secreto{
  display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  margin:var(--sp-4) 0;padding:var(--sp-4);
  background:var(--chip-neutral-bg);
  border:2px dashed var(--rule-control);border-radius:var(--r-sm);
}
.secreto__valor{
  flex:1 1 260px;min-width:0;
  font-family:var(--font-mono);font-size:var(--fs-lg);
  letter-spacing:.04em;word-break:break-all;
  background:var(--card);color:var(--ink);
  border:1px solid var(--rule-control);border-radius:var(--r-xs);
  padding:var(--sp-3) var(--sp-4);
}

/* ---------------------------------------------------------------------------
 * SELECTOR DE MODO · Service Workspace
 *
 * Tres modos que NO se pueden confundir: vista de contrato (no escribe),
 * prueba UAT (declara sus efectos) y operacion (contrato autenticado real).
 * El modo activo se senala con texto -- "MODO ACTIVO" -- ademas de con el
 * marco: el color no es la senal.
 * ------------------------------------------------------------------------ */
.modos{
  display:grid;gap:var(--sp-4);margin:var(--sp-5) 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.modo{
  display:block;width:100%;text-align:left;
  padding:var(--sp-4) var(--sp-5);
  background:var(--card);color:var(--ink);
  border:1px solid var(--rule-control);border-radius:var(--r-md);
  cursor:pointer;font:inherit;
}
.modo:hover:not([disabled]){background:var(--bg);}
.modo[disabled]{opacity:.62;cursor:not-allowed;}
.modo[aria-pressed="true"]{
  border-color:var(--current-context);
  box-shadow:inset 0 0 0 2px var(--current-context);
}
.modo__clave{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);
  line-height:var(--lh-tight);
}
.modo__estado{
  display:block;margin-top:var(--sp-1);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--ink-3);
}
.modo[aria-pressed="true"] .modo__estado{color:var(--current-context);}
.modo__texto{display:block;margin-top:var(--sp-2);
  font-size:var(--fs-md);color:var(--ink-2);}

/* ---------------------------------------------------------------------------
 * CAPTURA DIFERENCIADA
 *
 * Cada campo del contrato se dibuja con el control que su tipo declara. Un
 * tipo que este cliente no reconoce NO se esconde y NO se sustituye por
 * texto en silencio: se dibuja generico y se DICE.
 * ------------------------------------------------------------------------ */
.captura{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.captura .field{margin-bottom:0;}
.captura__tipo{
  float:right;font-family:var(--font-mono);font-size:var(--fs-2xs);
  text-transform:none;letter-spacing:0;color:var(--ink-3);
}
.campo-check{display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-2) 0;}
.campo-desconocido{
  border:1px solid var(--st-warn);border-left:5px solid var(--st-warn);
  border-radius:var(--r-xs);padding:var(--sp-3);background:var(--st-warn-bg);
}

/* Lista maestra de servicios: el elemento enfocable es el boton entero. */
.item-lista{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);
  background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-sm);
}
.item-lista:hover{background:var(--bg);}
.item-lista[aria-current="true"]{
  border-color:var(--current-context);
  box-shadow:inset 4px 0 0 var(--current-context);
  background:var(--st-critico-bg);
}
.item-lista__nombre{font-weight:700;display:block;}
.item-lista__slug{display:block;font-family:var(--font-mono);
  font-size:var(--fs-sm);color:var(--ink-3);overflow-wrap:anywhere;}
.item-lista__marcas{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2);}

/* Master/detalle progresivo mientras el `.split` siga apilado. El umbral es
 * el mismo que usa el bloque 6 para pasar `.split` a dos columnas. */
.volver{display:none;}
@media (max-width:1099px){
  .volver{display:inline-flex;}
  .split--lista   > .split__detail{display:none;}
  .split--detalle > .split__list{display:none;}
}

/* En papel el aviso de vista simulada deja de ser flotante pero NO
 * desaparece: un pantallazo impreso de una vista simulada tiene que seguir
 * diciendo que lo es. */
@media print{
  .sim-banner{position:static;box-shadow:none;
    border:2px solid #000 !important;border-left-width:10px !important;}
  .sim-banner__marca{background:#fff !important;border-color:#000 !important;}
  .sim-banner__titulo,.sim-banner__nota{color:#000 !important;}
  .secreto{display:none !important;}   /* un secreto no se imprime */
}

/* ── 10 · SERVICIOS · entradas que el catalogo pone en el menu ────────────
 *
 * El grupo SERVICIOS lo completa `_shell.js::ampliarServicios` leyendo
 * `GET /api/vta/servicios/contratos`. Estas dos reglas son lo unico que la
 * hoja aporta: la sangria que distingue el servicio concreto de la entrada
 * base, y la marca del contrato incompleto.
 *
 * La marca NO es color. Un contrato incompleto se senala con un simbolo
 * textual delante del rotulo, que se ve igual en gris, en papel y para
 * quien no distingue colores; el `title` lo dice ademas con palabras. Un
 * punto de color habria sido mas bonito y no habria informado a nadie.
 */
.sidebar__item--anidado{
  padding-left:1.75rem;
  font-size:.92em;
}
.sidebar__item[data-contrato="incompleto"]::before{
  content:"\26A0\FE0E";                  /* triangulo de aviso, sin emoji */
  margin-right:.4rem;
  font-weight:700;
}

/* ── 11 · MARCA DE CUENTA SINTETICA · DG-00 §29 ──────────────────────────
 *
 * Una cuenta UAT tiene que ser IMPOSIBLE de confundir con una
 * institucional, y la marca no puede ser el color: se ve igual en gris, en
 * papel y para quien no distingue colores. Por eso la marca es la palabra
 * "UAT" en mayusculas, con borde propio y trama de fondo. El color solo
 * refuerza lo que el texto ya dice.
 */
.chip--uat{
  border:2px dashed var(--ink);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  background-image:repeating-linear-gradient(
    45deg, transparent 0 4px, rgba(0,0,0,.08) 4px 8px);
}
@media print{
  .chip--uat{border:2px dashed #000 !important;color:#000 !important;}
}