/* A.R.G.O.S. — estilos compartidos por el asistente y la carga de documentos */
:root{
  --bg:#070a04; --panel:rgba(14,20,10,.72); --line:rgba(150,190,90,.22);
  /* Verdes muestreados del logo ARGOS: #A8C860 (anillo) y #406018 (triángulo) */
  --cyan:#a8c860; --cyan-dim:#4a6b1e; --gold:#ffc65c; --text:#dbe8c8;
  --muted:#8a9c74; --danger:#ff6b6b; --verde:#8bc34a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); overflow:hidden;
  font:15px/1.6 ui-sans-serif,-apple-system,"SF Pro Text",Segoe UI,sans-serif;
  display:flex; flex-direction:column;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(90,130,40,.16), transparent 70%),
    linear-gradient(rgba(168,200,96,.045) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(168,200,96,.045) 1px, transparent 1px) 0 0/34px 100%;
}
body::after{
  content:""; position:fixed; left:0; right:0; height:140px; z-index:1;
  pointer-events:none; opacity:.5;
  background:linear-gradient(180deg, transparent, rgba(168,200,96,.07), transparent);
  animation:sweep 9s linear infinite;
}
@keyframes sweep{from{top:-140px}to{top:100%}}

/* ------------------------------------------------------------ cabecera --- */
header{
  position:relative; z-index:3; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 24px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,16,6,.95), rgba(10,16,6,.55));
  backdrop-filter:blur(10px);
}
/* Emblema del logo en la cabecera */
.icono{
  width:42px; height:42px; flex:none; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(168,200,96,.35));
}
.chip.salir{color:#c98a7a;border-color:rgba(201,138,122,.35)}
.chip.salir:hover{color:var(--danger);border-color:rgba(255,107,107,.5)}

.core{width:44px;height:44px;position:relative;flex:none}
.core i{position:absolute;inset:0;border-radius:50%;display:block;border:1.5px solid var(--cyan-dim);opacity:.8}
.core i:nth-child(1){animation:spin 7s linear infinite;border-style:dashed}
.core i:nth-child(2){inset:7px;border-color:var(--cyan);animation:spin 4s linear infinite reverse}
.core i:nth-child(3){
  inset:15px;background:radial-gradient(circle,#dfeeb8,var(--cyan) 55%,transparent 75%);
  border:none;box-shadow:0 0 18px var(--cyan);animation:pulse 2.6s ease-in-out infinite;
}
body.pensando .core i:nth-child(3){animation-duration:.7s}
body.pensando .core i:nth-child(1){animation-duration:1.6s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

.titulo{flex:1;min-width:120px}
.titulo h1{font:600 15px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.34em;color:#eef5e2}
.titulo p{font-size:11px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}

.estado{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
        font:11px/1 ui-monospace,Menlo,monospace}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.chip.ok{color:var(--cyan);border-color:rgba(168,200,96,.5);box-shadow:0 0 12px rgba(168,200,96,.12) inset}
.chip.mal{color:var(--danger);border-color:rgba(255,107,107,.45)}
.chip.nube{color:var(--gold);border-color:rgba(255,198,92,.5);box-shadow:0 0 12px rgba(255,198,92,.12) inset}
.chip button{all:unset;cursor:pointer}
.chip.enlace{text-decoration:none;cursor:pointer;transition:.18s}
.chip.enlace:hover{color:var(--cyan);border-color:rgba(168,200,96,.5)}

main{position:relative;z-index:2;flex:1;overflow-y:auto;padding:28px 24px 8px}
.ancho{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding-bottom:40px}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:rgba(168,200,96,.18);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* -------------------------------------------------------------- paneles --- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;backdrop-filter:blur(8px);
}
.panel h2{
  font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;
  text-transform:uppercase;color:#eef5e2;margin-bottom:10px;
}
.cuenta{color:var(--muted);letter-spacing:.1em}
.ayuda{font-size:13px;color:var(--muted);margin-bottom:18px;max-width:70ch}
.ayuda b{color:var(--text)}

/* ---------------------------------------------------- zona de archivo --- */
.zona{
  border:1.5px dashed rgba(168,200,96,.3);border-radius:12px;
  padding:26px;text-align:center;cursor:pointer;transition:.18s;
  background:rgba(12,18,8,.4);margin-bottom:18px;
}
.zona:hover,.zona.encima{border-color:var(--cyan);background:rgba(168,200,96,.07)}
.zona.elegido{border-style:solid;border-color:rgba(91,217,154,.5)}
.zona b{display:block;color:#eef5e2;font-weight:600;margin-bottom:4px}
.zona span{font-size:12.5px;color:var(--muted)}

/* --------------------------------------------------------- formulario --- */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.campos .ancho2{grid-column:span 2}
@media (max-width:640px){.campos .ancho2{grid-column:span 1}}
.campos label{display:flex;flex-direction:column;gap:6px}
.campos span{
  font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.req{color:var(--gold)}
.campos input,.campos select{
  all:unset;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  background:rgba(12,18,8,.8);color:var(--text);font:inherit;font-size:14px;transition:.18s;
}
.campos input:focus,.campos select:focus{
  border-color:rgba(168,200,96,.55);box-shadow:0 0 20px rgba(168,200,96,.1);
}
.campos input::placeholder{color:#6b7a58}
.campos select{cursor:pointer}
.campos option{background:#111808;color:var(--text)}

.acciones{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.boton{
  all:unset;cursor:pointer;padding:11px 22px;border-radius:10px;
  border:1px solid rgba(168,200,96,.5);color:var(--cyan);
  font:600 13px/1 ui-sans-serif,sans-serif;letter-spacing:.04em;transition:.18s;
}
.boton:hover{background:rgba(168,200,96,.12);box-shadow:0 0 24px rgba(168,200,96,.15)}
.boton:disabled{opacity:.45;cursor:progress}
.nota{font-size:12.5px;color:var(--muted)}

.aviso{font-size:13.5px;margin-top:16px}
.aviso:empty{display:none}
.aviso.bien{color:var(--verde)}
.aviso.mal{color:var(--danger)}

/* ------------------------------------------------------------- tabla ---
   Con la columna de clasificación la tabla dejó de caber y se salía del
   panel: la columna de acciones era `nowrap` con dos botones anchos, así
   que no cedía y empujaba el resto afuera. Ahora los anchos están
   repartidos, los botones se apilan, y si aun así no cabe scrollea dentro
   de su propia caja en vez de desbordar la página. */
#tabla{overflow-x:auto}
table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
thead th{
  text-align:left;padding:0 10px 10px;border-bottom:1px solid var(--line);
  font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}
/* El documento se lleva el espacio sobrante; el resto va justo a su medida. */
th:nth-child(1){width:auto}
th:nth-child(2){width:62px}                     /* versión */
th:nth-child(3){width:96px}                     /* área */
th:nth-child(4),th:nth-child(5){width:130px}    /* clasificación y tipo */
th:nth-child(6){width:96px}                     /* vigencia */
th:nth-child(7){width:62px}                     /* fragmentos */
th:nth-child(8){width:104px}                    /* acciones */
tbody td{padding:12px 10px;border-bottom:1px solid rgba(150,190,90,.09);
         vertical-align:top;overflow-wrap:anywhere}
tbody tr:hover{background:rgba(168,200,96,.04)}
tbody tr.reemplazado{opacity:.45}
td b{color:#eef5e2;display:block}
.codigo{
  display:inline-block;margin-top:3px;font:600 11px ui-monospace,Menlo,monospace;
  color:var(--gold);border:1px solid rgba(255,198,92,.35);border-radius:5px;padding:1px 6px;
}
.archivo{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.tag{
  display:inline-block;margin-left:6px;font:10px ui-monospace,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.fecha{white-space:nowrap}
/* Apilados, no en fila: en fila obligaban a la tabla a ensancharse. */
.fin{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.mini{
  all:unset;cursor:pointer;font-size:12px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--line);color:var(--muted);transition:.18s;
  text-align:center;white-space:nowrap;
}
.mini:hover{color:var(--cyan);border-color:rgba(168,200,96,.5)}
.mini.peligro:hover{color:var(--danger);border-color:rgba(255,107,107,.5)}
.vacio{color:var(--muted);font-size:13.5px;padding:10px 0}

/* ================= conversación (pantalla del asistente) ================= */
.hilo{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.msg{display:flex;gap:14px;animation:entra .35s ease both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quien{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;
  border:1px solid var(--line);color:var(--muted);
}
.msg.ia .quien{color:var(--cyan);border-color:rgba(168,200,96,.45);box-shadow:0 0 14px rgba(168,200,96,.14)}
.cuerpo{flex:1;min-width:0}
.burbuja{
  background:var(--panel);border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:14px 18px;backdrop-filter:blur(8px);
}
.msg.yo .burbuja{border-radius:14px 4px 14px 14px;background:rgba(22,30,16,.6)}
.burbuja p{margin:0 0 10px}.burbuja p:last-child{margin:0}
.burbuja ul,.burbuja ol{margin:6px 0 10px 20px}
.burbuja li{margin:3px 0}
.burbuja strong{color:#eef5e2}
.burbuja code{font:13px ui-monospace,Menlo,monospace;background:rgba(168,200,96,.1);padding:1px 5px;border-radius:4px;color:var(--cyan)}
.cita{
  display:inline-block;min-width:19px;text-align:center;
  font:600 11px/1.5 ui-monospace,Menlo,monospace;color:var(--gold);
  border:1px solid rgba(255,198,92,.4);border-radius:5px;padding:0 4px;margin:0 2px;
}
.cursor{display:inline-block;width:8px;height:16px;background:var(--cyan);vertical-align:-3px;margin-left:2px;animation:parpadeo .9s step-end infinite}
@keyframes parpadeo{50%{opacity:0}}

.fuentes{margin-top:9px}
.fuentes summary{
  cursor:pointer;list-style:none;font:11px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0;user-select:none;
}
.fuentes summary:hover{color:var(--cyan)}
.fuentes summary::-webkit-details-marker{display:none}
.fuentes summary::before{content:"▸ ";color:var(--gold)}
.fuentes[open] summary::before{content:"▾ "}
.fuente{border-left:2px solid rgba(255,198,92,.35);padding:7px 0 7px 12px;margin:8px 0;font-size:13px;color:var(--muted)}
.fuente b{color:var(--gold);font:600 12px ui-monospace,Menlo,monospace}
.fuente span{display:block;margin-top:4px;opacity:.75;font-size:12.5px}

.bienvenida{text-align:center;padding:8vh 0 4vh;color:var(--muted)}
.bienvenida h2{font:300 30px/1.3 ui-sans-serif,-apple-system,sans-serif;color:#eef5e2;letter-spacing:.02em;margin-bottom:10px;text-transform:none}
.bienvenida h2 b{color:var(--cyan);font-weight:400}
/* ================== panel de sesión (abajo izquierda) ================== */
/* Fila del pie: el panel de sesión a la izquierda y el campo a su lado. */
.fila-pie{
  display:flex; align-items:center; gap:14px;   /* alineada a la izquierda */
}
.fila-pie .caja{flex:1; margin:0; max-width:none}

.muelle{
  flex:none; display:flex; align-items:center; gap:4px;
  padding:8px 8px 8px 10px; border-radius:15px;
  background:linear-gradient(140deg, rgba(20,28,12,.94), rgba(9,14,6,.90));
  border:1px solid rgba(168,200,96,.26);
  box-shadow:0 14px 40px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(168,200,96,.12);
  backdrop-filter:blur(16px);
  transition:border-color .25s, box-shadow .25s;
}
.muelle:hover{
  border-color:rgba(168,200,96,.45);
  box-shadow:0 16px 46px rgba(0,0,0,.6), 0 0 26px rgba(168,200,96,.10),
             inset 0 1px 0 rgba(168,200,96,.18);
}
/* El panel de sesión SIGUE ACCESIBLE con los sistemas apagados. Antes se
   ocultaba junto con el resto de la interfaz, así que quien entraba quedaba
   obligado a encender para poder salir: el botón existía pero la pantalla de
   arranque lo tapaba y no recibía clics. */
body.apagado .muelle{opacity:1; pointer-events:auto}

.quien-soy{display:flex; align-items:center; gap:9px; padding:2px 8px 2px 2px}
.inicial{
  width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(168,200,96,.22), rgba(74,107,30,.30));
  border:1px solid rgba(168,200,96,.4); color:var(--cyan);
  font:600 14px/1 ui-sans-serif,sans-serif;
}
.quien-soy .datos{display:flex; flex-direction:column; gap:1px; line-height:1.25}
.quien-soy b{color:#eef5e2; font-size:12.5px; font-weight:600; max-width:150px;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.quien-soy i{
  font-style:normal; font:9.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.separador{width:1px; height:26px; background:rgba(168,200,96,.18); margin:0 4px}

.accion-muelle{
  display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  text-decoration:none; color:var(--muted); font-size:12.5px; font-weight:600;
  letter-spacing:.02em; border:1px solid transparent; transition:.18s; cursor:pointer;
}
.accion-muelle svg{
  width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.accion-muelle:hover{
  color:var(--cyan); background:rgba(168,200,96,.12);
  border-color:rgba(168,200,96,.32);
}
.accion-muelle.salir:hover{
  color:#ff8f6b; background:rgba(255,107,107,.10); border-color:rgba(255,107,107,.32);
}

/* En pantallas chicas el panel chocaría con el campo de preguntas */
@media (max-width:900px){
  .muelle{padding:6px}
  .quien-soy, .separador{display:none}
  .accion-muelle span{display:none}
  .accion-muelle{padding:9px}
}

/* ===================== pantalla de encendido ===================== */
/* Mientras está apagado, la interfaz de atrás no debe distraer ni recibir clics. */
body.apagado header, body.apagado main{
  opacity:.12; pointer-events:none; filter:blur(2px);
}
/* El pie NO se atenúa como bloque: contiene el panel de sesión, que debe
   seguir usable. Se atenúan sus otros hijos uno por uno, porque `opacity` en
   el padre tiñe a toda su descendencia y no se puede revertir desde un hijo. */
/* El z-index va en el PIE, no en el muelle: `footer` tiene position:relative
   y z-index:3, con lo que abre su propio contexto de apilamiento y encierra a
   sus hijos. Un z-index:60 en el muelle no lo sacaba de ahí y la pantalla de
   arranque (z-index:50) le seguía ganando. */
body.apagado footer{pointer-events:none; z-index:60}
body.apagado footer .caja, body.apagado footer .pie{
  opacity:.12; filter:blur(2px);
}

#arranque{
  position:fixed; inset:0; z-index:50; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:radial-gradient(ellipse at center, rgba(6,20,34,.92), rgba(4,8,2,.98));
  backdrop-filter:blur(6px);
  transition:opacity .6s ease, transform .6s ease;
}
#arranque.saliendo{opacity:0; transform:scale(1.12); pointer-events:none}

.reactor{
  width:230px; height:230px; position:relative; cursor:pointer;
  display:grid; place-items:center; margin-bottom:72px;
  transition:transform .25s ease;
}
.reactor:hover{transform:scale(1.05)}
.reactor:active{transform:scale(.97)}
.reactor:focus-visible{outline:2px solid var(--cyan); outline-offset:14px; border-radius:50%}

.reactor i{position:absolute; inset:0; border-radius:50%; display:block; pointer-events:none}
.reactor i:nth-child(1){border:1px dashed rgba(168,200,96,.30); animation:spin 18s linear infinite}
.reactor i:nth-child(2){
  inset:-10px; border:1.5px solid rgba(168,200,96,.5);
  box-shadow:0 0 30px rgba(168,200,96,.25);
  animation:latir 2.8s ease-in-out infinite;
}
/* El emblema del logo reemplaza al núcleo dibujado */
.emblema{
  position:relative; z-index:1; width:78%; pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(168,200,96,.35));
  animation:latir 3.2s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{opacity:.75; transform:scale(.97)}
  50%    {opacity:1;   transform:scale(1.02)}
}
.reactor:hover .emblema,
.reactor:hover i:nth-child(2){animation-duration:1.1s}

/* El rótulo va DEBAJO del núcleo: dentro no cabe y se cortaba. */
.reactor span{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:20px; white-space:nowrap; pointer-events:none; text-align:center;
  font:600 11px/1.6 ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.28em; text-indent:.28em; color:var(--cyan);
  text-shadow:0 0 14px rgba(168,200,96,.5);
}

.marca{
  font:600 22px/1.2 ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.42em; color:#eef5e2; text-indent:.42em;
}
.lema{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-top:6px;
}

@media (max-width:520px){
  .reactor{width:170px;height:170px}
  .marca{font-size:17px;letter-spacing:.3em;text-indent:.3em}
}

/* saludo de apertura */
.saludo{margin-top:16px;font-size:14.5px;line-height:1.8;text-align:center}
.saludo p{margin:0}
.saludo .dato{color:var(--muted)}
.saludo .cierre{margin-top:20px;color:var(--text);max-width:52ch;margin-inline:auto}

/* Solo se dibuja cuando hay algo caído: con todo en orden no aparece. */
.plataforma{
  display:inline-block; text-align:left; margin-top:20px; padding:12px 20px;
  border:1px solid rgba(255,198,92,.4); border-radius:12px;
  background:rgba(255,198,92,.06);
}
.plataforma ul{list-style:none; margin:0; padding:0}
.plataforma li{font-size:13.5px; padding:2px 0; color:var(--gold)}
.trato{
  margin-top:22px;display:flex;gap:8px;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:13px;
}
/* Sin esto, el display:flex de arriba le gana al atributo hidden y el selector
   se muestra siempre. */
.trato[hidden]{display:none}
.trato span{color:var(--muted);margin-right:4px}
.trato button{
  all:unset;cursor:pointer;border:1px solid rgba(255,198,92,.4);border-radius:999px;
  padding:7px 15px;font-size:13px;color:var(--gold);transition:.18s;
}
.trato button:hover{background:rgba(255,198,92,.1);border-color:var(--gold)}

/* ---------------- selector de documentos ----------------
   Dos niveles colapsables: clasificación → tipo → documento. */
/* Panel flotante anclado bajo la cabecera: se abre desde el chip DOCUMENTOS
   en cualquier momento, también con la conversación ya empezada. */
.selector{
  position:fixed; top:74px; right:24px; z-index:40;
  width:min(560px, calc(100vw - 48px)); max-height:min(70vh, 640px);
  overflow-y:auto; text-align:left;
  border:1px solid rgba(168,200,96,.35); border-radius:14px; padding:16px 18px;
  background:rgba(10,16,6,.97); backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:baja .18s ease both;
}
.selector[hidden]{display:none}
@keyframes baja{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.selector-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cerrar-selector{
  all:unset;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;
  padding:4px 8px;border-radius:7px;transition:.15s;
}
.cerrar-selector:hover{color:var(--cyan);background:rgba(168,200,96,.1)}
.chip#chipDocs{cursor:pointer}
.chip#chipDocs.abierto{color:var(--cyan);border-color:rgba(168,200,96,.55)}
.selector h3{
  font:600 10.5px/1 ui-monospace,Menlo,monospace; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}

.fila{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:9px;
  width:100%; padding:7px 8px; border-radius:9px; cursor:pointer;
  transition:background .15s;
}
.fila:hover{background:rgba(168,200,96,.07)}
.fila b{color:var(--text); font-size:13.5px; font-weight:500}
.fila i{font-style:normal; font-size:11.5px; color:var(--muted); margin-left:auto}

.fila.global{border-bottom:1px solid var(--line); border-radius:9px 9px 0 0; padding-bottom:11px}
.fila.global b{color:#eef5e2; font-weight:600; letter-spacing:.1em}

/* Casilla con tres estados: marcada, parcial y vacía */
.casilla{
  width:17px; height:17px; flex:none; border-radius:5px; position:relative;
  border:1.5px solid rgba(168,200,96,.4); transition:.15s;
}
.casilla.todos{background:var(--cyan); border-color:var(--cyan)}
.casilla.todos::after{
  content:""; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border:solid #16200a; border-width:0 2px 2px 0; transform:rotate(43deg);
}
.casilla.algunos{border-color:var(--cyan)}
.casilla.algunos::after{
  content:""; position:absolute; inset:3px; border-radius:2px; background:var(--cyan);
}

/* Nivel 1: la clasificación */
.clas{margin-top:6px; border-top:1px solid rgba(150,190,90,.09)}
.nivel1{padding:0}
.nivel1 .marcar{all:unset; cursor:pointer; padding:9px 8px; display:flex}
.nivel1 .plegar{
  all:unset; cursor:pointer; flex:1; display:flex; align-items:center; gap:9px;
  padding:9px 8px 9px 2px; border-radius:9px;
}
.nivel1 .plegar:hover{background:rgba(168,200,96,.07)}
.nivel1 b{color:#eef5e2; font-weight:600; font-size:13.5px}
.nivel1 i{font-style:normal; font-size:11.5px; color:var(--muted); margin-left:auto}
.flecha{color:var(--cyan-dim); font-size:11px; margin-left:8px}

/* Nivel 2: los tipos, ocultos hasta desplegar */
.tipos{display:none; padding:0 0 8px 26px}
.clas.abierta .tipos{display:block}
.tipo{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0}
.chip-tipo{
  all:unset; cursor:pointer; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted);
  font:600 11px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.06em;
  transition:.15s; flex:none;
}
.chip-tipo:hover{border-color:rgba(168,200,96,.5); color:var(--cyan)}
.chip-tipo em{font-style:normal; opacity:.6; margin-left:3px}
.chip-tipo.todos{background:rgba(168,200,96,.16); border-color:var(--cyan); color:var(--cyan)}
.chip-tipo.algunos{border-color:rgba(168,200,96,.5); color:var(--cyan)}

.doc-fila{width:auto; flex:1 1 100%; padding:5px 8px}
.doc-fila b{font-size:12.5px; font-weight:400}
.doc-fila i{font-size:11px}

.chip.filtrado{color:var(--gold); border-color:rgba(255,198,92,.5)}

.ejemplos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.ejemplos button{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13px;color:var(--muted);transition:.18s}
.ejemplos button:hover{color:var(--cyan);border-color:rgba(168,200,96,.5);background:rgba(168,200,96,.06)}

footer{
  position:relative;z-index:3;padding:16px 24px 22px;border-top:1px solid var(--line);
  background:linear-gradient(0deg, rgba(10,16,6,.96), rgba(10,16,6,.6));backdrop-filter:blur(10px);
}
.caja{
  max-width:860px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;
  border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 16px;
  background:rgba(12,18,8,.8);transition:.2s;
}
.caja:focus-within{border-color:rgba(168,200,96,.55);box-shadow:0 0 28px rgba(168,200,96,.1)}
textarea{all:unset;flex:1;color:var(--text);font:inherit;max-height:140px;padding:8px 0;resize:none;line-height:1.5}
textarea::placeholder{color:#6b7a58}
.accion{
  all:unset;cursor:pointer;width:38px;height:38px;flex:none;border-radius:10px;
  display:grid;place-items:center;color:var(--muted);border:1px solid transparent;
  transition:.18s;font-size:16px;
}
.accion:hover{color:var(--cyan);border-color:var(--line);background:rgba(168,200,96,.07)}
.accion.grabando{color:var(--danger);border-color:rgba(255,107,107,.5);animation:pulse 1s infinite}
.pie{margin:10px 0 0;font-size:11px;color:#5c6a4a;letter-spacing:.06em}

/* -------------- mantenedor de clasificaciones y tipos -------------- */
.dos-catalogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.sub{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;
     text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.item-cat{display:flex;align-items:center;gap:7px;padding:5px 0;
          border-bottom:1px solid rgba(150,190,90,.08)}
.item-cat.inactivo{opacity:.45}
.item-cat.nuevo{border-bottom:none;margin-top:8px}
.cat-nombre{all:unset;flex:1;min-width:0;padding:6px 9px;border-radius:7px;
            border:1px solid transparent;color:var(--text);font-size:13.5px;transition:.15s}
.cat-nombre:hover{border-color:var(--line)}
.cat-nombre:focus{border-color:rgba(168,200,96,.55);background:rgba(12,18,8,.8)}
.cat-orden{all:unset;width:44px;flex:none;padding:6px;border-radius:7px;text-align:center;
           border:1px solid transparent;color:var(--muted);font-size:12px}
.cat-orden:hover{border-color:var(--line)}
.cat-orden:focus{border-color:rgba(168,200,96,.55);background:rgba(12,18,8,.8);color:var(--text)}
.usos{font-size:11px;color:var(--muted);min-width:42px;text-align:right}
.mini[disabled]{opacity:.3;cursor:not-allowed}

/* Selects de etiqueta dentro de la tabla: se ven como texto hasta que se tocan */
select.etiqueta{
  all:unset;cursor:pointer;padding:4px 7px;border-radius:6px;font-size:12.5px;
  color:var(--text);border:1px solid transparent;transition:.15s;max-width:100%;
}
select.etiqueta:hover{border-color:var(--line);background:rgba(12,18,8,.6)}
select.etiqueta:focus{border-color:rgba(168,200,96,.55);background:rgba(12,18,8,.9)}
select.etiqueta.guardando{opacity:.5}
select.etiqueta.guardado{border-color:rgba(91,217,154,.6);color:var(--verde)}
select.etiqueta option{background:#111808;color:var(--text)}

/* ─────────────────────────── pantalla de acceso ───────────────────────── */
body.pantalla-login{display:flex;align-items:center;justify-content:center;overflow:auto}
.acceso{
  position:relative;z-index:2;width:min(420px,92vw);text-align:center;
  padding:38px 34px;border:1px solid var(--line);border-radius:18px;
  background:rgba(14,20,10,.6);backdrop-filter:blur(10px);
}
.emblema-login{
  width:110px;height:110px;object-fit:contain;margin-bottom:16px;
  filter:drop-shadow(0 0 22px rgba(168,200,96,.35));
}
.acceso .marca{
  font:600 22px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.32em;
  color:#eef5e2;margin-bottom:8px;
}
.acceso .lema{
  font:11px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:28px;
}
.acceso form{display:flex;flex-direction:column;gap:15px;text-align:left}
.acceso label{display:flex;flex-direction:column;gap:6px}
.acceso label span{
  font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.acceso input{
  all:unset;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  background:rgba(12,18,8,.85);color:var(--text);font-size:15px;transition:.18s;
}
.acceso input:focus{border-color:rgba(168,200,96,.55);box-shadow:0 0 22px rgba(168,200,96,.12)}
.acceso input::placeholder{color:#6b7a58}
.boton.ancho{text-align:center;margin-top:6px}
.pie-login{
  margin-top:24px;font-size:12px;line-height:1.6;color:var(--muted);
  border-top:1px solid rgba(150,190,90,.12);padding-top:18px;
}
.pie-login b{color:var(--text)}
.acceso .aviso{text-align:center;min-height:1.2em;margin:0}

/* ─────────────────── administración de usuarios ─────────────────── */
.buscador{margin-bottom:16px}
.buscador input{
  all:unset;width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;background:rgba(12,18,8,.8);
  color:var(--text);font-size:14.5px;transition:.18s;
}
.buscador input:focus{border-color:rgba(168,200,96,.55);box-shadow:0 0 20px rgba(168,200,96,.1)}
.buscador input::placeholder{color:#6b7a58}

.persona{
  display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:10px;
  border-bottom:1px solid rgba(150,190,90,.09);flex-wrap:wrap;
}
.persona:hover{background:rgba(168,200,96,.04)}
.persona.tiene{opacity:.5}
/* Ojo: NO llamar a esto `.quien` — ese nombre ya es el avatar de 34x34 del
   chat, y reutilizarlo lo estiraba a flex:1 deformando la conversación. */
.ficha-persona{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.ficha-persona b{color:#eef5e2;font-weight:500;font-size:14px}
.ficha-persona span{font-size:12px;color:var(--muted)}
.ficha-persona .empresa{font-size:11.5px;color:var(--cyan-dim)}
.alta{display:flex;gap:8px;align-items:center}
.rol-nuevo{
  all:unset;cursor:pointer;padding:6px 10px;border-radius:8px;font-size:12.5px;
  border:1px solid var(--line);color:var(--text);
}
.rol-nuevo:focus{border-color:rgba(168,200,96,.55)}
.rol-nuevo option{background:#111808;color:var(--text)}
.ya{font-size:11.5px;color:var(--muted);letter-spacing:.06em}

.si{color:var(--verde);font-size:12.5px}
.no{color:var(--danger);font-size:12.5px}

/* Cartel de la clave recién generada */
.velo{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;background:rgba(4,7,2,.86);backdrop-filter:blur(6px);
}
.velo[hidden]{display:none}
.tarjeta-clave{
  width:min(440px,92vw);padding:30px;border-radius:16px;text-align:center;
  border:1px solid rgba(168,200,96,.4);background:rgba(14,20,10,.97);
  box-shadow:0 0 60px rgba(168,200,96,.15);
}
.tarjeta-clave h3{
  font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.tarjeta-clave .para{font-size:14px;color:#eef5e2;margin-bottom:18px}
.tarjeta-clave .clave{
  display:block;font:700 27px/1.3 ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.16em;color:var(--cyan);background:rgba(168,200,96,.09);
  border:1px dashed rgba(168,200,96,.4);border-radius:10px;padding:16px;
  user-select:all;margin-bottom:16px;word-break:break-all;
}
.tarjeta-clave .advertencia{font-size:12.5px;line-height:1.6;color:var(--gold);margin-bottom:20px}
.tarjeta-clave .acciones{justify-content:center;margin-top:0}
/* El muelle pasó de enlaces a botones (salir y cambiar clave llaman a la API).
   Se neutralizan SOLO los estilos que trae el navegador para un <button>; usar
   `all:unset` aquí borraría también los de .accion-muelle. */
button.accion-muelle{
  background:none; font:inherit; font-size:12.5px; font-weight:600;
  text-align:left; margin:0; appearance:none;
}

/* ───────────────────────────── diálogo propio ───────────────────────────
   Reemplaza a prompt()/alert(): además de romper el ambiente de la pantalla,
   los del navegador bloquean el hilo y no se pueden estilar. */
.dialogo{
  width:min(400px,92vw);padding:28px;border-radius:16px;
  border:1px solid rgba(168,200,96,.35);background:rgba(14,20,10,.97);
  box-shadow:0 0 60px rgba(168,200,96,.12);
}
.dialogo h3{
  font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:#eef5e2;margin-bottom:10px;
}
.dlg-texto{font-size:13.5px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.dlg-texto[hidden]{display:none}
#dlgCampos{display:flex;flex-direction:column;gap:14px}
#dlgCampos label{display:flex;flex-direction:column;gap:6px}
#dlgCampos span{
  font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
#dlgCampos input{
  all:unset;border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  background:rgba(12,18,8,.85);color:var(--text);font-size:14.5px;transition:.18s;
}
#dlgCampos input:focus{border-color:rgba(168,200,96,.55);box-shadow:0 0 20px rgba(168,200,96,.1)}
#dlgCampos input::placeholder{color:#6b7a58}
.dlg-acciones{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px}
.dlg-acciones .mini[hidden]{display:none}
#dlgAviso{margin-top:14px;text-align:left}
#dlgAviso:empty{display:none}


/* ─────────────────── indicador de "pensando" ───────────────────
   Mientras ARGOS redacta. No bloquea: pointer-events:none, así se puede
   seguir leyendo y desplazando la conversación de atrás. */
.pensando-flotante{
  position:fixed; inset:0; z-index:45; display:none;
  align-items:center; justify-content:center; pointer-events:none;
}
body.pensando .pensando-flotante{display:flex}
.pensando-caja{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  min-width:190px;
  padding:26px 34px; border-radius:16px;
  background:rgba(8,13,4,.82); border:1px solid rgba(168,200,96,.28);
  backdrop-filter:blur(10px); box-shadow:0 0 60px rgba(168,200,96,.12);
  animation:aparece .25s ease both;
}
@keyframes aparece{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
/* Anillos concéntricos girando: el mismo lenguaje visual del núcleo. */
.pensando-nucleo{width:54px;height:54px;position:relative}
.pensando-nucleo i{position:absolute;inset:0;border-radius:50%;display:block;
  border:1.5px solid var(--cyan-dim);opacity:.85}
.pensando-nucleo i:nth-child(1){animation:spin 2.4s linear infinite;border-style:dashed}
.pensando-nucleo i:nth-child(2){inset:9px;border-color:var(--cyan);
  animation:spin 1.5s linear infinite reverse}
.pensando-nucleo i:nth-child(3){inset:19px;border:none;
  background:radial-gradient(circle,#dfeeb8,var(--cyan) 55%,transparent 75%);
  box-shadow:0 0 20px var(--cyan);animation:pulse 1s ease-in-out infinite}
.pensando-texto{
  font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan);
}
.pensando-texto::after{
  content:"";animation:puntos 1.4s steps(4,end) infinite;
  /* Ancho reservado: sin esto la caja entera se ensanchaba y encogía al
     ritmo de los puntos, y el indicador "latía" de forma molesta. */
  display:inline-block;width:1.7em;text-align:left;
}
@keyframes puntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (max-width:640px){
  .selector{top:auto;bottom:96px;right:12px;left:12px;width:auto;max-height:60vh}
}

/* Recordar el RUT en el login */
.recordar{
  flex-direction:row !important; align-items:center; gap:9px;
  cursor:pointer; user-select:none; margin-top:2px;
}
.recordar input{
  all:unset; width:16px; height:16px; flex:none; border-radius:5px;
  border:1.5px solid rgba(168,200,96,.4); position:relative; cursor:pointer; transition:.15s;
}
.recordar input:checked{background:var(--cyan); border-color:var(--cyan)}
.recordar input:checked::after{
  content:""; position:absolute; left:4.5px; top:1px; width:4px; height:8px;
  border:solid #16200a; border-width:0 2px 2px 0; transform:rotate(43deg);
}
.recordar span{
  font-size:12.5px !important; color:var(--muted); letter-spacing:0 !important;
  text-transform:none !important;
}

.selector-pie{
  display:flex;justify-content:flex-end;padding-top:14px;margin-top:6px;
  border-top:1px solid rgba(150,190,90,.12);
}
/* Enlace de descarga: mismo aspecto que los botones de la fila */
a.mini{text-decoration:none;display:inline-block}
.mini.apagado{opacity:.35;cursor:default;border-style:dashed}

/* ─────────── alcance de los documentos (empresa / contrato) ─────────── */
.sugerencias{position:relative}
.sugerencias:empty{display:none}
.sugerencia{
  all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer;
  padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--text);
  border:1px solid transparent;transition:.15s;
}
.sugerencia:hover{background:rgba(168,200,96,.1);border-color:var(--line)}
.sugerencia em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:6px}

.alcance{
  display:inline-block;font:600 10.5px/1.5 ui-monospace,Menlo,monospace;
  letter-spacing:.06em;padding:2px 8px;border-radius:999px;white-space:nowrap;
}
.alcance.global{color:var(--muted);border:1px solid var(--line)}
.alcance.empresa{color:var(--cyan);border:1px solid rgba(168,200,96,.45);
                 background:rgba(168,200,96,.08)}
.alcance.contrato{color:var(--gold);border:1px solid rgba(255,198,92,.45);
                  background:rgba(255,198,92,.08)}