/* ============================================================
   DRONADMIN · Hoja de estilos del panel de gestión
   ------------------------------------------------------------
   Identidad de marca (sidebar/topbar navy+azul, CTA verde)
   aprobada en el mockup — inspirada en dronedeck.io + W3.CSS.
   El chrome de marca (sidebar) es fijo, no reacciona al tema del
   sistema (igual que cualquier SaaS real): colores literales.
   ============================================================ */

:root{
  --navy:#0B1836;
  --navy-2:#101F45;
  --navy-3:#152A5C;
  --brand:#2F7FE0;
  --paper:#F2F4F8;
  --surface:#FFFFFF;
  --border:#E2E7EF;
  --ink:#131C27;
  --ink-muted:#5B6B79;
  --ink-soft:#43536A;

  --ok:#1FA35C;
  --ok-soft:#E4F5EA;
  --ok-ink:#188248;
  --warn:#E0A526;
  --warn-soft:#FCF1DB;
  --warn-ink:#946318;
  --danger:#D24545;
  --danger-soft:#FBE6E6;
  --danger-ink:#A83232;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size:15px;
  line-height:1.5;
}

.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1,h2,h3{ font-family:"Outfit", sans-serif; margin:0; }
a{ color:var(--brand); }

/* ---------- shell: sidebar + main ---------- */
/* Sidebar angosto (solo íconos) por defecto; se expande/colapsa SOLO por
   click de `#btn-colapsar-sidebar` (pedido de Leo 2026-08-27, patrón de
   Gemini — antes se expandía solo al pasar el mouse, `:has(.sb:hover)`,
   sin botón ni estado persistido para el ancho completo). El estado lo
   pone `js/layout.js` (`inicializarColapsoSidebar()`) como clase
   `.expandido` en `.shell`, guardado en localStorage. */
.shell{
  display:grid; grid-template-columns: 72px minmax(0,1fr); min-height:100vh;
  transition: grid-template-columns .15s ease;
}
.shell.expandido{ grid-template-columns: 240px minmax(0,1fr); }
@media (max-width: 900px){ .shell, .shell.expandido{ grid-template-columns: 1fr; } }

.sb{
  background:var(--navy); color:#C7D4EC; position:sticky; top:0; height:100vh;
  padding:1.6rem 1.1rem; display:flex; flex-direction:column; gap:1.8rem;
  overflow:hidden;
}
.sb-top{ display:flex; justify-content:flex-end; margin:-.6rem -.2rem -1.2rem 0; }
.btn-colapsar{
  width:1.6rem; height:1.6rem; border-radius:50%; flex:none;
  background:var(--navy-2); border:1px solid #24365F; color:#C7D4EC;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.btn-colapsar:hover{ background:var(--navy-3); color:#fff; }
.btn-colapsar i{ font-size:.75rem; transition:transform .18s ease; }
.shell.expandido .btn-colapsar i{ transform:rotate(180deg); }
.marca{ display:flex; align-items:center; gap:.6em; }
.marca .glifo{
  width:38px; height:38px; flex:none; object-fit:contain; display:block;
}
.marca .nombre{ font-family:"Outfit", sans-serif; font-weight:800; font-size:1.1rem; color:#fff; white-space:nowrap; }
.marca .sub{ display:block; font-family:"Manrope",sans-serif; font-weight:500; font-size:.68rem; color:#7C90BB; margin-top:.1em; white-space:nowrap; }

/* `nav` es el único hijo que scrollea internamente (`flex:1 1 auto` +
   `min-height:0`, si no el flex-item no se achica por debajo de su
   contenido) — así, si hay muchos grupos expandidos a la vez y el nav no
   entra en 100vh, lo que se corta es el scroll del nav, nunca el pie
   (`.sb-pie`, avatar+ajuste) que queda siempre visible. Bug real que
   encontró Leo (2026-08-27): con `overflow:hidden` parejo en `.sb`, el pie
   quedaba directamente tapado/inaccesible cuando el nav no entraba. */
.sb nav{ display:flex; flex-direction:column; gap:.15rem; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.sb nav::-webkit-scrollbar{ display:none; }
/* `flex-shrink:0` en los 2 hijos de nav: sin esto, cuando el contenido no
   entra en el alto disponible, flexbox los ACHICA (los squishea) en vez de
   dejar que `nav` haga scroll — un grupo expandido podía quedar con 1 solo
   ítem visible aunque los otros 4 siguieran en el DOM sin colapsar. Bug
   real que encontró Leo (2026-08-27, "no veo más Tareas programadas"). */
.sb .grupo-titulo{
  font-family:"JetBrains Mono", monospace; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:#4C5F82; padding:.4em .8em; margin:.5rem 0 .1em; white-space:nowrap;
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:.5em;
  flex-shrink:0;
}
.sb .grupo-titulo:first-child{ margin-top:0; }
.sb .grupo-titulo:hover{ color:#9FB0CE; }
.sb .grupo-titulo i{ font-size:.85rem; transition:transform .18s ease; flex:none; }
.sb .grupo-titulo.colapsado i{ transform:rotate(-90deg); }
.sb .grupo-items{
  display:flex; flex-direction:column; gap:.15rem; overflow:hidden;
  max-height:400px; transition:max-height .22s ease; flex-shrink:0;
}
.sb .grupo-items.colapsado{ max-height:0; }
.sb nav a{
  display:flex; align-items:center; gap:.7em; text-decoration:none; color:#9FB0CE;
  font-size:.88rem; font-weight:600; padding:.62em .8em; border-radius:8px; white-space:nowrap;
}
.sb nav a .n{
  width:22px; height:22px; border-radius:6px; background:var(--navy-2);
  display:flex; align-items:center; justify-content:center; font-size:.82rem; flex:none;
}
.sb nav a.activo{ background:var(--navy-3); color:#fff; }
.sb nav a.activo .n{ background:var(--brand); }
.sb nav a:not(.activo):hover{ background:var(--navy-2); color:#E3EAF6; }
.sb nav a.deshabilitado{ opacity:.4; pointer-events:none; }

.sb .tenant{ margin-top:auto; white-space:nowrap; }
.sb .tenant .lbl{ color:#5E76A8; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4em; display:block; }
.sb .tenant select, .sb .tenant .tenant-fijo{
  width:100%; background:var(--navy-2); color:#fff; border:1px solid #24365F; border-radius:8px;
  padding:.6em .7em; font:inherit; font-size:.78rem; font-weight:600;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap; box-sizing:border-box;
}

.sb .version{
  display:block; margin-top:1.1rem; text-align:center; text-decoration:none;
  font-family:"JetBrains Mono", monospace; font-size:.7rem; color:#5E76A8; white-space:nowrap;
}
.sb .version:hover{ color:#9FB0CE; }

/* ---------- pie del sidebar: usuario + ajuste (P55, 2026-08-27) ---------- */
/* Antes vivía en el topbar fijo (#topbar-dronadmin) — Leo pidió moverlo acá
   abajo, con un ícono de "ajuste" al lado, mismo menú (#topbar-menu) que ya
   existía. `margin-top:auto` lo empuja al fondo del `.sb` (flex column). */
.sb-pie{ margin-top:auto; display:flex; align-items:center; gap:.3em; }
.sb-usuario{
  display:flex; align-items:center; gap:.6em; flex:1; min-width:0;
  background:none; border:none; color:inherit; cursor:pointer; text-align:left;
  padding:.4em; border-radius:8px; justify-content:center;
}
.sb-usuario:hover{ background:var(--navy-2); }
.sb-usuario-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff;
  font:inherit; font-weight:700; font-size:.78rem; font-family:"Outfit",sans-serif;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.sb-usuario-datos{ min-width:0; overflow:hidden; }
.sb-usuario-nombre{ display:block; font-size:.8rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-usuario-email{ display:block; font-size:.68rem; color:#7C90BB; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-ajuste{
  width:30px; height:30px; border-radius:8px; flex:none; background:none; border:none;
  color:#9FB0CE; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sb-ajuste:hover{ background:var(--navy-2); color:#fff; }

/* ---------- sidebar angosto (default): solo íconos ---------- */
/* Las etiquetas de texto solo se muestran con `.shell.expandido`
   (click de `#btn-colapsar-sidebar`, ver js/layout.js). */
.sb nav a{ justify-content:center; padding:.62em; }
.marca > div, .sb .grupo-titulo, .sb nav a .etiqueta,
.sb .tenant .lbl, .sb .tenant select, .sb .tenant .tenant-fijo,
.sb .version .etiqueta, .sb-usuario-datos, .sb-ajuste{ display:none; }
.sb .tenant::after{
  content:"👤"; display:block; text-align:center; font-size:1.1rem; opacity:.8;
}

.shell.expandido .sb nav a{ justify-content:flex-start; padding:.62em .8em; }
.shell.expandido .marca > div,
.shell.expandido .sb nav a .etiqueta,
.shell.expandido .sb .tenant select,
.shell.expandido .sb .tenant .tenant-fijo,
.shell.expandido .sb .version .etiqueta{ display:revert; }
/* `display:revert` acá rompía estas dos: un <button>/<span> vuelve al
   default del user-agent (inline-block/inline), no a lo que declara
   `.grupo-titulo`/`.tenant .lbl` más arriba (flex/block) — el título de
   cada grupo del sidebar quedaba centrado en vez de pegado a la
   izquierda, con el ícono de expandir/colapsar mezclado en el medio.
   Mismo motivo para `.sb-ajuste` (flex) y `.sb-usuario-datos` (block, no
   quiere ser inline) — se listan aparte con `display` explícito. */
.shell.expandido .sb .grupo-titulo{ display:flex; }
.shell.expandido .sb .tenant .lbl{ display:block; }
.shell.expandido .sb .tenant::after{ display:none; }
.shell.expandido .sb-ajuste{ display:flex; }
.shell.expandido .sb-usuario-datos{ display:block; }
.shell.expandido .sb-usuario{ justify-content:flex-start; }

/* ---------- menú de usuario (nombre/email/explotador activo/"Cerrar sesión") ---------- */
/* Único punto flotante para "vos y tu contexto actual" (P55, 2026-08-27) —
   antes el explotador activo tenía su propio globito fijo aparte, arriba a
   la derecha; Leo pidió sacarlo de ahí y meterlo acá adentro, junto al
   resto. Lo abren el avatar y el ícono de ajuste del pie del sidebar. Vive
   suelto en <body>, no dentro de `.sb` (que tiene `overflow:hidden`) — por
   eso es `fixed` y `js/layout.js` calcula `left`/`bottom` contra el borde
   del sidebar en vez de anclarlo con `position:absolute` a un padre
   relativo. */
.topbar-menu{
  display:none; position:fixed; width:200px; max-width:calc(100vw - 24px); z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 28px -12px rgba(11,24,54,.25); padding:.8em .9em; box-sizing:border-box;
}
.topbar-menu.abierto{ display:block; }
.topbar-nombre{ font-weight:700; font-size:.86rem; }
.topbar-email{ font-size:.74rem; color:var(--ink-muted); margin-top:.15em; word-break:break-all; }
.topbar-tenant-bloque{ margin:.7em 0; padding-top:.7em; border-top:1px solid var(--border); }
.topbar-tenant-lbl{ color:var(--ink-muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4em; }
.topbar-tenant-select, .topbar-tenant-fijo{
  width:100%; background:var(--paper); border:1px solid var(--border); border-radius:8px;
  padding:.5em .7em; font:inherit; font-size:.8rem; font-weight:600; color:var(--ink);
  box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-cerrar-sesion{
  width:100%; margin-top:.7em; background:var(--danger-soft); color:var(--danger-ink);
  border:none; border-radius:8px; padding:.5em .7em; font:inherit; font-size:.78rem;
  font-weight:700; cursor:pointer;
}
.topbar-cerrar-sesion:hover{ filter:brightness(.95); }

/* ---------- main ---------- */
main{ padding:1.8rem 2.2rem 4rem; min-width:0; }
@media (max-width: 620px){ main{ padding:1.2rem 1rem 3rem; } }

.dash-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; flex-wrap:wrap; gap:1rem; }
.dash-top h1{ font-size:1.5rem; font-weight:700; }
.dash-top p{ color:var(--ink-muted); font-size:.88rem; margin:.2em 0 0; }
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Outfit",sans-serif; flex:none;
}

/* ---------- stat cards ---------- */
.stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:1rem; margin-bottom:1.8rem; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.3rem; }
.stat .lbl{ font-size:.78rem; color:var(--ink-muted); font-weight:600; }
.stat .num{ font-family:"Outfit", sans-serif; font-size:2rem; font-weight:700; margin-top:.15em; }
.stat .delta{ font-size:.76rem; margin-top:.3em; display:inline-flex; align-items:center; gap:.3em; padding:.15em .5em; border-radius:999px; }
.stat .delta.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.stat .delta.warn{ background:var(--warn-soft); color:var(--warn-ink); }
.stat .delta.danger{ background:var(--danger-soft); color:var(--danger-ink); }

.grid-2{ display:grid; grid-template-columns: 1.6fr 1fr; gap:1.3rem; align-items:start; }
@media (max-width: 1100px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- panels / cards ---------- */
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.3rem 1.4rem; margin-bottom:1.3rem; }
.panel h2, .panel h3{ font-size:1rem; font-weight:700; margin:0 0 1rem; }
.panel .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.panel .panel-head h2{ margin:0; }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:14px; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.87rem; }
thead th{
  text-align:left; background:#F7F9FC;
  font-family:"Manrope", sans-serif; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted);
  padding:.6em .8em; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{ padding:.65em .8em; border-bottom:1px solid #EEF1F5; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#FAFBFD; }

/* Filas de tareas_programadas.html quedaban altas/abultadas (pedido de Leo
   2026-08-27, misma regla de P60 de evitar tamaños de más): la celda de
   Frecuencia envolvía el " min" a una segunda línea abajo del input porque
   no tenían un contenedor que los mantuviera en la misma fila. */
.celda-catalogo{ max-width:280px; }
.frecuencia-campo{ display:flex; align-items:center; gap:.4em; white-space:nowrap; }
.frecuencia-campo input{ width:6.2em; }
.celda-resultado{ max-width:320px; }

.persona{ display:flex; align-items:center; gap:.6em; }
.persona .ini{
  width:28px; height:28px; border-radius:50%; background:#EAF0FB; color:#2F5FA8; font-weight:700; font-size:.75rem;
  display:flex; align-items:center; justify-content:center; font-family:"Outfit",sans-serif; flex:none;
}

/* ---------- pills / status ---------- */
.pill{ display:inline-flex; align-items:center; gap:.35em; font-size:.72rem; font-weight:700; padding:.25em .6em; border-radius:999px; text-transform:uppercase; letter-spacing:.02em; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.pill.warn{ background:var(--warn-soft); color:var(--warn-ink); }
.pill.danger{ background:var(--danger-soft); color:var(--danger-ink); }
.pill.neutro{ background:#EEF1F5; color:var(--ink-muted); }
.pill.ocasional{ background:#E4EDF9; color:var(--brand); }
.pill.profesional{ background:var(--ok-soft); color:var(--ok-ink); }

/* ---------- alertas ---------- */
.alertas{ display:flex; flex-direction:column; }
.alerta{ display:flex; gap:.8em; padding:.75em 0; border-bottom:1px solid #EEF1F5; }
.alerta:last-child{ border-bottom:none; }
.alerta .marca-color{ width:4px; border-radius:2px; flex:none; }
.alerta .marca-color.warn{ background:var(--warn); }
.alerta .marca-color.danger{ background:var(--danger); }
.alerta .txt strong{ display:block; font-size:.86rem; }
.alerta .txt span{ font-size:.78rem; color:var(--ink-muted); }

/* ---------- form ---------- */
/* Regla fija de Leo (2026-08-27, revisando pilotos.html): evitar barras de
   desplazamiento, campos de formulario no sobredimensionados — vale para
   TODAS las pantallas de fase3 Diseño/, no solo esta (ver CLAUDE.md). Antes
   `minmax(200px, 1fr)` dejaba que cada campo se estirara para llenar TODO
   el ancho disponible — con pocos campos por fila y una pantalla ancha
   (sidebar colapsado), un DNI de 8 dígitos o un combo Sí/No terminaban
   ocupando 350-450px. Tope de 260px por columna: sigue siendo responsive
   (auto-fit agrega/saca columnas según el ancho), pero ningún campo se
   estira más de lo razonable — el espacio sobrante de la fila queda vacío
   en vez de inflar los campos. */
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap:.9rem 1.1rem; }
.campo{ display:flex; flex-direction:column; gap:.35em; }
.campo.ancho{ grid-column: 1 / -1; }
/* Grupo de campos que solo aparece si el combo del que depende dice "Sí"
   (mismo patrón que la app, `if (uiState.hasPilotLicense)` en Compose —
   pedido de Leo 2026-08-27, "en la app recién despliega las cajitas para
   cargar cuando corresponde"). `display:contents` en el estado visible
   hace que el wrapper "desaparezca" para el grid — sus `.campo` hijos
   siguen siendo ítems directos de `.form-grid`, no se rompe el layout. */
.grupo-condicional{ display:contents; }
.grupo-condicional.oculto{ display:none; }
label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }
input, select, textarea{
  font:inherit; font-size:.9rem; padding:.6em .75em; border:1.5px solid #D7DEE8;
  border-radius:8px; background:var(--paper); color:var(--ink); max-width:100%;
  box-sizing:border-box;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,127,224,.15); }
textarea{ resize:vertical; min-height:4.5em; }

.foto-avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
  background:#EAF0FB; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:#2F5FA8; font-weight:700; font-size:1.1rem; font-family:"Outfit",sans-serif;
}
.foto-avatar-vacio{ display:flex; }
.persona .foto-avatar{ width:28px; height:28px; font-size:.75rem; border:none; }

.ver-documento{ font-size:.78rem; margin-top:.35em; }
.ver-documento a{ font-weight:600; }
.ver-documento .aviso-mini{ color:var(--ink-muted); }
.check-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:.3em .8em; max-height:220px; overflow-y:auto; padding:.6em .2em; }
.check-grid label{ display:flex; align-items:center; gap:.5em; font-weight:400; font-size:.85rem; }

.acciones{ display:flex; gap:.6rem; margin-top:1.2rem; }

button{ font:inherit; font-weight:700; font-size:.88rem; border:none; border-radius:8px; padding:.65em 1.15em; cursor:pointer; }
button.primario{ background:var(--ok); color:#fff; box-shadow:0 8px 18px -10px rgba(31,163,92,.55); }
button.primario:hover{ background:#1B9152; }
button.secundario{ background:#EEF1F5; color:var(--ink); }
button.secundario:hover{ background:var(--border); }
button.peligro{ background:var(--danger-soft); color:var(--danger-ink); }
button:disabled{ opacity:.5; cursor:not-allowed; }
.btn-mini{ border:1px solid #D7DEE8; background:#fff; border-radius:7px; padding:.4em .8em; font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer; }

/* ---------- popup "Programar ejecución" (P57(2), 2026-08-27) ---------- */
.proxima-ejecucion-celda{ display:flex; align-items:center; gap:.5em; flex-wrap:wrap; }
.modal-fondo{
  display:none; position:fixed; inset:0; background:rgba(11,24,54,.45);
  z-index:100; align-items:center; justify-content:center; padding:1rem;
}
.modal-fondo.abierto{ display:flex; }
.modal{
  background:var(--surface); border-radius:14px; padding:1.4rem 1.6rem;
  max-width:420px; width:100%; box-shadow:0 24px 48px -20px rgba(11,24,54,.35);
}
.modal h3{ font-size:1.05rem; margin:0 0 .3rem; }
.modal .modal-sub{ font-size:.82rem; color:var(--ink-muted); margin:0 0 1.1rem; }
.campo-toggle{
  display:flex; align-items:center; gap:.6em; font-size:.85rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer; margin-bottom:1rem;
}
.campo-toggle input{ width:auto; }
.dias-semana-grid{ display:flex; gap:.4em; flex-wrap:wrap; }
.dia-chip{
  border:1.5px solid #D7DEE8; background:var(--paper); color:var(--ink-soft);
  border-radius:8px; padding:.5em .7em; font:inherit; font-size:.8rem; font-weight:600;
  cursor:pointer; min-width:2.6em;
}
.dia-chip:hover{ border-color:var(--brand); }
.dia-chip.activo{ background:var(--brand); border-color:var(--brand); color:#fff; }
.modal-aviso-runner{ font-size:.76rem; color:var(--ink-muted); margin:.8em 0 0; }
.modal .grupo-condicional{ display:block; margin-top:1rem; }
.modal .grupo-condicional.oculto{ display:none; }
.modal .grupo-condicional .campo{ margin-bottom:1rem; }

/* Botones de fila de tabla: solo ícono (Tabler), como Flor de Cake — el
   ícono se agrega vía las clases ti/ti-<nombre> directo en el <button>
   (sin <i> anidado, así el click delegado en el tbody sigue leyendo
   ev.target.dataset sin romperse). El texto va en `title` (tooltip). */
.accion-fila{ display:flex; gap:.2rem; }
.accion-fila button{
  width:30px; height:30px; padding:0; font-size:1rem; border-radius:8px;
  background:transparent; color:var(--ink-soft); display:inline-flex;
  align-items:center; justify-content:center; box-shadow:none;
}
.accion-fila button.secundario:hover{ background:#EEF1F5; color:var(--brand); }
.accion-fila button.peligro{ background:transparent; color:var(--ink-soft); }
.accion-fila button.peligro:hover{ background:var(--danger-soft); color:var(--danger-ink); }

/* Fila expandible (columna "Detalle" con chevron) — mismo patrón visual
   que Lorbella/ProyectoPastas: fila oculta con más campos, colapsada por
   defecto, sin pedir nada nuevo al servidor (los datos ya están en cache). */
.btn-chevron{ transition:transform .18s ease; }
.btn-chevron.abierta{ transform:rotate(180deg); }
tr.fila-detalle td{ background:var(--paper); padding:1rem 1.4rem; border-bottom:1px solid #EEF1F5; }
.detalle-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:.9rem 1.4rem; }
.detalle-grid .campo label{ text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; color:var(--ink-muted); }
.detalle-grid .campo .valor{ font-size:.87rem; color:var(--ink); }

/* ---------- feedback ---------- */
.aviso{ padding:.7em 1em; border-radius:8px; font-size:.85rem; margin-bottom:1rem; display:none; }
.aviso.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.aviso.error{ background:var(--danger-soft); color:var(--danger-ink); }
.aviso.visible{ display:block; }

.vacio{ color:var(--ink-muted); font-size:.88rem; padding:1.2rem; text-align:center; }

/* ---------- login (y las páginas públicas sin sidebar que calcan su tarjeta:
   registro, recuperar/confirmar contraseña) ---------- */
body[data-pagina="login"],
body[data-pagina="registro"],
body[data-pagina="recuperar-password"],
body[data-pagina="confirmar-password"]{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, var(--navy-3), var(--navy) 65%);
  padding:1.5rem;
}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border-radius:16px;
  padding:2.2rem 2rem; box-shadow:0 30px 60px -25px rgba(6,12,28,.55);
}
.login-marca{ display:flex; flex-direction:column; align-items:center; gap:.6em; margin-bottom:1.6rem; text-align:center; }
.login-marca img{ width:52px; height:52px; object-fit:contain; }
.login-marca .nombre{ font-family:"Outfit", sans-serif; font-weight:800; font-size:1.25rem; color:var(--navy); }
.login-marca .sub{ font-size:.82rem; color:var(--ink-muted); }
.login-card .campo{ margin-bottom:1rem; }
.login-card button.primario{ width:100%; padding:.75em; font-size:.92rem; }
.login-separador{
  display:flex; align-items:center; gap:.8em; margin:1.3rem 0; color:var(--ink-muted); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.login-separador::before, .login-separador::after{ content:""; flex:1; height:1px; background:var(--border); }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:.6em; width:100%;
  background:#fff; border:1.5px solid var(--border); border-radius:8px; padding:.65em 1em;
  font:inherit; font-weight:700; font-size:.88rem; color:var(--ink); text-decoration:none; cursor:pointer;
}
.btn-google:hover{ background:var(--paper); }
.btn-google svg{ width:18px; height:18px; flex:none; }