:root {
  
  --caja-alto-plegada: 56px;                 
  --caja-alto: var(--caja-alto-plegada);     
  --caja-radio-arriba: 16px;                 
  --caja-sombra-arriba: 0 -12px 28px -18px rgba(0, 0, 0, .55), 0 -2px 6px -2px rgba(0, 0, 0, .35);

  
  --ficha-ancho-max: 1280px;

  
  --bg: #1b1c1e;              
  
  --hilo-fondo: linear-gradient(180deg, color-mix(in oklab, var(--superficie) 55%, var(--bg)) 0%, var(--bg) 70%);
  --superficie: #242629;       
  --superficie-alta: #2e3135;
  --tinta: #f2f1ec;            
  --tenue: #a8a49b;            
  
  --ayuda-tinta: color-mix(in oklab, var(--tenue) 85%, transparent);
  --raya: rgba(255, 255, 255, .07);
  --tinta-inversa: #1b1c1e;   
  --tinta-sobre-mal: #1b1c1e;   
  --mal-texto: #f0918a;         

  
  --acento-texto: #ffe135;     
  
  --et-hito: var(--acento-texto);
  --et-de: var(--acento-texto);
  --et-a: var(--acento-texto);
  --et-espera: var(--acento-texto);
  --et-valida: var(--acento-texto);
  --et-prio: var(--acento-texto);
  --et-mide: var(--acento-texto);
  --et-id: var(--acento-texto);
  --et-varado: var(--acento-texto);
  
  --et-subtareas: var(--acento-texto);
  --et-depende: var(--acento-texto);
  --hito-1: var(--acento-texto); --hito-2: var(--acento-texto);
  --hito-3: var(--acento-texto); --hito-4: var(--acento-texto);
  --hito-5: var(--acento-texto); --hito-6: var(--acento-texto);
  --hito-7: var(--acento-texto); --hito-8: var(--acento-texto);
  @supports (color: oklch(from red l c h)) {
    
    --et-hito:    oklch(from var(--acento-texto) l c calc(h + 0));
    --et-de:      oklch(from var(--acento-texto) l c calc(h + 40));
    --et-a:       oklch(from var(--acento-texto) l c calc(h + 80));
    --et-espera:  oklch(from var(--acento-texto) l c calc(h + 120));
    --et-valida:  oklch(from var(--acento-texto) l c calc(h + 160));
    --et-prio:    oklch(from var(--acento-texto) l c calc(h + 200));
    --et-mide:    oklch(from var(--acento-texto) l c calc(h + 240));
    --et-id:      oklch(from var(--acento-texto) l c calc(h + 280));
    --et-varado:  oklch(from var(--acento-texto) l c calc(h + 320));
    --et-subtareas: oklch(from var(--acento-texto) l c calc(h + 20));
    --et-depende:   oklch(from var(--acento-texto) l c calc(h + 60));
    
    --hito-1: oklch(from var(--acento-texto) l c calc(h + 0));
    --hito-2: oklch(from var(--acento-texto) l c calc(h + 45));
    --hito-3: oklch(from var(--acento-texto) l c calc(h + 90));
    --hito-4: oklch(from var(--acento-texto) l c calc(h + 135));
    --hito-5: oklch(from var(--acento-texto) l c calc(h + 180));
    --hito-6: oklch(from var(--acento-texto) l c calc(h + 225));
    --hito-7: oklch(from var(--acento-texto) l c calc(h + 270));
    --hito-8: oklch(from var(--acento-texto) l c calc(h + 315));
  }
  
  --acento: #ffe135;             
  
  --e-flota-caja: none;
  
  --e-cristal: 0 18px 40px -30px rgba(0,0,0,.8);   
  
  --sombra-banda: rgba(0, 0, 0, .16);   
  --sombra-banda-parada: 55%;           
  
  
  
  
  
  --burbuja-operador: oklch(0.50 0.10 106);
  --ok: #6fbf8b;
  --aviso: #e6c766;
  --mal: #e07a72;                

  
  
  --ancho-lectura: 92ch;
  
  --ancho-mensaje: 88%;
  
  --alto-capa: 148px;
  
  --aire-caja: 67px;
  --fuente: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
  
  --esc: 1.1;
  --t-xs: calc(11px * var(--esc));  --t-s: calc(12.5px * var(--esc));  --t-m: calc(14px * var(--esc));  --t-l: calc(17px * var(--esc));
  
  --t-xl: calc(20px * var(--esc));

  
  --r-s: 7px;  --r-m: 10px;  --r-l: 14px;
  --e-1: 0 1px 2px rgba(0,0,0,.28);
  --e-2: 0 4px 14px rgba(0,0,0,.35);
  --e-3: 0 12px 34px rgba(0,0,0,.45);
  
  
  --foco: 0 0 0 1px color-mix(in oklab, var(--acento) 30%, transparent),
          0 10px 28px -8px color-mix(in oklab, var(--acento) 45%, transparent);
  --foco-mal: 0 0 0 1px color-mix(in oklab, var(--mal) 30%, transparent),
              0 10px 28px -8px color-mix(in oklab, var(--mal) 45%, transparent);
  
  --eje: 0 2px 8px -3px color-mix(in oklab, var(--raya) 100%, transparent),
         0 1px 3px -1px color-mix(in oklab, var(--raya) 80%, transparent);
  
  --e-arriba: 0 -12px 26px -22px rgba(0,0,0,.75);
  --e-abajo: 0 12px 26px -22px rgba(0,0,0,.75);
  --e-lado: 10px 0 26px -24px rgba(0,0,0,.8);
  
  
  --e-cristal: 0 18px 40px -30px rgba(0,0,0,.8);   
  
  
  --e-flota: 0 -28px 56px -26px rgba(0,0,0,.95), 0 -10px 24px -20px rgba(0,0,0,.7);
  
  --e-flota-caja: none;   
  
  
  
  
  
  --luz-arriba:
    0 0 6px  0 rgba(255,255,255,.045),
    0 0 14px 0 rgba(255,255,255,.032),
    0 0 28px 0 rgba(255,255,255,.022),
    0 0 48px 0 rgba(255,255,255,.014),
    0 18px 44px -20px rgba(0,0,0,.9);

  
  --codigo-bg: #0e0f11; --codigo-tenue: #a8a49b; --codigo-btn: #23262b;
  --codigo-tinta: #e6e9ee; --codigo-clave: #d8b64a; --codigo-cadena: #8fd6a8; --codigo-num: #8fc2ff; --codigo-punt: #7c828c;
  
  --e1: calc(4px * var(--esc));  --e2: calc(8px * var(--esc));  --e3: calc(12px * var(--esc));  --e4: calc(16px * var(--esc));  --e5: calc(24px * var(--esc));  --e6: calc(32px * var(--esc));

  
  --visor-lienzo: #141414;                 
  --visor-tarjeta: #242428;                
  --visor-hueco: #1e1e1c;                  
  --visor-capsula: #282828;                
  --visor-sombra: 0 10px 30px -6px rgba(0, 0, 0, .55), 0 2px 8px -1px rgba(0, 0, 0, .35);   
  
  --hueco-fondo: rgba(245, 158, 11, .10);
  --deuda-fondo: rgba(239, 68, 68, .10);
  
  --sombra-fija: -12px 0 26px -16px rgba(0, 0, 0, .75);
}


@media (prefers-color-scheme: light) {
  :root.tema-auto {
    --bg: #f7f7f5; --superficie: #ffffff; --superficie-alta: #f1f1ee;
    
    --ayuda-tinta: color-mix(in oklab, var(--tenue) 94%, transparent);
    --hilo-fondo: linear-gradient(180deg, color-mix(in oklab, var(--superficie-alta) 55%, var(--bg)) 0%, var(--bg) 70%);
    --tinta: #1b1c1e; --tenue: #6b6a64; --raya: rgba(0,0,0,.08);
    --e-1: 0 1px 2px rgba(16,24,40,.06);
    --e-2: 0 4px 14px rgba(16,24,40,.08);
    --e-3: 0 12px 34px rgba(16,24,40,.12);
    --e-arriba: 0 -10px 18px -16px rgba(16,24,40,.20);
    --sombra-banda: rgba(0, 0, 0, .035);   
    --sombra-banda-parada: 55%;
    
    --visor-lienzo: #f4f4f2; --visor-tarjeta: #ffffff; --visor-hueco: #f8f5ee; --visor-capsula: #f3f4f6;
    --visor-sombra: 0 8px 24px -6px rgba(20, 20, 18, .16), 0 2px 6px -1px rgba(20, 20, 18, .08);
    --caja-sombra-arriba: 0 -12px 28px -18px rgba(16, 24, 40, .20), 0 -2px 6px -2px rgba(16, 24, 40, .10);
    --hueco-fondo: #fffbeb; --deuda-fondo: #fef2f2;
    --sombra-fija: -12px 0 26px -16px rgba(16, 24, 40, .20);
  }
}


:root.tema-claro {
  --bg: #f7f7f5; --superficie: #ffffff; --superficie-alta: #f1f1ee;
  
  --ayuda-tinta: color-mix(in oklab, var(--tenue) 94%, transparent);
  --hilo-fondo: linear-gradient(180deg, color-mix(in oklab, var(--superficie-alta) 55%, var(--bg)) 0%, var(--bg) 70%);
  --e-arriba: 0 -10px 18px -16px rgba(16,24,40,.20);
  --sombra-banda: rgba(0, 0, 0, .035);  
  --sombra-banda-parada: 55%;           
  --tinta: #1b1c1e; --tenue: #6b6a64; --raya: rgba(0,0,0,.08);
  
  --ok: #1f7a4d; --aviso: #7a6000; --mal: #8f2a23;   
  --tinta-sobre-mal: #ffffff;   
  --mal-texto: #8f2a23;         
  --acento-texto: #6b5d00;           
  
  --acento: #ffe135;
  
  
  
  
  --e-cristal: 0 -16px 36px -30px rgba(16,24,40,.18);
  --luz-arriba:
    inset 0 2px 8px -4px rgba(255,255,255,.95),
    inset 0 -16px 26px -20px rgba(16,24,40,.10),
    0 12px 30px -18px rgba(16,24,40,.16);
  --e-flota-caja: none;
  --burbuja-operador: oklch(0.975 0.035 95);   
  
  --tinta-inversa: #1b1c1e;
  --e-1: 0 1px 2px rgba(16,24,40,.06);
  --e-2: 0 4px 14px rgba(16,24,40,.08);
  --e-3: 0 12px 34px rgba(16,24,40,.12);

  
  --visor-lienzo: #f4f4f2;
  --visor-tarjeta: #ffffff;
  --visor-hueco: #f8f5ee;
  --visor-capsula: #f3f4f6;
  --visor-sombra: 0 8px 24px -6px rgba(20, 20, 18, .16), 0 2px 6px -1px rgba(20, 20, 18, .08);
  --caja-sombra-arriba: 0 -12px 28px -18px rgba(16, 24, 40, .20), 0 -2px 6px -2px rgba(16, 24, 40, .10);
  --hueco-fondo: #fffbeb;
  --deuda-fondo: #fef2f2;
  --sombra-fija: -12px 0 26px -16px rgba(16, 24, 40, .20);
}


:root {
  
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
  
  --tipo-1: 12px; --tipo-2: 14px; --tipo-3: 16px; --tipo-4: 20px;
  --tipo-5: 25px; --tipo-6: 31px; --tipo-7: 39px;
  
  --linea: 60ch;
  
  
  --icono: 24px;
  --icono-tactil: 44px;
  --alto-campo: 46px;   
  --r-tarjeta: 18px;
  --alto-tarjeta: 96px;
  --punto-estado: 6px;
}


html, body {
  background: var(--bg);
  color: var(--tinta);
}
html { color-scheme: dark; }
html.tema-claro { color-scheme: light; }
body { margin: 0; min-height: 100%; }


.ab { display: inline-flex; align-items: center; gap: var(--e2); border: 0; cursor: pointer;
      border-radius: var(--r-m); font: 500 var(--t-m)/1 var(--fuente); padding: 0 var(--e4); height: 34px;
      background: var(--superficie-alta); color: var(--tinta); box-shadow: var(--e-1), var(--eje);
      transition: background .15s, box-shadow .15s, transform .06s; }
.ab:hover { background: color-mix(in oklab, var(--superficie-alta), var(--tinta) 6%); }
.ab:active { transform: translateY(1px); }
.ab:focus-visible { outline: none; box-shadow: var(--foco); }
.ab[data-variante="primario"] { background: var(--acento); color: var(--tinta-inversa); font-weight: 600; }
.ab[data-variante="fantasma"] { background: transparent; box-shadow: none; color: var(--tenue); }

.ab[data-variante="fantasma"]:focus-visible { box-shadow: var(--foco); color: var(--tinta); }
.ab[data-variante="fantasma"]:hover { background: var(--superficie-alta); color: var(--tinta); }
.ab[data-variante="peligro"] { background: var(--mal); color: var(--tinta-sobre-mal); }
.ab[data-tam="s"] { height: 26px; font-size: var(--t-s); padding: 0 var(--e3); border-radius: var(--r-s); }
.ab[disabled] { opacity: .45; cursor: not-allowed; }


.ab { white-space: nowrap; }

@container (max-width: 300px) {
  .ab { white-space: normal; max-width: 100%; height: auto; min-height: 34px; padding-block: var(--esp-1); }
}


.ap { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
      font: 600 var(--t-xs)/1.5 var(--fuente, inherit); background: color-mix(in oklab, var(--ok) 18%, transparent);
      color: var(--ok); }
.ap[data-tono="aviso"] { background: color-mix(in oklab, var(--aviso) 18%, transparent); color: var(--aviso); }
.ap[data-tono="mal"]   { background: color-mix(in oklab, var(--mal) 20%, transparent);  color: var(--mal); }
.ap[data-tono="mudo"]  { background: var(--superficie-alta); color: var(--tenue); }

.ap { box-shadow: none; }
.ap::before { content: ""; flex: 0 0 auto; width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: currentColor; }


.av {
  --ancho-panel: clamp(320px, 38vw, 560px);
  display: flex; flex-direction: column;
  
  width: var(--ancho-panel, clamp(320px, 38vw, 560px)); min-width: min(320px, 42vw); max-width: min(92vw, 1240px);
  background: var(--superficie); color: var(--tinta);
  box-shadow: var(--e-3); overflow: hidden; position: relative;
}

@media (max-width: 1100px) {
  
  .av {
    
    position: fixed; inset: var(--safe-top, env(safe-area-inset-top, 0px)) 0 calc(100dvh - var(--acom-top, calc(100dvh - 200px)) + 12px) auto; z-index: 60;
    width: min(92vw, var(--ancho-panel, 520px)); max-width: 92vw;
  }
}
.av-cab { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e4);
          box-shadow: var(--e-abajo); }

.av-cab b { flex: 1 1 0; min-width: 0; font-size: var(--t-m); font-weight: 600; text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: var(--e4); font-size: var(--t-m); line-height: 1.65; }
.av-asa { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: col-resize;
          background: transparent; border: 0; padding: 0; }
.av-asa:hover, .av-asa:focus-visible { background: color-mix(in oklab, var(--acento), transparent 70%); }


@media (max-width: 760px) {
  .av-cab { padding: 6px 10px; gap: 6px; }
  .av-cab b { font-size: 14px; }
}


@media (max-width: 900px) {
  .av { min-width: 240px; min-width: min(240px, 80vw); }
}


.av.av-max {
  
  
  position: fixed; inset: var(--safe-top, env(safe-area-inset-top, 0px)) 0 0 0; z-index: 80;
  width: 100vw; max-width: 100vw; min-width: 0;
  border-radius: 0; box-shadow: none;
}
.av.av-max .av-asa { display: none; }

.av.av-max .av-cuerpo { padding-inline: var(--e4); }


.av-asa { width: 12px; }

.av-cab .ab, .av-cab button { min-height: 36px; padding: 4px 10px; }
@media (max-width: 900px) {
  .av-asa { width: 16px; }
  .av-cab .ab, .av-cab button { min-height: 44px; min-width: 44px; }
}


@media (max-width: 560px) {
  .av {
    position: fixed; inset: var(--safe-top, env(safe-area-inset-top, 0px)) 0 0; z-index: 90;
    width: 100vw; max-width: 100vw; min-width: 0;
    
    height: calc(100dvh - var(--safe-top, env(safe-area-inset-top, 0px)));
    max-height: calc(100dvh - var(--safe-top, env(safe-area-inset-top, 0px)));
    border-radius: 0;
  }
  .av-asa { display: none; }              
  
  .av-cab { position: static; background: var(--superficie); }
  .av-cuerpo { padding: 10px; }
}


@media (min-width: 1101px) {
  .ui-esquema > .av { margin-left: 12px; }
}


.av-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.av-txt { display: none; }

.av-cab .ab {
  width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) {
  .av-cab .ab { width: 44px; height: 44px; min-width: 44px; }
}


.ea-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.ea-punto[data-estado="working"] { background: var(--aviso); box-shadow: 0 0 0 3px color-mix(in oklab, var(--aviso) 22%, transparent); }
.ea-punto[data-estado="blocked"] { background: var(--mal); }
.ea-punto[data-estado="desconocido"], .ea-punto[data-estado="sin-sesion"],
.ea-punto[data-estado="muerto"] { background: var(--tenue); }
.ea-punto[data-estado="idle"] { background: var(--ok); }

.ea-cifra { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
            font: 600 var(--t-xs)/1.6 var(--mono); background: var(--superficie-alta); color: var(--tenue); }
.ea-cifra[data-tono="aviso"] { background: color-mix(in oklab, var(--aviso) 18%, transparent); color: var(--aviso); }
.ea-cifra[data-tono="mal"] { background: color-mix(in oklab, var(--mal) 20%, transparent); color: var(--mal); }


.ui-esqueleto { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4) 0; opacity: .55; }
.ui-esqueleto > * { height: 14px; border-radius: var(--r-s); background: var(--superficie-alta);
                    animation: ui-pulso 1.1s ease-in-out infinite alternate; }
@keyframes ui-pulso { from { opacity: .45; } to { opacity: .9; } }


.uso {
  box-sizing: border-box;
  display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap;
  padding: 0 var(--e4) var(--e3);
  font: var(--t-xs)/1.5 var(--mono); color: var(--tenue);
  justify-content: safe flex-end;   
}

.uso[data-uso="acumulado"] {
  flex-wrap: nowrap; overflow-x: auto; justify-content: safe flex-end;
  
  box-sizing: border-box; width: 100%; max-width: 100%; margin-inline: 0; padding: 0 var(--e2) var(--e3);
  scrollbar-width: none;
}
.uso[data-uso="acumulado"]::-webkit-scrollbar { height: 0; }
.uso-cifra { white-space: nowrap; }
.uso-cifra i { font-style: normal; opacity: .72; }
.uso-sep { opacity: .4; }
.uso-coste { color: var(--tinta); font-weight: 600; }

.uso { display: flex; flex-wrap: nowrap; justify-content: safe flex-end; font-variant-numeric: tabular-nums; gap: var(--e1) var(--e2); align-items: baseline; min-width: 0; max-width: 100%; }
.uso .uso-cifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.uso-et { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }


.uso-boton { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.uso-boton:hover .uso-cifra { color: var(--acento-texto); }



.gp { padding: var(--e1) 0; max-width: 100%; }
.gp-fila { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, auto) auto; align-items: center;
           gap: var(--e2) var(--e3); padding: var(--e2) 0; }
.gp-pone { display: flex; gap: var(--e1); align-items: center; justify-self: end; }
.gp-cab { display: flex; align-items: baseline; gap: var(--e2); margin-bottom: var(--e2); }
.gp-cab b { font: 600 var(--t-s)/1.3 var(--fuente); }
.gp-cab .ui-mudo { margin-left: auto; font: var(--t-xs)/1 var(--mono); }
.gp-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); padding: var(--e2) 0; box-shadow: inset 0 1px 0 var(--raya); }
.gp-mod { display: flex; flex-direction: column; min-width: 180px; }
.gp-mod b { font: 600 var(--t-s)/1.3 var(--mono); }
.gp-mod .ui-mudo { font: var(--t-xs)/1.4 var(--mono); }
.gp-cifras { display: flex; flex-direction: column; text-align: right; }
.gp-coste { font: 600 var(--t-m)/1.2 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
.gp-pone { display: flex; gap: var(--e1); align-items: center; }
.gp-input { width: 84px; }


.uso { font: 500 var(--t-xs)/1.4 var(--mono); gap: var(--e1) var(--e2); padding: 2px 0; }
.uso .uso-cifra, .uso .uso-et, .uso .uso-coste { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: 0; }
.uso .uso-sep { color: var(--tenue); padding: 0 2px; }
.uso .uso-coste { color: var(--tinta); font-weight: 600; padding-inline-end: var(--e1); }

.acom-modelo { appearance: none; -webkit-appearance: none; background: var(--superficie-alta) !important;
               color: var(--tenue) !important; border-radius: var(--r-s) !important; padding: 4px 22px 4px 8px !important;
               font: 500 var(--t-xs)/1.2 var(--mono) !important; cursor: pointer;
               background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
               background-position: right 10px center, right 6px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.acom-modelo:focus-visible { outline: none; box-shadow: var(--foco); }

@media (max-width: 720px) {
  
  .uso { flex-wrap: nowrap; overflow-x: auto; }
}



.gg { display: flex; flex-direction: column; gap: var(--e3); }
.gg-global { margin: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--tenue); }
.gg-global b { color: var(--tinta); }
.gg-card { padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--e-1);
           display: flex; flex-direction: column; gap: var(--e2); }
.gg-cab { display: flex; align-items: baseline; gap: var(--e3); }
.gg-cab > div:first-child { min-width: 0; }
.gg-modelo { margin: 0; font: 600 var(--t-m)/1.2 var(--mono); color: var(--tinta); }
.gg-sub { margin: 2px 0 0; font: var(--t-xs)/1.4 var(--mono); color: var(--tenue); }
.gg-coste { margin-left: auto; font: 600 var(--t-l)/1 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
.gg-barra { height: 6px; border-radius: 999px; background: var(--superficie-alta); overflow: hidden; }
.gg-barra > span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.gg-barra[data-tono="aviso"] > span { background: var(--aviso); }
.gg-barra[data-tono="mal"] > span { background: var(--mal); }
.gg-metricas { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); font: var(--t-xs)/1.4 var(--mono); color: var(--tinta);
               font-variant-numeric: tabular-nums; }
.gg-metricas i { font-style: normal; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.gg-pone { display: flex; align-items: center; gap: var(--e2); padding-top: var(--e1); }
.gg-lab { font: 600 var(--t-xs)/1 var(--mono); color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.gg-input { display: inline-flex; align-items: center; height: 32px; border-radius: var(--r-s); background: var(--superficie-alta);
            box-shadow: var(--e-1); padding: 0 8px; gap: 6px; }
.gg-input input { width: 72px; border: 0; background: none; color: var(--tinta); font: 500 var(--t-s)/1 var(--mono); outline: none; }
.gg-ud { font: 500 var(--t-xs)/1 var(--mono); color: var(--tenue); }
.gg-pie { margin: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--tenue); }




.lat { position: relative; display: flex; flex-direction: column; gap: var(--e1); padding: var(--e4); padding-bottom: 0;
       background: var(--superficie); box-shadow: var(--e-lado); overflow: hidden; }

.lat-tit { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--t-l); font-weight: 650;
           letter-spacing: -.01em; margin-bottom: var(--e3); min-width: 0; }

.lat-tit-nom { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lat-logo { width: 50px; height: 44px; flex: 0 0 auto; background: var(--tinta);
            -webkit-mask: url(/logo-calavera.png) center / contain no-repeat;
            mask: url(/logo-calavera.png) center / contain no-repeat; }
.lat-ag { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border: 0;
          border-radius: var(--r-m); background: transparent; color: var(--tinta); font: inherit;
          text-align: left; cursor: pointer; }

.lat-ag:hover { background: color-mix(in oklab, var(--tinta) 5%, transparent); }
.lat-ag:hover .lat-nom { color: var(--acento-texto, var(--acento)); }

.lat-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           text-transform: uppercase; letter-spacing: .02em; font-weight: 500; font-size: calc(11.5px * var(--esc)); color: var(--tinta); }
.lat-aviso { font-size: var(--t-xs); color: var(--aviso); }
.lat-mudo { color: var(--tenue); font-size: var(--t-xs); }

.lat-sec { margin-top: var(--e5); }   
.lat-sec-tit { margin: 0 0 var(--e2); font: 650 calc(12.5px * var(--esc))/1.2 var(--mono); letter-spacing: .06em;
               text-transform: uppercase; color: var(--tinta); }
.lat-acciones { display: flex; gap: var(--e2); flex-wrap: wrap; padding: 0; box-sizing: border-box; max-width: 100%; }



.lat-pie {
  
  position: sticky; bottom: var(--e2); z-index: 2;
  margin-top: auto;
  
  
  padding-top: var(--e2);
  padding-bottom: var(--e2);
  background: var(--superficie);
  box-shadow: var(--e-arriba);
}

.lat-pie-fijo { display: flex; flex-direction: row; gap: var(--e2); align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.lat-pie-fijo > * { min-height: 44px; }
.lat-pie-fijo > button, .lat-pie-fijo > .lat-pie-boton { min-width: 44px; }
.lat-pie .lat-sec { margin-top: var(--e2); }
.lat-pie .lat-sec:first-child { margin-top: 0; }



.lat-grupo { margin: 0 0 var(--e1); }

.lat-grupo:not([open]) > .lat-grupo-cuerpo { display: none; }

.lat-grupo-tit { font-size: calc(11.5px * var(--esc)); color: var(--tinta);
  display: block; cursor: pointer; list-style: none;
  padding: 9px var(--e2); border-radius: var(--r-s);
  
  font: 600 var(--t-s)/1.2 var(--fuente); letter-spacing: normal; text-transform: none; color: var(--tinta);
}
.lat-grupo-tit-fila { display: flex; align-items: center; gap: var(--e2); }
.lat-grupo-tit::-webkit-details-marker { display: none; }
.lat-grupo-tit:hover { background: var(--superficie-alta); color: var(--tinta); }
.lat-grupo-tit::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .12s; margin-inline-start: 2px;
}
.lat-grupo[open] > .lat-grupo-tit::before { transform: rotate(45deg); }
.lat-grupo-cuerpo { padding: 2px 0 var(--e2) 0; }
.lat-item {
  display: block; width: 100%; text-align: start; border: 0; cursor: pointer;
  background: transparent; color: var(--tinta); font: 400 var(--t-s)/1.4 var(--fuente);
  padding: 5px var(--e2) 5px var(--e4); border-radius: var(--r-s);
}
.lat-item:hover { background: var(--superficie-alta); }



.lat-fila {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  padding: 6px var(--e2); border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--tinta); font: 400 var(--t-s)/1.35 var(--fuente); text-align: start;
}
.lat-fila + .lat-fila { margin-top: 1px; }
.lat-fila-btn { cursor: pointer; }
.lat-fila-btn:hover { background: var(--superficie-alta); }
.lat-ico { flex: 0 0 auto; color: var(--tenue); }
.lat-fila-nom { flex: 1; min-width: 0; }
.lat-fila-val { font: var(--t-xs)/1.3 var(--mono); color: var(--tenue); white-space: nowrap; }
.lat-fila-val[data-tono="mal"] { color: var(--mal-texto); }



.lat-cajon-btn { display: none; }

@media (max-width: 1280px) {
  
  .lat { padding: var(--e2); align-items: center; gap: var(--e2); }
  
  .lat-pie { display: block; }
  .lat[data-cajon="1"] .lat-pie { display: block; }
  .lat-pie-fijo.lat-pie-ico { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); justify-items: center; }
  .lat { padding-bottom: 0; }
  
  .lat-tit > .lat-tit-nom,
  .lat-nom, .lat-aviso, .ea-cifra, .lat-sec { display: none; }
  .lat-tit { margin-bottom: var(--e2); }
  .lat-ag { justify-content: center; padding: var(--e2); width: 100%; }
  .lat-logo { width: 50px; height: 44px; }   

  
  .lat-cajon-btn {
    display: grid; place-items: center; position: static; z-index: 47;
    width: 34px; height: 34px; margin: var(--e2) auto 0; padding: 0; border: 0; border-radius: var(--r-m); cursor: pointer;
    background: var(--superficie); color: var(--tinta); box-shadow: var(--e-2), var(--eje);
  }
  .lat-cajon-btn:hover { color: var(--acento); }
  
  .lat[data-cajon="1"] .lat-cajon-btn { position: fixed; top: 10px; left: calc(min(86vw, 340px) - 44px); margin: 0; z-index: 48; }

  
  
  .lat[data-cajon="1"] {
    position: fixed; inset: 0 auto 0 0; z-index: 46;
    width: min(86vw, 340px); box-sizing: border-box; padding: var(--e4);
    
    align-items: stretch; gap: 0;
    background: var(--superficie); box-shadow: var(--e-3);
  }
  
  .lat[data-cajon="1"] .lat-tit span:last-child,
  .lat[data-cajon="1"] .lat-nom,
  .lat[data-cajon="1"] .lat-aviso,
  .lat[data-cajon="1"] .ea-cifra,
  .lat[data-cajon="1"] .lat-sec { display: revert; }
  .lat[data-cajon="1"] .lat-tit { display: flex; }
  .lat[data-cajon="1"] .lat-ag { justify-content: flex-start; padding: var(--e2) var(--e3); }
  
  .lat-velo { position: fixed; inset: 0; z-index: 45; background: color-mix(in oklab, var(--bg) 62%, transparent); }
}

@media (max-width: 900px) {
  
  .lat { display: none; }
  .lat[data-cajon="1"] { display: flex; }
  .lat-cajon-btn { position: fixed; top: 10px; left: 10px; margin: 0; }
  .lat[data-cajon="1"] .lat-cajon-btn { left: calc(min(86vw, 340px) - 44px); }
}



.lat { padding: var(--e3) var(--e3) 0; overflow-x: hidden; box-sizing: border-box; }
.lat > * { min-width: 0; max-width: 100%; }

.lat-pie, .lat-sec, .lat-pie *, .lat-sec * { min-width: 0; max-width: 100%; }


.lat-fila { box-sizing: border-box; }
.lat-fila, .lat-fila-nom, .lat-fila-val { min-width: 0; }
.lat-fila-nom, .lat-fila-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-fila, .lat-ag, .lat-item, .lat-grupo-tit { font-size: calc(11.5px * var(--esc)); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lat-sec:first-of-type { margin-top: var(--e2); }
.lat-ag { width: 100%; padding: 5px var(--e2); box-sizing: border-box; min-width: 0; min-height: 32px; }
.lat-ws-ico { width: 16px; text-align: center; color: var(--tenue); }
.lat-grupo + .lat-grupo { margin-top: 2px; }

.lat-fila-btn { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.lat-fila-btn:hover .lat-fila-nom, .lat-fila-btn:hover .lat-fila-val { color: var(--acento-texto); }





.lat { gap: 0; }



.lat-sec { margin: 0 0 var(--e6); }
.lat-sec-tit { margin: 0 0 var(--e3); }
.lat-ag, .lat-ws { min-height: 44px; }
.lat-fila { min-height: 40px; box-sizing: border-box; }


.lat-sec:last-of-type { padding-bottom: 0; margin-bottom: calc(48px + var(--e2) * 3); }


.lat-cajon-btn { width: 44px; height: 44px; }


.lat-ag:focus-visible,
.lat-ws:focus-visible,
.lat-grupo-tit:focus-visible,
.lat-item:focus-visible,
.lat-fila-btn:focus-visible,
.lat-cajon-btn:focus-visible { outline: none; box-shadow: var(--foco); }


.lat-ws {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  padding: var(--e1) var(--e2); box-sizing: border-box; min-width: 0;
  border: 0; border-radius: var(--r-m); background: transparent; color: var(--tenue);
  font: inherit; text-align: left; cursor: pointer;
}
.lat-ws:hover { background: var(--superficie-alta); color: var(--tinta); }
.lat-ws .lat-nom { font-weight: 500; }
.lat-ws-panes {
  margin-left: auto; font: 500 var(--t-xs)/1 var(--mono); color: var(--tenue);
  background: var(--superficie-alta); border-radius: 999px; padding: 3px 7px;
}




.lat-chat { margin: 2px 0 10px; border: 0; border-radius: var(--r-m); }
.lat-chat .lat-nom { font-weight: 650; letter-spacing: .04em; font-size: calc(12px * var(--esc)); }
.lat-chat { margin-bottom: var(--e4); }


details.lat-sec { margin: var(--e4) 0 0; padding-top: var(--e3); border-top: 1px solid var(--raya); }
details.lat-sec:first-of-type { margin-top: var(--e3); }
details.lat-sec > .lat-sec-tit { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e2); }
details.lat-sec > .lat-sec-tit::-webkit-details-marker { display: none; }


@media (max-width: 1280px) {
  .lat { justify-content: flex-start; padding-top: var(--e2); }
  .lat .ea-punto { width: 22px; height: 22px; }
  .lat .ea-punto[data-estado="working"] { box-shadow: 0 0 0 5px color-mix(in oklab, var(--aviso) 20%, transparent); }
  .lat-ag { min-height: 52px; }
  .lat-cajon-btn { margin-top: var(--e3); }
}


@media (max-width: 1280px) {
  .lat:not([data-cajon="1"]) {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    padding-top: calc(var(--e4) + env(safe-area-inset-top, 0px));
    padding-bottom: var(--e4);
    justify-content: flex-start; gap: var(--e3);
  }
  .lat[data-cajon="1"] { background: var(--superficie) !important; box-shadow: var(--e-3) !important; padding-top: var(--e4); }
  .lat-tit { margin-bottom: 0; }
  .lat-ag { min-height: 56px; }
  .lat-cajon-btn { margin-top: var(--e4); width: 40px; height: 40px; }
}


@media (max-width: 1280px) {
  
  .lat:not([data-cajon="1"]) { align-items: center; gap: 14px; }
  .lat:not([data-cajon="1"]) .lat-tit,
  .lat:not([data-cajon="1"]) .lat-ag,
  .lat:not([data-cajon="1"]) .lat-cajon-btn {
    width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0;
    display: grid; place-items: center; box-sizing: border-box;
    border-radius: var(--r-m); background: var(--superficie-alta); box-shadow: var(--e-1);
  }
  .lat:not([data-cajon="1"]) .lat-logo { margin: 0; }
  .lat:not([data-cajon="1"]) .ea-punto { width: 20px; height: 20px; }
  .lat:not([data-cajon="1"]) .lat-ag { border: 0; }
  .lat:not([data-cajon="1"]) .lat-cajon-btn { margin: 0; }
  .lat:not([data-cajon="1"]) .lat-cajon-btn svg { width: 20px; height: 20px; }
}


@media (max-width: 1280px) {
  .lat[data-cajon="1"] { padding-top: calc(var(--e4) + env(safe-area-inset-top, 0px)); }
  .lat[data-cajon="1"] .lat-pie .lat-fila, .lat[data-cajon="1"] .lat-pie button { min-height: 44px; }
}
@media (max-width: 900px) {
  
  .cab-movil .cab-btn.lat-cajon-btn, .cab-movil .lat-cajon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}


@media (max-width: 1280px) {
  .lat[data-cajon="1"] { scroll-padding-bottom: 120px; }
  .lat[data-cajon="1"] .lat-sec:last-of-type { padding-bottom: 120px; }
}


@media (max-width: 1280px) {
  .lat[data-cajon="1"] details.lat-sec,
  .lat[data-cajon="1"] .lat-sec {
    position: static; inset: auto; height: auto; max-height: none;
    margin-top: var(--e3); z-index: auto; overflow: visible;
  }
  .lat[data-cajon="1"] .lat-sec > summary { position: static; z-index: auto; }
  .lat[data-cajon="1"] .lat-ag, .lat[data-cajon="1"] .lat-fila { position: relative; z-index: 1; }
}


.lat-sec:not([open]) > *:not(summary):not(.lat-sec-tit) { display: none; }


@media (max-width: 1280px) {
  .lat[data-cajon="1"] .lat-cajon-btn { width: 44px; height: 44px; }
}


.lat[data-plegado="1"] { padding: var(--e2); align-items: center; gap: 2px; }
.lat[data-plegado="1"] .lat-tit { margin-bottom: var(--e2); justify-content: center; gap: 4px; }
.lat[data-plegado="1"] .lat-tit-nom,
.lat[data-plegado="1"] .lat-nom,
.lat[data-plegado="1"] .ea-cifra,
.lat[data-plegado="1"] .lat-sec,
.lat[data-plegado="1"] .lat-grupo,
.lat[data-plegado="1"] .lat-ws-panes,
.lat[data-plegado="1"] .lat-mudo { display: none; }


.lat[data-plegado="1"] .lat-chat { justify-content: center; padding: var(--e1); margin: 0 0 var(--e1);
                                   border: 0; background: transparent; }
.lat[data-plegado="1"] .lat-chat .ea-punto { width: 12px; height: 12px; }

.lat[data-plegado="1"] .lat-cajon-btn { display: inline-flex; align-items: center; justify-content: center;
                                        position: static; margin: 0; width: 44px; height: 44px; }


.lat-logo-btn { background: transparent; display: inline-flex; align-items: center; justify-content: center;
                padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit;
                cursor: pointer; -webkit-tap-highlight-color: transparent; }

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-logo-btn { width: 100%; height: 100%; }
@media (max-width: 1280px) {
  .ui-esquema > .lat:not([data-cajon="1"]) .lat-logo-btn { width: 100%; height: 100%; }
}
.lat-logo-btn:focus-visible { outline: none; box-shadow: var(--foco); border-radius: inherit; }



.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) {
  background: transparent; box-shadow: none; border: 0;
  
  padding: 8px 8px var(--e2); align-items: center; gap: 14px;
}

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-cab {
  background: transparent; box-shadow: none; border: 0;
}
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-tit,
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-ag.lat-chat,
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-cajon-btn {
  width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0;
  display: grid; place-items: center; box-sizing: border-box;
  
  border: 0; border-radius: var(--r-m); background: transparent; box-shadow: none;
}

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-pie-caja > svg,
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-pie-caja .lat-tema-ico,
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-tit .lat-logo,
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-chat > svg {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45));
}
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-tit { overflow: hidden; }

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-tit-nom { display: none; }

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-cajon-btn { display: none; }

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-pie {
  display: block; margin-top: auto; position: static;
  
  
  background: transparent; box-shadow: none; padding-top: 0; padding-bottom: var(--e2);
}

.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-pie-fijo.lat-pie-ico {
  flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: var(--e2);
}


.lat .lat-pie-fijo.lat-pie-ico {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: var(--e2); padding-bottom: 0;
}
.lat .lat-pie-fijo.lat-pie-ico .lat-pie-caja {
  width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0;
  display: grid; place-items: center; box-sizing: border-box;
  
  border: 0; border-radius: var(--r-m); background: transparent; box-shadow: none;
  color: var(--tinta);
}
.lat .lat-pie-caja > svg, .lat .lat-pie-caja .lat-tema-ico { filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.lat .lat-pie-fijo.lat-pie-ico .lat-pie-caja svg { width: 20px; height: 20px; }
.lat .lat-pie-fijo.lat-pie-ico .lat-pie-caja:focus-visible { outline: none; box-shadow: var(--foco); }

.lat-pie-caja .lat-tema-ico { width: 100%; height: 100%; padding: 0; border: 0; background: transparent;
                              display: grid; place-items: center; color: inherit; cursor: pointer; border-radius: inherit; }
.lat-pie-caja .lat-tema-ico:focus-visible { outline: none; box-shadow: var(--foco); }
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-logo { width: 50px; height: 44px; margin: 0; }   
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .ea-punto { width: 20px; height: 20px; }
.ui-esquema > .lat[data-plegado="1"]:not([data-cajon="1"]) .lat-cajon-btn svg { width: 20px; height: 20px; }



.ui-esquema > .lat:not([data-cajon="1"]) .lat-cajon-btn:hover,
.ui-esquema > .lat:not([data-cajon="1"]) .lat-pie-caja:hover,
.ui-esquema > .lat:not([data-cajon="1"]) .lat-chat:hover {
  background: color-mix(in oklab, var(--tinta) 7%, var(--superficie-alta));
  color: var(--tinta);
}


.lat [data-sel]:hover,
.lat [data-sel]:hover .lat-nom,
.lat [data-sel]:hover .lat-fila-nom,
.lat [data-sel]:hover .lat-fila-val,
.lat [data-sel]:hover .lat-nom b { color: var(--sel-tinta); }
.ui-esquema > .lat:not([data-cajon="1"]) .lat-chat[data-sel]:hover,
.ui-esquema > .lat:not([data-cajon="1"]) .lat-ag[data-sel]:hover,
.ui-esquema > .lat:not([data-cajon="1"]) .lat-ws[data-sel]:hover,
.ui-esquema > .lat:not([data-cajon="1"]) .lat-item[data-sel]:hover {
  background: var(--sel-fondo);
  color: var(--sel-tinta);
  box-shadow: var(--sel-sombra);
}

.ui-esquema > .lat:not([data-cajon="1"]) .lat-cajon-btn:active,
.ui-esquema > .lat:not([data-cajon="1"]) .lat-pie-caja:active {
  background: color-mix(in oklab, var(--acento) 18%, var(--superficie-alta));
}


.lat {
  
  
  --sel-fondo: linear-gradient(90deg, color-mix(in oklab, var(--acento) 26%, transparent),
                                      color-mix(in oklab, var(--acento) 8%, transparent));
  --sel-tinta: var(--tinta);
  --sel-sombra: none;
}
.lat .lat-ag[data-sel],
.lat .lat-chat[data-sel],
.lat .lat-ws[data-sel],
.lat .lat-item[data-sel] { background: var(--sel-fondo); color: var(--sel-tinta); box-shadow: var(--sel-sombra); }


.lat-asa { position: absolute; right: -3px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5;
           background: transparent; border: 0; padding: 0; }
.lat-asa:hover, .lat-asa:focus-visible { background: color-mix(in oklab, var(--acento), transparent 70%); }
@media (max-width: 1280px) { .lat-asa { display: none; } }
.lat[data-cajon="1"] .lat-asa { display: none; }


.lat-cab { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e2); border-radius: var(--r-m);
  
  background: var(--superficie); box-shadow: var(--e-abajo);
  border-bottom: 1px solid var(--raya); }
.lat-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }

.lat-cuerpo > .lat-sec:first-of-type { border-top: 0; margin-top: var(--e3); }


.lat[data-cajon="1"] .lat-pie-fijo.lat-pie-ico {
  flex-direction: row; justify-content: center; align-items: center;
  
  gap: var(--e3); padding-bottom: 0; min-height: 0;
}
.lat[data-cajon="1"] .lat-pie-fijo.lat-pie-ico .lat-pie-caja { width: 48px; height: 48px; min-height: 48px; }


@media (max-width: 1280px) {
  .lat .lat-pie-fijo.lat-pie-ico { display: flex; flex-direction: column; gap: var(--e1); align-items: center; justify-content: flex-start; }
  .lat .lat-pie-fijo.lat-pie-ico > .lat-pie-caja,
  .lat .lat-pie-fijo.lat-pie-ico > button {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 auto; margin: 0;
  }
  .lat .lat-pie-fijo.lat-pie-ico > .lat-pie-caja > .lat-tema-ico { width: 44px; height: 44px; }
}



.ui-esquema { display: grid; grid-template-columns: var(--ancho-lateral, 260px) minmax(0, 1fr) auto;
              
              grid-template-rows: minmax(0, 1fr);
              height: 100dvh; overflow: hidden; background: var(--bg); color: var(--tinta);
              font: var(--t-m)/1.6 var(--fuente); }

@media (max-width: 1280px) { .ui-esquema { grid-template-columns: 76px minmax(0, 1fr) auto; }
  
  .ui-esquema > .lat { grid-column: 1; grid-row: 1; }
  .ui-esquema > .ui-main { grid-column: 2; grid-row: 1; }
  .ui-esquema > .av { grid-column: 3; grid-row: 1; }
  
  .ui-esquema:has(> .lat[data-cajon="1"]) { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-esquema:has(> .lat[data-cajon="1"]) > .ui-main { grid-column: 1; }
  .ui-esquema:has(> .lat[data-cajon="1"]) > .av { grid-column: 2; }
}


@media (max-width: 900px)  { .ui-esquema { grid-template-columns: minmax(0, 1fr); }
  .ui-esquema > .ui-main { grid-column: 1; grid-row: 1; }
  .ui-esquema > .lat { grid-column: 1; grid-row: 1; } }

.ui-main { position: relative; container-type: inline-size; display: flex; flex-direction: column;
           min-width: 0; min-height: 0; background: var(--hilo-fondo, var(--bg)); color: var(--tinta); }



.hi { flex: 1 1 auto; min-height: 0; overflow: auto; box-sizing: border-box;
      
      scrollbar-gutter: stable both-edges;
      padding: var(--e5) var(--e4) calc(var(--alto-capa, 148px) + var(--aire-caja, 84px));
      display: flex; flex-direction: column; gap: var(--e3); }
.hi > * { width: 100%; }
.hi-fila { width: 100%; max-width: min(100%, var(--ancho-lectura)); margin-inline: auto;
           box-sizing: border-box; display: flex;
            }
@container (max-width: 720px) { .hi-fila { max-width: 100%; } }



.hi-ir-final { position: sticky; bottom: 8px; align-self: flex-end; margin-inline-start: auto; margin-bottom: 8px;
               width: 44px; height: 44px; flex: 0 0 auto;
               border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0;
               background: var(--superficie-alta); color: var(--tinta); box-shadow: var(--e-2); z-index: 9; }

.hi-ir-final:hover { background: var(--superficie); color: var(--acento); }
.hi-vacio { color: var(--tenue); text-align: center; margin: auto; max-width: 60ch; }
.hi-vacio h2 { font-size: var(--t-l); color: var(--tinta); margin: 0 0 var(--e3); }
.hi-vacio ul { text-align: left; display: inline-block; margin: var(--e3) 0 0; padding-left: var(--e4); }


.hi-sin-hilo { max-width: 68ch; }
.hi-motivo-dato { font-size: var(--t-s); margin: var(--e2) 0 0; }
.hi-motivo-dato code { font-family: var(--fuente-mono, ui-monospace, monospace); color: var(--tinta);
  background: var(--superficie-alta); border-radius: 4px; padding: 1px 5px; word-break: break-word; }
.hi-motivo-como { font-size: var(--t-s); margin: var(--e2) 0 0; }


.hi-rojo { color: var(--mal-texto); font: var(--t-s)/1.5 var(--fuente); margin: var(--e2) 0; }


.hi.hi-solo-agente { display: flex; flex-direction: column; justify-content: center; }


.ui-esquema:has(> .lat[data-plegado="1"]) { grid-template-columns: 64px minmax(0, 1fr) auto; }
.ui-esquema:has(> .lat[data-plegado="1"]) > .lat { grid-column: 1; grid-row: 1; }
.ui-esquema:has(> .lat[data-plegado="1"]) > .ui-main { grid-column: 2; grid-row: 1; }
.ui-esquema:has(> .lat[data-plegado="1"]) > .av { grid-column: 3; grid-row: 1; }
@media (max-width: 900px) { .ui-esquema:has(> .lat[data-plegado="1"]) > .ui-main { grid-column: 1; } }


@media (max-width: 900px) {
  .hi { padding-left: var(--e4); padding-right: var(--e4); }
  .hi > * { width: 100%; }
  .hi-fila { max-width: 100%; margin-left: auto; margin-right: auto; }
}


.hi > .hi-ir-final { width: 44px; height: 44px; }


.ui-mudo { color: var(--tenue); font-size: var(--t-s); }
.ui-rojo { color: var(--mal-texto); font-size: var(--t-s); }
.ui-res { padding: var(--e2) 0; box-shadow: inset 0 -1px 0 var(--raya); font-size: var(--t-s); }
.ui-url { font: var(--t-xs)/1.5 var(--mono); color: var(--acento-texto); cursor: pointer; overflow-wrap: anywhere; }
.ui-tabla { width: 100%; }
.ui-menu-grupo { font: 600 var(--t-xs)/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase;
                 color: var(--tenue); padding: var(--e2) var(--e2) var(--e1); }

.ui-error { padding: var(--e4); border-radius: var(--r-m); background: color-mix(in oklab, var(--mal) 12%, transparent);
            box-shadow: 0 10px 26px -14px color-mix(in oklab, var(--mal) 55%, transparent); }
.ui-error b { color: var(--mal-texto); }
.ui-error p { margin: var(--e2) 0 0; font-size: var(--t-s); }

.ab-bloqueo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); justify-content: space-between;
              margin: var(--e3) var(--e4); padding: var(--e3) var(--e4); border-radius: var(--r-m);
              background: color-mix(in oklab, var(--mal) 14%, transparent);
              box-shadow: 0 10px 26px -14px color-mix(in oklab, var(--mal) 55%, transparent); }
.ab-que { display: flex; gap: var(--e2); align-items: baseline; min-width: 0; }
.ab-que b { color: var(--mal-texto); white-space: nowrap; }
.ab-pregunta { font: var(--t-s)/1.4 var(--mono); color: var(--tinta); overflow-wrap: anywhere; }
.ab-botones { display: flex; gap: var(--e2); align-items: center; }


.form-panel { display: flex; flex-direction: column; gap: var(--esp-2); min-height: 0; height: 100%;
  
  container-type: inline-size; }
.form-marco {
  width: 100%; min-height: 70vh; flex: 1 1 auto; border: 0; border-radius: var(--r-m, 12px);
  background: var(--fondo, #0e1116); box-shadow: var(--e-1, none);
}
.form-falta { color: var(--tenue); margin: 0; }
.form-pie { color: var(--tenue); font-size: 11.5px; margin: 0; }
.form-pie code { font-family: var(--mono); color: var(--tinta); background: var(--superficie-alta); border-radius: 4px; padding: var(--esp-1) var(--esp-1); }


.form-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: var(--esp-1) 0 0; }
.form-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
  padding-bottom: var(--esp-1); min-width: 0;
}

.form-barra { flex-wrap: nowrap; }
.form-barra > * { flex: 0 0 auto; }
.form-barra > .form-barra-titulo {
  flex: 1 1 auto; min-width: 0;
  
  font-size: var(--tipo-1); font-weight: 700; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.form-barra-titulo { font-size: var(--tipo-1); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }

.form-barra-ico { display: inline-flex; align-items: center; margin-right: var(--e1); line-height: 1; }

@media (max-width: 560px) { .form-barra .form-barra-ctl { min-height: 44px; } }

@container (max-width: 340px) {
  .form-barra { gap: var(--e1); }
  .form-barra > .ab, .form-barra .form-barra-ctl { padding-left: var(--e2); padding-right: var(--e2); }
  
  .form-barra > .ab { flex: 0 1 auto; min-width: 0; overflow: hidden; padding-left: var(--e1); padding-right: var(--e1); }
  
  .form-barra .form-barra-accion-txt { display: none; }
}
.form-alta .form-marco { min-height: 70vh; }
@media (max-width: 720px) { .form-alta .form-marco { min-height: 78vh; } }






.it-registro { font-family: var(--fuente, inherit); font-size: var(--tipo-2); }



.it-seccion { display: flex; flex-direction: column; gap: 0; min-width: 0; margin-bottom: 0;  font-family: var(--fuente, inherit); font-size: var(--tipo-2); flex: 1 1 auto; min-height: 0; }
.it-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--tipo-4); min-width: 0; }
.it-cabecera > b { overflow-wrap: anywhere; }
.it-cabecera > .ui-mudo { font-size: var(--tipo-1); }
.it-vacio { margin: 0; font-size: var(--tipo-1); overflow-wrap: anywhere; }

.it-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.it-item {
  min-width: 0;
  background: var(--superficie-alta);
  border-radius: var(--r-m, 12px);
  box-shadow: var(--e-1, 0 1px 2px rgba(0, 0, 0, .25));
  overflow: hidden;
}
.it-cabeza {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: var(--esp-2) var(--esp-2); text-align: left; font: inherit; color: var(--tinta);
  background: transparent; border: 0; cursor: pointer; min-width: 0;
}
.it-cabeza:hover { background: color-mix(in oklab, var(--superficie) 70%, var(--superficie-alta)); }
.it-cabeza:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: -2px; border-radius: var(--r-m, 12px); }
.it-alias { font-size: var(--tipo-1); line-height: 1.35; overflow-wrap: anywhere; }
.it-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--tipo-1); color: var(--tenue); line-height: 1.35; min-width: 0; }
.it-meta > span { overflow-wrap: anywhere; }
.it-meta b { color: var(--tinta); font-weight: 600; }

.it-registro { padding: var(--esp-1) var(--esp-2) var(--esp-2); min-width: 0; box-sizing: border-box; max-width: 100%;
  
  background: var(--visor-lienzo);
  
  container-type: inline-size; container-name: ficha; }



.it-ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; margin: var(--esp-1) 0 0; font-size: var(--tipo-2); min-width: 0; }
.it-ficha dt { color: var(--tenue); }

.it-ficha dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.it-titulo { margin: var(--esp-3) 0 var(--esp-1); font-size: var(--tipo-1); color: var(--tenue); font-weight: 600; }
.it-token { margin-top: var(--esp-2); min-width: 0; }
.it-token-alias { margin: 0 0 var(--esp-1); font-family: var(--fuente, inherit); font-weight: 500; font-size: var(--tipo-1); overflow-wrap: anywhere; }

.it-campos {
  
  width: 100%; table-layout: auto; border-collapse: collapse; font-size: var(--tipo-2); }
.it-campos th, .it-campos td {
  text-align: left; padding: 0 var(--e1); vertical-align: middle;
  
  min-height: 40px; overflow-wrap: normal; word-break: keep-all;   
}
.it-campos th { color: var(--tenue); font-weight: 600; font-size: var(--tipo-1); }
.it-campos th:first-child, .it-campos td:first-child { min-width: 12ch; }   
.it-campos td:last-child { min-width: 24ch; }   



.it-borradores { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: var(--esp-1) 0 var(--esp-3);
  border-left: 2px dashed var(--raya, #30363d); padding-left: var(--esp-2); }
.it-borradores-titulo { margin: 0; font-size: var(--tipo-1); }


.it-meta > .it-chip, .it-meta > .it-ficha-estado {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: var(--esp-1) var(--esp-2); border-radius: 999px; background: var(--superficie);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--raya) 45%, transparent);
}
.it-meta > .it-ficha-estado[data-estado-deseable="1"] {
  background: color-mix(in oklab, var(--acento-texto) 12%, var(--superficie));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acento-texto) 35%, transparent);
}
.it-sha-linea { display: block; font-size: var(--tipo-1); color: var(--tenue); line-height: 1.35; min-width: 0; }
.it-sha { font-size: var(--tipo-1); color: var(--tinta); overflow-wrap: anywhere; word-break: break-all; }

@media (min-width: 720px) {
  .it-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
  .it-alias { grid-column: 1; }
  .it-meta { grid-column: 1; }
  .it-sha-linea { grid-column: 1 / -1; }
}


.it-marco {
  min-width: 0; border-radius: var(--r-m, 12px); background: var(--superficie-alta);
  
  container-type: inline-size;
  
  overflow-x: auto;
  
  flex: 1 1 auto;
}

.it-tabla { --it-fija-w: 86px; width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--tipo-2);
  
  
  
  table-layout: auto; }
.it-caption { caption-side: top; text-align: left; padding: var(--esp-1) var(--esp-2); font-size: var(--tipo-1); color: var(--tenue); }
.it-tabla thead th {
  position: sticky; top: 0;
  
  
  background: var(--superficie); color: var(--tinta); font-weight: 700; font-size: var(--tipo-2);
  z-index: 3;
  
  box-shadow: var(--e-abajo);
  text-align: center; padding: var(--esp-1) var(--esp-2); white-space: nowrap;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--raya) 60%, transparent);
}

.it-tabla tbody td {
  padding: var(--esp-1) var(--esp-2); min-height: 40px; vertical-align: middle; text-align: center;
  
  overflow-wrap: normal; word-break: keep-all;
}
.it-tabla tbody tr { min-height: 40px; }
.it-tabla tbody tr:nth-child(even) { background: color-mix(in oklab, var(--superficie) 45%, transparent); }
.it-tabla tbody tr:hover { background: color-mix(in oklab, var(--acento-texto) 8%, var(--superficie-alta)); }

.it-c-etiqueta, .it-c-campo { color: var(--tinta); font-size: var(--tipo-2); }
.it-c-etiqueta { width: 22%; }
.it-c-campo { width: 30%; }
.it-c-desc { min-width: 18ch; color: var(--tenue); }
.it-c-tipo { min-width: 28ch; color: var(--tenue); }   


.it-c-estado { width: 1%; min-width: var(--it-fija-w, 86px); white-space: nowrap; box-sizing: border-box; }
.it-c-abrir { width: 44px; min-width: 44px; text-align: center; }






.it-tabla tbody td.it-c-campo { padding-right: var(--it-fija-w); }

.it-tabla thead th:nth-child(2) { padding-right: var(--it-fija-w); }   
@media (max-width: 560px) {
  .it-tabla tbody td.it-c-desc { padding-right: var(--e1); }   
  
}

.it-pastilla {
  display: inline-block; padding: var(--esp-1) var(--esp-2); border-radius: 999px; font-size: var(--tipo-1);
  background: var(--superficie); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--raya) 55%, transparent);
}
.it-pastilla-borrador { background: color-mix(in oklab, var(--aviso, var(--tenue)) 18%, var(--superficie)); }
.it-abrir {
  border: 0; background: transparent; color: var(--acento-texto); font: inherit; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; line-height: 1;
}
.it-abrir:hover { background: color-mix(in oklab, var(--acento-texto) 14%, transparent); }
.it-abrir:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }

.it-mas { display: inline-block; margin-left: var(--esp-1); }
.it-mas > summary { cursor: pointer; list-style: none; color: var(--acento-texto); font-size: var(--tipo-1); }
.it-mas > summary::-webkit-details-marker { display: none; }
.it-mas-texto { margin: var(--esp-1) 0 0; font-size: var(--tipo-1); color: var(--tenue); overflow-wrap: anywhere; max-width: 60ch; }
.it-mas-texto code { font-family: var(--fuente, inherit); font-weight: 500; color: var(--tinta); }



@container (max-width: 700px) {
  .it-tabla { min-width: 0; }
  .it-tabla thead th:nth-child(2), .it-tabla tbody td.it-c-campo { padding-right: var(--esp-2); }
  
  .it-tabla .it-c-campo, .it-tabla .it-c-dato_de_entrada { display: none; }
}
@container (max-width: 420px) {
  
  
  
}


.it-fila { cursor: pointer; }
.it-fila:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: -2px; }
.it-fila:hover { background: color-mix(in oklab, var(--acento-texto) 10%, var(--superficie-alta)); }



.it-ficha-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2); padding: var(--e1) 0 var(--e2); min-width: 0; }

.it-hero-badge {
  background: var(--acento); color: var(--acento-texto, var(--fondo));
  
  aspect-ratio: 1; border-radius: var(--r-s); padding: 0; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em;
}

.it-alias-vacio { background: transparent; border: 0; padding: 0 var(--e1); color: var(--tenue); font: inherit; cursor: pointer; border-radius: var(--r-s); }
.it-alias-vacio:hover, .it-alias-vacio:focus-visible { background: var(--superficie-alta); color: var(--tinta); }
.it-ficha-titulo { margin: 0; font-size: var(--tipo-4); font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; min-width: 0; }
.it-ficha-sep { color: var(--tenue); font-weight: 400; }
.it-ficha-desc { flex: 1 1 100%; margin: 0; font-size: var(--tipo-2); color: var(--tenue); overflow-wrap: anywhere; }
.it-datos { width: 100%; border-collapse: collapse; font-size: var(--tipo-2); margin: var(--esp-1) 0 var(--esp-3); }
.it-datos th, .it-datos td {
  text-align: left; padding: 0 var(--esp-2); vertical-align: middle;
  min-height: 40px; overflow-wrap: normal; word-break: keep-all;   
}
.it-datos th { width: 34%; color: var(--tenue); font-weight: 600; font-size: var(--tipo-1); background: color-mix(in oklab, var(--superficie) 55%, transparent); }
.it-datos tr:nth-child(even) td { background: color-mix(in oklab, var(--superficie) 40%, transparent); }
.it-datos td { color: var(--tinta); overflow-wrap: anywhere; }
.it-campos thead th { position: static; }


.it-paginacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  
  flex: 0 0 auto;
  padding: var(--esp-2) var(--esp-2); font-family: var(--fuente, inherit); font-size: var(--tipo-1);
  color: var(--tenue); border-top: 1px solid color-mix(in oklab, var(--raya) 45%, transparent);
}
.it-por-pagina { display: inline-flex; align-items: center; gap: 6px; }
.it-por-pagina select {
  font: inherit; font-size: var(--tipo-1); color: var(--tinta); background: var(--superficie);
  border: 1px solid color-mix(in oklab, var(--raya) 60%, transparent); border-radius: 6px; padding: var(--esp-1) var(--esp-1);
}
.it-total { color: var(--tinta); }
.it-flechas { display: inline-flex; gap: 6px; margin-left: auto; }
.it-flecha {
  font: inherit; font-size: var(--tipo-1); color: var(--tinta); background: var(--superficie);
  border: 1px solid color-mix(in oklab, var(--raya) 60%, transparent); border-radius: 6px; padding: var(--esp-1) var(--esp-2); cursor: pointer;
}
.it-flecha:disabled { opacity: .45; cursor: default; }
.it-flecha:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }


.it-registro { width: 100%; max-width: var(--ficha-ancho-max, 76ch); margin-inline: auto; display: flex; flex-direction: column; gap: var(--e4); }
.it-bloque {
  
  
  background: var(--superficie-alta); border: 0;
  border-radius: var(--r-m); padding: var(--e1) var(--e2);
}
.it-bloque-titulo { margin: 0 0 var(--e1); font: 500 calc(11.5px * var(--esc))/1.2 var(--fuente); color: var(--tinta);
  
  overflow-wrap: anywhere; min-width: 0; }

.it-bloque { overflow-x: clip; overflow-y: visible; }

.it-bloque .it-datos, .it-bloque .it-campos { margin: 0; }
.it-bloque .it-datos th { font-size: var(--tipo-1); color: var(--tenue); }
.it-bloque .it-datos td, .it-bloque .it-campos td { font-size: var(--tipo-2); color: var(--tinta); }
.it-bloque .it-campos th { background: transparent; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--raya) 45%, transparent); }
.it-campo-nombre { color: var(--tenue); font-size: var(--tipo-1); }


@media (max-width: 560px) {
  
  .it-c-desc { display: none; }   
  
  .it-tabla { min-width: 0; }
  .it-c-etiqueta { width: 38%; }
  .it-c-campo { width: 38%; }
  
  
  .it-tabla { --it-fija-w: 74px; }
  .it-pastilla { padding: var(--esp-1) var(--esp-1); }
  .it-tabla tbody td { padding: var(--esp-1) var(--esp-1); }
  .it-paginacion { padding: var(--esp-2) var(--esp-1); gap: 6px 8px; }
  .it-total { flex-basis: 100%; }
}



.it-c-estado, .it-tabla thead th.it-c-estado {
  position: sticky; right: 0; z-index: 2;
  
  background: var(--superficie-alta);
  
  
  
  background: var(--superficie-alta);
  box-shadow: var(--sombra-fija);
}
.it-tabla thead th.it-c-estado { background: var(--superficie); z-index: 4; }



.it-marco {
  overflow: auto;
  
  flex: 1 1 auto; min-height: 0;
  
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--tinta) 32%, transparent) transparent;
  }
.it-marco::-webkit-scrollbar { width: 10px; height: 10px; }
.it-marco::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--tinta) 32%, transparent); border-radius: 999px; }
.it-marco::-webkit-scrollbar-track { background: transparent; }

.it-marco::-webkit-scrollbar,
.it-tabla::-webkit-scrollbar { width: 10px; height: 10px; }
.it-marco::-webkit-scrollbar-button,
.it-marco::-webkit-scrollbar-button:vertical,
.it-marco::-webkit-scrollbar-button:horizontal,
.it-tabla::-webkit-scrollbar-button,
.it-tabla::-webkit-scrollbar-button:vertical,
.it-tabla::-webkit-scrollbar-button:horizontal { display: none; width: 0; height: 0; }
.it-marco::-webkit-scrollbar-thumb,
.it-tabla::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--tenue), transparent 55%);
  border-radius: var(--r-s); border: 2px solid transparent; background-clip: content-box;
}
.it-marco::-webkit-scrollbar-track,
.it-tabla::-webkit-scrollbar-track { background: transparent; }


.it-c-estado::before, .it-tabla thead th:last-child::before {
  
  content: ""; position: absolute; top: 0; bottom: 0; left: -11px; width: 11px; pointer-events: none;
  
  
  background: linear-gradient(to right, transparent,
    var(--sombra-banda) var(--sombra-banda-parada, 100%),
    var(--sombra-banda) 100%);
  
}



.it-dl {
  margin: 0; min-width: 0;
  --it-dl-et: 18ch;   
  
  --it-n: 1;
  display: grid; grid-template-columns: repeat(var(--it-n), minmax(0, 1fr));
  min-width: 0; max-width: 100%;
  row-gap: var(--e2); column-gap: var(--e4); align-items: baseline;
  
  align-content: start;
}
.it-bloque + .it-bloque { margin-top: calc(var(--e5) * 1.5); }

@media (hover: hover) {
  .it-tarjeta-accion { opacity: .5; transition: opacity .15s ease, box-shadow .15s ease; }
  .it-dl-par:hover .it-tarjeta-accion, .it-dl-par:focus-within .it-tarjeta-accion {
    opacity: 1; box-shadow: var(--e-1);
  }
}

.it-dl[data-column-max="0"] {
  --it-dl-col: 1;
  --it-dl-desde: 100%;
  --it-dl-min-escalon: calc((var(--it-dl-desde) - (var(--it-dl-col) - 1) * var(--e4)) / var(--it-dl-col));
  --it-dl-min-tope: calc((100% - (var(--it-dl-col) - 1) * var(--e4)) / var(--it-dl-col));
  
  
  --it-n: 1;
  grid-template-columns: repeat(var(--it-n), minmax(0, 1fr));
}






.it-dl-par, .it-dl-par[data-layout="vertical"] {
  
  display: flex; flex-direction: column; align-items: center;
  grid-column: span 1; position: relative;
  min-height: var(--alto-tarjeta);
  background: var(--visor-tarjeta);
  border-radius: var(--r-tarjeta);
  padding: var(--esp-4);
  box-shadow: var(--visor-sombra);
  border: 0;
  min-width: 0; box-sizing: border-box;
}

.it-dl-par > .it-dl-et, .it-dl-par[data-layout="vertical"] > .it-dl-et {
  display: flex; align-items: center; align-self: stretch; gap: var(--esp-2);
  font-size: var(--tipo-1); text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  color: var(--tenue); margin: 0 0 var(--esp-2);
}

.it-dl-par > .it-dl-et::before {
  content: ""; flex: 0 0 auto;
  width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%;
  background: var(--ok, var(--tenue));
}
.it-dl-par[data-estado="hueco"] > .it-dl-et::before { background: var(--aviso, var(--tenue)); }
.it-dl-par[data-estado="deuda"] > .it-dl-et::before { background: var(--mal); }

.it-dl-par[data-estado="hueco"] {
  background: var(--visor-hueco);
  box-shadow: none;
}
.it-dl-par { box-shadow: var(--visor-sombra); }

.it-dl-par > .it-dl-val {
  display: flex; align-items: center; justify-content: center; text-align: center;
  flex: 1 1 auto; align-self: stretch; width: 100%;
  min-width: 0;
}
.it-dl[data-layout="vertical"] .it-dl-par { row-gap: var(--e1); }
.it-dl-et { margin: 0; font-size: var(--tipo-1); color: var(--tenue); font-weight: 400; display: block;
  
  
  
  min-width: 0; overflow-wrap: break-word; }





.it-dl-val { min-width: 0; margin: 0; font-size: var(--tipo-2); color: var(--tinta); display: block;
  overflow-wrap: anywhere; word-break: break-word; }

.it-dl[data-layout="vertical"] .it-dl-par > .it-dl-et { grid-column: 1 / -1; }

.it-dl-par[data-layout="vertical"] > .it-dl-et { grid-column: 1 / -1; }

.it-dl-par[data-bloque="tramos"] > .it-dl-et { grid-column: 1 / -1; }
.it-dl-par[data-bloque="tramos"] > .it-tramos { grid-column: 1 / -1; }





.it-hueco { color: var(--tenue); font-size: var(--tipo-2); font-family: var(--fuente, inherit); font-style: normal; }


.sc-card { container-type: inline-size; }

.sc-fields[data-column-max="1"] { grid-template-columns: minmax(0, 1fr); }
.sc-fields[data-column-max]:not([data-column-max="1"]) {
  --it-dl-col: 1;
  --it-dl-desde: 100%;
  --it-dl-min-escalon: calc((var(--it-dl-desde) - (var(--it-dl-col) - 1) * var(--e4)) / var(--it-dl-col));
  --it-dl-min-tope: calc((100% - (var(--it-dl-col) - 1) * var(--e4)) / var(--it-dl-col));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--it-dl-min-escalon), var(--it-dl-min-tope))), 1fr));
}


.it-tramos { margin: 0; min-width: 0; }

.it-tramos-lista { margin: 0; display: flex; flex-direction: column; gap: var(--e2); }


.it-tramo { display: flex; flex-direction: column; gap: var(--e1); align-items: flex-start; min-width: 0; }
.it-tramo-et { color: var(--tenue); font-size: var(--tipo-1); overflow-wrap: normal; }


@container ficha (max-width: 519px) {
  .it-dl { grid-template-columns: minmax(0, 1fr); }
  
  .it-dl-par > .it-dl-et { margin-bottom: var(--esp-1); }
  
  
  .it-ficha-cab { flex-wrap: wrap; }
  .it-ficha-cab > * { min-width: 0; max-width: 100%; }
}

.it-tramo-val { margin: 0; font-size: var(--tipo-2); color: var(--tinta); overflow-wrap: anywhere; min-width: 0; }



.valor-de-la-hoja[data-identificador="1"] {
  display: block; max-width: 100%; box-sizing: border-box;
  
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; word-break: break-all;
  
  font-family: var(--fuente, inherit); font-weight: 500;
  background: var(--visor-capsula); border-radius: var(--r-s); padding: 0 var(--esp-1); box-sizing: border-box;
}

.valor-de-la-hoja[data-identificador="1"] .valor-de-la-hoja-texto {
  display: block; max-width: 100%;
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; word-break: break-all;
}

.valor-de-la-hoja[data-identificador-largo="1"],
.valor-de-la-hoja[data-identificador-largo="1"] .valor-de-la-hoja-texto {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  overflow-wrap: normal; word-break: normal;
}


.valor-de-la-hoja[data-hueco="1"], .valor-de-la-hoja[data-deuda="1"] {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: 0 var(--esp-1); border-radius: var(--r-s);
}
.valor-de-la-hoja[data-hueco="1"] { background: var(--hueco-fondo); }
.valor-de-la-hoja[data-deuda="1"] { background: var(--deuda-fondo); }


.it-dl-par[data-layout="vertical"] { display: flex; }

.it-dl-par[data-layout="vertical"] .it-dl-et { margin-bottom: var(--e1); }
.it-dl-par[data-layout="vertical"] .it-dl-val { display: block;
}



.it-c-desc, .it-dl-val:not([data-identificador="1"]) {
  max-width: var(--linea);
}



@media (max-width: 560px) {
  .it-tabla { table-layout: fixed; width: 100%; }
  .it-tabla thead th.it-c-dato_de_entrada, .it-tabla tbody td.it-c-dato_de_entrada,
  .it-tabla thead th.it-c-id, .it-tabla tbody td.it-c-id { display: none; }
  .it-tabla thead th, .it-tabla tbody td { min-width: 0; }
  .it-c-etiqueta { width: auto; }
  .it-c-campo { width: auto; }
}


.it-aviso-forma {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  margin: var(--esp-2) 0 0; padding: 0 var(--esp-2);
  font-size: var(--tipo-1); color: var(--tenue);
  background: var(--visor-capsula); border-radius: var(--r-s);
}
.it-aviso-forma::before {
  content: ""; flex: 0 0 auto;
  width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%;
  background: var(--aviso, var(--tenue));
}


.it-archivo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1); min-width: 0; }
.it-archivo-tipo { font-family: var(--fuente, inherit); font-weight: 600; font-size: var(--tipo-1); color: var(--tenue); background: var(--visor-capsula);
  border-radius: 4px; padding: 0 var(--esp-1); }
.it-archivo-peso { font-size: var(--tipo-1); color: var(--tinta); }
.it-archivo-sha { font-family: var(--fuente, inherit); font-weight: 500; font-size: var(--tipo-1); color: var(--tenue); }
.it-archivo-hueco { flex-basis: 100%; font-size: var(--tipo-1); color: var(--aviso, var(--tenue)); }



.it-archivo-abrir { display: inline-flex; align-items: center; min-block-size: var(--esp-5);
  font-size: var(--tipo-1); color: var(--acento-texto); text-decoration: underline; }
.it-archivo-abrir:hover { color: var(--tinta); }
.it-archivo-visor { display: block; margin-top: var(--esp-1); max-width: 100%; border: 1px solid var(--raya); border-radius: 4px; background: var(--superficie); }

.it-archivo-visor img { display: block; max-width: 100%; height: auto; }

.it-archivo-visor, iframe.it-archivo-visor { box-sizing: border-box; }
iframe.it-archivo-visor { width: 100%; height: 60vh; min-height: 320px; }


.it-bloque {
  background: transparent;                 
  border-radius: 0;
  padding: var(--e3) 0 0;
  
  border: 0;
}
.it-bloque + .it-bloque { margin-top: calc(var(--e5) * 1.5); }

@media (hover: hover) {
  .it-tarjeta-accion { opacity: .5; transition: opacity .15s ease, box-shadow .15s ease; }
  .it-dl-par:hover .it-tarjeta-accion, .it-dl-par:focus-within .it-tarjeta-accion {
    opacity: 1; box-shadow: var(--e-1);
  }
}
.it-bloque-titulo {
  font: 600 calc(10.5px * var(--esc)) / 1.2 var(--fuente);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 var(--e2);
}
.it-dl-et {
  font-size: calc(var(--tipo-1) * .92);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.it-dl-val { font-weight: 500; color: var(--tinta); }
.it-ficha-titulo { font-size: calc(var(--tipo-4) * 1.25); letter-spacing: -.01em; }
.it-ficha-desc { max-width: 62ch; line-height: 1.45; }


.it-tabla { width: max-content; min-width: 100%; }
.it-tabla thead th, .it-tabla tbody td { white-space: normal; }

.it-tabla .it-c-token, .it-tabla .it-c-dato_de_entrada, .it-tabla .it-c-estado { white-space: nowrap; }


.it-dl-par { --permiso-punto: var(--tenue); }                       
.it-dl-par:has(.valor-de-la-hoja[data-permiso="editable"]) { --permiso-punto: var(--ok, var(--acento)); }
.it-dl-par:has(.valor-de-la-hoja[data-permiso="lectura"])   { --permiso-punto: var(--tenue); }
.it-dl-par:has(.valor-de-la-hoja[data-permiso="sin_declarar"]) { --permiso-punto: var(--aviso, var(--tenue)); }




.it-dl-par[data-puede-editar="1"] { cursor: pointer; }
.it-dl-par[data-puede-editar="1"]:focus-visible { box-shadow: 0 0 0 2px var(--acento), var(--visor-sombra); outline: none; }
.it-dl-par[data-edicion="activa"] { box-shadow: 0 0 0 2px var(--acento), var(--visor-sombra); }
.it-dl-par[data-edicion="aviso"] { box-shadow: 0 0 0 2px var(--mal), var(--visor-sombra); }


.it-tarjeta-accion {
  position: absolute; top: var(--esp-2); right: var(--esp-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icono); height: var(--icono);
  color: var(--tenue); background: none; padding: 0;
}
a.it-tarjeta-accion:hover, a.it-tarjeta-accion:focus-visible { color: var(--acento-texto); }


.it-editor { display: flex; align-items: center; justify-content: center; gap: var(--esp-1); width: 100%; min-width: 0; }
.it-editor-campo {
  flex: 1 1 auto; min-width: 0; width: 100%;
  text-align: center; font: inherit; color: var(--tinta);
  background: var(--visor-lienzo); border: 0; border-radius: var(--r-s);
  padding: var(--esp-1) var(--esp-2);
}
.it-editor-campo:focus { outline: none; }
.it-editor-ok {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--icono); height: var(--icono);
  color: var(--acento-texto); background: none; border: 0; cursor: pointer; padding: 0;
}


.it-edicion-aviso, .it-edicion-hueco {
  margin: var(--esp-1) 0 0; font-size: var(--tipo-1); text-align: center;
  padding: 0 var(--esp-2); border-radius: var(--r-s);
}
.it-edicion-aviso { color: var(--mal); background: var(--deuda-fondo); }
.it-edicion-hueco { color: var(--tenue); }


.it-archivo-visor { display: block; margin: var(--esp-2) auto 0; max-width: 100%; border-radius: var(--r-m); }
img.it-archivo-visor { object-fit: cover; max-height: 40vh; }
.it-dl-par[data-visor="pdf"] .it-archivo-visor { width: 100%; min-height: 220px; background: var(--visor-capsula); box-shadow: var(--visor-sombra); }


@media (max-width: 900px) {
  .it-tarjeta-accion, .it-editor-ok { width: var(--icono-tactil); height: var(--icono-tactil); }
}


.it-dl {
  --it-span: 1;                       
}
.it-dl-par, .it-dl-par[data-layout="vertical"] {
  grid-column: span var(--it-span);
}

@container ficha (max-width: 519px) {
  .it-dl-par, .it-dl-par[data-layout="vertical"] { grid-column: 1 / -1; }
}


.it-registro {
  background: transparent;          
  
  max-width: var(--ficha-ancho-max, none);
  margin-inline: auto;
}



@container ficha (min-width: 700px) { .it-dl { --it-n: 2; } }
@container ficha (min-width: 1180px) { .it-dl { --it-n: 3; } }  


@container ficha (min-width: 1640px) {
  .it-registro > .it-dl-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
}

.it-dl-par:has(.valor-de-la-hoja[data-identificador-largo="1"]) { grid-column: 1 / -1; background: var(--visor-tarjeta); box-shadow: var(--visor-sombra); }

.it-dl-par:has(.valor-de-la-hoja[data-texto-largo="1"]), .it-dl-par[data-texto-largo="1"] { grid-column: span 2; }
.it-dl-par:has(.valor-de-la-hoja[data-texto-largo="1"]) .it-dl-val,
.it-dl-par[data-texto-largo="1"] .it-dl-val { text-align: left; max-width: 68ch; line-height: 1.65; align-self: start; }
.it-dl-par[data-bloque="tramos"] { grid-column: 1 / -1; }



.sc-field { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }

.sc-field-label { font-size: var(--t-s, 13px); color: var(--tinta); font-weight: 600; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.sc-field-req { color: var(--mal-texto); }
.sc-field-desc { margin: 0; font-size: var(--tipo-1); color: var(--tenue); min-width: 0; overflow-wrap: anywhere; }
.sc-field-clase { font-family: var(--mono); color: var(--tenue); background: var(--superficie-alta); border-radius: 4px; padding: 0 var(--esp-1); }

:root.tema-claro .sc-field-clase { background: color-mix(in oklab, var(--tenue) 18%, transparent); }
.sc-field-deuda { color: var(--aviso, var(--tenue)); }
.sc-field-error { margin: 0; font-size: var(--tipo-1); color: var(--mal-texto); }

.sc-input {
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: var(--tipo-2); color: var(--tinta); background: var(--superficie);
  
  
  
  
  border: 0; border-bottom: 2px solid var(--tenue); border-radius: 0;
  background: var(--superficie-alta);
  padding: var(--esp-2) var(--esp-2);
}
.sc-input::placeholder { color: color-mix(in oklab, var(--tenue) 70%, transparent); }
.sc-input:hover { border-bottom-color: color-mix(in oklab, var(--tenue) 60%, transparent); }
.sc-input:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; border-bottom-color: var(--acento-texto); }
.sc-textarea { min-height: 72px; resize: vertical; }
.sc-select { appearance: auto; }

.sc-field-invalido .sc-input { border-bottom-color: var(--mal-texto); }
.sc-input[aria-invalid="true"] { border-bottom-color: var(--mal-texto); }


.sc-fields { display: grid; gap: var(--esp-3) var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); min-width: 0; }


.sc-card { display: flex; flex-direction: column; min-width: 0; background: var(--superficie); border-radius: var(--r-m, 12px);
  
  overflow: clip; }
.sc-card-header { display: flex; align-items: baseline; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3) 0; }
.sc-card-title { margin: 0; font-size: var(--t-s, 13px); font-weight: 700; color: var(--tinta); }
.sc-card-content { padding: var(--esp-2) var(--esp-3) var(--esp-3); min-width: 0; }


.sc-item { display: flex; flex-wrap: wrap; column-gap: var(--e3); row-gap: var(--e2); align-items: baseline;
  
  --it-dl-et: 30%; padding: var(--e1) 0; }   

.sc-item-label { flex: 0 0 var(--it-dl-et); font-size: var(--t-s, 13px); color: var(--tenue); }
.sc-item-value { flex: 1 1 0; min-width: min-content; font-size: var(--tipo-2); color: var(--tinta); overflow-wrap: break-word; }


.sc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding-top: var(--esp-1); }
.sc-aviso { margin: 0; font-size: var(--tipo-1); color: var(--tenue); }
.sc-aviso[data-tono="ok"] { color: var(--acento-texto); }
.sc-aviso[data-tono="mal"] { color: var(--mal-texto); }




.sc-select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--esp-2); cursor: pointer; }
.sc-select-trigger[data-placeholder] { color: var(--ayuda-tinta);            }
.sc-select-trigger[data-state="open"] { border-color: var(--acento-texto); }
.sc-select-icon { font-size: var(--tipo-1); color: var(--tenue); }
.sc-select-content {
  z-index: 80; min-width: var(--radix-select-trigger-width, 160px); max-height: 260px; overflow: auto;
  background: var(--superficie-alta); color: var(--tinta);
  border-radius: var(--r-m, 12px); box-shadow: var(--e-abajo, 0 10px 26px -18px rgba(0,0,0,.6)),
    inset 0 0 0 1px color-mix(in oklab, var(--tenue) 35%, transparent);
  padding: var(--esp-1);
}
.sc-select-item {
  display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-radius: var(--r-s, 8px);
  font-size: var(--tipo-2); color: var(--tinta); cursor: pointer; outline: none;
}
.sc-select-item[data-highlighted] { background: color-mix(in oklab, var(--acento-texto) 18%, var(--superficie-alta)); }
.sc-select-item[data-state="checked"] { font-weight: 700; }
.sc-select-item[data-state="checked"]::after { content: "✓"; margin-left: auto; color: var(--acento-texto); font-size: var(--tipo-1); }


.sc-radios { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); min-width: 0; }
.sc-radio { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--tipo-2); color: var(--tinta); cursor: pointer; }
.sc-radio-item {
  width: 16px; height: 16px; border-radius: 999px; flex: 0 0 auto;
  background: var(--superficie); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tenue) 80%, transparent);
}
.sc-radio-item[data-state="checked"] { box-shadow: inset 0 0 0 1px var(--acento-texto); }
.sc-radio-punto { display: block; width: 8px; height: 8px; margin: var(--esp-1); border-radius: 999px; background: var(--acento-texto); }
.sc-radio-item:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }


.sc-check { display: inline-flex; align-items: center; gap: var(--esp-2); }
.sc-check-box {
  width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tenue) 80%, transparent);
  cursor: pointer;
}
.sc-check-box[data-state="checked"] { background: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.sc-check-box:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }
.sc-check-marca { font-size: var(--tipo-1); line-height: 1; color: var(--tinta-inversa); }
.sc-check-texto { font-size: var(--tipo-1); color: var(--tenue); }


.sc-dialogo-velo { position: fixed; inset: 0; z-index: 90; background: color-mix(in oklab, var(--bg) 72%, transparent); }
.sc-dialogo {
  position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--superficie); color: var(--tinta); border-radius: var(--r-m, 12px); padding: var(--esp-4) var(--esp-4);
  box-shadow: var(--e-abajo, 0 16px 40px -20px rgba(0,0,0,.7)), inset 0 0 0 1px color-mix(in oklab, var(--tenue) 35%, transparent);
}
.sc-dialogo:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.sc-dialogo-titulo { margin: 0 0 var(--esp-1); font-size: var(--t-m, 15px); font-weight: 700; }
.sc-dialogo-desc { margin: 0 0 var(--esp-3); font-size: var(--tipo-1); color: var(--tenue); }
.sc-dialogo-cuerpo { display: flex; flex-direction: column; gap: var(--esp-2); margin-bottom: var(--esp-3); min-width: 0; }
.sc-dialogo-cerrar {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--tenue); font: inherit;
}
.sc-dialogo-cerrar:hover { background: var(--superficie-alta); color: var(--tinta); }
.sc-dialogo-cerrar:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }


.sc-bloque-titulo {
  grid-column: 1 / -1;
  margin: var(--esp-4) 0 0;
  font-size: var(--tipo-2);
  font-weight: 600;
  color: var(--tenue);
  letter-spacing: .01em;
}
.sc-fields > .sc-bloque-titulo:first-child { margin-top: 0; }


.sc-field-label {
  font-size: var(--tipo-1);        
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.sc-field-desc { font-size: var(--tipo-1); line-height: 1.4; color: var(--ayuda-tinta); }   
.sc-card {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid color-mix(in oklab, var(--raya) 55%, transparent);
  padding-top: var(--e2);
  margin-top: var(--e3);
}
.sc-card-header { padding: 0 0 var(--e2); }
.sc-card-title {
  font: 500 calc(11.5px * var(--esc))/1.2 var(--fuente);   
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.sc-card-content { padding: 0; }
.sc-fields { gap: var(--esp-4) var(--esp-4); }


.ad { color: var(--tinta); font: var(--t-m)/1.65 var(--fuente); }
.ad h1, .ad h2, .ad h3 { font-weight: 600; line-height: 1.25; margin: var(--e4) 0 var(--e2); }
.ad h1 { font-size: var(--t-l); }
.ad h2 { font-size: var(--t-m); }
.ad h3 { font-size: var(--t-s); color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.ad p { margin: 0 0 var(--e3); }
.ad code { font: var(--t-s)/1.5 var(--mono); background: var(--superficie-alta);
           padding: 1px 5px; border-radius: var(--r-s); }
.ad pre { margin: 0 0 var(--e3); padding: var(--e3); overflow: auto; border-radius: var(--r-m);
          background: var(--superficie-alta); box-shadow: var(--e-1); }
.ad pre code { background: none; padding: 0; }
.ad blockquote { margin: 0 0 var(--e3); padding-left: var(--e3); box-shadow: inset 2px 0 0 var(--raya); color: var(--tenue); }
.ad .ad-pie { margin-top: var(--e3); font: var(--t-xs)/1.5 var(--mono); color: var(--tenue); overflow-wrap: anywhere; }


.ac { display: inline-flex; align-items: center; gap: var(--e2); padding: 2px 8px 2px 10px;
      border-radius: var(--r-s); background: var(--superficie-alta); box-shadow: var(--e-1);
      font: var(--t-xs)/1.7 var(--mono); color: var(--tenue); max-width: 100%; }
.ac-alias { color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sha { color: var(--acento); }
.ac[data-falta] { box-shadow: var(--foco-mal); }
.ac[data-falta] .ac-sha { color: var(--mal); }
.ac-copiar { border: 0; background: none; color: var(--tenue); cursor: pointer; padding: 0 2px;
             font: var(--t-xs) var(--mono); }
.ac-copiar:hover { color: var(--acento); }


.at { width: 100%; border-collapse: collapse; font: var(--t-s)/1.5 var(--fuente); }
.at th, .at td { text-align: left; padding: var(--e2) var(--e3); vertical-align: top;
                 
                 overflow-wrap: normal; word-break: keep-all; }

.at-marco { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }

.at td.cod, .at td .cod { white-space: nowrap; }
.at th { position: sticky; top: 0; background: var(--superficie-alta); color: var(--tenue);
         font: 600 var(--t-xs)/1.5 var(--fuente); text-transform: uppercase; letter-spacing: .05em; }
.at tbody tr { box-shadow: inset 0 -1px 0 var(--raya); }
.at tbody tr:hover { background: var(--superficie-alta); }
.at td.num { font-family: var(--mono); text-align: right; white-space: nowrap; }


.aa { list-style: none; margin: 0; padding: 0; font: var(--t-s)/1.6 var(--fuente); }
.aa li { padding: 3px 0 3px calc(var(--e4) * var(--n, 0)); position: relative; }
.aa li::before { content: ""; position: absolute; left: calc(var(--e4) * var(--n, 0) - 8px);
                 top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--raya); }
.aa li[data-actual] { color: var(--tinta); font-weight: 600; }
.aa li[data-actual]::before { background: var(--acento); }
.aa .aa-ruta { font: var(--t-xs)/1.5 var(--mono); color: var(--tenue); overflow-wrap: anywhere; }
.aa li[data-falta] .aa-ruta { color: var(--mal); }


.aq { display: flex; flex-direction: column; gap: 3px; padding: var(--e3);
      border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--e-1); }
.aq-cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.aq-id { font: 600 var(--t-s)/1.3 var(--mono); color: var(--tinta); overflow-wrap: anywhere; }
.aq-que { font: var(--t-s)/1.55 var(--fuente); color: var(--tinta); }
.aq-meta { font: var(--t-xs)/1.5 var(--mono); color: var(--tenue); overflow-wrap: anywhere; }
.aq-meta[data-espera] { color: var(--aviso); }





.am { box-sizing: border-box; padding: var(--e3) var(--e4); border-radius: var(--r-l); background: var(--superficie);
      box-shadow: var(--e-1); width: var(--ancho-mensaje, 88%);
      margin-inline: 0 auto; }                 
.am[data-rol="user"] {
  
  background: var(--acento);
  color: var(--tinta-inversa);
  box-shadow: var(--e-1);
  margin-inline: auto 0;                        
}

.am[data-rol="user"] .am-rol, .am[data-rol="user"] .am-txt,
.am[data-rol="user"] .am-txt a, .am[data-rol="user"] .am-txt code { color: var(--tinta-inversa); }
.am[data-rol="user"] .am-txt code { background: color-mix(in oklab, var(--tinta-inversa) 12%, transparent); }
.am-rol { display: block; font: 600 var(--t-xs)/1.5 var(--mono); letter-spacing: .04em;
          text-transform: uppercase; color: var(--tenue); margin-bottom: var(--e1); }

.am-txt { font-size: var(--t-m); line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.am-txt[data-md="1"] { white-space: normal; }


.am-txt h1, .am-txt h2, .am-txt h3 { font-weight: 600; margin: var(--e3) 0 var(--e2); line-height: 1.3; }
.am-txt h1 { font-size: var(--t-l); }
.am-txt h2 { font-size: var(--t-m); }
.am-txt h3 { font-size: var(--t-s); color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.am-txt ul, .am-txt ol { margin: var(--e2) 0; padding-left: var(--e5); }
.am-txt li { margin: var(--e1) 0; }
.am-txt code { font: var(--t-s)/1.5 var(--mono); background: var(--superficie-alta);
               padding: 1px 5px; border-radius: var(--r-s); }
.am-txt pre { margin: var(--e2) 0; padding: var(--e3); overflow: auto; border-radius: var(--r-m);
              background: var(--bg); box-shadow: var(--e-1); }
.am-txt pre code { background: none; padding: 0; }

.am-cmd-caja { display: grid; gap: var(--e1); justify-items: end; }
.am-cmd-caja .am-pre { width: 100%; }
.am-cmd { min-height: 32px; padding: 0 var(--e3); border: 0; border-radius: var(--r-s); cursor: pointer;
          background: var(--superficie-alta); color: var(--tenue); font: 600 var(--t-xs)/1 var(--fuente); }
.am-cmd:hover, .am-cmd:focus-visible { color: var(--tinta); box-shadow: var(--foco); outline: none; }
.am-cmd[data-insertado="si"] { color: var(--acento); }
@media (pointer: coarse) { .am-cmd { min-height: 44px; } }
.am-txt table { width: 100%; border-collapse: collapse; margin: var(--e3) 0; font-size: var(--t-s);
                border-radius: var(--r-m); overflow: hidden; box-shadow: var(--e-1); }
.am-txt th, .am-txt td { text-align: left; padding: var(--e2) var(--e3); vertical-align: top;
                         overflow-wrap: anywhere; }
.am-txt th { background: var(--superficie-alta); color: var(--tenue); font: 600 var(--t-xs)/1.5 var(--fuente);
             text-transform: uppercase; letter-spacing: .05em; }
.am-txt tbody tr { box-shadow: inset 0 -1px 0 var(--raya); }
.am-txt blockquote { margin: var(--e2) 0; padding-left: var(--e3); box-shadow: inset 2px 0 0 var(--raya); color: var(--tenue); }

.am-uso { display: flex; gap: var(--e2); margin-top: var(--e2); font: var(--t-xs)/1.5 var(--mono);
          color: var(--tenue); flex-wrap: wrap; }


.am-txt a { color: var(--acento-texto); }


@media (max-width: 700px) { .am[data-rol="user"] { margin-left: 4%; } }


.au-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; margin: 0 2px; white-space: nowrap; flex: 0 0 auto;
           border-radius: 999px; background: var(--superficie-alta); box-shadow: var(--e-1);
           font: 600 var(--t-xs)/1.9 var(--mono); color: var(--acento-texto); vertical-align: baseline; }


.au-adj { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.au-mini { width: 64px; height: 46px; object-fit: cover; border-radius: var(--r-s); box-shadow: var(--e-1);
           cursor: zoom-in; vertical-align: middle; }



.au-tool { margin: var(--e2) 0; border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--e-1); overflow: hidden; }
.au-tool > summary {
  display: flex; align-items: center; gap: var(--e2); cursor: pointer; list-style: none;
  padding: var(--e2) var(--e3); font: var(--t-s)/1.4 var(--fuente); color: var(--tinta);
  white-space: nowrap; overflow: hidden;
}
.au-tool > summary::-webkit-details-marker { display: none; }
.au-tool-ico { display: inline-flex; color: var(--acento); }
.au-tool-nom { white-space: nowrap; font: var(--t-xs)/1 var(--mono); color: var(--tenue); padding: 1px 6px; border-radius: 999px; background: var(--superficie-alta); }
.au-tool-pista { min-width: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--tenue); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }


.au-tool-caja { position: relative; background: var(--codigo-bg); padding: 0; }
.am-txt .au-tool-caja pre, .am-txt .au-tool-caja code {
  background: var(--codigo-bg); color: var(--codigo-tinta);
}
.au-tool-parte + .au-tool-parte { box-shadow: inset 0 1px 0 var(--codigo-btn); }
.au-tool-barra {
  display: flex; align-items: center; gap: var(--e2);
  padding: 5px var(--e3); background: var(--codigo-btn);
}
.au-tool-et { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--codigo-tenue); }
.au-tool-copiar {
  margin-inline-start: auto; cursor: pointer; border: 0; border-radius: var(--r-s);
  font: 600 var(--t-xs)/1 var(--fuente); color: var(--codigo-tenue); background: transparent; padding: 3px 6px;
}
.au-tool-copiar:hover { color: var(--codigo-tinta); background: var(--codigo-bg); }

.au-tool-espera { margin-inline-start: auto; font: var(--t-xs)/1 var(--mono); color: var(--codigo-tenue); opacity: .85;
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-tool-pre { margin: 0; padding: var(--e2) var(--e3) var(--e3); font: var(--t-s)/1.55 var(--mono); color: var(--codigo-tinta);
               white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; }

.au-lin { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.au-lin.au-error { color: var(--mal-texto); }

.au-tool-estado { margin-inline-start: auto; font: 600 var(--t-xs)/1 var(--mono); padding: 2px 7px; border-radius: 999px;
                  background: var(--superficie-alta); color: var(--tenue); white-space: nowrap; }
.au-tool-estado[data-estado="ok"] { color: var(--ok); }
.au-tool-estado[data-estado="mal"] { color: var(--mal-texto); }
.au-tool-estado[data-estado="ejecutando"] { color: var(--aviso); font-variant-numeric: tabular-nums; }
@keyframes au-late { from { opacity: .55; } to { opacity: 1; } }


.au-k { color: var(--codigo-clave); }          
.au-v { color: var(--codigo-tinta); }          
.au-s { color: var(--codigo-cadena); }          
.au-n { color: var(--codigo-num); }          
.au-p { color: var(--codigo-punt); }          


.tk-cmd  { color: var(--codigo-clave); font-weight: 600; }
.tk-opt  { color: var(--codigo-num); }
.tk-path { color: var(--codigo-cadena); }
.tk-str  { color: var(--codigo-cadena); }
.tk-var  { color: var(--codigo-num); font-style: italic; }
.tk-com  { color: var(--codigo-tenue); font-style: italic; }
.tk-num  { color: var(--codigo-num); }
.tk-bool { color: var(--codigo-clave); }
.tk-punt { color: var(--codigo-punt); }
.tk-k    { color: var(--codigo-clave); }
.tk-plain { color: var(--codigo-tinta); }

.au-lin.au-error, .tk.au-error { color: var(--mal-texto); }




@supports (-moz-appearance: none) {
  .au-tool-pre, .au-tool-caja { scrollbar-color: var(--codigo-btn) var(--codigo-bg); scrollbar-width: thin; }
}
.au-tool-pre::-webkit-scrollbar { width: 10px; height: 10px; }
.au-tool-pre::-webkit-scrollbar-track { background: var(--codigo-bg); }
.au-tool-pre::-webkit-scrollbar-thumb { background: var(--codigo-btn); border-radius: 999px; border: 2px solid var(--codigo-bg); }
.au-tool-pre::-webkit-scrollbar-thumb:hover { background: var(--codigo-tenue); }


.am-txt p { margin: 0 0 var(--e3); }
.am-txt p:last-child { margin-bottom: 0; }
.am-txt strong, .am-txt b { font-weight: 650; color: var(--tinta); }
.am-txt em { color: var(--tenue); }
.am-txt hr { border: 0; box-shadow: inset 0 1px 0 var(--raya); margin: var(--e4) 0; }
.am-txt ul { list-style: none; padding-left: var(--e4); }
.am-txt ul > li { position: relative; padding-left: var(--e3); }
.am-txt ul > li::before { content: "•"; position: absolute; left: 0; color: var(--acento-texto); font-weight: 700; }
.am-txt ol { counter-reset: am-ol; list-style: none; padding-left: var(--e4); }
.am-txt ol > li { counter-increment: am-ol; position: relative; padding-left: var(--e4); }
.am-txt ol > li::before { content: counter(am-ol) "."; position: absolute; left: 0; color: var(--tenue); font: 600 var(--t-xs)/1.6 var(--mono); }
.am-txt h1, .am-txt h2, .am-txt h3 { margin-top: var(--e4); }
.am-txt h1:first-child, .am-txt h2:first-child, .am-txt h3:first-child, .am-txt p:first-child { margin-top: 0; }


.au-pensar { margin: var(--e2) 0; border-radius: var(--r-m); background: var(--superficie-alta); box-shadow: var(--e-1); }
.au-pensar > summary { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); cursor: pointer; list-style: none; }
.au-pensar > summary::-webkit-details-marker { display: none; }
.au-pensar-et { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.au-pensar-pista { min-width: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--tenue); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-pensar-txt { margin: 0; padding: var(--e2) var(--e3) var(--e3); font: var(--t-s)/1.6 var(--mono); color: var(--tenue);
                white-space: pre-wrap; overflow-wrap: anywhere; max-height: 20rem; overflow: auto; }


@supports (-moz-appearance: none) {
  .au-pensar-txt { scrollbar-color: var(--superficie) var(--superficie-alta); scrollbar-width: thin; }
}



.hi-fila > .am { flex: 0 0 var(--ancho-mensaje, 88%); width: var(--ancho-mensaje, 88%); min-width: 0; }
.am, .am-txt, .au-tool, .au-pensar, .au-tool-caja, .au-tool-pre { min-width: 0; max-width: 100%; }


.au-pensar-et { white-space: nowrap; flex: 0 0 auto; }
.au-pensar-pista { flex: 1 1 auto; min-width: 0; }




.am-txt strong, .am-txt b { font-weight: 600; color: var(--tinta); }


.am-txt code {
  font-family: var(--mono);
  font-size: 1em;                
  line-height: inherit;
  padding: 0 5px;                
  border-radius: 5px;
  background: var(--superficie-alta);
  box-shadow: var(--e-1);
  color: var(--tinta);
  white-space: normal;           
  overflow-wrap: anywhere;       
  word-break: break-word;
}

.am-txt pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }


.am-txt li + li { margin-top: .45em; }
.am-txt ol { padding-left: var(--e5); }
.am-txt ol > li::before { width: 1.6em; }   


.am-txt p:has(> strong:only-child) { margin-top: var(--e5); margin-bottom: var(--e2); }
.am-txt p:has(> strong:only-child) > strong {
  display: block;                
  font-weight: 650;
  font-size: calc(var(--t-m) * 1.06);
  letter-spacing: .01em;
}


.am-txt a { word-break: break-word; overflow-wrap: anywhere; }


.am-txt > p, .am-txt > ul, .am-txt > ol, .am-txt > table, .am-txt > pre, .am-txt > blockquote { margin-block: var(--e3); }
.am-txt > :first-child { margin-top: 0; }
.am-txt > :last-child { margin-bottom: 0; }


.am-txt table, .am-txt > table, .am-txt > * > table { margin-block: var(--e3); }

.am-txt ul, .am-txt ol, .am-txt > ul, .am-txt > ol { margin-block: var(--e3); }


.au-tool-img { display: flex; flex-wrap: wrap; gap: var(--e2); padding: var(--e2) var(--e3) var(--e3); }
.au-tool-img figure { margin: 0; }
.au-tool-img img { max-width: 260px; max-height: 180px; border-radius: var(--r-s); box-shadow: var(--e-1);
                   cursor: zoom-in; display: block; }
.au-tool-img img:hover { box-shadow: var(--e-2); }
.au-tool-img figcaption { font: 500 var(--t-xs)/1.4 var(--mono); color: var(--codigo-tenue); margin-top: 4px;
                          max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.am-img { max-width: 100%; height: auto; border-radius: var(--r-m); box-shadow: var(--e-2); display: block; margin: var(--e3) 0; }



.am-flecha { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  position: absolute; top: calc(var(--e1) - 5px); right: calc(var(--e1) - 3px);
  padding: 0; border: 0; border-radius: var(--r-s); background: transparent;
  color: var(--tenue); cursor: pointer; vertical-align: middle; }
.am { position: relative; }
.am-flecha:hover { color: var(--tinta); background: var(--superficie-alta); }
.am-flecha:focus-visible { outline: none; box-shadow: var(--foco); }
.am-flecha svg { transition: transform .18s ease; }
.am-flecha[aria-expanded="true"] { color: var(--tinta); }
.am-flecha[aria-expanded="true"] svg { transform: rotate(180deg); }


@media (max-width: 900px) {
  .am-txt { font-size: max(14px, calc(14px * var(--esc))); }
  .am-rol { font-size: max(12px, calc(11px * var(--esc))); }
  .au-tool-nom, .au-tool-pista { font-size: max(12px, calc(11px * var(--esc))); }
  .au-tool-ico svg { width: 20px; height: 20px; }
}


@media (max-width: 900px) {
  
  
  .hi-fila > .am, .am, .am[data-rol="user"] { width: 100%; flex-basis: 100%; margin-inline: 0; }
}


.am-nombrado {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}
.am-nombrado:hover { text-decoration-thickness: 2px; }
.am-nombrado:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-radius: 2px; }
.am-nombrado-hueco { color: var(--texto-tenue); text-decoration-style: dotted; }
.am-nombrado-sin { font-size: var(--t-xs); }
.am-nombrado-roto { color: var(--texto-tenue); }


.av-barra { display: flex; gap: var(--e2); align-items: center; margin-bottom: var(--e2); flex-wrap: wrap; }
.av-barra .acom-campo { flex: 1; min-width: 12ch; }
.av-sitio { max-width: 16ch; }
.av-enlace {
  background: transparent; border: 0; padding: 0; cursor: pointer; text-align: start;
  font: var(--t-s)/1.4 var(--mono); color: var(--acento-texto); text-decoration: underline;
  overflow-wrap: anywhere;
}
.av-enlace:hover { color: var(--tinta); }
.av-pegado { margin: var(--e2) 0; }
.av-pegado > summary { cursor: pointer; font: var(--t-s)/1.4 var(--fuente); color: var(--tenue); }
.av-pegado .acom-campo { width: 100%; margin: var(--e2) 0; display: block; }
.av-mapa { margin: var(--e3) 0; }
.av-aviso { color: var(--aviso); font-size: var(--t-xs); margin: var(--e1) 0 0; }
.av-texto { max-height: 40vh; overflow: auto; margin-top: var(--e2); }
.av-ancho{flex-basis:100%}
.av-tabla-campos{width:100%;margin-top:var(--e2)}
.av-bloque{margin-top:var(--e3)}
.av-foto{width:100%;border-radius:var(--r-m);margin-top:var(--e2)}
.av-clic{cursor:crosshair}
.av-corta{display:block;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-campo-valor{max-width:28ch;padding:var(--e1) var(--e2)}
.av-suelta{flex:1;min-width:0}
.av-res{padding:var(--e1) 0}


.clv { position: relative; display: flex; flex-direction: column; gap: var(--e1); }
.clv-usuario { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.clv-sub { color: var(--tenue); font-size: var(--t-xs); margin: 0 0 var(--e3); }
.clv-et { display: block; font-size: var(--t-xs); color: var(--tenue); margin: var(--e3) 0 var(--e1); }
.clv-campo { width: 100%; box-sizing: border-box; background: var(--superficie-alta); color: var(--tinta);
             border: 0; border-radius: var(--r-m); padding: 11px 13px; font: inherit; -webkit-appearance: none; }
.clv-campo:focus, .clv-campo:focus-visible { outline: none; box-shadow: var(--foco); }
.clv-msg { font-size: var(--t-xs); margin-top: var(--e3); }
.clv-msg[data-tono="bien"] { color: var(--ok); }
.clv-msg[data-tono="mal"] { color: var(--mal-texto); }
.clv-accion { margin-top: var(--e4); }
.clv-accion .ab { width: 100%; height: 42px; }


.bv { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e3); min-width: 0; }
.bv-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.bv-cab h3 { margin: 0; font: 650 calc(13px * var(--esc))/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.bv-meta { font: var(--t-xs)/1.3 var(--mono); color: var(--tenue); }
.bv-grafo { width: 100%; height: auto; max-height: 340px; background: var(--superficie-alta); border-radius: var(--r-m); }
.bv-arista { stroke: var(--raya); stroke-width: 1; }
.bv-nodo circle { fill: var(--acento); opacity: .85; cursor: pointer; }
.bv-nodo text { fill: var(--tenue); font: 500 9px/1 var(--mono); }
.bv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bv-doc { display: flex; align-items: center; gap: var(--e2); width: 100%; box-sizing: border-box; border: 0; background: transparent; color: var(--tinta); font: var(--t-s)/1.35 var(--fuente); padding: 5px var(--e2); border-radius: var(--r-s); cursor: pointer; text-align: left; }
.bv-doc:hover { background: var(--superficie-alta); }
.bv-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-snap { font: var(--t-xs)/1 var(--mono); color: var(--tenue); }
.bv-sin { font: var(--t-xs)/1 var(--mono); color: var(--mal-texto); }
.bv-cuenta { font: var(--t-xs)/1 var(--mono); color: var(--tenue); white-space: nowrap; }
.bv-rotos { padding: var(--e2) var(--e3); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aviso) 40%, transparent); }
.bv-rotos ul { margin: 6px 0 0; padding-left: var(--e4); }
.bv-rotos code { color: var(--tinta); }


.ed { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); min-width: 0; height: 100%; }
.ed-cab { display: flex; align-items: center; gap: var(--e2); }
.ed-cab h3 { margin: 0; font: 650 calc(13px * var(--esc))/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); flex: 1 1 auto; }
.ed-estado { font: var(--t-xs)/1 var(--mono); color: var(--tenue); }
.ed-btn { border: 0; border-radius: var(--r-s); padding: 7px 11px; cursor: pointer; background: var(--acento); color: var(--tinta-inversa); font: 600 var(--t-xs)/1 var(--fuente); }
.ed-btn:disabled { opacity: .45; cursor: default; }
.ed-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); min-height: 0; flex: 1 1 auto; }
@media (max-width: 900px) { .ed-cuerpo { grid-template-columns: 1fr; } }
.ed-campo, .ed-pre { box-sizing: border-box; width: 100%; min-height: 240px; margin: 0; padding: var(--e2); border-radius: var(--r-m);
  background: var(--superficie-alta); color: var(--tinta); font: var(--t-xs)/1.5 var(--mono); border: 0; resize: none; }
.ed-pre { white-space: pre-wrap; word-break: break-word; }
.ed-rotos { padding: var(--e2) var(--e3); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aviso) 40%, transparent); }
.ed-rotos ul { margin: 6px 0 0; padding-left: var(--e4); }


.hj { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); min-width: 0; height: 100%; }
.hj-cab { display: flex; align-items: center; gap: var(--e2); }
.hj-cab h3 { margin: 0; flex: 1 1 auto; font: 650 calc(13px * var(--esc))/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.hj-meta { font: var(--t-xs)/1 var(--mono); color: var(--tenue); }
.hj-btn { border: 0; border-radius: var(--r-s); padding: 7px 11px; cursor: pointer; background: var(--acento); color: var(--tinta-inversa); font: 600 var(--t-xs)/1 var(--fuente); }
.hj-aviso { padding: var(--e2) var(--e3); border-radius: var(--r-m); font: var(--t-xs)/1.4 var(--fuente); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aviso) 45%, transparent); }
.hj-marco { overflow: auto; min-height: 0; flex: 1 1 auto; border-radius: var(--r-m); background: var(--superficie-alta); }
.hj-tabla { border-collapse: collapse; width: 100%; font: var(--t-xs)/1.4 var(--mono); }
.hj-tabla th { position: sticky; top: 0; background: var(--superficie); color: var(--tenue); font-weight: 600; padding: 5px 8px; text-align: left; }
.hj-tabla th[scope="row"] { position: sticky; left: 0; text-align: right; }
.hj-celda { width: 100%; box-sizing: border-box; border: 0; background: transparent; color: var(--tinta); font: inherit; padding: 5px 8px; border-radius: 4px; }
.hj-celda:focus { outline: none; box-shadow: inset 0 0 0 1px var(--acento); background: var(--bg); }


.ad { display: block; max-width: 100%; }
.ad pre, .ad table { display: block; max-width: 100%; overflow-x: auto; }
.ad code { overflow-wrap: anywhere; word-break: break-word; }
.ad img { max-width: 100%; height: auto; }
.ad h1, .ad h2, .ad h3, .ad p, .ad li, .ad blockquote { max-width: 100%; overflow-wrap: anywhere; }


.pf { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); height: 100%; min-width: 0; }
.pf-cab { display: flex; align-items: center; gap: var(--e2); }
.pf-cab h3 { margin: 0; flex: 1 1 auto; font: 650 calc(13px * var(--esc))/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.pf-meta { font: var(--t-xs)/1 var(--mono); color: var(--tenue); }
.pf-btn { border: 0; border-radius: var(--r-s); padding: 6px 10px; cursor: pointer; background: var(--superficie-alta); color: var(--tinta); font: 600 var(--t-xs)/1 var(--fuente); }
.pf-aviso { padding: var(--e2) var(--e3); border-radius: var(--r-m); font: var(--t-xs)/1.4 var(--fuente); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aviso) 45%, transparent); }
.pf-marco { position: relative; flex: 1 1 auto; min-height: 320px; border-radius: var(--r-m); overflow: hidden; background: var(--superficie-alta); }
.pf-embed { width: 100%; height: 100%; border: 0; display: block; }
.pf-capa { position: absolute; inset: 0; cursor: crosshair; }
.pf-anot { position: absolute; border: 0; padding: 0; background: color-mix(in oklab, var(--aviso) 55%, transparent); border-radius: 2px; cursor: pointer; }
.pf-anot:hover { background: color-mix(in oklab, var(--mal) 60%, transparent); }
.pf-lista { margin: 0; padding-left: var(--e4); font: var(--t-xs)/1.5 var(--mono); color: var(--tenue); }


.cnx { display: flex; flex-direction: column; gap: var(--e2); }
.cnx-sub { color: var(--tenue); font-size: var(--t-xs); margin: 0; }
.cnx-indice, .cnx-vacio, .cnx-pie { font-size: var(--t-xs); margin: 0; color: var(--tenue); }
.cnx-falta { font-size: var(--t-xs); margin: 0; color: var(--aviso); }
.cnx-mono { font-family: var(--mono); color: var(--tinta); }
.cnx-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.cnx-fila {
  display: grid; grid-template-columns: 9ch 1fr auto auto; gap: var(--e2); align-items: center;
  padding: var(--e2); border-radius: var(--r-m); background: var(--superficie-alta);
}
.cnx-estado { font: var(--t-xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.cnx-estado[data-tono="bien"] { color: var(--ok); }
.cnx-estado[data-tono="mal"] { color: var(--mal-texto); }
.cnx-estado[data-tono="mudo"] { color: var(--tenue); }
.cnx-nom { color: var(--tinta); font-weight: 600; }
.cnx-tipo { font: var(--t-xs)/1.2 var(--mono); color: var(--tenue); }
.cnx-acciones { justify-self: end; }
.cnx-detalle { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--aviso); overflow-wrap: anywhere; }
.cnx-aviso { font-size: var(--t-xs); margin: 0; }
.cnx-aviso[data-tono="bien"] { color: var(--ok); }
.cnx-aviso[data-tono="mal"] { color: var(--mal-texto); }


.usr { display: flex; flex-direction: column; gap: var(--e2); }
.usr-sub { color: var(--tenue); font-size: var(--t-xs); margin: 0; }
.usr-vacio { color: var(--tenue); font-size: var(--t-xs); margin: 0; }
.usr-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.usr-fila {
  display: grid; grid-template-columns: 1fr 1.2fr 1.2fr auto; gap: var(--e2); align-items: center;
  padding: var(--e2); border-radius: var(--r-m); background: var(--superficie-alta);
}
.usr-nom { color: var(--tinta); font-weight: 600; }
.usr-mail, .usr-ind { font: var(--t-xs)/1.3 var(--mono); color: var(--tenue); overflow-wrap: anywhere; }
.usr-accion { justify-self: end; }
.usr-alta, .usr-reset {
  margin-top: var(--e3); padding: var(--e2); border-radius: var(--r-m);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--raya);
  display: flex; flex-direction: column; gap: var(--e1);
}
.usr-et { display: block; font-size: var(--t-xs); color: var(--tenue); margin: var(--e1) 0 0; }
.usr-campo {
  width: 100%; box-sizing: border-box; background: var(--superficie-alta); color: var(--tinta);
  border: 0; border-radius: var(--r-s); padding: var(--e1) var(--e2); font: var(--t-s)/1.4 var(--fuente);
}
.usr-campo:focus, .usr-campo:focus-visible { outline: none; box-shadow: var(--foco); }
.usr-nota, .usr-pie { font-size: var(--t-xs); color: var(--tenue); margin: var(--e1) 0 0; }
.usr-mono { font-family: var(--mono); color: var(--tinta); }
.usr-acciones { display: flex; gap: var(--e2); margin-top: var(--e2); }
.usr-aviso { font-size: var(--t-xs); margin: var(--e2) 0 0; }
.usr-aviso[data-tono="bien"] { color: var(--ok); }
.usr-aviso[data-tono="mal"] { color: var(--mal-texto); }


.kb { container: kb / inline-size; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e2); min-width: 0; }
.kb-barra { display: flex; align-items: center; gap: var(--e1) var(--e2); flex-wrap: wrap; }
.kb-cab { margin: 0; font: 650 var(--t-s)/1.2 var(--fuente); letter-spacing: .02em; color: var(--tinta); }
.kb-meta { font: var(--t-xs)/1.35 var(--fuente); color: var(--tenue); margin: 0; }
.kb-pie { padding: 0 var(--e2) var(--e2); }
.kb-pill {
  display: inline-flex; align-items: center; gap: var(--e1); padding: var(--e1) var(--e2);
  border-radius: var(--r-l); background: var(--superficie-alta); color: var(--tenue);
  font: var(--t-xs)/1 var(--fuente); white-space: nowrap;
}
.kb-pill[data-tono="alerta"] { color: var(--mal-texto); box-shadow: inset 0 0 0 var(--e1) color-mix(in oklab, var(--mal) 45%, transparent); }

.kb-zonas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); min-height: 0; align-items: start; }
.kb-explorador, .kb-inspeccion {
  background: var(--visor-hueco); border-radius: var(--r-m); padding: var(--e2);
  min-width: 0; display: flex; flex-direction: column; gap: var(--e1);
}
.kb-lienzo { background: var(--visor-lienzo); border-radius: var(--r-m); min-width: 0; overflow: hidden; box-shadow: var(--visor-sombra); display: flex; flex-direction: column; }
.kb-et { font: var(--t-xs)/1.3 var(--fuente); color: var(--tenue); }
.kb-buscar {
  width: 100%; box-sizing: border-box; min-height: var(--icono-tactil);
  background: var(--superficie); color: var(--tinta); border: 0; border-radius: var(--r-m);
  padding: var(--e1) var(--e2); font: var(--t-s)/1.3 var(--fuente);
}
.kb-buscar:focus-visible { outline: none; box-shadow: var(--foco); }
.kb-grupo { min-width: 0; }
.kb-fila {
  display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: var(--icono-tactil);
  box-sizing: border-box; background: transparent; border: 0; border-radius: var(--r-s);
  padding: 0 var(--e2); margin: 0; color: var(--tinta); font: var(--t-s)/1.3 var(--fuente);
  text-align: start; cursor: pointer; list-style: none;
}
.kb-fila::-webkit-details-marker { display: none; }
.kb-fila:hover { background: var(--superficie-alta); }
.kb-fila:focus-visible { outline: none; box-shadow: var(--foco); }
.kb-fila[aria-current="true"] { background: color-mix(in oklab, var(--acento) 18%, transparent); }
.kb-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.kb-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-nom-todo { font: var(--t-s)/1.3 var(--fuente); color: var(--tinta); overflow-wrap: anywhere; margin: 0 0 var(--e1); }
.kb-cuenta { font: var(--t-xs)/1 var(--fuente); color: var(--tenue); white-space: nowrap; }
.kb-punto { flex: 0 0 auto; width: var(--e2); height: var(--e2); border-radius: var(--r-l); background: var(--tenue); opacity: .55; }
.kb-punto[data-vivo="si"] { background: var(--acento); opacity: 1; }
.kb-punto[data-rojo="si"] { background: var(--mal); opacity: 1; }

.kb-grafo { display: block; width: 100%; height: auto; }
.kb-arista { stroke: var(--raya); stroke-width: 1; fill: none; }
.kb-arista[data-tipo="semantica"] { stroke: color-mix(in oklab, var(--acento) 40%, transparent); stroke-dasharray: 4 3; }
.kb-arista[data-tipo="rojo"] { stroke: var(--mal-texto); stroke-dasharray: 2 3; }
.kb-arista-suelta { fill: none; stroke: var(--aviso); stroke-dasharray: 2 3; }
.kb-nodo { cursor: pointer; }
.kb-nodo circle { fill: var(--tenue); opacity: .5; }
.kb-nodo[data-vivo="si"] circle { fill: var(--acento); opacity: .95; }
.kb-nodo[data-rojo="si"] circle { fill: var(--mal); opacity: 1; }
.kb-nodo[data-clase="token"] circle, .kb-nodo[data-clase="artefacto"] circle { opacity: 1; }
.kb-nodo text { fill: var(--tenue); font: var(--t-xs)/1 var(--fuente); pointer-events: none; }
.kb-nodo text[data-vivo="si"] { fill: var(--tinta); }
.kb-nodo:focus-visible circle { stroke: var(--acento); stroke-width: 2; }

.kb-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); min-width: 0; }
.kb-tarjeta {
  background: var(--visor-tarjeta); border-radius: var(--r-m); padding: var(--e2);
  box-shadow: var(--visor-sombra); min-width: 0;
}
.kb-tarjeta h4 {
  margin: 0 0 var(--e1); font: 600 var(--t-xs)/1.2 var(--fuente); color: var(--tenue);
  letter-spacing: .05em; text-transform: uppercase;
}
.kb-snap { font: var(--t-xs)/1.45 var(--fuente); color: var(--tenue); margin: 0; overflow-wrap: anywhere; }
.kb-hueco { color: var(--aviso); font: var(--t-xs)/1.45 var(--fuente); margin: 0; }
.kb-mal { color: var(--mal-texto); }
.kb-accion {
  margin-top: var(--e2); min-height: var(--icono-tactil); padding: 0 var(--e2);
  background: var(--superficie-alta); color: var(--tinta); border: 0; border-radius: var(--r-m);
  font: var(--t-s)/1.2 var(--fuente); cursor: pointer;
}
.kb-accion:hover { background: color-mix(in oklab, var(--acento) 22%, var(--superficie-alta)); }
.kb-accion:focus-visible { outline: none; box-shadow: var(--foco); }


@container kb (min-width: 34rem) {
  
  .kb-zonas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "explorador lienzo" "inspeccion inspeccion";
    align-items: stretch;
  }
  .kb-explorador { grid-area: explorador; max-height: none; min-height: 0; overflow: auto; }
  .kb-lienzo { grid-area: lienzo; min-height: 16rem; }
  
  .kb-lienzo { align-self: start; max-height: 76vh; position: sticky; top: var(--esp-2); }
  .kb-inspeccion { grid-area: inspeccion; grid-column: 1 / -1; min-height: 0; }
  .kb-inspeccion .acd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .kb-inspeccion .kb-tarjetas { align-items: start; }
  .kb-inspeccion .kb-doc { align-content: start; }
  .kb-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@container kb (min-width: 60rem) {
  .kb-zonas {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-areas: "explorador lienzo inspeccion";
  }
  .kb-explorador { max-height: 76vh; overflow: auto; }
  .kb-inspeccion {
    
    grid-area: inspeccion; grid-column: auto;
    max-height: 76vh; overflow: auto;
  }
  
  .kb-inspeccion .acd { grid-template-columns: minmax(0, 1fr); }
  .kb-inspeccion .acd-txt { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .kb-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .kb-grafo { max-height: 76vh; }
}


.kb-rojos-causa { padding: 0 var(--e2); max-width: 100%; }


.kb-vistas { display: none; }
@container kb (max-width: 40rem) {
  
  .kb-vistas {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--e1); padding: 0 var(--e2);
  }
  .kb-vista {
    min-height: var(--icono-tactil); min-width: 0;
    background: var(--superficie-alta); color: var(--tenue);
    border: 0; border-radius: var(--r-m); padding: 0 var(--esp-1);
    font: 600 var(--t-xs)/1.2 var(--fuente); cursor: pointer;
    white-space: nowrap; overflow: visible; text-overflow: clip;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1);
  }
  .kb-vista[aria-selected="true"] {
    
    background: var(--acento); color: var(--tinta-inversa); font-weight: 650;
  }
  .kb-vista:focus-visible { outline: none; box-shadow: var(--foco); }
  
  .kb[data-vista="explorador"] .kb-lienzo, .kb[data-vista="explorador"] .kb-inspeccion,
  .kb[data-vista="grafo"] .kb-explorador, .kb[data-vista="grafo"] .kb-inspeccion,
  .kb[data-vista="inspeccion"] .kb-explorador, .kb[data-vista="inspeccion"] .kb-lienzo { display: none; }
}


.kb-busca-fila { display: flex; align-items: center; gap: var(--esp-1); }
.kb-busca-fila .kb-buscar { flex: 1 1 auto; min-width: 0; }
.kb-busca-fila .kb-accion { flex: 0 0 auto; min-height: var(--icono-tactil); white-space: nowrap; }
.kb-nodo[data-buscado="si"] circle { stroke: var(--acento); stroke-width: 2.5; filter: drop-shadow(0 0 var(--esp-1) var(--acento)); }
.kb-nodo[data-buscado="si"] text { fill: var(--acento-texto, var(--acento)); font-weight: 700; }
.kb-fila[data-buscado="si"] { color: var(--acento-texto, var(--acento)); font-weight: 600; }


.kb-doc { display: grid; gap: var(--esp-2); }
.kb-doc-cab { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.kb-doc-tit { margin: 0; flex: 1 1 auto; min-width: 0; font: 650 var(--t-m)/1.3 var(--fuente); color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-doc-hash { flex: 0 0 auto; padding: var(--esp-1) var(--esp-2); border-radius: 50em; background: var(--superficie-alta);
  color: var(--tenue); font: 600 var(--t-xs)/1.2 var(--fuente); font-variant-numeric: tabular-nums; }
.kb-doc-ruta { margin: 0; color: var(--tenue); font-size: var(--t-xs); overflow-wrap: anywhere; }
.kb-doc-abrir { justify-self: start; display: inline-flex; align-items: center; gap: var(--esp-1);
  min-height: var(--icono-tactil); padding: var(--esp-1) var(--esp-3); border: 0; border-radius: 50em; cursor: pointer;
  background: var(--acento); color: var(--tinta-inversa); font: 600 var(--t-s)/1.2 var(--fuente); }
.kb-extracto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.kb-extracto-lista > li { padding: var(--esp-2) var(--esp-2); border-radius: var(--r-s); background: color-mix(in oklab, var(--superficie-alta) 62%, transparent); }
.kb-extracto-lista > li .acm { font-size: var(--t-s); line-height: 1.55; }
.kb-extracto-lista > li .acm p { margin: 0; }


.kb-omni { display: flex; align-items: center; gap: var(--esp-1); width: 100%;
  padding: var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-2); border-radius: 50em; background: var(--superficie-alta);
  box-shadow: var(--e-1); }
.kb-omni-input { flex: 1 1 auto; min-width: 0; min-height: var(--icono-tactil); border: 0; background: transparent;
  color: var(--tinta); font: 400 var(--t-s)/1.3 var(--fuente); outline: none; }
.kb-omni-input::placeholder { color: var(--tenue); }
.kb-omni-modo { flex: 0 0 auto; display: inline-flex; gap: var(--esp-1); padding: var(--esp-1); border-radius: 50em; background: var(--bg); }
.kb-omni-tab { min-height: calc(var(--icono-tactil) - var(--esp-2)); padding: 0 var(--esp-2); border: 0; border-radius: 50em;
  cursor: pointer; background: transparent; color: var(--tenue); font: 600 var(--t-xs)/1.2 var(--fuente); white-space: nowrap; }
.kb-omni-tab[aria-selected="true"] { background: var(--acento); color: var(--tinta-inversa); }


.kb-flecha { flex: 0 0 auto; width: 0; height: 0; border-left: 0.32rem solid var(--tenue); border-top: 0.2rem solid transparent;
  border-bottom: 0.2rem solid transparent; transition: transform .12s ease; }
details[open] > summary > .kb-flecha { transform: rotate(90deg); }
.kb-cuenta { flex: 0 0 auto; min-width: 1.6rem; text-align: center; padding: 0 var(--esp-1); border-radius: 50em;
  background: var(--superficie-alta); color: var(--tenue); font: 600 var(--t-xs)/1.6 var(--fuente); font-variant-numeric: tabular-nums; }
.kb-grupo[data-activo="si"] > summary { color: var(--acento-texto, var(--acento)); }

.kb-fila[data-activo="si"] { box-shadow: inset 0.1875rem 0 0 0 var(--acento); background: var(--superficie-alta); border-radius: 0 var(--r-s) var(--r-s) 0; }


.kb-zonas { align-items: stretch; }
.kb-lienzo { position: relative; display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
.kb-grafo { flex: 1 1 auto; height: 100%; min-height: 0; }
.kb-controles { position: absolute; top: var(--esp-2); right: var(--esp-2); z-index: 2; display: inline-flex; gap: var(--esp-1); }
.kb-control { width: var(--icono-tactil); height: var(--icono-tactil); border: 0; border-radius: 50em; cursor: pointer;
  background: var(--superficie-alta); color: var(--tinta); font: 600 var(--t-m)/1 var(--fuente); box-shadow: var(--e-1); }
.kb-control:hover { color: var(--acento-texto, var(--acento)); }
.kb-nodo[data-activo="si"] circle { stroke: var(--acento); stroke-width: 3; filter: drop-shadow(0 0 var(--esp-2) var(--acento)); }
.kb-nodo[data-activo="si"] text { fill: var(--acento-texto, var(--acento)); font-weight: 700; }
.kb-arista { opacity: .35; }
.kb-arista[data-activo="si"] { opacity: 1; stroke-width: 2; }
.kb-leyenda { list-style: none; margin: 0; padding: var(--esp-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--esp-2);
  color: var(--tenue); font: 600 var(--t-xs)/1.3 var(--fuente); }
.kb-leyenda > li { display: inline-flex; align-items: center; gap: var(--esp-1); }
.kb-chip-punto { width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: var(--tenue); }
.kb-leyenda > li[data-tono="acento"] .kb-chip-punto { background: var(--acento); }
.kb-chip-punto[data-tenue="si"] { background: var(--tinta); opacity: .5; }
.kb-chip-punto[data-mal="si"] { background: var(--mal); }
.kb-chip-linea { width: var(--esp-5); height: 0.125rem; background: var(--tenue); border-radius: 50em; }
.kb-chip-linea[data-discontinua="si"] { background: repeating-linear-gradient(90deg, var(--tenue) 0 0.25rem, transparent 0.25rem 0.5rem); }


.kb-vacio { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; padding: var(--esp-2) var(--esp-3);
  border-radius: var(--r-m); background: var(--superficie-alta); box-shadow: var(--e-1); color: var(--tinta);
  font: 400 var(--t-s)/1.3 var(--fuente); }
.kb-vacio-p { width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: var(--tenue); }
.kb-vacio-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kb-vacio-ms { color: var(--tenue); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.kb-vacio-accion { min-height: var(--icono-tactil); padding: 0 var(--esp-3); border: 0; border-radius: 50em; cursor: pointer;
  background: var(--superficie); color: var(--acento-texto, var(--acento)); font: 600 var(--t-xs) var(--fuente); }


.shl { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.shl-barra { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.shl-et { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.shl-sel { font: var(--t-s)/1.2 var(--mono); color: var(--tinta); background: var(--superficie-alta);
           border: 0; border-radius: var(--r-s); padding: 6px 8px; box-shadow: var(--e-1); cursor: pointer; max-width: 100%; }
.shl-cuando { margin-inline-start: auto; font: var(--t-xs)/1 var(--mono); color: var(--tenue); }

.shl-salida { margin: 0; min-height: 12rem; max-height: 26rem; overflow: auto; padding: var(--e3);
              background: var(--codigo-bg); color: var(--codigo-tinta); border-radius: var(--r-m);
              font: var(--t-s)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--e-1); }
.shl-caja { display: flex; gap: var(--e2); align-items: center; min-width: 0; }
.shl-cmd { flex: 1 1 auto; min-width: 0; font: var(--t-s)/1.3 var(--mono); color: var(--tinta);
           background: var(--superficie-alta); border: 0; border-radius: var(--r-s); padding: 8px 10px; box-shadow: var(--e-1); }
.shl-cmd:disabled { opacity: .6; cursor: not-allowed; }
.shl-aviso { margin: 0; font-size: var(--t-s); color: var(--aviso); }
.shl-error { margin: 0; font-size: var(--t-s); color: var(--mal-texto); }

.shl-nota { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--tenue); }
.shl-nota b { color: var(--tinta); font-weight: 600; }
.shl-nota code { font-family: var(--mono); color: var(--tinta); }



.dag { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 24px; min-height: 0; }
.dag-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dag-tit { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--voe-texto-suave, #9aa); }
.dag-meta { font-size: 11.5px; color: var(--voe-texto-tenue, #889); }
.dag-dir-indice { margin: 0; font-size: 11.5px; color: var(--voe-texto-tenue, #889); }
.dag-dir-indice code { font-size: 11.5px; }

.dag-form { display: flex; flex-direction: column; gap: 8px; }
.dag-et { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--voe-texto-suave, #9aa); }
.dag-q {
  width: 100%; padding: 9px 11px; border-radius: 9px; font-size: 13.5px;
  background: var(--voe-fondo-campo, #14161a); color: inherit; border: 1px solid var(--voe-borde, #2a2f38);
}
.dag-q:focus { outline: 2px solid var(--voe-acento, #d8b45a); outline-offset: 1px; }
.dag-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dag-sel, .dag-num {
  padding: 6px 8px; border-radius: 8px; font-size: 12.5px;
  background: var(--voe-fondo-campo, #14161a); color: inherit; border: 1px solid var(--voe-borde, #2a2f38);
}
.dag-sel { max-width: 260px; }
.dag-num { width: 74px; }
.dag-nota { margin: 0; font-size: 11.5px; color: var(--voe-texto-tenue, #889); }
.dag-nota code, .dag-estado code { font-size: 11.5px; }

.dag-estado { margin: 4px 0 0; font-size: 12.5px; color: var(--voe-texto-suave, #9aa); }
.dag-rojo { color: var(--voe-aviso, #d98a4a); }
.dag-falta { font-size: 12.5px; color: var(--voe-aviso, #d98a4a); }

.dag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dag-fr {
  border: 1px solid var(--voe-borde, #2a2f38); border-radius: 10px; padding: 9px 11px;
  background: var(--voe-fondo-panel, #101216); display: flex; flex-direction: column; gap: 6px;
}
.dag-fr-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dag-sim { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--voe-acento, #d8b45a); }
.dag-chip {
  font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--voe-borde, #2a2f38); color: var(--voe-texto-suave, #9aa);
}
.dag-campo { color: var(--voe-texto, #e8e8ea); }
.dag-tipo, .dag-clase { font-size: 11px; color: var(--voe-texto-tenue, #889); }
.dag-valor { font-size: 14px; line-height: 1.35; word-break: break-word; }
.dag-nulo { color: var(--voe-texto-tenue, #889); }
.dag-dirs { display: flex; flex-direction: column; gap: 3px; }
.dag-dir {
  font-size: 11px; color: var(--voe-texto-tenue, #889); word-break: break-all;
  display: block; max-height: 3.2em; overflow: hidden;
}
.dag-terna { font-size: 10.5px; color: var(--voe-texto-tenue, #778); letter-spacing: .01em; }





.kbg {
  display: grid;
  
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2);
  min-width: 0;
  container-type: inline-size;
}



.kbf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--r-m);
  background: var(--superficie-alta);
  box-shadow: var(--e-1);
}
.kbf-campo {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
}
.kbf-r {
  font: 600 var(--t-xs)/1.3 var(--fuente);
  color: var(--tenue);
  text-transform: lowercase;
}
.kbf-texto,
.kbf-sel {
  width: 100%;
  min-width: 0;
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--tinta);
  font: 400 var(--t-s)/1.3 var(--fuente);
}
.kbf-texto:focus-visible,
.kbf-sel:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}
.kbf-vacio {
  margin: 0;
  font: var(--t-xs)/1.45 var(--fuente);
  color: var(--tenue);
}
@container (min-width: 17rem) {
  .kbf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 34rem) {
  .kbf {
    grid-template-columns:
      minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}


.kbf-zona {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
}
.kbf-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-alta);
  color: var(--tinta);
  font: 600 var(--t-s)/1.2 var(--fuente);
  box-shadow: var(--e-1);
  cursor: pointer;
  
  white-space: normal;
  overflow-wrap: anywhere;
}
.kbf-boton:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}
.kbf {
  max-height: 10.5rem;
  overflow-y: auto;
}
.kbf[data-abierto="no"] {
  display: none;
}
@media (min-width: 34rem) {
  .kbf-boton {
    display: none;
  }
  .kbf,
  .kbf[data-abierto="no"] {
    display: grid;
    max-height: none;
    overflow: visible;
  }
}


.kbv {
  display: grid;
  gap: var(--esp-2);
  container-type: inline-size;
  min-width: 0;
}
.kbv-conmutador {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--esp-1);
  padding: 0;
  overflow-x: auto;
}
.kbv-tab {
  min-height: var(--icono-tactil);
  min-width: 0;
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  background: var(--superficie-alta);
  color: var(--tenue);
  cursor: pointer;
  font: 600 var(--t-xs)/1.15 var(--fuente);
   
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.kbv-tab[aria-selected="true"] {
  background: var(--acento);
  color: var(--tinta-inversa);
}
.kbv-tab:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}
.kbv-listas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2);
  min-width: 0;
}
.kbv-lista {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  min-width: 0;
  padding: var(--esp-2);
  border-radius: var(--r-m);
  background: color-mix(in oklab, var(--superficie) 70%, transparent);
  box-shadow: var(--e-1);
}

@container (max-width: 33.99rem) {
  .kbv-lista {
    display: none;
  }
  .kbv-lista[data-activa="si"] {
    display: grid;
  }
}
.kbv-cab {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}
.kbv-tit {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font: 600 var(--t-xs)/1.3 var(--fuente);
  color: var(--tenue);
  text-transform: lowercase;
  letter-spacing: .02em;
}
.kbv-cuenta {
  flex: 0 0 auto;
  padding: 0 var(--esp-1);
  border-radius: 50em;
  background: var(--superficie-alta);
  color: var(--tenue);
  font: 600 var(--t-xs)/1.6 var(--fuente);
}
.kbv-plegar {
  flex: 0 0 auto;
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  font: 600 var(--t-xs)/1.2 var(--fuente);
}
.kbv-plegar:hover {
  color: var(--acento-texto);
  background: var(--superficie-alta);
}
.kbv-cuerpo {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
}

@container (min-width: 34rem) {
  .kbv-listas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@container (min-width: 60rem) {
  .kbv-listas {
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--esp-1);
  }
  .kbv-lista {
    scroll-snap-align: start;
  }
  .kbv-conmutador {
    display: none;
  }
}


.kbt {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
  padding: var(--esp-2);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: var(--e-1);
  cursor: grab;
}
.kbt[data-seleccionada="si"] {
  box-shadow: var(--e-2), inset 0 0 0 var(--esp-1) var(--acento);
}
.kbt:active {
  cursor: grabbing;
}
.kbt-cab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  align-items: center;
  min-width: 0;
}
.kbt-hito {
  padding: 0 var(--esp-1);
  border-radius: 50em;
  background: var(--superficie-alta);
  color: var(--et-hito, var(--tenue));
  font: 600 var(--t-xs)/1.5 var(--fuente);
   
  overflow-wrap: anywhere;
}
.kbt-espera {
  padding: 0 var(--esp-1);
  border-radius: 50em;
  background: color-mix(in oklab, var(--aviso) 18%, transparent);
  color: var(--aviso);
  font: 600 var(--t-xs)/1.7 var(--fuente);
}

.kbt-titulo {
  min-height: var(--esp-6);
  max-height: 3.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--tinta);
  font: 600 var(--t-s)/1.35 var(--fuente);
  cursor: pointer;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kbt-titulo:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--r-s);
}
.kbt-segmentos {
  display: flex;
  gap: var(--esp-1);
  align-items: center;
  min-height: var(--esp-4);
}
.kbt-seg {
  width: var(--esp-3);
  height: var(--esp-1);
  border-radius: 50em;
  background: var(--superficie-alta);
}
.kbt-seg[data-hecha="si"] {
  background: var(--ok);
}
.kbt-seg-sin {
  color: var(--tenue);
  font: var(--t-xs)/1.3 var(--fuente);
}
.kbt-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  align-items: center;
  min-width: 0;
}

.kbt-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  align-items: center;
  min-width: 0;
}
.kbt-turno {
  padding: 0 var(--esp-1);
  border-radius: 50em;
  background: var(--superficie-alta);
  color: var(--tenue);
  font: 600 var(--t-xs)/1.7 var(--fuente);
}
.kbt-turno[data-turno="operador"] {
  color: var(--et-espera, var(--aviso));
}
.kbt-turno[data-turno="dueno"] {
  color: var(--et-de, var(--tinta));
}
.kbt-turno[data-turno="qa"] {
  color: var(--et-qa, var(--acento-texto));
}
.kbt-turno[data-turno="arnes"] {
  color: var(--et-valida, var(--tenue));
}
.kbt-cuenta {
  color: var(--tenue);
  font: var(--t-xs)/1.6 var(--fuente);
}

.kbg-mas {
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
  background: var(--superficie-alta);
  color: var(--tinta);
  font: 600 var(--t-xs)/1 var(--fuente);
}
.kbg-mas:hover,
.kbg-mas:focus-visible { box-shadow: var(--foco); outline: none; }

.kbg-vacia {
  margin: 0;
  color: var(--tenue);
  font: var(--t-xs)/1.4 var(--fuente);
}


.kbd-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--esp-3);
  background: color-mix(in oklab, var(--tinta-inversa) 55%, transparent);
  overflow: auto;
}
.kbd-modal-caja {
  position: relative;
  width: 100%;
  max-width: min(92vw, 60rem);
  max-height: 88vh;
  overflow: auto;
}
.kbd-cerrar {
  position: sticky;
  top: 0;
  margin-inline-start: auto;
  display: block;
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
  background: var(--superficie-alta);
  color: var(--tinta);
  font: 600 var(--t-s)/1 var(--fuente);
}
.kbd-cerrar:hover,
.kbd-cerrar:focus-visible { box-shadow: var(--foco); outline: none; }

.kbd {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-2);
  border-radius: var(--r-m);
  background: var(--superficie);
  box-shadow: var(--e-2);
  container-type: inline-size;
}
.kbd-cab {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
}
.kbd-tit {
  margin: 0;
  color: var(--tinta);
  font: 650 var(--t-m)/1.3 var(--fuente);
  overflow-wrap: anywhere;
}
.kbd-meta {
  margin: 0;
  color: var(--tenue);
  font: var(--t-xs)/1.45 var(--fuente);
}
.kbd-mide {
  margin: 0;
  padding: var(--esp-2);
  border-radius: var(--r-s);
  background: var(--superficie-alta);
  color: var(--tinta);
  font: var(--t-xs)/1.5 var(--fuente);
}

.kbd-acc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}
.kbd-acc-b {
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
  background: var(--superficie-alta);
  color: var(--tinta);
  font: 600 var(--t-xs)/1 var(--fuente);
}
.kbd-acc-b:hover,
.kbd-acc-b:focus-visible { box-shadow: var(--foco); outline: none; }


.kbd-desc {
  margin: 0;
  max-height: 22vh;
  overflow: auto;
  padding: var(--esp-2);
  border-radius: var(--r-s);
  background: var(--superficie-alta);
  color: var(--tinta);
  font: var(--t-xs)/1.55 var(--fuente);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kbd-sec {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
}

.kbd-acciones {
  gap: var(--esp-2);
  padding-block: var(--esp-1);
}
.kbd-h {
  margin: 0;
  color: var(--tenue);
  font: 600 var(--t-xs)/1.3 var(--fuente);
  text-transform: lowercase;
  letter-spacing: .02em;
}
.kbd-subs,
.kbd-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-1);
}
.kbd-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-1);
  align-items: center;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--r-s);
  background: var(--superficie-alta);
}
.kbd-sub-alias {
  color: var(--tinta);
  font: 600 var(--t-s)/1.3 var(--fuente);
  overflow-wrap: anywhere;
}
.kbd-sub-estado,
.kbd-sub-rol {
  color: var(--tenue);
  font: var(--t-xs)/1.3 var(--fuente);
}
.kbd-sub[data-estado="hecha"] .kbd-sub-estado {
  color: var(--ok);
}
.kbd-ev,
.kbd-marcar,
.kbd-doc,
.kbd-indicar {
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  text-align: left;
  font: 600 var(--t-xs)/1.3 var(--fuente);
  overflow-wrap: anywhere;
}
.kbd-ev {
  color: var(--acento-texto);
}
.kbd-sin {
  color: var(--tenue);
  font: var(--t-xs)/1.4 var(--fuente);
}
.kbd-indicar {
  justify-self: start;
  background: var(--acento);
  color: var(--tinta-inversa);
}
@container (min-width: 34rem) {
  .kbd-sub {
    grid-template-columns:
      minmax(0, 1.2fr) auto auto auto auto;
  }
}


.kbd-pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  min-width: 0;
}
.kbd-p {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 var(--esp-2);
  border-radius: 50em;
  background: var(--superficie-alta);
  color: var(--tenue);
  font: 600 var(--t-xs)/1.7 var(--fuente);
  overflow-wrap: anywhere;
}
.kbd-p[data-p="hito"] { color: var(--et-hito, var(--tinta)); }
.kbd-p[data-p="estado"] { color: var(--acento-texto); background: color-mix(in oklab, var(--acento) 16%, transparent); }
.kbd-p[data-p="dueno"] { color: var(--et-de, var(--tinta)); }
.kbd-p[data-p="turno"] { color: var(--et-espera, var(--aviso)); background: color-mix(in oklab, var(--aviso) 16%, transparent); }
.kbd-p[data-p="espera"] { color: var(--aviso); }
.kbd-p[data-p="depende"] { color: var(--tinta); }
.kbd-p[data-vacia="si"] { color: var(--tenue); background: transparent; box-shadow: inset 0 0 0 0.0625rem var(--raya); }


.kbd-vincular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-1);
  padding: var(--esp-2);
  border-radius: var(--r-s);
  background: var(--superficie-alta);
}
.kbd-vincular input,
.kbd-vincular select,
.kbd-vincular button {
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--tinta);
  font: var(--t-xs)/1.3 var(--fuente);
}
.kbd-vincular button {
  cursor: pointer;
  background: var(--acento);
  color: var(--tinta-inversa);
  font-weight: 700;
}
.kbd-vincular button:disabled { cursor: not-allowed; opacity: .55; }
.kbd-vincular button:hover:not(:disabled),
.kbd-vincular button:focus-visible { box-shadow: var(--foco); outline: none; }
@container (min-width: 34rem) {
  .kbd-vincular { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto; align-items: center; }
}


.kbt-estado {
  padding: 0 var(--esp-1);
  border-radius: 50em;
  background: color-mix(in oklab, var(--acento) 16%, transparent);
  color: var(--acento-texto);
  font: 700 var(--t-xs)/1.7 var(--fuente);
}
.kbt-dueno {
  padding: 0 var(--esp-1);
  border-radius: 50em;
  background: var(--superficie-alta);
  color: var(--et-de, var(--tenue));
  font: 600 var(--t-xs)/1.7 var(--fuente);
  overflow-wrap: anywhere;
}



.ta { container-type: inline-size; }

.ta-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  margin-block-end: var(--esp-1);
}
.ta-cab .acd-h { margin: 0; }

.ta-adjuntar {
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: 50em;
  cursor: pointer;
  background: var(--superficie-alta);
  color: var(--tenue);
  font: 600 var(--t-xs)/1 var(--fuente, inherit);
}
.ta-adjuntar:hover,
.ta-adjuntar:focus-visible { color: var(--acento-texto, var(--acento)); box-shadow: var(--foco); outline: none; }

.ta-l { gap: 0.125rem; }


.ta .ta-f {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--punto-estado) var(--esp-1);
  border-radius: var(--r-s);
}
.ta .ta-f:hover { background: var(--superficie-alta); }


.ta-rol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5em;
  padding: 0.125em 0.5em;
  border-radius: 50em;
  background: color-mix(in oklab, var(--acento) 16%, transparent);
  color: var(--acento-texto, var(--acento));
  font: 700 var(--t-xs)/1.6 var(--fuente, inherit);
  letter-spacing: .02em;
}
.ta-rol[data-rol="PLAN"] { background: color-mix(in oklab, var(--hito-2) 20%, transparent); color: var(--tinta); }
.ta-rol[data-rol="DOC-ARQ"] { background: color-mix(in oklab, var(--hito-3) 20%, transparent); color: var(--tinta); }
.ta-rol[data-rol="MIDE-QA"] { background: color-mix(in oklab, var(--hito-4) 20%, transparent); color: var(--tinta); }
.ta-rol[data-rol="ENTREGABLE"] { background: color-mix(in oklab, var(--ok) 18%, transparent); color: var(--ok); }
.ta-rol[data-rol="EVIDENCIA"] { background: color-mix(in oklab, var(--aviso) 18%, transparent); color: var(--aviso); }


.ta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
  font-size: var(--t-m);
}
.ta-ico[data-tipo="gdoc"] { color: var(--acento); }
.ta-ico[data-tipo="png"] { color: var(--hito-5); }
.ta-ico[data-tipo="codigo"] { color: var(--hito-4); }


.ta-txt { display: grid; gap: 0.0625em; min-width: 0; }
.ta-abrir {
  min-height: 0;
  padding: 0;
  gap: 0;
  width: auto;
  background: transparent;
  color: var(--tinta);
  font: 600 var(--t-s)/1.35 var(--fuente, inherit);
  text-align: start;
}
.ta-abrir:hover { background: transparent; color: var(--acento-texto, var(--acento)); }
.ta-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  color: var(--tenue);
  font: var(--t-xs)/1.4 var(--fuente, inherit);
}
.ta-autor::before { content: "por "; }
.ta-sha { font-weight: 700; color: var(--tenue); }
.ta-sha[data-estado="casa"] { color: var(--ok); }
.ta-sha[data-estado="no_existe"] { color: var(--mal-texto); }
.ta-sha[data-estado="no_medido"] { color: var(--aviso); }
.ta-estado {
  padding: 0 0.5em;
  border-radius: 50em;
  background: var(--superficie-alta);
  font: 700 var(--t-xs)/1.5 var(--fuente, inherit);
}
.ta-estado[data-estado="casa"] { color: var(--ok); }
.ta-estado[data-estado="no_existe"] { color: var(--mal-texto); }
.ta-estado[data-estado="no_medido"] { color: var(--aviso); }
.ta-causa { flex: 1 1 100%; color: var(--tenue); font-size: var(--t-xs); }


.ta-acc { display: flex; flex-wrap: wrap; gap: var(--esp-1); justify-content: flex-end; }
.ta-b {
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: 50em;
  cursor: pointer;
  background: transparent;
  color: var(--tenue);
  font: 600 var(--t-xs)/1 var(--fuente, inherit);
}
.ta-b:hover,
.ta-b:focus-visible { color: var(--acento-texto, var(--acento)); background: var(--superficie-alta); box-shadow: var(--foco); outline: none; }

.ta-noabrible {
  display: inline-flex;
  align-items: center;
  min-height: var(--icono-tactil);
  padding: 0 var(--esp-2);
  color: var(--aviso);
  font: 600 var(--t-xs)/1 var(--fuente, inherit);
}


@container (max-width: 26rem) {
  .ta .ta-f { grid-template-columns: auto auto minmax(0, 1fr); }
  .ta-acc { grid-column: 1 / -1; justify-content: flex-start; padding-inline-start: var(--esp-2); }
}


.ai {
  
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--esp-1);
  max-height: 3.5rem;   
  min-height: var(--icono-tactil);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-width: thin;
}
.ai-t {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  flex: 0 0 auto;
  min-height: var(--icono-tactil);
  max-height: 3.5rem;   
  padding: var(--esp-1) var(--esp-3);
  border-radius: 50em;
  background: var(--superficie-alta);
  box-shadow: var(--e-1);
  color: var(--tinta);
  font-family: var(--fuente, inherit);
  white-space: nowrap;
}
.ai-p { flex: 0 0 auto; width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: var(--tenue); }
.ai-r { font-size: var(--t-xs); line-height: 1.2; color: var(--tenue); letter-spacing: .02em; }
.ai-v { font-size: var(--t-s); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ai-t[data-estado="ok"] .ai-p { background: var(--ok); }
.ai-t[data-estado="acento"] .ai-p { background: var(--acento); }
.ai-t[data-estado="alerta"] .ai-p { background: var(--mal); }
.ai-t[data-estado="acento"] .ai-v { color: var(--acento-texto); }
.ai-t[data-estado="alerta"] .ai-v { color: var(--mal-texto); }



.ai-r-corto, .ai-v-corto { display: none; }
@container (max-width: 24rem) {
  
  .ai { overflow: visible; gap: 0; }
  .ai-t { padding: 0 0.1875rem; gap: 0.1875rem; }
  .ai-r { display: none; }
  .ai-r-corto { display: inline; }
  .ai-v-corto { display: inline; }
  
  .ai-v:has(+ .ai-v-corto) { display: none; }
  .ai-v { font-size: var(--t-xs); }
}


.acm {
  font: 400 var(--t-m)/1.7 var(--fuente, inherit);
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.acm > :first-child { margin-top: 0; }
.acm p { margin: 0 0 .9em; }
.acm-h1 { font: 650 var(--t-xl)/1.25 var(--fuente, inherit); margin: 1.4em 0 .5em; letter-spacing: -.01em; }
.acm-h2 { font: 620 var(--t-l)/1.3 var(--fuente, inherit); margin: 1.5em 0 .45em; scroll-margin-top: var(--esp-8); }
.acm-h3 { font: 600 var(--t-m)/1.35 var(--fuente, inherit); margin: 1.2em 0 .35em; color: var(--tinta); opacity: .92; scroll-margin-top: var(--esp-8); }
.acm ul, .acm ol { margin: 0 0 .9em; padding-left: 1.25em; }
.acm li { margin: .18em 0; }
.acm li::marker { color: var(--tenue); }
.acm blockquote {
  margin: .8em 0; padding: .55em .9em; border: 0; border-radius: var(--r-m);
  background: var(--superficie-alta); box-shadow: var(--e-1);
  color: var(--tinta); opacity: .92;
}
.acm blockquote p:last-child { margin-bottom: 0; }
.acm-tabla { overflow-x: auto; margin: .9em 0; border-radius: var(--r-m); background: var(--superficie-alta); box-shadow: var(--e-1); }
.acm-tabla table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.acm-tabla th, .acm-tabla td { padding: var(--esp-2) var(--esp-3); text-align: left; vertical-align: top; border: 0; }
.acm-tabla thead th { color: var(--tenue); font-weight: 600; font-size: var(--t-xs); text-transform: lowercase; letter-spacing: .02em; }
.acm-tabla tbody tr { box-shadow: inset 0 0.0625rem 0 var(--raya); }
.acm-pre {
  margin: .9em 0; padding: var(--esp-3) var(--esp-3); border: 0; border-radius: var(--r-m);
  background: var(--superficie-alta); box-shadow: var(--e-1); overflow-x: auto;
  font: 400 var(--t-s)/1.6 var(--fuente, inherit);
  white-space: pre-wrap;
}
.acm-code { font: 400 var(--t-s)/1.55 var(--fuente, inherit); background: color-mix(in oklab, var(--superficie-alta) 70%, transparent); border-radius: var(--esp-1); padding: .06em .32em; }
.acm-pre .acm-code { background: transparent; padding: 0; }
.acm a { color: var(--acento-texto); }
.acm-img { color: var(--tenue); font-size: var(--t-xs); }

.acm-enlace {
  
  text-decoration: none;
  text-decoration-line: none;
  display: inline-flex; align-items: center; gap: var(--punto-estado); min-height: var(--esp-6); padding: 0.125rem var(--esp-2); margin: 0 0.0625rem;
  border: 0; border-radius: 50em; cursor: pointer;
  background: color-mix(in oklab, var(--superficie-alta) 82%, transparent);
  color: var(--tinta); font: 600 var(--t-xs)/1.5 var(--fuente, inherit);
  box-shadow: var(--e-1);
}
.acm-enlace:hover { background: var(--superficie-alta); text-decoration: none; }
.acm-enlace .acm-punto { width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: var(--tenue); flex: 0 0 auto; }
.acm-enlace[data-estado="ok"] .acm-punto { background: var(--ok); }
.acm-enlace[data-estado="acento"] .acm-punto { background: var(--acento); }
.acm-enlace[data-estado="roto"] { color: var(--mal-texto); cursor: help; }
.acm-enlace[data-estado="roto"] .acm-punto { background: var(--mal); }
.acm-enlace[data-estado="ok"], .acm-enlace[data-estado="acento"] { color: var(--acento-texto); }


.acm[data-modo="extracto"] { font-size: var(--t-s); line-height: 1.6; }
.acm[data-modo="extracto"] .acm-h1 { font-size: var(--t-m); margin-top: .2em; }
.acm[data-modo="extracto"] .acm-h2 { font-size: var(--t-s); margin-top: .8em; }
.acm[data-modo="extracto"] .acm-h3 { font-size: var(--t-xs); margin-top: .6em; }
.acm[data-modo="extracto"] .acm-pre, .acm[data-modo="extracto"] .acm-tabla { max-height: 11rem; }


.acm-h2, .acm-h3 { display: flex; align-items: center; gap: var(--esp-1); }
.acm-h-t { flex: 1 1 auto; min-width: 0; }
.acm-editar {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: var(--icono-tactil); min-height: var(--icono-tactil);
  border: 0; border-radius: var(--r-s); cursor: pointer;
  background: transparent; color: var(--tenue);
}
.acm-editar:hover { color: var(--acento-texto, var(--acento)); background: var(--superficie-alta); }


.acd {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
  container-type: inline-size;
}
.acd-t {
  border: 0;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: var(--e-2);
  padding: var(--esp-3) var(--esp-3);
}
.acd-h {
  margin: 0 0 var(--punto-estado);
  font: 600 var(--t-xs)/1.3 var(--fuente, inherit);
  color: var(--tenue);
  text-transform: lowercase;
  letter-spacing: .02em;
}
.acd-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.acd-f { margin: 0; }
.acd-b, .acd-x {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  min-height: var(--icono-tactil);
  padding: var(--punto-estado) var(--esp-2);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--tinta);
  font: 400 var(--t-s)/1.4 var(--fuente, inherit);
  text-align: left;
}
.acd-b { cursor: pointer; }
.acd-b:hover { background: var(--superficie-alta); }
.acd-p { flex: 0 0 auto; width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: var(--acento); }
.acd-x[data-roto="si"] { color: var(--mal-texto); }
.acd-x[data-roto="si"] .acd-p { background: var(--mal); }
.acd-v { color: var(--tenue); font-size: var(--t-xs); padding: var(--esp-1) var(--esp-2); }
.acd-nota { grid-column: 1 / -1; margin: 0; color: var(--tenue); font-size: var(--t-xs); }

@container (min-width: 35rem) {
  .acd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.acd-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-1); }
.acd-conectar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--icono-tactil); padding: var(--esp-1) var(--esp-2);
  border: 0; border-radius: 50em; cursor: pointer;
  background: transparent; color: var(--tenue); font: 600 var(--t-xs)/1.4 var(--fuente, inherit);
}
.acd-conectar:hover { color: var(--acento-texto, var(--acento)); background: var(--superficie-alta); }
.acd-f:has(.acd-conectar) { box-shadow: inset 0 0.0625rem 0 var(--raya); }


.acd-curar { display: inline-flex; gap: var(--esp-1); align-items: center; }
.acd-curar button {
  display: inline-grid; place-items: center;
  min-width: var(--icono-tactil); min-height: var(--icono-tactil);
  border: 0; border-radius: var(--r-s); cursor: pointer;
  background: var(--superficie-alta); color: var(--tinta); font: 600 var(--t-s)/1 var(--fuente, inherit);
}
.acd-curar button:hover { color: var(--acento-texto, var(--acento)); }
.acd-nota-inline { grid-column: 1 / -1; display: flex; gap: var(--esp-1); align-items: center; }
.acd-nota-inline input { flex: 1 1 auto; min-height: var(--icono-tactil); min-width: 0; border: 0; border-radius: var(--r-s); padding: 0 var(--esp-2); background: var(--bg); color: var(--tinta); font: 400 var(--t-s) var(--fuente, inherit); }
.acd-nota-inline button { min-height: var(--icono-tactil); border: 0; border-radius: 50em; padding: 0 var(--esp-3); background: var(--superficie-alta); color: var(--tinta); font: 600 var(--t-xs) var(--fuente, inherit); cursor: pointer; }


.acd-x, .acd-b { min-width: 0; }

.acd-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.acd-f { grid-template-columns: minmax(0, 1fr); }
.acd-f > .acd-x, .acd-f > .acd-b { grid-column: 1 / -1; width: 100%; }
.acd-f > .acd-curar, .acd-f > .acd-conectar { grid-column: 1 / -1; justify-self: end; }


.acd-nueva { grid-column: 1 / -1; }
.acd-nueva-btn { cursor: pointer; min-height: var(--icono-tactil); display: flex; align-items: center; padding: 0 var(--esp-3);
  border: 0; border-radius: 50em; background: var(--superficie-alta); color: var(--tinta); font: 600 var(--t-xs)/1.2 var(--fuente); }
.acd-nueva-caja { display: flex; flex-wrap: wrap; gap: var(--esp-1); padding: var(--esp-2) 0 0; }
.acd-nueva-caja select, .acd-nueva-caja input { flex: 1 1 9rem; min-width: 0; min-height: var(--icono-tactil); border: 0; border-radius: var(--r-s);
  padding: 0 var(--esp-2); background: var(--bg); color: var(--tinta); font: 400 var(--t-s) var(--fuente); }
.acd-nueva-caja button { min-height: var(--icono-tactil); padding: 0 var(--esp-3); border: 0; border-radius: 50em;
  background: var(--acento); color: var(--tinta-inversa); font: 600 var(--t-xs) var(--fuente); cursor: pointer; }
.acd-nueva-caja button:disabled { opacity: .5; cursor: default; }


.acd-insignia {
  flex: 0 0 auto; align-self: center;
  padding: 0 var(--esp-1); border-radius: 50em;
  background: var(--superficie-alta); color: var(--tenue);
  font: 600 var(--t-xs)/1.7 var(--fuente, inherit); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


.md {
  container: md / inline-size;
  display: grid;
  gap: var(--esp-3);
  padding: calc(var(--esp-1) / 2);
  font-family: var(--fuente, inherit);
  color: var(--tinta);
}


.md-hero {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4) var(--esp-3);
  border: 0;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: var(--e-2);
}
.md-migas { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--icono-tactil); flex-wrap: wrap; }

.md-fila {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  min-height: var(--icono-tactil);
  padding: var(--esp-1) var(--esp-3);
  border: 0; border-radius: 50em; cursor: pointer;
  background: var(--superficie-alta); color: var(--tinta);
  font: 600 var(--t-xs)/1.4 var(--fuente, inherit);
  box-shadow: var(--e-1);
}
.md-fila:hover { color: var(--acento-texto); }
.md-ruta { color: var(--tenue); font-size: var(--t-xs); overflow-wrap: anywhere; }
.md-titular { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.md-insignia {
  flex: 0 0 auto; display: grid; place-items: center;
  width: var(--icono-tactil); height: var(--icono-tactil);
  border-radius: var(--r-s);
  background: var(--acento); color: var(--tinta-inversa);
  font: 700 var(--t-m)/1 var(--fuente, inherit);
}
.md-titulo { margin: 0; font: 650 var(--t-xl)/1.2 var(--fuente, inherit); letter-spacing: -.01em; }

.md-pildora {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  min-height: var(--icono-tactil);
  padding: calc(var(--esp-1) / 2) var(--esp-3);
  border: 0; border-radius: 50em;
  background: color-mix(in oklab, var(--superficie-alta) 80%, transparent);
  color: var(--tenue); font: 500 var(--t-xs)/1.5 var(--fuente, inherit);
  cursor: pointer;
}
.md-pildora-p { width: var(--punto-estado); height: var(--punto-estado); border-radius: 50%; background: var(--ok); }
.md-pildora[data-hueco="si"] .md-pildora-p { background: var(--aviso); }


.md-barra { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap; }
.md-ruta-campo { flex: 1 1 14rem; min-height: var(--icono-tactil); }
.md-pie { color: var(--tenue); font-size: var(--t-xs); overflow-wrap: anywhere; }

.md-accion {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1);
  min-height: var(--icono-tactil);
  padding: var(--esp-1) var(--esp-3);
  border: 0; border-radius: 50em; cursor: pointer;
  background: var(--superficie-alta); color: var(--tinta);
  font: 600 var(--t-xs)/1.4 var(--fuente, inherit);
  box-shadow: var(--e-1);
}
.md-accion:hover { color: var(--acento-texto); }


.md-zonas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); align-items: start; }
.md-toc, .md-lado { min-width: 0; }
.md-toc {
  padding: var(--esp-2) var(--esp-2); border: 0; border-radius: var(--r-m);
  background: var(--superficie); box-shadow: var(--e-1);
}
.md-toc-h {
  cursor: pointer; color: var(--tenue);
  font: 600 var(--t-xs)/1.4 var(--fuente, inherit); text-transform: lowercase;
  min-height: var(--icono-tactil); display: flex; align-items: center;
}
.md-toc-l { list-style: none; margin: 0; padding: 0 0 var(--esp-1); display: grid; gap: calc(var(--esp-1) / 2); }
.md-toc-l li[data-nivel="3"] { padding-left: var(--esp-3); }
.md-toc-l a {
  display: block; min-height: var(--icono-tactil); padding: var(--esp-2);
  border-radius: var(--r-s); color: var(--tinta); text-decoration: none;
  font-size: var(--t-s); line-height: 1.35;
}
.md-toc-l a:hover { background: var(--superficie-alta); color: var(--acento-texto); }
.md-lectura {
  min-width: 0; max-width: 72ch; margin-inline: auto;
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  border: 0; border-radius: var(--r-tarjeta);
  background: var(--superficie); box-shadow: var(--e-2);
}
.md-vacio { margin: 0; color: var(--tenue); font-size: var(--t-s); }
.md-editor { display: grid; gap: var(--esp-2); }
.md-textarea {
  width: 100%; min-height: 46vh; box-sizing: border-box; padding: var(--esp-3);
  border: 0; border-radius: var(--r-m);
  background: var(--bg); color: var(--tinta);
  font: 400 var(--t-s)/1.6 var(--fuente, inherit);
  resize: vertical;
}
.md-acciones { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap; }
.md-oficio {
  display: grid; gap: var(--esp-2); padding: var(--esp-3) var(--esp-3);
  border: 0; border-radius: var(--r-tarjeta);
  background: var(--superficie); box-shadow: var(--e-1);
}
.md-propuesta { display: grid; gap: var(--esp-1); }
.md-cambio { padding: var(--esp-2) var(--esp-2); border-radius: var(--r-s); background: var(--superficie-alta); }
.md-mal { color: var(--mal-texto); font-size: var(--t-xs); overflow-wrap: anywhere; }
.md-ok { color: var(--ok); font-size: var(--t-xs); overflow-wrap: anywhere; }
.md-diff {
  margin: 0; padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--r-m);
  background: var(--superficie-alta); box-shadow: var(--e-1);
  font: 400 var(--t-s)/1.55 var(--fuente, inherit);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.md-diff-l[data-t="+"] { background: color-mix(in oklab, var(--ok) 15%, transparent); }
.md-diff-l[data-t="-"] { background: color-mix(in oklab, var(--mal) 15%, transparent); }



@container md (min-width: 44rem) {
  .md-zonas { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .md-toc { position: sticky; top: var(--esp-2); max-height: 70vh; overflow: auto; }
  .md-lado { grid-column: 1 / -1; }
  .md-lado .acd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container md (min-width: 66rem) {
  .md-zonas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .md-lado { grid-column: auto; position: sticky; top: var(--esp-2); max-height: 78vh; overflow: auto; }
  .md-lado .acd { grid-template-columns: minmax(0, 1fr); }
}

@container md (max-width: 32rem) {
  .md-hero { padding: var(--esp-2) var(--esp-3); }
  .md-titulo { font-size: var(--t-l); }
  .md-lectura { padding: var(--esp-2) var(--esp-3) var(--esp-3); }
}


.ami { position: relative; margin: 0; width: 84px; }
.ami img { width: 84px; height: 60px; object-fit: cover; border-radius: var(--r-s);
           box-shadow: var(--e-1); display: block; cursor: pointer;
           transition: box-shadow .15s, transform .12s; }
.ami img:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.ami-quitar { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0;
              border-radius: 50%; background: var(--mal); color: var(--tinta);
              font: 600 11px/1 var(--fuente); cursor: pointer; }

.ami-pie { font: 500 var(--t-xs)/1.3 var(--mono); color: var(--tenue); margin-top: 3px;
           max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           margin-inline: auto; text-align: center; }


.ami-fila { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e2); }


.amodal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
          background: color-mix(in oklab, var(--bg) 78%, transparent); }
.amodal figure { margin: 0; max-width: 88vw; max-height: 88vh; display: flex; flex-direction: column;
                 background: var(--superficie); border-radius: var(--r-l); box-shadow: var(--e-3);
                 padding: var(--e3); }

.amodal img { max-width: 88vw; max-height: 78vh; width: auto; height: auto; object-fit: contain;
              border-radius: var(--r-m); box-shadow: var(--e-2); }
.amodal figcaption { display: flex; gap: var(--e2); align-items: center; padding-top: var(--e2); }
.amodal .amodal-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                         font: var(--t-xs)/1.5 var(--mono); color: var(--tenue); }




.acom {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: min(120ch, 100%);   
  max-width: min(120ch, 100%);
  margin-inline: auto;
  margin-bottom: var(--e5);
  
  margin-top: calc(-1 * var(--alto-capa, 148px));   
  padding: var(--esp-7) var(--e3) var(--e2);
  
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in oklab, var(--superficie) 55%, transparent) 24px,
    var(--superficie) 48px);
  border: 0;
  border-radius: var(--r-l);
  
  overflow: hidden;
  box-shadow: var(--e-cristal);
  display: flex;
  flex-direction: column;
  gap: var(--e4);   
  flex: 0 0 auto;
}

.acom::before { content: none; }
.acom > * { position: relative; z-index: 1; }

.acom > .acom-controles { z-index: 30; }

.acom:focus-within { box-shadow: var(--e-cristal), var(--luz-arriba); }


.acom-caja, .acom-controles { max-width: 100%; margin-inline: 0; }

@media (min-width: 901px) and (max-width: 1280px) {
  .acom { width: min(106ch, 100%); max-width: min(106ch, 100%); }
}
.acom-caja { display: flex; align-items: flex-start; }
.acom-caja > .acom-campo { flex: 1 1 auto; min-width: 0; }


.acom-campo {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: transparent;
  color: var(--tinta);
  border: 0;
  border-radius: 0;
  padding: var(--e1) var(--e3) var(--e2);   
  font: inherit;
  box-shadow: none;
  min-height: var(--alto-campo);
  max-height: 45vh;
  overflow-y: auto;
  line-height: 1.55;
}
.acom-campo:focus, .acom-campo:focus-visible, .acom-editor:focus-visible { outline: none; box-shadow: none; }


.acom-editor {
  min-height: var(--alto-campo); box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: anywhere;
  flex: 1 1 auto; width: 100%; min-width: 0; resize: none;
}

.acom-chip {
  display: inline-flex; align-items: center; padding: 0 var(--esp-2); margin: 0 2px; border-radius: var(--r-s, 8px);
  background: var(--superficie-alta); box-shadow: var(--e-1);
  font: 600 var(--t-xs)/1.8 var(--mono); color: var(--acento-texto); white-space: nowrap; user-select: all;
}



.acom-controles { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.acom-hueco { flex: 1; }

.acom-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--r-s);
  background: var(--superficie-alta); color: var(--tenue);
  box-shadow: var(--e-1); cursor: pointer;
  transition: color .15s, box-shadow .15s, transform .08s;
}
.acom-icono:hover { color: var(--tinta); box-shadow: var(--e-2); }
.acom-icono:active { transform: translateY(1px); }

.acom-icono:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--acento-texto), var(--e-2);
}


.acom-icono.acom-enviar { background: var(--acento); color: var(--tinta-inversa); }
.acom-icono.acom-enviar:hover { color: var(--tinta-inversa); }
.acom-icono.acom-enviar:disabled { opacity: .6; cursor: default; }

.acom-icono.acom-pausar { color: var(--aviso); }

.acom-pausado { font-size: 11.5px; color: var(--aviso); border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent);
  border-radius: var(--r-s, 8px); padding: 2px 9px; white-space: nowrap; }
.acom-icono.acom-reanudar { color: var(--acento); }
.acom-icono.acom-parar { color: var(--aviso); }
.acom-icono.acom-parar:hover { color: var(--acento); }

.acom-icono svg { width: 22px; height: 22px; }

.acom-icono.acom-enviar svg { width: 20.3px; height: 20.3px; }

.acom-icono.acom-pausar svg { width: 26px; height: 26px; }
.acom-icono.acom-parar svg { width: 24px; height: 24px; }


.acom-controles .ad > .ab {
  height: 40px; padding: 0 10px; border-radius: var(--r-s);
  background: var(--superficie-alta); color: var(--tenue); font: 500 var(--t-xs)/1 var(--mono);
}

.acom-controles .ad { flex: 0 0 auto; }
.acom-controles .ad > .ab { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
.acom-controles .ad > .ab:hover { color: var(--tinta); }
.acom-modelo { min-width: 150px; font: var(--t-s)/1 var(--mono); color: var(--tenue); }
.acom-modelo:hover { color: var(--tinta); }
.acom-modelo:focus-visible { outline: none; box-shadow: var(--foco); }


.acom .ami-fila {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  align-items: flex-start; justify-content: flex-start;
  margin: 0; padding: 0 var(--e3);
}
.acom .ami { width: 84px; margin: 0; flex: 0 0 auto; position: relative; }
.acom .ami img {
  width: 84px; height: 60px; object-fit: cover; border-radius: var(--r-s);
  box-shadow: var(--e-1); display: block; cursor: zoom-in;
}

.acom .ami-quitar {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--raya);
  border-radius: 50%; background: var(--superficie); color: var(--tenue);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--e-1); opacity: .92;
}
.acom .ami-quitar:hover { color: var(--tinta); border-color: var(--acento); opacity: 1; }



.acom-caja-texto { position: relative; }


@media (max-width: 720px) {
  .acom-controles { flex-wrap: wrap; gap: 8px; height: auto; }
  
  .acom-hueco { display: block; flex: 1 1 0; min-width: 0; }
  .acom-enviar { flex: 0 0 auto; }
  .acom-modelo, .ad > .ab { max-width: 100%; }
  .acom { padding: 32px var(--e2) var(--e2); }
  
  .acom-controles { flex-wrap: nowrap; gap: 4px; min-height: 44px; }
  
  .acom-controles > *,
  .acom-controles .ad,
  .acom-controles .ad > .ab,
  .acom-controles .acom-icono {
    flex: 1 1 0; min-width: 0; max-width: 42px;
    height: 42px; min-height: 42px; padding: 0;
    box-sizing: border-box;
  }
  .acom-controles .ad > .ab { justify-content: center; }
  
  .acom-controles > * > summary,
  .acom-controles > * > .ab,
  .acom-controles > * > button,
  .acom-controles > * > label,
  .acom-controles > summary,
  .acom-controles .ad > .ab {
    width: 100%; min-width: 0; max-width: 42px;
    height: 42px; min-height: 42px; padding: 0; box-sizing: border-box;
  }
  
  
  .acom-controles svg { max-width: 26px; max-height: 26px; }
  .acom-controles .acom-enviar svg { max-width: 20.3px; max-height: 20.3px; }
  
  .acom { position: relative; padding-top: 56px; }
  
  
  .acom > .acom-controles { position: static; z-index: 30; }
  
  
  .acom-controles > [data-visual="esquina"] {
    position: absolute; top: 7px; right: 7px;
    width: 42px; max-width: 42px; height: 42px; min-height: 42px;
    flex: 0 0 auto;
  }
  
  .acom-controles > [data-visual="fila"] {
    position: static; flex: 1 1 0; min-width: 0;
    width: 100%; max-width: 42px; height: 42px; min-height: 42px;
  }
  
  .acom-controles .acom-hueco { display: none; }
  
  .acom-controles .acom-hueco { flex: 0 1 0; width: 0; min-width: 0; max-width: none; }
  
  .acom-icono { width: 44px; height: 44px; }
}


.apg-fila { display: flex; gap: 6px; margin: 8px 0; align-items: center; }
.apg-fila .acom-campo { min-height: 32px; }
.apg-titulo { margin: 0 0 2px; font-size: var(--t-m); }
.apg-motivo { margin: 0 0 var(--e2); }
.apg-cifras { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.apg-tabla { margin-top: 4px; }
.apg-lista { margin: 4px 0 0 var(--e4); }


.acom-sin-modelo {
  display: inline-flex; align-items: center; height: 40px; padding: 0 10px;
  font: var(--t-xs)/1 var(--mono); color: var(--tenue);
  border: 1px dashed color-mix(in oklab, var(--tenue) 45%, transparent); border-radius: var(--r-s);
  white-space: nowrap;
}


.cmp-aviso {
  margin: 6px 0 0; padding: 4px 8px;
  font: var(--t-xs)/1.35 var(--mono); color: var(--tenue);
  border-left: 2px solid color-mix(in oklab, var(--tenue) 45%, transparent);
}


.acom {
  width: min(120ch, calc(100% - 24px));
  max-width: min(120ch, calc(100% - 24px));
}


.caja-asa, .caja-tirador { display: none; }
@media (max-width: 900px) {
  html[data-visor="1"] .av { position: fixed; inset: 0; width: 100%; max-width: 100%; z-index: 40; }
  html[data-visor="1"] .av-cuerpo { padding-bottom: max(var(--caja-alto-plegada), var(--alto-acom, 0)); }
  html[data-caja-plegada="1"] .acom { display: none; }
  
  html[data-visor="1"]:not([data-caja-plegada="1"]) .acom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-radius: var(--caja-radio-arriba) var(--caja-radio-arriba) 0 0;
    box-shadow: var(--caja-sombra-arriba);
  }
  .caja-asa, .caja-tirador { display: none; }
  html[data-visor="1"][data-caja-plegada="1"] .caja-asa {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--caja-alto-plegada); align-items: center; justify-content: center; gap: var(--e2);
    border: 0; cursor: pointer; color: var(--tinta); background: var(--superficie);
    border-radius: var(--caja-radio-arriba) var(--caja-radio-arriba) 0 0;
    box-shadow: var(--caja-sombra-arriba);
  }
  html[data-visor="1"]:not([data-caja-plegada="1"]) .caja-tirador {
    display: block; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(max(var(--caja-alto-plegada), var(--alto-acom, 0)) - var(--e3));
    
    width: var(--icono-tactil, 44px); height: var(--icono-tactil, 44px); padding: 0; border: 0; border-radius: var(--r-s, 8px); cursor: pointer; z-index: 60;
    display: grid; place-items: center; color: var(--tinta); background: var(--superficie);
    background: color-mix(in oklab, var(--tinta) 22%, transparent);
  }
}


.ad { position: relative; display: inline-block; }

.ad-capa {
  
  position: fixed; z-index: 1000; margin: 0;
  
  
  box-sizing: border-box;
  min-width: min(260px, 92vw); max-width: min(92vw, 380px);
  max-height: min(85vh, 780px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie); color: var(--tinta);
  border-radius: var(--r-m); box-shadow: var(--e-2), var(--eje);
  padding: var(--e2);
  
}
.ad-grupo { padding: var(--e2) var(--e2) var(--e1); }

.ad-grupo-tit {
  font: 600 var(--t-s)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); padding: var(--e1) var(--e2) 6px;
}
.ad-grupo + .ad-grupo { box-shadow: inset 0 1px 0 var(--raya); margin-top: var(--e1); padding-top: var(--e2); }
.ad-item {
  display: block; width: 100%; text-align: start; background: transparent; color: var(--tinta);
  border: 0; border-radius: var(--r-s); cursor: pointer;
  font: 500 var(--t-m)/1.25 var(--fuente); padding: 10px var(--e3);
}
.ad-item:hover, .ad-item[data-activo="si"] { background: var(--superficie-alta); }
.ad-item:focus-visible { outline: none; box-shadow: var(--foco); }


.ad > .ab, .ad-item { display: inline-flex; align-items: center; gap: 6px; }
.ad-ico { display: inline-flex; align-items: center; flex: 0 0 auto; }


.ad-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.ad-nota { font: 400 var(--t-s)/1.25 var(--fuente); color: var(--tenue); }




.ui-scroll,
.lat-cuerpo,
pre.au-pensar-txt,
.am-txt pre { overscroll-behavior: contain; }


.ui-scroll::-webkit-scrollbar,
.lat-cuerpo::-webkit-scrollbar,
pre.au-pensar-txt::-webkit-scrollbar,
.am-txt pre::-webkit-scrollbar { width: 10px; height: 10px; }
.ui-scroll::-webkit-scrollbar-track,
.lat-cuerpo::-webkit-scrollbar-track,
pre.au-pensar-txt::-webkit-scrollbar-track,
.am-txt pre::-webkit-scrollbar-track { background: transparent; }
.ui-scroll::-webkit-scrollbar-thumb,
.lat-cuerpo::-webkit-scrollbar-thumb,
pre.au-pensar-txt::-webkit-scrollbar-thumb,
.am-txt pre::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--tenue), transparent 55%);
  border-radius: var(--r-s); border: 2px solid transparent; background-clip: content-box;
}
.ui-scroll::-webkit-scrollbar-thumb:hover,
.lat-cuerpo::-webkit-scrollbar-thumb:hover,
pre.au-pensar-txt::-webkit-scrollbar-thumb:hover,
.am-txt pre::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--tenue), transparent 25%); background-clip: content-box;
}
.ui-scroll::-webkit-scrollbar-button,
.lat-cuerpo::-webkit-scrollbar-button,
pre.au-pensar-txt::-webkit-scrollbar-button,
.am-txt pre::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ui-scroll::-webkit-scrollbar-corner,
.lat-cuerpo::-webkit-scrollbar-corner,
pre.au-pensar-txt::-webkit-scrollbar-corner,
.am-txt pre::-webkit-scrollbar-corner { background: transparent; }



@supports (-moz-appearance: none) {
  .ui-scroll, .lat-cuerpo, pre.au-pensar-txt, .am-txt pre {
    scrollbar-width: thin; scrollbar-color: var(--tenue) transparent;
  }
}


html::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:vertical,
html::-webkit-scrollbar-button:horizontal,
body::-webkit-scrollbar-button,
body::-webkit-scrollbar-button:vertical,
body::-webkit-scrollbar-button:horizontal { display: none; width: 0; height: 0; }