/* =====================================================================================================
   GestionProyectos · hoja de estilos (17/10/2026, K24)

   Mundo visual: «horario de estación». Cada proyecto es una salida: hora prevista, hora estimada y retraso
   en una línea de un tablón que nunca cambia de sitio. Papel de cartel como fondo, tablón blanco con reglas
   finas, cabecera de tablón en negro carbón, una sola banda amarilla para la barra de filtros y la fila
   elegida, rojo solo para retraso y error, verde solo para «en hora».

   Medidas en rem: la raíz cambia con el ancho de la ventana (abajo) y todo escala con ella, sin zoom.
   Alturas de fila de tabla y de Gantt en px, iguales entre sí (36 px), porque el SVG se mide en px.
   ===================================================================================================== */

:root {
  --paper: #f6f3ea;         /* fondo de página: cartel */
  --board: #fffdf8;         /* tablón: filas */
  --board-2: #f8f4ea;       /* fila alterna, totales, barras de herramientas */
  --ink: #15171b;           /* carbón */
  --ink-2: #4b4f58;
  --ink-3: #625d52;         /* gris cálido: 5,6:1 sobre el papel */
  --ink-on-dark: #ece8dc;
  --line: #d9d3c4;          /* regla fina */
  --line-2: #ece7da;
  --yellow: #ffcc00;        /* banda de salidas */
  --yellow-pale: #fff4bf;   /* fila elegida */
  --yellow-ink: #15171b;
  --red: #d8232a;  --red-bg: #fbe4e3;
  --green: #2f7d4f; --green-bg: #e2f1e6;
  --amber: #b9770e; --amber-bg: #fdf0d5;
  --grey: #5f5a50;  --grey-bg: #e8e5dc;
  --accent: var(--ink);
  --accent-weak: var(--yellow-pale);
  --bar: #cfc9b8;  --bar-done: #15171b; --bar-late: #efb8b4; --bar-late-done: #d8232a; --muted-bar: #e6e2d8;
  --base: #a9a394; --summary: #15171b; --today: #d8232a;
  --side: 15rem;
  --top: 3.5rem;
  --radius: 3px;
  --row: 36px;
  --ghead: 48px;
  --sans: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Segoe UI Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* La raíz sigue a la ventana: FullHD al 100 % → 16; FullHD al 150 % y tableta (≤1400 px CSS) → 14; 4K → 17–18. */
html { font-size: 15px; }
@media (min-width: 1900px) { html { font-size: 16px; } }
@media (min-width: 2500px) { html { font-size: 17px; } }
@media (min-width: 3400px) { html { font-size: 18px; } }
@media (max-width: 1400px) { html { font-size: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin-bottom: .6rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
b, strong { font-weight: 600; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #b9b3a3 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #b9b3a3; border: 3px solid var(--board); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #8e887a; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }

.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .85em; }
.code { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); letter-spacing: .02em; }
.spacer { flex: 1; }
.nowrap, td.nowrap { white-space: nowrap; }
.mt { margin-top: .7rem; }
.req { color: var(--red); }

/* ───────────────────────────── Iconos dibujados (máscaras SVG, un solo trazo) ───────────────────────────── */
[class^="i-"], [class*=" i-"] { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -.15em; flex: none; -webkit-mask: var(--i) no-repeat center / contain; mask: var(--i) no-repeat center / contain; }
.i-del { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l1 2h5v2H3V4h5l1-2zM5 8h14l-1.2 14H6.2L5 8zm4 3v8h2v-8H9zm4 0v8h2v-8h-2z'/%3E%3C/svg%3E"); }
.i-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.2V21h3.8L17.8 10 14 6.2 3 17.2zm17.7-10.1a1 1 0 0 0 0-1.4l-2.4-2.4a1 1 0 0 0-1.4 0L15 5.2 18.8 9l1.9-1.9z'/%3E%3C/svg%3E"); }
.i-add { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E"); }
.i-excel { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4 3.6 3.6V3h2zM4 19h16v2H4z'/%3E%3C/svg%3E"); }
.i-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 0 1 6.3 4H16v2h6V5h-2v2.4A9 9 0 0 0 3 12h2a7 7 0 0 1 7-7zm7 7a7 7 0 0 1-13.3 3H8v-2H2v6h2v-2.4A9 9 0 0 0 21 12h-2z'/%3E%3C/svg%3E"); }
.i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm3 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); }
.i-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2l8 8-2 2-1-1-4 4v4l-2 2-4-4-5 5-2-2 5-5-4-4 2-2h4l4-4-1-1 2-2z'/%3E%3C/svg%3E"); }
.i-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 3h2v5.6l3.5 2-1 1.7L11 13.2V7z'/%3E%3C/svg%3E"); }
.i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l5.6 5.6-1.4 1.4-5.6-5.6A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); }
.i-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l2.8-2.8a1 1 0 1 1 1.4 1.4L12 13.4a1 1 0 0 1-1.4 0zM7.8 16.2a3 3 0 0 1 0-4.2l2.1-2.1-1.4-1.4-2.1 2.1a5 5 0 0 0 7.1 7.1l2.1-2.1-1.4-1.4-2.1 2.1a3 3 0 0 1-4.3 0zm8.4-8.4a3 3 0 0 1 0 4.2l-2.1 2.1 1.4 1.4 2.1-2.1a5 5 0 0 0-7.1-7.1L8.4 8.4l1.4 1.4 2.1-2.1a3 3 0 0 1 4.3.1z'/%3E%3C/svg%3E"); }
.i-unlink { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 16.2a3 3 0 0 1 0-4.2l2.1-2.1-1.4-1.4-2.1 2.1a5 5 0 0 0 7.1 7.1l2.1-2.1-1.4-1.4-2.1 2.1a3 3 0 0 1-4.3 0zm8.4-8.4a3 3 0 0 1 0 4.2l-2.1 2.1 1.4 1.4 2.1-2.1a5 5 0 0 0-7.1-7.1L8.4 8.4l1.4 1.4 2.1-2.1a3 3 0 0 1 4.3.1zM3 3l18 18-1.4 1.4L1.6 4.4z'/%3E%3C/svg%3E"); }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h12v14h-2V4H8V2zM4 6h12v16H4V6zm2 2v12h8V8H6z'/%3E%3C/svg%3E"); }
.i-history { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3a9 9 0 1 1-8.5 12H6.6A7 7 0 1 0 13 5a7 7 0 0 0-5 2.1V5H6v5h5V8H9.4A5 5 0 0 1 13 7zm-1 4h2v4.6l3 1.8-1 1.7-4-2.4V7z'/%3E%3C/svg%3E"); }
.i-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-8a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 10c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6zm-7 6c.3-2 3.3-4 7-4s6.7 2 7 4H5z'/%3E%3C/svg%3E"); }
.i-exit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h8v18h-8v-2h6V5h-6V3zm-1 5l-1.4 1.4L10.2 11H2v2h8.2l-2.6 2.6L9 17l5-5-5-5z'/%3E%3C/svg%3E"); }
.i-milestone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10 10-10 10L2 12z'/%3E%3C/svg%3E"); }
.i-template { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h4v-8H5zm6 0v8h8v-8h-8z'/%3E%3C/svg%3E"); }
.i-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h8l2 2h10v14H2V4zm2 2v12h16V8h-8.8l-2-2H4z'/%3E%3C/svg%3E"); }
.i-cartera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v3H3V4zm0 5h18v3H3V9zm0 5h18v3H3v-3zm0 5h12v2H3v-2z'/%3E%3C/svg%3E"); }
.i-gantt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h9v3H3V5zm4 5h11v3H7v-3zm-2 5h8v3H5v-3zm9 0h5v3h-5v-3z'/%3E%3C/svg%3E"); }
.i-family { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8zM5 5v4h4V5H5zm10 0v4h4V5h-4zM5 15v4h4v-4H5zm10 0v4h4v-4h-4z'/%3E%3C/svg%3E"); }
.i-config { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-1.5-8h3l.5 2.6a7.5 7.5 0 0 1 2 1.1l2.5-.9 1.5 2.6-2 1.7a7.6 7.6 0 0 1 0 2.3l2 1.7-1.5 2.6-2.5-.9a7.5 7.5 0 0 1-2 1.1L13.5 22h-3l-.5-2.6a7.5 7.5 0 0 1-2-1.1l-2.5.9L4 16.6l2-1.7a7.6 7.6 0 0 1 0-2.3L4 10.9l1.5-2.6 2.5.9a7.5 7.5 0 0 1 2-1.1L10.5 2z'/%3E%3C/svg%3E"); }
.i-ok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2L5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E"); }
.i-warn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 4l7.5 13h-15L12 6zm-1 5v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E"); }
.i-bad { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.7 4.3L4.3 5.7 10.6 12l-6.3 6.3 1.4 1.4 6.3-6.3 6.3 6.3 1.4-1.4-6.3-6.3 6.3-6.3-1.4-1.4-6.3 6.3z'/%3E%3C/svg%3E"); }
.i-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20V7.8l-4.6 4.6L5 11l7-7 7 7-1.4 1.4L13 7.8V20z'/%3E%3C/svg%3E"); }
.i-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 4v12.2l4.6-4.6L19 13l-7 7-7-7 1.4-1.4 4.6 4.6V4z'/%3E%3C/svg%3E"); }
.i-indent { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2H3zm8 5h10v2H11zm0 4h10v2H11zM3 18h18v2H3zm0-9.5l4 3.5-4 3.5z'/%3E%3C/svg%3E"); }
.i-outdent { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2H3zm8 5h10v2H11zm0 4h10v2H11zM3 18h18v2H3zm4-9.5V15l-4-3.5z'/%3E%3C/svg%3E"); }
.i-chev { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }

/* ───────────────────────────── Armazón: toda la pantalla, sin desplazamiento de página ───────────────────────────── */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.side {
  background: var(--ink); color: #c9c6bb; display: flex; flex-direction: column; gap: 2px; padding: 1rem .6rem;
  overflow: hidden auto; min-height: 0;
}
.brand { color: var(--yellow); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; padding: .2rem .7rem 1.1rem; white-space: nowrap; }
.brand small { display: block; color: #8d8a7e; font-weight: 400; font-size: .72rem; }
.side a { color: #c9c6bb; padding: .55rem .7rem; border-radius: var(--radius); display: flex; gap: .65rem; align-items: center; text-decoration: none; position: relative; transition: background .16s var(--ease), color .16s var(--ease); white-space: nowrap; }
.side a:hover { background: #24262c; color: #fff; }
.side a.on { background: var(--yellow); color: var(--ink); border-radius: 0; margin: 0 -.6rem; padding-left: 1.3rem; padding-right: 1.3rem; font-weight: 600; }
.side a.on .ico { opacity: 1; }
.side .ico { width: 1.1rem; height: 1.1rem; font-size: 1.05rem; opacity: .9; }
.side .sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #8d8a7e; padding: 1.1rem .7rem .4rem; }
.side .rec a { font-size: .85rem; padding: .4rem .7rem; }
.side .rec a.on { padding-left: 1.3rem; }
.side .rec a.on code { color: #5a4a00; }
.side .rec code { font-family: var(--mono); color: #8d8a7e; font-size: .7rem; min-width: 2.8rem; }
.side .grow-1 { flex: 1; }
.side .foot { font-size: .72rem; color: #8d8a7e; padding: .6rem .7rem 0; border-top: 1px solid #2a2c33; }

.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.top {
  height: var(--top); flex: none; background: var(--board); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; z-index: 5;
}
.crumbs { color: var(--ink-3); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { margin: 0 .45rem; color: var(--line); }
.top form.search-form { margin: 0; position: relative; }
.top .search-in {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .7rem .4rem 2.1rem; width: clamp(11rem, 22vw, 20rem);
  background: var(--paper); font: inherit; color: var(--ink); height: 2.2rem; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.top .search-in::placeholder { color: var(--ink-3); }
.top .search-in:focus { outline: none; border-color: var(--ink); background: var(--board); }
.top form.search-form::before { content: ""; position: absolute; left: .7rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); background: var(--ink-3); -webkit-mask: var(--i) no-repeat center / contain; mask: var(--i) no-repeat center / contain; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l5.6 5.6-1.4 1.4-5.6-5.6A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); pointer-events: none; }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .2rem .6rem .2rem .2rem; border-radius: 2rem; border: 1px solid transparent; font-size: .9rem; color: var(--ink-2); }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { border-color: var(--line); color: var(--ink); }
.user-menu .pop { position: absolute; right: 0; top: calc(100% + .4rem); display: block; background: var(--board); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(21,23,27,.18); z-index: 40; width: 20rem; padding: .4rem; }
.user-menu .ph { padding: .5rem .6rem .7rem; border-bottom: 1px solid var(--line); display: flex; gap: .7rem; align-items: center; }
.user-menu .kv { display: grid; grid-template-columns: 4.5rem 1fr; gap: .2rem .5rem; font-size: .85rem; padding: .55rem .6rem; }
.user-menu .kv span:nth-child(odd) { color: var(--ink-3); }
.user-menu .pi { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: var(--radius); color: var(--ink); width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; text-decoration: none; }
.user-menu .pi:hover { background: var(--paper); }
.user-menu .pi.danger { color: var(--red); }
.user-menu .pd { height: 1px; background: var(--line); margin: .25rem 0; }
.avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--yellow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; flex: none; letter-spacing: .02em; }
.avatar.lg { width: 2.6rem; height: 2.6rem; font-size: .95rem; }

.content { flex: 1; min-height: 0; overflow: auto; padding: 1.1rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0; }
.content > * { flex: none; }
/* Cadena de relleno: lo que lleve .fill crece hasta el borde inferior y desplaza por dentro. */
.content > .fill, .fill-col > .fill { flex: 1 1 auto; min-height: 0; }
.fill-col { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fill-col > * { flex: none; }
.panel.fill { display: flex; flex-direction: column; }
.panel.fill > .grid { flex: 1 1 auto; min-height: 0; }
.panel.fill > :not(.grid) { flex: none; }

/* ───────────────────────────── Controles ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 0; background: #e8e3d4; color: var(--ink);
  padding: .45rem .8rem; border-radius: var(--radius); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap; line-height: 1.2;
  text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: #dcd6c4; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--ink); color: var(--ink-on-dark); }
.btn.pri:hover { background: #2a2c33; color: #fff; }
.btn.sm { padding: .28rem .55rem; font-size: .82rem; }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: #e8e3d4; color: var(--ink); }
.btn.danger { background: var(--red-bg); color: var(--red); }
.btn.danger:hover { background: #f6d3d0; }
.btn.danger.fill { background: var(--red); color: #fff; }
.btn.danger.fill:hover { background: #b81d23; }
.btn[disabled], .btn.dis { opacity: .4; cursor: not-allowed; transform: none; }
.btn .i-del, .btn .i-edit, .btn .i-excel, .btn .i-refresh, .btn .i-add, .btn [class^="i-"] { width: .95em; height: .95em; }
.ib { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--ink-2); font-size: .95rem; padding: 0; text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease); }
.ib:hover { background: #e8e3d4; color: var(--ink); }
.ib.del { color: #a8433c; }
.ib.del:hover { background: var(--red-bg); color: var(--red); }
.ib[disabled], .ib.dis { opacity: .35; cursor: not-allowed; }
.ib [class^="i-"] { width: 1rem; height: 1rem; }
.tool { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.tool h1, .formbar h1 { margin: 0; }
.tool .sep, .ptool .sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .3rem; }

input.in, select.in, textarea.in, .input {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .6rem; background: var(--board); min-height: 2.2rem;
  font: inherit; font-size: .95rem; color: var(--ink); width: 100%; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input.in:hover, select.in:hover, textarea.in:hover { border-color: #bdb6a4; }
input.in:focus, select.in:focus, textarea.in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-pale); }
input.in.err, select.in.err, .input.err { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
input.in.sm, select.in.sm { min-height: 1.8rem; padding: .15rem .45rem; font-size: .85rem; }
input.in.num { text-align: right; }
input.in[disabled], select.in[disabled], textarea.in[disabled] { background: var(--paper); color: var(--ink-3); }
textarea.in { min-height: 4.5rem; resize: vertical; }
select.in { appearance: none; -webkit-appearance: none; padding-right: 2.1rem; min-width: max-content; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234b4f58'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .45rem center; background-size: 1rem; }
select.in.sm, .ttab td select.in.sm, .grid td select.in.sm { padding-right: 1.7rem; background-position: right .3rem center; background-size: .9rem; }
input[type=checkbox], input[type=radio] { width: 1rem; height: 1rem; accent-color: var(--ink); vertical-align: middle; margin: 0; cursor: pointer; }
input.cmd { font-family: var(--mono); background: var(--ink); color: var(--ink-on-dark); border-color: var(--ink); margin-top: .4rem; cursor: text; font-size: .85rem; }
input.cmd:focus { box-shadow: 0 0 0 3px var(--yellow); }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field label { font-size: .78rem; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.field > label > input[type=checkbox] { margin-right: .3rem; }
.field.grow { flex: 1; }
.input { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.input.def { color: var(--ink-3); background: var(--paper); }
.input.edit { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-pale); }
.tagdef { font-size: .72rem; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 2rem; padding: 0 .45rem; margin-left: auto; white-space: nowrap; }
.chip { background: var(--grey-bg); color: var(--ink-2); border-radius: 2px; padding: .1rem .5rem; font-size: .8rem; white-space: nowrap; display: inline-block; }
.chip.on { background: var(--yellow); color: var(--ink); }
.chip.btnchip { cursor: pointer; }
.chip.btnchip:hover { background: #dcd6c4; color: var(--ink); }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.filter { border: 0; background: #e8e3d4; border-radius: 2rem; padding: .3rem .8rem; color: var(--ink-2); font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease); user-select: none; }
.filter:hover { background: #dcd6c4; color: var(--ink); }
.filter.on { background: var(--ink); color: var(--ink-on-dark); }
.filter input { accent-color: var(--yellow); }
.radios { display: flex; flex-direction: column; gap: .4rem; }
.radios label { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; cursor: pointer; font-weight: 400; color: var(--ink); font-size: .95rem; background: var(--board); }
.radios label.on { border-color: var(--ink); background: var(--yellow-pale); }
.radios small { display: block; color: var(--ink-3); }
.radios.inline { flex-direction: row; gap: .5rem; }
.opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .4rem; cursor: pointer; background: var(--board); }
.opt.on { border-color: var(--ink); background: var(--yellow-pale); }
.opt input { margin-top: .2rem; }
.opt small { display: block; color: var(--ink-3); }
.sw { display: inline-block; width: 1.9rem; height: 1.1rem; border-radius: 1rem; background: var(--green); position: relative; vertical-align: middle; cursor: pointer; border: 0; padding: 0; transition: background .16s var(--ease); }
.sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: calc(1.1rem - 4px); height: calc(1.1rem - 4px); border-radius: 50%; background: #fff; transition: transform .16s var(--ease); }
.sw.off { background: #b9b3a3; }
.sw.off::after { transform: translateX(calc(-1.9rem + 1.1rem)); }
.sw-in { display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; }
.lock { color: var(--ink-3); font-size: .72rem; }
.drag { color: #b9b3a3; width: .9rem; }
ul.tight { margin: .25rem 0 0; padding-left: 1.2rem; }

/* ───────────────────────────── Banda amarilla: filtros y barras de herramientas ───────────────────────────── */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; background: var(--yellow); color: var(--yellow-ink); padding: .55rem .8rem; border-radius: var(--radius); }
.filters .in { border-color: transparent; background: rgba(255,255,255,.75); min-height: 1.9rem; }
.filters .in:hover { border-color: rgba(21,23,27,.3); }
.filters .in:focus { border-color: var(--ink); box-shadow: none; background: #fff; }
.filters .filter { background: rgba(255,255,255,.6); color: var(--ink); }
.filters .filter:hover { background: rgba(255,255,255,.9); }
.filters .filter.on { background: var(--ink); color: var(--ink-on-dark); }
.filters .muted { color: #4a4320; }
.filters a { color: var(--ink); }
.ptool { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--board-2); border-radius: 4px 4px 0 0; }
.ptool h3 { margin: 0 .5rem 0 0; font-size: .95rem; }
.ptool .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-right: .15rem; }
.ptool .grp { display: inline-flex; gap: .3rem; align-items: center; }
.selbar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .45rem .8rem; background: var(--yellow); border-bottom: 1px solid #e6b800; color: var(--ink); font-weight: 600; }
.selbar .btn { font-weight: 500; background: rgba(255,255,255,.7); }
.selbar .btn:hover { background: #fff; }
.selbar .btn.danger { background: var(--red-bg); }
.selbar .in { border-color: transparent; background: rgba(255,255,255,.75); }
.formbar { position: sticky; top: 0; z-index: 4; background: var(--paper); padding: .2rem 0 .8rem; display: flex; gap: .5rem; align-items: center; }

/* ───────────────────────────── Paneles y tablas ───────────────────────────── */
.panel { background: var(--board); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.panel > h3, .panel-h { margin: 0; padding: .7rem .9rem; font-size: .95rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; }
.panel .pad { padding: .8rem .9rem; }
.panel.empty { text-align: center; padding: 3rem 1.5rem; }
.panel.empty h2 { margin-bottom: .3rem; }
.panel.empty .btn { margin-top: .8rem; }
.empty { text-align: center; padding: 3rem 1.5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; align-items: start; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .95rem; }
th { text-align: left; font-weight: 600; color: var(--ink-on-dark); background: var(--ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: 0 .55rem; height: 2.3rem; white-space: nowrap; position: sticky; top: 0; z-index: 2; vertical-align: middle; }
th.num { text-align: right; }
th.code { font-family: var(--sans); font-size: .72rem; color: var(--ink-on-dark); letter-spacing: .08em; }
td { border-bottom: 1px solid var(--line-2); padding: .35rem .55rem; vertical-align: middle; background: var(--board); height: var(--row); line-height: 1.25; transition: background .16s var(--ease), box-shadow .16s var(--ease); }
tbody tr:nth-child(even) td { background: var(--board-2); }
tr.clk { cursor: pointer; }
tr.clk:hover td { background: #f1ecdd; }
tr.clk:hover td:first-child { box-shadow: inset 3px 0 var(--yellow); }
tr.sel td, tbody tr.sel:nth-child(even) td { background: var(--yellow-pale); }
tr.sel td:first-child { box-shadow: inset 3px 0 var(--yellow); }
tr.total td { font-weight: 600; background: var(--board-2); border-top: 1px solid var(--line); border-bottom: 0; }
tr.group td, tr.sum td.muted { background: var(--paper); font-weight: 600; color: var(--ink-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; height: 2rem; }
tr.newrow td { background: var(--board-2); color: var(--ink-3); }
tr.sum td { font-weight: 600; }
td.editing { padding: 2px 4px !important; }
.acts { white-space: nowrap; width: 1%; }
.acts .ib + .ib { margin-left: 2px; }
td.chk, th.chk { width: 2.2rem; text-align: center; padding-left: .3rem; padding-right: .3rem; }
.tree td.nm { padding-left: .5rem; }

/* Rejilla de datos: desplaza dentro del panel. Cabecera fija arriba, totales fijos abajo, identidad fija a la izquierda. */
.grid { overflow: auto; overscroll-behavior: contain; border-radius: 0 0 4px 4px; position: relative; max-height: 75vh; }
.panel.fill > .grid { max-height: none; }
.grid table { min-width: 100%; }
.grid td { white-space: nowrap; }
.grid td, .grid th { padding-left: .45rem; padding-right: .45rem; }
.grid td.chk, .grid th.chk, .grid td.acts, .grid th.acts, .grid td.code, .grid th.code, .grid td.nm, .grid th.nm { position: sticky; }
.grid th.chk, .grid th.acts, .grid th.code, .grid th.nm { z-index: 4; }
.grid td.chk, .grid td.acts, .grid td.code, .grid td.nm { z-index: 3; }
.grid .chk { left: 0; width: 2.2rem; min-width: 2.2rem; }
.grid .acts { left: 0; width: 4.6rem; min-width: 4.6rem; }
.grid .chk + .acts { left: 2.2rem; }
.grid .code { left: 6.8rem; width: 4.6rem; min-width: 4.6rem; }
.grid .nm { left: var(--nm-left, 0); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; box-shadow: inset -1px 0 var(--line); }
.grid td:not(.chk):not(.acts) { box-shadow: inset -1px 0 var(--line-2); }
.grid td.nm { box-shadow: inset -1px 0 var(--line); }
.grid td.nm:hover { max-width: none; overflow: visible; }
.grid .el { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; }
.grid tr.total td { position: sticky; bottom: 0; z-index: 3; }
.grid tr.total td.chk, .grid tr.total td.acts, .grid tr.total td.nm { z-index: 4; }
/* El recuento se queda a la vista al desplazar sin tapar los totales: es el texto el que es fijo, no la celda. */
.grid tr.total .tl { position: sticky; left: 7.3rem; display: inline-block; }
.grid tr.group td { position: sticky; left: 0; }

/* ───────────────────────────── Indicadores ───────────────────────────── */
.sem { display: inline-flex; align-items: center; border-radius: 2px; padding: .1rem .5rem; font-size: .82rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.4; min-width: 3.2rem; justify-content: center; }
.sem.ok { color: #fff; background: var(--green); }
.sem.warn { color: #fff; background: var(--amber); }
.sem.bad { color: #fff; background: var(--red); }
.sem.neu { color: var(--ink-2); background: var(--grey-bg); font-weight: 500; }
.st { display: inline-block; border-radius: 2px; padding: .1rem .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.prog { display: flex; align-items: center; gap: .5rem; min-width: 6rem; white-space: nowrap; }
.prog .b { flex: 1; height: 6px; background: var(--line-2); border-radius: 1px; overflow: hidden; }
.prog .b i { display: block; height: 100%; background: var(--ink); }
.prog span { font-size: .82rem; color: var(--ink-2); width: 2.6rem; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.conf { font-size: .82rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.conf.ok { color: var(--green); } .conf.warn { color: var(--amber); } .conf.bad { color: var(--red); }
.okline { color: var(--green); font-size: .85rem; }
.warnline { color: var(--amber); font-size: .85rem; }
.badline { color: var(--red); font-size: .85rem; }
.errline { color: var(--red); font-size: .85rem; }
.warnbox, .badbox, .okbox, .infobox { border-radius: var(--radius); padding: .6rem .8rem; font-size: .9rem; }
.warnbox { background: var(--amber-bg); color: #6d4a0c; }
.badbox { background: var(--red-bg); color: #7d241c; }
.okbox { background: var(--green-bg); color: #1f5a32; }
.infobox { background: var(--yellow-pale); color: #4a4320; }
.lockbar { background: var(--board-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; color: var(--ink-2); display: flex; gap: .5rem; align-items: center; margin-bottom: .7rem; }
.note { background: var(--yellow-pale); border-radius: var(--radius); padding: .5rem .8rem; color: #4a4320; font-size: .85rem; }

/* Indicadores como una línea del tablón: cabecera negra con la etiqueta y, debajo, el valor y su nota en la misma línea. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.kpi { background: var(--board); min-width: 0; display: flex; flex-direction: column; }
.kpi .l { font-size: .72rem; color: var(--ink-on-dark); background: var(--ink); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: .4rem .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-size: 1.15rem; font-weight: 600; padding: .55rem .9rem 0; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; display: inline; }
.kpi .s { font-size: .8rem; color: var(--ink-3); padding: .15rem .9rem .5rem; }
.kpi .v + .s { padding-top: .1rem; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: .9rem 0 1rem; }
/* Pestañas como andenes: la activa es un bloque amarillo que se apoya en la regla. */
.tabs a { padding: .5rem 1rem; color: var(--ink-2); margin-bottom: -1px; text-decoration: none; font-weight: 500; border-radius: 3px 3px 0 0; transition: color .16s var(--ease), background .16s var(--ease); }
.tabs a.on { color: var(--ink); background: var(--yellow); font-weight: 600; }
.tabs a:hover { color: var(--ink); background: #e8e3d4; }
.tabs a.on:hover { background: var(--yellow); }
.phead { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .2rem; }
.phead .meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; align-items: center; font-size: .9rem; }
.phead .pacts { display: flex; gap: .4rem; flex: none; }
.dl { display: grid; grid-template-columns: 8rem 1fr; gap: .35rem .7rem; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; }
.checks { margin: 0; padding: 0; }
.checks li { list-style: none; display: flex; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line-2); }
.checks .k { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); width: 6rem; flex: none; }
.cmd { background: var(--ink); color: var(--ink-on-dark); font-family: var(--mono); font-size: .85rem; border-radius: var(--radius); padding: .5rem .7rem; display: flex; justify-content: space-between; gap: .7rem; }
.cat { padding: .5rem 0; border-bottom: 1px solid var(--line-2); }
.cat .t { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .25rem; }
.bars2 { display: flex; flex-direction: column; gap: 3px; }
.bars2 div { height: 7px; border-radius: 1px; }
.pm { color: var(--amber); font-size: .75rem; margin-left: .25rem; cursor: help; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--ink-2); font-size: .82rem; margin-top: .6rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { display: inline-block; width: 1.1rem; height: 8px; border-radius: 1px; }

/* ───────────────────────────── Notas y documentos ───────────────────────────── */
.notes .n { padding: .6rem 0; border-bottom: 1px solid var(--line-2); display: flex; gap: .5rem; align-items: flex-start; }
.notes .n:last-child { border-bottom: 0; }
.notes .n > div { flex: 1; min-width: 0; }
.notes .n .acts { flex: none; width: auto; }
.tl .n { padding: .8rem .9rem; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 1.4rem auto 7rem 1fr; gap: .7rem; align-items: start; }
.tl .n:last-child { border-bottom: 0; }
.tl .d { color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.tl .w { font-size: .85rem; color: var(--ink-3); margin-top: .2rem; }
.note-n { padding: .8rem .9rem; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 1.6rem 7rem minmax(0, 1fr) auto; gap: .7rem; align-items: start; white-space: pre-wrap; }
.note-n .d, .note-n .w { color: var(--ink-3); font-size: .85rem; }
.note-text { white-space: pre-wrap; }
.note-text.md { white-space: normal; margin-top: .3rem; line-height: 1.5; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md blockquote, .md table { margin: 0 0 .5rem; }
.md ul, .md ol { padding-left: 1.3rem; }
.md code { background: var(--board-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 .25rem; font-size: .9em; }
.md pre { background: var(--board-2); border: 1px solid var(--line-2); padding: .5rem .7rem; overflow-x: auto; }
.md pre code { border: 0; padding: 0; background: none; }
.md blockquote { border-left: 3px solid var(--line); padding-left: .7rem; color: var(--ink-2); }
.md a { color: var(--ink); text-decoration: underline; }
.md h1, .md h2, .md h3, .md h4 { font-size: 1em; margin: .4rem 0 .3rem; }
.md table { border-collapse: collapse; }
.md th, .md td { border: 1px solid var(--line-2); padding: .2rem .5rem; }

/* ───────────────────────────── Planificación: tabla y Gantt en una sola lámina ───────────────────────────── */
.plan {
  display: grid; grid-template-columns: max-content 6px max-content; grid-template-rows: minmax(0, 1fr);
  background: var(--board); border: 1px solid var(--line); border-radius: 4px; overflow: auto; position: relative; overscroll-behavior: contain;
}
.plan.fill { flex: 1 1 auto; min-height: 0; }
.plan.boxed { max-height: 26rem; }
.plan > .grid, .plan > .ttab-wrap, .plan > .ttab { position: sticky; left: 0; z-index: 5; overflow: visible; background: var(--board); border-radius: 0; max-height: none; align-self: start; }
.plan > .split { background: var(--line-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
@media (max-width: 1400px) { .ttab .opt-col { display: none; } }
.plan .gcol { position: relative; }
.plan .ghead-s { position: sticky; top: 0; z-index: 4; background: var(--board-2); }
.ttab { width: auto; }
.ttab td, .ttab th { height: var(--row); padding: 0 .45rem; white-space: nowrap; }
.ttab th { height: var(--ghead); }
.ttab .prog { min-width: 4.5rem; }
.ttab .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 17rem; }
.ttab .tw { display: inline-block; width: .8rem; color: var(--ink-3); }
.ttab td .in.sm { height: 1.6rem; min-height: 1.6rem; padding: 0 .3rem; }
.ttab td input[type=date].in.sm { padding: 0 .15rem; }
.ttab.compact .opt-col { display: none; }
.gwrap { position: relative; }
.gantt-svg { display: block; font-family: var(--sans); }
.gantt-svg .g-mes { font-size: 11.5px; font-weight: 600; fill: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.gantt-svg .g-sem { font-size: 10.5px; fill: var(--ink-3); }
.gantt-svg .g-lab { font-size: 11.5px; fill: var(--ink-2); }
.gantt-svg .g-hoy { font-size: 10px; fill: var(--today); font-weight: 700; letter-spacing: .06em; }
.gantt-svg .g-fila { cursor: pointer; }
.gantt-svg .g-fila:hover rect:first-child { fill: #f1ecdd; }
.wrap-detail { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 1rem; align-items: stretch; }
.wrap-detail.fill { flex: 1 1 auto; min-height: 0; }
.wrap-detail > * { min-height: 0; min-width: 0; }
.drawer { background: var(--board); border: 1px solid var(--line); border-radius: 4px; overflow: auto; align-self: start; max-height: 100%; }
.drawer .dtop { position: sticky; top: 0; z-index: 3; background: var(--board-2); border-bottom: 1px solid var(--line); padding: .55rem .8rem; display: flex; gap: .4rem; align-items: center; }
.drawer section { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.drawer section:last-child { border-bottom: 0; }
.drawer h4 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: flex; align-items: center; gap: .4rem; }
.drawer table td, .drawer table th { padding: .3rem .4rem; height: auto; }
.drawer table th { height: 1.9rem; }

/* ───────────────────────────── Configuración y formularios ───────────────────────────── */
.cfg { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.cfg .secmenu { position: sticky; top: 0; }
.secmenu { padding: .4rem; }
.secmenu a { display: flex; justify-content: space-between; padding: .4rem .7rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: .95rem; }
.secmenu a:hover { background: var(--paper); }
.secmenu a.on { background: var(--yellow); color: var(--ink); font-weight: 600; }
.secmenu a span { color: var(--ink-3); font-weight: 400; font-size: .85rem; }
.secmenu .h { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); padding: .8rem .7rem .3rem; }
.form2 { display: grid; grid-template-columns: 17rem minmax(0, 1fr) 7rem; gap: .5rem .9rem; align-items: center; }
.form2 .h { color: var(--ink-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.form2 .x2 { color: var(--ink-3); font-size: .85rem; grid-column: 2 / 4; margin-top: -.25rem; }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .8rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fold { border: 1px solid var(--line); border-radius: 4px; background: var(--board); }
.fold > .fh { padding: .6rem .8rem; font-weight: 600; display: flex; gap: .5rem; align-items: center; border-bottom: 1px solid var(--line); background: var(--board-2); border-radius: 4px 4px 0 0; }
.fold > .fb { padding: .8rem; display: flex; flex-direction: column; gap: .8rem; }
.sheets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sheets .opt { margin-bottom: 0; }

/* ───────────────────────────── Diálogos y avisos ───────────────────────────── */
.veil { position: fixed; inset: 0; background: rgba(21,23,27,.5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem; z-index: 20; overflow: auto; }
.dialog { background: var(--board); border-radius: 6px; width: 44rem; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(21,23,27,.35); margin-bottom: 2rem; }
.dialog.sm { width: 33rem; }
.dialog.lg { width: 58rem; }
.dialog header { padding: 1rem 1.3rem .4rem; }
.dialog header h2 { margin: 0; font-size: 1.15rem; }
.dialog header p { margin: .25rem 0 0; color: var(--ink-3); font-size: .9rem; }
.dialog .body { padding: .8rem 1.3rem; display: flex; flex-direction: column; gap: .9rem; overflow: auto; }
.dialog footer { padding: .8rem 1.3rem 1rem; display: flex; gap: .5rem; justify-content: flex-end; border-top: 1px solid var(--line); }
.dialog footer .left { margin-right: auto; }
.dialog .x { float: right; border: 0; background: none; font-size: 1.1rem; color: var(--ink-3); cursor: pointer; width: 1.9rem; height: 1.9rem; border-radius: var(--radius); }
.dialog .x:hover { background: var(--paper); color: var(--ink); }
.dialog table th { position: static; }
.danger-title { color: var(--red); }
.toast-x [class^="i-"], .dialog .x [class^="i-"] { width: .9em; height: .9em; }
.toasts { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 80; max-width: 48rem; }
.toast { background: var(--ink); color: var(--ink-on-dark); padding: .6rem .9rem; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(21,23,27,.3); font-size: .9rem; display: flex; gap: .8rem; align-items: center; animation: toast-in .2s var(--ease); }
.toast-error { background: var(--red); color: #fff; }
.toast-x { background: none; border: 0; color: #fff; opacity: .7; cursor: pointer; font-size: 1rem; }
.toast-x:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pop { position: absolute; background: var(--board); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(21,23,27,.18); z-index: 30; min-width: 14rem; padding: .4rem; }
.pop .pi { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: var(--radius); color: var(--ink); cursor: pointer; white-space: nowrap; background: none; border: 0; font: inherit; width: 100%; text-align: left; }
.pop .pi:hover { background: var(--paper); }
.pop .pd { height: 1px; background: var(--line); margin: .25rem 0; }
.pop .kv { display: grid; grid-template-columns: 4.5rem 1fr; gap: .2rem .5rem; font-size: .85rem; padding: .4rem .6rem; }
.pop .kv span:nth-child(odd) { color: var(--ink-3); }

/* ───────────────────────────── Entrada (sin barra lateral) ───────────────────────────── */
.app-plain { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); background-image: repeating-linear-gradient(90deg, transparent 0 7rem, rgba(255,204,0,.06) 7rem 7.1rem); padding: 1rem; }
.login { display: flex; align-items: center; justify-content: center; width: 100%; }
.login__card { display: flex; flex-direction: column; gap: .9rem; width: 100%; max-width: 24rem; padding: 1.8rem 1.8rem 1.4rem; background: var(--board); border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.login__card .muted.small { order: 99; text-align: center; font-size: .78rem; margin-top: .4rem; }
.login__title { font-size: 1.4rem; margin: 0 0 .2rem; }
.login__field { display: flex; flex-direction: column; gap: .3rem; }
.login__label { font-size: .78rem; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.login__input { padding: .55rem .7rem; font: inherit; color: var(--ink); background: var(--board); border: 1px solid var(--line); border-radius: var(--radius); }
.login__input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--yellow-pale); }
.login__submit { padding: .7rem; font: inherit; font-weight: 600; color: var(--ink-on-dark); background: var(--ink); border: none; border-radius: var(--radius); cursor: pointer; margin-top: .3rem; }
.login__submit:hover { background: #2a2c33; color: #fff; }
.login__error { margin: 0; padding: .5rem .7rem; color: #7d241c; background: var(--red-bg); border-radius: var(--radius); font-size: .9rem; }
.login__info { margin: 0; padding: .5rem .7rem; border-radius: var(--radius); background: var(--yellow-pale); color: #4a4320; font-size: .9rem; }
.notice { max-width: 28rem; padding: 1.6rem; text-align: center; background: var(--board); border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.notice__title { margin-bottom: .5rem; font-size: 1.3rem; }
.notice__text { margin-bottom: 1rem; color: var(--ink-3); }
.notice__link { display: inline-block; padding: .5rem 1rem; font-weight: 600; color: var(--ink-on-dark); background: var(--ink); text-decoration: none; border-radius: var(--radius); }
.notice__link:hover { background: #2a2c33; color: #fff; }

/* ───────────────────────────── Adaptación ───────────────────────────── */
@media (max-width: 1600px) { .wrap-detail { grid-template-columns: minmax(0, 1fr) 26rem; } }
@media (max-width: 1300px) { .grid2 { grid-template-columns: 1fr; } .cfg { grid-template-columns: 12rem minmax(0, 1fr); } }
@media (max-width: 1200px) {
  :root { --side: 3.6rem; }
  .side { padding: 1rem .45rem; }
  .side .brand { padding: .2rem 0 1rem; text-align: center; font-size: 0; }
  .side .brand::before { content: "GP"; font-size: 1rem; font-weight: 700; letter-spacing: .05em; }
  .side a { justify-content: center; padding: .6rem 0; }
  .side a.on { margin: 0 -.45rem; padding: .6rem 0; }
  .side a .lbl, .side .sec, .side .rec { display: none; }
  .side .ico { width: 1.25rem; height: 1.25rem; opacity: 1; }
  .user-menu > summary .lbl { display: none; }
  .content { padding: .9rem 1rem 1.2rem; }
  .top { padding: 0 1rem; }
  .wrap-detail { grid-template-columns: 1fr; }
  .wrap-detail .drawer { max-height: 50vh; }
}
@media (max-width: 1100px) { .cfg { grid-template-columns: 10.5rem minmax(0, 1fr); gap: .75rem; } .secmenu a { padding: .35rem .5rem; font-size: .9rem; } .form2 { grid-template-columns: 1fr; } .form2 .x2 { grid-column: 1; } .row3 { grid-template-columns: 1fr; } .sheets { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 760px) { .cfg { grid-template-columns: 1fr; } .cfg .secmenu { position: static; display: flex; flex-wrap: wrap; gap: .2rem; } .secmenu .h { width: 100%; padding: .4rem .5rem .1rem; } }