/* Aspecto tipo ZKAccess 3.5 / Command Center: aplicación de escritorio.
   Pedido por el usuario el 2026-09-06 — «un formato similar al que ya
   conocemos, me refiero a la forma en que se ve, no a cómo funciona».

   🔑 Lo que hace que se PAREZCA no es el color: es la densidad.
   Un operador que administra 4,314 credenciales necesita ver muchas filas de
   una vez. Rejillas apretadas con líneas, barra de herramientas encima de cada
   una, y árbol de navegación a la izquierda que no se mueve.

   ⚠️ Claro a propósito, no oscuro: es lo que ya conocen y lo que se imprime.
*/
:root{
  --marco:#e8ecf2; --fondo:#f6f8fa; --papel:#ffffff; --linea:#c9d3e0;
  --tinta:#1e2733; --suave:#67717f; --acento:#1f6fb2; --acento2:#e8f1fa;
  --barra:#2c5c8a; --ok:#1a7f37; --mal:#b42318; --avisa:#9a6700;
  --tabla-alt:#f4f7fb;
}
*{box-sizing:border-box}
body{margin:0;font:13px/1.45 "Segoe UI",Tahoma,Arial,sans-serif;
     background:var(--fondo);color:var(--tinta)}
code{font-family:Consolas,"Courier New",monospace;font-size:12px}

/* ── Barra de título ─────────────────────────────────────────────────────── */
header{background:var(--barra);color:#fff;padding:7px 14px;display:flex;
       align-items:center;gap:14px}
header h1{font-size:15px;font-weight:600;margin:0}
header h1 span{font-weight:400;opacity:.75;font-size:13px}
header .estado{margin-left:auto;font-size:12px;opacity:.9;display:flex;gap:16px}
header .estado b{font-weight:600}
header #version-cab{margin-left:16px;font-size:11px;opacity:.7;font-family:ui-monospace,Consolas,monospace}
header #version-cab.vieja{opacity:1;color:#fff;background:#c62828;padding:2px 8px;border-radius:4px;font-family:inherit;font-size:12px}
header #version-cab.vieja a{color:#fff;font-weight:600}

/* ── El marco: árbol a la izquierda, contenido a la derecha ──────────────── */
#marco{display:flex;height:calc(100vh - 34px)}
#arbol{width:214px;flex:none;background:var(--marco);border-right:1px solid var(--linea);
       overflow-y:auto;padding:6px 0}
#arbol .grupo{font-size:11px;font-weight:700;text-transform:uppercase;
              letter-spacing:.4px;color:var(--suave);padding:12px 14px 4px}
#arbol button{display:block;width:100%;text-align:left;background:none;border:0;
              padding:6px 14px 6px 26px;font-size:13px;color:var(--tinta);
              cursor:pointer;border-left:3px solid transparent}
#arbol button:hover{background:#dde4ee}
#arbol button.on{background:var(--acento2);border-left-color:var(--acento);
                 font-weight:600;color:var(--acento)}
#arbol button .n{float:right;color:var(--suave);font-weight:400;font-size:11px}

main{flex:1;overflow-y:auto;padding:14px 18px 40px}
section{display:none}
section.on{display:block}
h2{font-size:15px;margin:0 0 2px;font-weight:600}
.ayuda{color:var(--suave);margin:0 0 12px;max-width:78ch}
/* La ayuda tambien puede ser una lista: dos cosas que se comparan se leen
   mejor una debajo de otra que en un parrafo con punto y coma. */
ul.ayuda{padding-left:20px}
ul.ayuda li{margin-bottom:4px}

/* ── Paneles con título, como los del Command Center ─────────────────────── */
.caja{background:var(--papel);border:1px solid var(--linea);border-radius:3px;
      margin-bottom:14px}
.caja > .cab{background:linear-gradient(#fbfcfe,#eef2f7);
             border-bottom:1px solid var(--linea);padding:7px 12px;
             font-weight:600;font-size:13px;display:flex;align-items:center;gap:10px}
.caja > .cuerpo{padding:12px}

/* ── Barra de herramientas ───────────────────────────────────────────────── */
.herr{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
      padding:7px 12px;background:#fafbfd;border-bottom:1px solid var(--linea)}
.herr input,.herr select{padding:4px 7px;border:1px solid var(--linea);
                          border-radius:2px;font:inherit;background:#fff}
.herr input[type=search],.herr input.ancho{min-width:280px}
.herr .der{margin-left:auto}

button.b{background:linear-gradient(#fdfefe,#eaeff5);border:1px solid var(--linea);
         border-radius:2px;padding:4px 12px;font:inherit;cursor:pointer}
button.b:hover{background:#e3ebf4}
button.b.pri{background:linear-gradient(#3f8bcc,#2b6fa8);border-color:#255d8d;color:#fff}
button.b.pri:hover{filter:brightness(1.07)}
button.b.mal{color:var(--mal)}
button.mini{background:none;border:1px solid var(--linea);border-radius:2px;
            padding:1px 6px;font-size:11px;cursor:pointer;color:var(--suave)}
button.mini:hover{background:#eef2f7;color:var(--tinta)}

/* ── Rejillas densas ─────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{background:linear-gradient(#f7f9fc,#eaeff6);text-align:left;font-weight:600;
   padding:6px 9px;border:1px solid var(--linea);white-space:nowrap;
   position:sticky;top:0;z-index:1}
/* Todas las listas se ordenan al pulsar su encabezado (usuario, 2026-09-16). */
th{cursor:pointer;user-select:none}
th.asc::after{content:' ▲';font-size:9px;color:var(--tinta-suave,#667)}
th.desc::after{content:' ▼';font-size:9px;color:var(--tinta-suave,#667)}
td{padding:4px 9px;border:1px solid #dfe6ef;vertical-align:top}
tbody tr:nth-child(even){background:var(--tabla-alt)}
tbody tr:hover{background:#eaf2fb}
tbody tr.sel{background:#d8e8f8}
.num{text-align:right;font-variant-numeric:tabular-nums}
.rejilla{max-height:60vh;overflow:auto}

/* 🔴 LA COLUMNA DEL RESULTADO NECESITA SITIO. Es la que dice lo que dijo el
   panel Y lo que dice la base, y con el ancho por reparto le tocaban ~70 px:
   una palabra por linea y una fila de doce renglones. Es justo la columna que
   se viene a leer, asi que se le da un minimo y se deja que las de al lado
   cedan. No es cosmetica: ilegible es lo mismo que no estar. */
td.resultado{min-width:230px}

/* ── Etiquetas de estado ─────────────────────────────────────────────────── */
.p{display:inline-block;padding:0 7px;border-radius:9px;font-size:11px;
   line-height:17px;border:1px solid}
.p.ok{background:#e7f6ec;border-color:#aedcbc;color:var(--ok)}
.p.no{background:#fdecea;border-color:#f3b9b3;color:var(--mal)}
.p.av{background:#fdf5e3;border-color:#ecd9a5;color:var(--avisa)}
.p.gr{background:#eef1f5;border-color:var(--linea);color:var(--suave)}

/* ── Fichas de arriba ────────────────────────────────────────────────────── */
.fichas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.f{background:var(--papel);border:1px solid var(--linea);border-radius:3px;
   padding:9px 16px;min-width:132px}
.f b{display:block;font-size:21px;font-weight:600;line-height:1.2}
.f small{color:var(--suave);font-size:11.5px}
.f.alerta b{color:var(--mal)}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
label{display:block;font-size:12px;color:var(--suave)}
label input,label select{width:100%;padding:4px 7px;border:1px solid var(--linea);
                          border-radius:2px;font:inherit;margin-top:3px;background:#fff}
.aviso{border:1px solid var(--linea);border-left:4px solid var(--avisa);
       background:#fffaf0;padding:9px 12px;border-radius:2px;margin-bottom:10px}
.aviso.mal{border-left-color:var(--mal);background:#fef6f5}
.aviso.ok{border-left-color:var(--ok);background:#f4fbf6}
.vacio{color:var(--suave);padding:26px;text-align:center}
.msg{margin-left:10px;color:var(--suave);font-size:12px}

/* Una fila que acaba de llegar por el canal en vivo: se destaca un momento y
   se apaga sola. Sin el destello, un pase nuevo en una tabla llena pasa
   desapercibido — que es justo lo que se venia a mirar. */
#mon_filas tr.nuevo { animation: llegada 2.5s ease-out; }
@keyframes llegada {
  0%   { background: #fff3cd; }
  100% { background: transparent; }
}

/* La barra de pestañas de Responsables y personal: Buscar · Alta · Editar.
   Una sola seccion con un menu horizontal, en vez de tres cajas sueltas. */
.barra {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--linea);
  background: var(--acento2);
}
.barra .der { margin-left: auto; }
.b.mini { padding: 2px 7px; font-size: 11px; }