/* BugOrBill — hoja de estilos común de la aplicación (sistema visual compartido).
   Contiene: fuentes propias, variables de la identidad visual, base, iconos, estructura con menú lateral, encabezados,
   tarjetas, formularios, botones, tablas, estados y etiquetas, pestañas, pasos, estados vacíos, pantalla de acceso,
   página de presentación, adaptación a tabletas y móviles e impresión.
   Las páginas con composición propia añaden un complemento en static/css/paginas/<página>.css, enlazado después de
   esta hoja; los complementos solo usan estas variables y no redefinen los componentes comunes. */

/* --- Fuentes (OFL; ver static/fonts/LICENCIA-*.txt) ---------------------------------------- */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
}

/* --- Identidad visual ------------------------------------------------------------------------- */
:root {
  /* Paleta de marca */
  --navy-950: #050d1c;
  --navy-900: #071426;
  --navy-850: #0b1b31;
  --navy-800: #10233d;
  --navy-700: #1a2f4d;
  --blue: #3677f5;
  --blue-600: #2862dc;
  --violet: #6545f5;
  --violet-600: #5433e6;
  --violet-700: #4527c9;
  --cyan: #2bd6d3;
  --grad-brand: linear-gradient(135deg, #38a6f8 0%, #4a6bf2 48%, #6040e6 100%);

  /* Superficies y texto */
  --c-bg: #f7f9fc;
  --c-surface: #ffffff;
  --c-surface-alt: #f2f5fa;
  --c-surface-sunken: #eef2f7;
  --c-border: #e3e8f0;
  --c-border-strong: #cdd5e1;
  --c-input-border: #8794a7;  /* 3:1 sobre blanco: los campos se distinguen sin depender del color de fondo */
  --c-text: #142033;
  --c-text-muted: #5b6779;
  --c-text-soft: #5f6b7d;
  --c-primary: var(--violet);
  --c-primary-hover: var(--violet-600);
  --c-primary-contrast: #ffffff;
  --c-link: #4a2fd8;
  --c-focus: #6545f5;

  /* Estados: fondo suave, borde y texto con contraste AA sobre su fondo */
  --c-ok: #0d7a57;
  --c-ok-strong: #159b72;
  --c-ok-bg: #e5f6ef;
  --c-ok-border: #b9e6d4;
  --c-warn: #925400;
  --c-warn-strong: #d48a12;
  --c-warn-bg: #fff4e1;
  --c-warn-border: #f6d9a6;
  --c-error: #b32f3d;
  --c-error-strong: #d94d59;
  --c-error-bg: #fdecee;
  --c-error-border: #f5c2c8;
  --c-info: #2357c6;
  --c-info-strong: #3677f5;
  --c-info-bg: #e9f1fe;
  --c-info-border: #c3d6fb;
  --c-violet-bg: #efebff;
  --c-violet-border: #d6ccfd;
  --c-neutral-bg: #eef1f6;
  --c-neutral-border: #d9dfe9;

  /* Forma y espacio */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --sidebar-w: 16.5rem;
  --font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Poppins, "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px rgba(10, 20, 45, .16), 0 2px 6px rgba(10, 20, 45, .08);
}

/* --- Base ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

img, svg { max-width: 100%; }

a { color: var(--c-link); text-underline-offset: .18em; }
a:hover { color: var(--violet-700); }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { color: var(--c-text); line-height: 1.25; letter-spacing: -.012em; }
h1 { font-size: 1.65rem; font-weight: 700; margin: 0 0 var(--space-2); }
h2 { font-size: 1.08rem; font-weight: 650; margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: .98rem; font-weight: 650; margin: var(--space-5) 0 var(--space-2); }
h4 { font-size: .9rem; font-weight: 650; margin: var(--space-4) 0 var(--space-2); color: var(--c-text-muted); }
p { margin: 0 0 var(--space-3); }
strong { font-weight: 650; }

code, .mono { font-family: var(--font-mono); font-size: .84em; word-break: break-all; }
code {
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: .05em .35em;
  color: #2a3850;
}

hr { border: none; border-top: 1px solid var(--c-border); margin: var(--space-5) 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  background: var(--c-surface);
  color: var(--c-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.skip-link:focus { left: var(--space-2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }
/* Mientras la página comprueba la sesión y los permisos no ofrece operaciones: BOB.init quita aria-busy al terminar. */
#main-content[aria-busy="true"] :is(form, details.form-panel, [data-write], .page-actions a) { display: none !important; }

/* Los destinos de las anclas no quedan bajo la barra superior fija de tabletas y móviles. */
[id] { scroll-margin-top: var(--space-4); }

/* --- Iconos: trazos de 24 × 24 usados como máscara; toman el color del texto (currentColor) ---- */
.ico { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-home { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 10.5 12 3.5l8.5 7V19a1.5 1.5 0 0 1-1.5 1.5h-4.5v-6h-5v6H5A1.5 1.5 0 0 1 3.5 19z%22/%3E%3C/svg%3E"); }
.ico-folder { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6.5A1.5 1.5 0 0 1 4.5 5h4.2l2.1 2.4h8.7A1.5 1.5 0 0 1 21 8.9v9.6a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z%22/%3E%3C/svg%3E"); }
.ico-contract { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z%22/%3E%3Cpath d=%22M14 3v5h5M8.5 12.5h7M8.5 16h4.5%22/%3E%3C/svg%3E"); }
.ico-package { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 7.5 12 3 3.5 7.5v9L12 21l8.5-4.5z%22/%3E%3Cpath d=%22M3.5 7.5 12 12l8.5-4.5M12 12v9M7.8 5.3l8.4 4.5%22/%3E%3C/svg%3E"); }
.ico-claim { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v9a1.5 1.5 0 0 1-1.5 1.5H9.5L5 20v-4h.5A1.5 1.5 0 0 1 4 14.5z%22/%3E%3Cpath d=%22M12 7.3v4M12 13.6v.1%22/%3E%3C/svg%3E"); }
.ico-evidence { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z%22/%3E%3Cpath d=%22M14 3v5h5M9 14.5l2 2 4-4.2%22/%3E%3C/svg%3E"); }
.ico-analysis { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12.5h3.8l2.4-6 4.6 11.5 2.4-5.5H21%22/%3E%3C/svg%3E"); }
.ico-decision { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5v17M7.5 20.5h9M5 7h14M8.5 4.8 12 3.5l3.5 1.3%22/%3E%3Cpath d=%22M5 7 2.5 13a2.7 2.7 0 0 0 5 0zM19 7l-2.5 6a2.7 2.7 0 0 0 5 0z%22/%3E%3C/svg%3E"); }
.ico-branch { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226.5%22 cy=%225.5%22 r=%222.2%22/%3E%3Ccircle cx=%226.5%22 cy=%2218.5%22 r=%222.2%22/%3E%3Ccircle cx=%2217.5%22 cy=%227.5%22 r=%222.2%22/%3E%3Cpath d=%22M6.5 7.7v8.6M17.5 9.7c0 4.3-5 4.1-10.2 6.9%22/%3E%3C/svg%3E"); }
.ico-report { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z%22/%3E%3Cpath d=%22M14 3v5h5M9 17.5v-3M12 17.5v-6M15 17.5v-2%22/%3E%3C/svg%3E"); }
.ico-shield { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 5.8v5.6c0 4.4 3 8.1 7 9.3 4-1.2 7-4.9 7-9.3V5.8z%22/%3E%3Cpath d=%22m9.2 12 2 2 3.8-4%22/%3E%3C/svg%3E"); }
.ico-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E"); }
.ico-chevron-down { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E"); }
.ico-chevron-right { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 6 6 6-6 6%22/%3E%3C/svg%3E"); }
.ico-arrow-right { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E"); }
.ico-download { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v11M7 10.5l5 5 5-5M5 20h14%22/%3E%3C/svg%3E"); }
.ico-upload { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 16V5M7 9.5l5-5 5 5M5 20h14%22/%3E%3C/svg%3E"); }
.ico-logout { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.5 4H18a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 18 20h-3.5M10 8l-4 4 4 4M6 12h9.5%22/%3E%3C/svg%3E"); }
.ico-key { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22m10.8 12.2 8.7-8.7M16 7l2.5 2.5M13.8 9.2l2 2%22/%3E%3C/svg%3E"); }
.ico-menu { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6.5h16M4 12h16M4 17.5h16%22/%3E%3C/svg%3E"); }
.ico-close { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6 6 18%22/%3E%3C/svg%3E"); }
.ico-external { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h6v6M20 4l-9 9M18 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4.5%22/%3E%3C/svg%3E"); }
.ico-building { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 20.5V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5v15M15 9.5h3.5A1.5 1.5 0 0 1 20 11v9.5M3 20.5h18M8.5 8h3M8.5 11.5h3M8.5 15h3%22/%3E%3C/svg%3E"); }
.ico-user { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%224%22/%3E%3Cpath d=%22M4.5 20.5c.8-3.6 3.8-6 7.5-6s6.7 2.4 7.5 6%22/%3E%3C/svg%3E"); }
.ico-users { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228.5%22 r=%223.6%22/%3E%3Cpath d=%22M2.8 20c.7-3.3 3.2-5.5 6.2-5.5s5.5 2.2 6.2 5.5M15.5 5.3a3.6 3.6 0 0 1 0 6.4M18 14.8c1.6.8 2.8 2.6 3.2 5.2%22/%3E%3C/svg%3E"); }
.ico-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M12 7.5V12l3 2%22/%3E%3C/svg%3E"); }
.ico-alert { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.4 4.3 2.9 17.5A1.8 1.8 0 0 0 4.5 20.2h15a1.8 1.8 0 0 0 1.6-2.7L13.6 4.3a1.8 1.8 0 0 0-3.2 0z%22/%3E%3Cpath d=%22M12 9.5v4M12 16.6v.1%22/%3E%3C/svg%3E"); }
.ico-check-circle { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22m8.3 12.2 2.6 2.6 4.9-5.2%22/%3E%3C/svg%3E"); }
.ico-info { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M12 11v5.2M12 7.8v.1%22/%3E%3C/svg%3E"); }
.ico-refresh { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19.5 8.5A8 8 0 0 0 5 7.3M4.5 4v4h4M4.5 15.5A8 8 0 0 0 19 16.7M19.5 20v-4h-4%22/%3E%3C/svg%3E"); }
.ico-search { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2210.8%22 cy=%2210.8%22 r=%226.3%22/%3E%3Cpath d=%22m20 20-4.4-4.4%22/%3E%3C/svg%3E"); }
.ico-link { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 14a4.2 4.2 0 0 0 6 0l2.8-2.8a4.2 4.2 0 0 0-6-6L11.6 6.4M14 10a4.2 4.2 0 0 0-6 0l-2.8 2.8a4.2 4.2 0 0 0 6 6l1.2-1.2%22/%3E%3C/svg%3E"); }
.ico-lock { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2210.5%22 width=%2214%22 height=%2210%22 rx=%221.8%22/%3E%3Cpath d=%22M8 10.5V7.5a4 4 0 0 1 8 0v3%22/%3E%3C/svg%3E"); }
.ico-layers { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5 3 8l9 4.5L21 8z%22/%3E%3Cpath d=%22m3 12.5 9 4.5 9-4.5M3 16.5 12 21l9-4.5%22/%3E%3C/svg%3E"); }
.ico-history { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12a8 8 0 1 0 2.4-5.7L4 8.6%22/%3E%3Cpath d=%22M4 4.5v4.1h4.1M12 8v4.3l2.8 1.8%22/%3E%3C/svg%3E"); }
.ico-file { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3C/svg%3E"); }
.ico-code { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m8.5 7-5 5 5 5M15.5 7l5 5-5 5M13.5 4.5l-3 15%22/%3E%3C/svg%3E"); }
.ico-ticket { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 8.5V6.5A1.5 1.5 0 0 1 5 5h14a1.5 1.5 0 0 1 1.5 1.5v2a3.5 3.5 0 0 0 0 7v2A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5v-2a3.5 3.5 0 0 0 0-7z%22/%3E%3Cpath d=%22M14.5 5v14%22 stroke-dasharray=%222 2.2%22/%3E%3C/svg%3E"); }
.ico-commit { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.6%22/%3E%3Cpath d=%22M3 12h5.4M15.6 12H21%22/%3E%3C/svg%3E"); }
.ico-play { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.5 5.2v13.6L19 12z%22/%3E%3C/svg%3E"); }
.ico-eye { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); }
.ico-list { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.1M4.5 12h.1M4.5 17.5h.1%22/%3E%3C/svg%3E"); }
.ico-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4.5v15h16%22/%3E%3Cpath d=%22M8 15v-3.5M12 15V8M16 15v-5.5%22/%3E%3C/svg%3E"); }
.ico-settings { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M12 2.8v2.4M12 18.8v2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M2.8 12h2.4M18.8 12h2.4M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7%22/%3E%3C/svg%3E"); }
.ico-sparkle { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5 13.8 9.2 19.5 11 13.8 12.8 12 18.5 10.2 12.8 4.5 11 10.2 9.2z%22/%3E%3C/svg%3E"); }
.ico-dot { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 fill=%22%23000%22/%3E%3C/svg%3E"); }

/* --- Estructura de la aplicación: menú lateral y área principal ------------------------------- */
.app { min-height: 100vh; }
/* La franja del menú se prolonga en páginas largas (y en capturas de página completa). */
@media (min-width: 1024px) {
  .app { background: linear-gradient(90deg, var(--navy-900) var(--sidebar-w), var(--c-bg) var(--sidebar-w)); }
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--navy-900);
  background-image: linear-gradient(180deg, #08172b 0%, #071426 55%, #061121 100%);
  color: #c9d4e5;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #243a5c transparent;
}

.sidebar-brand { display: flex; align-items: center; padding: 0 var(--space-2); text-decoration: none; }
.sidebar-brand img { display: block; height: 2rem; width: auto; }
.sidebar-brand:focus-visible { outline-color: #9db8ff; }

.sidebar-label {
  display: block;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7d8ea8;
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-2);
}

.sidebar-context { display: flex; flex-direction: column; gap: var(--space-1); }
.sidebar select {
  width: 100%;
  height: 2.5rem;
  color: #e8eef8;
  background-color: var(--navy-800);
  border: 1px solid #22385a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.sidebar select:hover { border-color: #33507a; }
.sidebar select:focus { border-color: #7f9cff; box-shadow: 0 0 0 3px rgba(127, 156, 255, .25); }
.sidebar select option { color: var(--c-text); background: #fff; }

.mainnav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.nav-group { margin-top: var(--space-4); }
.nav-group:first-child { margin-top: 0; }
.mainnav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.5rem;
  padding: .45rem .7rem;
  border-radius: var(--radius);
  color: #c3cfe2;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mainnav a .ico { width: 1.15rem; height: 1.15rem; color: #8597b3; }
.mainnav a:hover { background: rgba(255, 255, 255, .06); color: #ffffff; }
.mainnav a:hover .ico { color: #cfe0ff; }
.mainnav a[aria-current="page"] {
  background: var(--navy-700);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #6f8dff;
}
.mainnav a[aria-current="page"] .ico { color: #9fc0ff; }
.mainnav a:focus-visible { outline-color: #9db8ff; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid #182b47;
  padding-top: var(--space-4);
}

.usermenu { position: relative; }
.usermenu summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: .45rem .55rem;
  border-radius: var(--radius);
  color: #eef3fb;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: rgba(255, 255, 255, .06); }
.usermenu summary:focus-visible { outline-color: #9db8ff; }
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: #e9eef7;
  color: var(--navy-900);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-display { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: .74rem; color: #8c9bb4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu summary .ico-chevron-down { margin-left: auto; color: #7d8ea8; transition: transform .15s ease; }
.usermenu[open] summary .ico-chevron-down { transform: rotate(180deg); }
.usermenu-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + .5rem);
  z-index: 80;
  right: 0;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
}
.usermenu-panel h2 { margin: 0 0 var(--space-3); font-size: 1rem; }
.usermenu-panel label { color: var(--c-text); }
.usermenu-panel .field { margin-bottom: var(--space-3); }
.usermenu-panel .form-actions { margin-top: var(--space-2); }
.usermenu-panel .form-actions + .form-actions { border-top: 1px solid var(--c-border); padding-top: var(--space-3); margin-top: var(--space-3); }

.main { margin-left: var(--sidebar-w); min-width: 0; }

/* Barra superior compacta (solo tabletas y móviles) */
.appbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 1px 0 #142a47;
}
.appbar-brand img { display: block; height: 1.75rem; width: auto; }
.appbar-project {
  margin-left: auto;
  min-width: 0;
  font-size: .8rem;
  color: #b9c6da;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #22385a;
  border-radius: var(--radius);
  background: var(--navy-800);
  color: #fff;
  cursor: pointer;
}
.nav-toggle .ico { width: 1.25rem; height: 1.25rem; }
.nav-close { display: none; margin-left: auto; }
.sidebar-top { display: flex; align-items: center; gap: var(--space-2); }
.nav-backdrop { display: none; }

/* --- Contenido de cada página ----------------------------------------------------------------- */
.page { max-width: 1320px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-7); }
.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.page-header > div:first-child, .page-title { min-width: 0; flex: 1 1 22rem; }
.page-header h1 { margin-bottom: var(--space-1); }
.page-intro { color: var(--c-text-muted); max-width: 62rem; margin: 0; font-size: .95rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--c-text-soft);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.breadcrumbs li + li::before {
  content: "";
  width: .8rem; height: .8rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumbs a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-link); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Navegación interna de una página: pestañas con anclas */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-1);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .4rem .8rem;
  border-radius: var(--radius);
  color: var(--c-text-muted);
  font-size: .86rem;
  font-weight: 550;
  text-decoration: none;
}
.subnav a:hover { background: var(--c-surface-alt); color: var(--c-text); }

/* Tarjetas de sección */
.section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow);
  min-width: 0;
}
.section > h2:first-child, .section > header > h2:first-child, .section-head h2 { margin-top: 0; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.section-head h2 { margin-bottom: 0; }
.section-head .hint { margin: 0; }
.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; }
.section > p:last-child { margin-bottom: 0; }
.section-flush { padding: 0; overflow: hidden; }
.section-flush > .section-head { padding: var(--space-5) var(--space-5) 0; }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.columns-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.columns-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.columns-2, .columns-main { margin-bottom: var(--space-5); }
.columns-2 > .section, .columns-main > .section { margin-bottom: 0; }

/* Cifras resumidas (KPI) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-3); }
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.card-value { font-size: 1.6rem; font-weight: 700; color: var(--c-text); letter-spacing: -.02em; line-height: 1.2; }
.card-label { font-size: .82rem; color: var(--c-text-muted); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5) var(--space-5);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
a.kpi:hover { border-color: var(--c-violet-border); box-shadow: 0 0 0 3px rgba(101, 69, 245, .07), var(--shadow); }
.kpi-label { display: flex; align-items: center; gap: var(--space-2); font-size: .84rem; font-weight: 550; color: var(--c-text-muted); }
.kpi-label .ico { width: 1.05rem; height: 1.05rem; }
.kpi-value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--c-text); }
.kpi-foot { font-size: .8rem; color: var(--c-text-soft); }
.kpi-ok .kpi-label .ico, .kpi-ok .kpi-value { color: var(--c-ok-strong); }
.kpi-error .kpi-label .ico, .kpi-error .kpi-value { color: var(--c-error-strong); }
.kpi-warn .kpi-label .ico { color: var(--c-warn-strong); }
.kpi-warn .kpi-value { color: var(--c-warn); }
.kpi-info .kpi-label .ico { color: var(--c-info-strong); }
.kpi-violet .kpi-label .ico { color: var(--violet); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 var(--space-3); }

/* --- Formularios ------------------------------------------------------------------------------ */
form { margin: 0; }

.form-panel {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
  background: #fbfcfe;
}
.form-panel > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: .8rem var(--space-4);
  font-weight: 600;
  font-size: .92rem;
  color: var(--c-text);
  border-radius: var(--radius-lg);
}
.form-panel > summary::-webkit-details-marker { display: none; }
.form-panel > summary::before {
  content: "";
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  background-color: var(--c-violet-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236545f5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  background-size: 1rem;
  background-position: center;
  background-repeat: no-repeat;
}
.form-panel[open] > summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236545f5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.form-panel > summary:hover { background: var(--c-surface-alt); }
.form-panel[open] { background: var(--c-surface); box-shadow: var(--shadow-xs); }
.form-panel[open] > summary { border-bottom: 1px solid var(--c-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.form-panel > :not(summary) { margin-left: var(--space-5); margin-right: var(--space-5); }
.form-panel > :not(summary):first-of-type { margin-top: var(--space-4); }
.form-panel > :last-child { margin-bottom: var(--space-5); }
.form-panel > form, .form-panel > div, .form-panel > p { margin-top: var(--space-4); }

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4) var(--space-5); }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-check { flex-direction: row; align-items: center; gap: var(--space-2); }
.field-check label { font-weight: 500; }
fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0;
  min-width: 0;
}
legend { font-size: .82rem; font-weight: 650; padding: 0 var(--space-2); color: var(--c-text-muted); }
label { font-size: .84rem; font-weight: 600; color: #263248; }
.hint { font-size: .8rem; color: var(--c-text-muted); font-weight: 400; line-height: 1.45; }
label .hint { display: block; margin-top: 2px; }

input, select, textarea {
  font: inherit;
  font-size: .9rem;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--c-text);
  min-width: 0;
  max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #6b7687; }
input:hover, select:hover, textarea:hover { border-color: #6f7c90; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(101, 69, 245, .16);
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
  text-overflow: ellipsis;
}
select[multiple] {
  min-height: 7rem;
  padding: .35rem;
  background-image: none;
}
select[multiple] option { padding: .3rem .45rem; border-radius: 5px; }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  padding: 0;
  accent-color: var(--violet);
  flex: none;
}
input[type="file"] { padding: .35rem; min-height: 2.5rem; background: var(--c-surface-alt); cursor: pointer; }
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  margin-right: .75rem;
  padding: .35rem .8rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
  cursor: pointer;
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--c-error-strong); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-error-strong); }
input:disabled, select:disabled, textarea:disabled { background: var(--c-surface-alt); color: var(--c-text-soft); cursor: not-allowed; }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
.form-status { font-size: .88rem; }
.form-status:empty { display: none; }
.form-status .notice { margin-top: var(--space-3); }

/* --- Botones ---------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 2.5rem;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--violet);
  background: var(--violet);
  color: var(--c-primary-contrast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(69, 39, 201, .25);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
.btn:active { background: var(--violet-700); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .ico { width: 1.05rem; height: 1.05rem; }
.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--c-surface-alt); border-color: #b9c4d4; color: var(--c-text); }
.btn-secondary:active { background: var(--c-surface-sunken); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-link); box-shadow: none; }
.btn-ghost:hover { background: var(--c-violet-bg); border-color: transparent; color: var(--violet-700); }
.btn-danger { background: var(--c-error); border-color: var(--c-error); box-shadow: 0 1px 2px rgba(179, 47, 61, .25); }
.btn-danger:hover { background: #962634; border-color: #962634; }
.btn-small { font-size: .8rem; min-height: 2rem; padding: .3rem .7rem; border-radius: 8px; }
.btn-small.btn-secondary { box-shadow: none; }
.btn-link {
  background: none;
  border: none;
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: .18em;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.btn-block { width: 100%; }

/* --- Tablas ----------------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-2) 0 var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
table { border-collapse: collapse; width: 100%; font-size: .86rem; background: transparent; }
th, td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid #edf0f5; }
th {
  background: #f8fafc;
  color: var(--c-text-muted);
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom-color: var(--c-border);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfe; }
tbody tr.is-selected { background: var(--c-violet-bg); }
tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--violet); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }
td .btn-small + .btn-small { margin-left: var(--space-1); }
td code { white-space: nowrap; }
/* Dirección mostrada como texto (no http(s), sin enlace): se parte para no ensanchar la tabla. */
code.url-text { white-space: normal; overflow-wrap: anywhere; }

.empty {
  color: var(--c-text-muted);
  margin: var(--space-2) 0;
  padding: var(--space-4) var(--space-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius);
  background: #fbfcfe;
  font-size: .88rem;
  text-align: center;
}

dl.kv { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-2) 0; }
dl.kv dt { font-weight: 600; color: var(--c-text-muted); font-size: .84rem; }
dl.kv dd { margin: 0; word-break: break-word; min-width: 0; }

/* --- Estados y etiquetas ---------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .6rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.5;
  border: 1px solid var(--c-neutral-border);
  background: var(--c-neutral-bg);
  color: #334056;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-ok { background: var(--c-ok-bg); border-color: var(--c-ok-border); color: var(--c-ok); }
.badge-warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn); }
.badge-error { background: var(--c-error-bg); border-color: var(--c-error-border); color: var(--c-error); }
.badge-info { background: var(--c-info-bg); border-color: var(--c-info-border); color: var(--c-info); }
.badge-violet { background: var(--c-violet-bg); border-color: var(--c-violet-border); color: var(--violet-700); }
.badge-lg { font-size: .84rem; padding: .3rem .85rem; }

.notice {
  display: block;
  border: 1px solid var(--c-info-border);
  border-left: 4px solid var(--c-info-strong);
  background: var(--c-info-bg);
  color: #1b3a73;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin: var(--space-2) 0;
  font-size: .88rem;
}
.notice-ok { border-color: var(--c-ok-border); border-left-color: var(--c-ok-strong); background: var(--c-ok-bg); color: #0b5a41; }
.notice-warn { border-color: var(--c-warn-border); border-left-color: var(--c-warn-strong); background: var(--c-warn-bg); color: #6d3f00; }
.notice-error { border-color: var(--c-error-border); border-left-color: var(--c-error-strong); background: var(--c-error-bg); color: #8a1f2c; }
.notice ul { margin: var(--space-1) 0 0; padding-left: 1.2rem; }
.notice .btn { margin-top: var(--space-2); }

/* Avisos flotantes de la aplicación */
#flash:empty { display: none; }
.app #flash {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.app #flash .notice { margin: 0; box-shadow: var(--shadow-lg); background-clip: padding-box; }

/* Recomendación del sistema (no es una decisión) */
.recommendation {
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--violet);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
  background: #fcfbff;
}
.recommendation.is-undetermined { border-left-color: var(--c-warn-strong); background: #fffaf2; }
.recommendation-title { font-weight: 700; font-size: 1.05rem; }

.item-block {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  background: var(--c-surface);
}

pre.json {
  background: var(--navy-900);
  color: #dfe7f3;
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow: auto;
  max-height: 28rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.55;
}

.path-list { list-style: none; padding: 0; margin: 0; }
.path-list li { border-bottom: 1px solid var(--c-border); padding: var(--space-3) 0; }
.path-list li:last-child { border-bottom: none; }
.path-step { font-size: .84rem; color: var(--c-text-muted); }

.job-status { font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.job-status > .notice, .job-status > details { flex-basis: 100%; }

details > summary { cursor: pointer; }
details:not(.form-panel):not(.usermenu) > summary { color: var(--c-link); font-weight: 600; font-size: .86rem; }

/* Clasificaciones del motor: un color por valor, sin reducirlas a dos */
.cls { display: inline-flex; align-items: center; gap: .4rem; }
.cls-COVERED_WARRANTY_DEFECT { background: var(--c-ok-bg); border-color: var(--c-ok-border); color: var(--c-ok); }
.cls-BILLABLE_CHANGE { background: var(--c-error-bg); border-color: var(--c-error-border); color: var(--c-error); }
.cls-EXTERNAL_THIRD_PARTY_CAUSE { background: var(--c-violet-bg); border-color: var(--c-violet-border); color: var(--violet-700); }
.cls-SUPPORT_CONFIGURATION { background: var(--c-info-bg); border-color: var(--c-info-border); color: var(--c-info); }
.cls-AMBIGUOUS_HUMAN_REVIEW { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn); }

/* --- Pestañas, pasos, listas de actividad, barras y estados vacíos ---------------------------- */
.tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs [role="tab"], .tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .65rem .9rem;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--c-text-muted);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.tabs [role="tab"]:hover, .tabs a:hover { color: var(--c-text); }
.tabs [role="tab"][aria-selected="true"], .tabs a[aria-current="page"] { color: var(--c-link); border-bottom-color: var(--violet); }
.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  padding: 0 .35rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  font-size: .72rem;
  font-weight: 650;
}
[aria-selected="true"] > .tab-count { background: var(--c-violet-bg); color: var(--violet-700); }

.steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-text-muted);
}
.steps li a { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: inherit; text-decoration: none; }
.steps li a:hover .step-text { color: var(--c-link); }
.steps li::before, .steps li a::before { content: none; }
.step-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--c-border-strong);
  background: #fff;
  color: var(--c-text-muted);
  font-size: .8rem;
  font-weight: 700;
}
.step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.step-text small { font-weight: 500; color: var(--c-text-soft); font-size: .76rem; }
.steps li.is-done .step-num { background: var(--c-ok-bg); border-color: var(--c-ok-border); color: var(--c-ok); }
.steps li.is-current { color: var(--c-text); }
.steps li.is-current .step-num { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 0 0 4px rgba(101, 69, 245, .14); }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid #edf0f5;
}
.activity li:last-child { border-bottom: none; }
.activity-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--c-info-bg);
  color: var(--c-info-strong);
}
.activity-icon .ico { width: 1.2rem; height: 1.2rem; }
.activity-icon.tone-ok { background: var(--c-ok-bg); color: var(--c-ok-strong); }
.activity-icon.tone-warn { background: var(--c-warn-bg); color: var(--c-warn-strong); }
.activity-icon.tone-error { background: var(--c-error-bg); color: var(--c-error-strong); }
.activity-icon.tone-violet { background: var(--c-violet-bg); color: var(--violet); }
.activity-main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.activity-title { font-weight: 600; font-size: .9rem; color: var(--c-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.activity-title:hover { color: var(--c-link); text-decoration: underline; }
.activity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: .78rem; color: var(--c-text-soft); }
.activity-time { font-size: .78rem; color: var(--c-text-soft); white-space: nowrap; }

.bars { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bar-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--space-3); font-size: .86rem; }
.bar-label { color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: .65rem; border-radius: 999px; background: var(--c-surface-sunken); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); min-width: 0; }
.bar-value { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--c-text-muted);
}
.empty-state > .ico { width: 2.25rem; height: 2.25rem; color: #a3afc2; }
.empty-state strong { color: var(--c-text); font-size: .95rem; }
.empty-state p { margin: 0; max-width: 32rem; font-size: .88rem; }
.empty-state .btn { margin-top: var(--space-2); white-space: normal; max-width: 100%; text-align: center; }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3); }
.quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
}
.quick-action .ico { width: 1.15rem; height: 1.15rem; color: var(--violet); }
.quick-action:hover { border-color: var(--c-violet-border); background: #fcfbff; color: var(--c-text); }
.quick-action small { display: block; font-weight: 450; font-size: .76rem; color: var(--c-text-soft); }

.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: .84rem; color: var(--c-text-muted); }
.meta-row .ico { color: var(--c-text-soft); }

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface-alt);
}
.callout > .ico { width: 1.4rem; height: 1.4rem; margin-top: .1rem; color: var(--c-info-strong); }
.callout p:last-child { margin-bottom: 0; }

/* --- Pantalla de acceso ----------------------------------------------------------------------- */
.auth-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(101, 69, 245, .10), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(43, 214, 211, .10), transparent 60%),
    var(--c-bg);
}
.auth-card {
  width: 100%;
  max-width: 27rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 24px 60px rgba(10, 20, 45, .10), 0 2px 8px rgba(10, 20, 45, .05);
}
.auth-card .fields { grid-template-columns: 1fr; gap: var(--space-4); }
.auth-logo { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.auth-logo img { width: 11rem; height: auto; }
.auth-card h1 { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: var(--space-1); }
.auth-lead { text-align: center; color: var(--c-text-muted); margin-bottom: var(--space-5); font-size: .92rem; }
.auth-card .form-actions { margin-top: var(--space-5); }
.auth-card .form-actions .btn { width: 100%; min-height: 2.75rem; font-size: .92rem; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--c-text-soft);
  margin: var(--space-5) 0 var(--space-4);
  font-size: .8rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
#oidc-link { width: 100%; }
.auth-note { margin: var(--space-5) 0 0; text-align: center; font-size: .8rem; color: var(--c-text-soft); }
.auth-back { display: block; text-align: center; margin-top: var(--space-4); font-size: .84rem; }
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-right: 3rem; }
.password-toggle {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}
.password-toggle:hover { background: var(--c-surface-alt); color: var(--c-text); }
.password-toggle[aria-pressed="true"] { color: var(--violet); }

/* --- Página pública de presentación ----------------------------------------------------------- */
.public { background: var(--c-bg); }
.hero {
  position: relative;
  overflow: hidden;
  color: #e7eefb;
  background:
    radial-gradient(48rem 26rem at 78% 30%, rgba(80, 104, 255, .28), transparent 65%),
    radial-gradient(36rem 22rem at 105% 100%, rgba(43, 214, 211, .14), transparent 60%),
    linear-gradient(180deg, #050f24 0%, #071631 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 9rem;
  background: linear-gradient(180deg, transparent, rgba(5, 13, 28, .35));
  pointer-events: none;
}
.public-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
}
.public-nav img { display: block; height: 2.1rem; width: auto; }
.public-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); }
.public-links a { color: #c8d4e8; text-decoration: none; font-size: .9rem; font-weight: 500; }
.public-links a:hover { color: #fff; }
.public-links a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: .5em; }
.public-brand { flex: none; }
.public-links a:focus-visible, .public-nav a:focus-visible, .hero a:focus-visible { outline-color: #9db8ff; }
.btn-on-dark { background: rgba(255, 255, 255, .04); border-color: #2c4267; color: #fff; box-shadow: none; }
.btn-on-dark:hover { background: rgba(255, 255, 255, .1); border-color: #46638f; color: #fff; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) 5.5rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 var(--space-4);
}
.hero h1 span {
  background: linear-gradient(90deg, #6f8dff 0%, #7a5cff 60%, #9b7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead { font-size: 1.08rem; color: #b9c6da; max-width: 36rem; margin-bottom: var(--space-6); }
.hero-lead strong { color: #fff; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-actions .btn { min-height: 3rem; padding: .7rem 1.4rem; font-size: .95rem; }
.hero-actions .btn-hero { min-height: 3.25rem; padding: .8rem 2rem; font-size: 1rem; box-shadow: 0 0 0 4px rgba(101, 69, 245, .22), 0 10px 28px rgba(80, 60, 230, .45); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: .3rem .8rem;
  border: 1px solid #263d63;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #a9bbd8;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.eyebrow .ico { color: var(--cyan); }

/* Diagrama del recorrido: fuentes → análisis → clasificaciones → decisión humana */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: center;
  gap: var(--space-6);
}
.flow-inputs, .flow-outputs { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.flow-inputs li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .8rem 1rem;
  border: 1px solid rgba(160, 185, 230, .22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  color: #eef3fc;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.flow-inputs .ico { color: #8fb0ff; }
.flow-core {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 22px;
  border: 1px solid rgba(150, 170, 255, .45);
  background: linear-gradient(150deg, #1b2c63, #12204a);
  box-shadow: 0 0 0 6px rgba(101, 69, 245, .12), 0 0 40px rgba(90, 110, 255, .45);
}
.flow-core img { width: 3.6rem; height: auto; }
.flow-core { position: relative; }
.flow-core::before, .flow-core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--space-6);
  height: 2px;
  border-radius: 2px;
}
.flow-core::before { right: 100%; background: linear-gradient(90deg, rgba(111, 141, 255, 0), rgba(111, 141, 255, .85)); }
.flow-core::after { left: 100%; background: linear-gradient(90deg, rgba(111, 141, 255, .85), rgba(111, 141, 255, 0)); }
.flow-outputs li {
  display: flex;
  flex-direction: column;
  padding: .55rem .9rem;
  border-radius: 12px;
  border: 1px solid;
  font-weight: 650;
  font-size: .86rem;
  line-height: 1.3;
}
.flow-outputs li small { font-weight: 500; font-size: .74rem; opacity: .85; }
.flow-outputs .out-ok { border-color: rgba(43, 214, 160, .55); background: rgba(21, 155, 114, .16); color: #b7f3dc; }
.flow-outputs .out-bill { border-color: rgba(240, 110, 125, .55); background: rgba(217, 77, 89, .16); color: #ffcdd3; }
.flow-outputs .out-ext { border-color: rgba(160, 140, 255, .5); background: rgba(101, 69, 245, .16); color: #ddd4ff; }
.flow-outputs .out-sup { border-color: rgba(110, 160, 255, .5); background: rgba(54, 119, 245, .16); color: #cfe0ff; }
.flow-outputs .out-amb { border-color: rgba(240, 180, 80, .55); background: rgba(212, 138, 18, .16); color: #ffe2b0; }
.flow-human {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .8rem;
  color: #a9bbd8;
}
.flow-human .ico { color: var(--cyan); }

/* Portada: ocupa la ventana. En escritorio el contenido cabe sin desplazamiento; si la ventana es más baja que el
   contenido (o en móviles), la página se desplaza: nunca se recorta. */
.public-home { background: #071631; }
.public-home .hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.public-home .hero-inner {
  flex: 1 0 auto;
  width: 100%;
  align-content: center;
  padding-top: clamp(var(--space-4), 4vh, var(--space-7));
  padding-bottom: clamp(var(--space-5), 7vh, 4.5rem);
}

/* Vistas informativas y alta: barra oscura de la presentación y contenido sobre fondo claro */
.public-header {
  background:
    radial-gradient(40rem 12rem at 80% 0%, rgba(80, 104, 255, .22), transparent 70%),
    linear-gradient(180deg, #050f24 0%, #071631 100%);
}
.public-section { max-width: 1240px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-7); }
.public-section > h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; margin: var(--space-5) 0 var(--space-2); }
.public-section > .page-intro { margin-bottom: var(--space-6); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.feature {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--c-violet-bg);
  color: var(--violet);
  margin-bottom: var(--space-3);
}
.feature-icon .ico { width: 1.3rem; height: 1.3rem; }
.feature h2 { margin: 0 0 var(--space-2); font-size: 1rem; }
.feature p { margin: 0; color: var(--c-text-muted); font-size: .9rem; }
.process { counter-reset: proc; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.process li { counter-increment: proc; position: relative; padding: var(--space-5) var(--space-5) var(--space-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.process li::before {
  content: counter(proc);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
.process h2 { margin: 0 0 var(--space-2); font-size: .98rem; }
.process p { margin: 0; font-size: .88rem; color: var(--c-text-muted); }

.public-footer { border-top: 1px solid var(--c-border); background: var(--c-surface); }
.public-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
}
.public-footer img { height: 1.6rem; width: auto; display: block; }

/* Enlaces legales de los pies: portada, acceso, alta y vistas informativas */
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); font-size: .82rem; }
.legal-links a { color: var(--c-text-muted); text-decoration: none; }
.legal-links a:hover { color: var(--c-text); text-decoration: underline; }
.legal-links a[aria-current="page"] { color: var(--c-text); text-decoration: underline; }
.legal-links-dark a { color: #9fb0cc; }
.legal-links-dark a:hover { color: #fff; }
.hero-footer { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6) var(--space-4); }
.auth-footer { margin-top: var(--space-5); }
.auth-footer .legal-links { justify-content: center; }

/* Textos legales */
.legal > section, .legal > .legal-draft, .legal > .legal-version { max-width: 50rem; }
.legal-version { margin: 0 0 var(--space-3); color: var(--c-text-muted); font-size: .88rem; }
.legal > section { margin-top: var(--space-5); }
.legal > section h2 { font-size: 1.1rem; margin: 0 0 var(--space-2); scroll-margin-top: var(--space-4); }
.legal > section p, .legal > section li { font-size: .93rem; }
.legal > section .table-wrap { max-width: 100%; }
mark.pendiente {
  background: var(--c-warn-bg);
  color: var(--c-warn);
  border: 1px dashed var(--c-warn-strong);
  border-radius: 4px;
  padding: 0 .3rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Alta de nuevos clientes */
.signup { max-width: 56rem; }
.signup-note { margin: 0 0 var(--space-5); }
.signup fieldset + fieldset { margin-top: var(--space-4); }
.signup .steps li:not(.is-current):not(.is-done) .step-num { border-style: dashed; }
.signup .steps li.is-current.is-done .step-num { background: var(--c-ok-bg); border-color: var(--c-ok-border); color: var(--c-ok); box-shadow: none; }
.field-error { margin: 0; color: var(--c-error); font-size: .8rem; font-weight: 500; }
.signup .field > .hint { margin: 0; }
.signup-terms .field-check { align-items: flex-start; }
.signup-terms .field-check input { margin-top: .2rem; }
.signup-terms > .hint, .signup-terms > .field-error { margin: var(--space-2) 0 0; }
.signup-pending { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.signup-pending li { margin-bottom: var(--space-1); }

/* --- Adaptación a tabletas y móviles ---------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1180px) {
  .public-home .hero h1 { font-size: 2.35rem; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .public-home .public-nav { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .public-home .eyebrow { margin-bottom: var(--space-3); }
  .public-home .hero h1 { margin-bottom: var(--space-3); }
  .public-home .hero-lead { font-size: 1rem; margin-bottom: var(--space-5); }
  .public-home .flow-inputs, .public-home .flow-outputs { gap: var(--space-2); }
  .public-home .flow-inputs li { padding: .65rem .9rem; }
  .public-home .flow-outputs li { padding: .45rem .85rem; }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .public-home .hero-lead { font-size: .95rem; margin-bottom: var(--space-4); }
  .public-home .flow-core { width: 5.25rem; height: 5.25rem; }
  .public-home .flow-core img { width: 2.9rem; }
  .public-home .flow-outputs li { padding: .35rem .8rem; font-size: .82rem; }
  .public-home .flow-outputs li small { font-size: .7rem; }
  .public-home .flow-human { margin-top: var(--space-2); }
}
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns-main { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .appbar { display: flex; }
  .main { margin-left: 0; }
  /* El foco y los destinos de las anclas no quedan bajo la barra superior fija (se suma al scroll-margin-top base). */
  html { scroll-padding-top: 4.75rem; }
  .app #flash { top: 4.25rem; max-height: calc(100vh - 5.25rem); }
  .sidebar {
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    width: min(18.5rem, 86vw);
    box-shadow: var(--shadow-lg);
  }
  .nav-open .sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
  .nav-close { display: inline-grid; }
  .nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(5, 13, 28, .45);
  }
  .page { padding: var(--space-5) var(--space-5) var(--space-6); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns-2 { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-7); }
  .usermenu-panel { bottom: auto; top: calc(100% + .5rem); }
  .sidebar-footer .usermenu-panel { top: auto; bottom: calc(100% + .5rem); }
}

@media (max-width: 640px) {
  body { font-size: .9rem; }
  h1 { font-size: 1.4rem; }
  .page { padding: var(--space-4) var(--space-4) var(--space-6); }
  .page-header { margin-bottom: var(--space-4); }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
  .kpi { padding: var(--space-3) var(--space-4) var(--space-4); }
  .kpi-value { font-size: 1.6rem; }
  .section { padding: var(--space-4); border-radius: var(--radius); }
  .form-panel > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  dl.kv { grid-template-columns: 1fr; gap: 0 var(--space-4); }
  dl.kv dd { margin-bottom: var(--space-2); }
  .steps { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-2); }
  /* Pestañas como fichas que pasan de línea: todas visibles sin desplazamiento oculto. */
  .tabs { flex-wrap: wrap; gap: var(--space-2); border-bottom: none; overflow: visible; }
  .tabs [role="tab"], .tabs a { border: 1px solid var(--c-border); border-radius: 999px; margin-bottom: 0; padding: .4rem .8rem; background: var(--c-surface); }
  .tabs [role="tab"][aria-selected="true"], .tabs a[aria-current="page"] { border-color: var(--c-violet-border); background: var(--c-violet-bg); }
  .bar-row { grid-template-columns: minmax(0, 1fr) 2.5rem; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .activity li { grid-template-columns: auto minmax(0, 1fr); }
  .activity-time { grid-column: 2; }
  .auth-card { padding: var(--space-5) var(--space-4) var(--space-4); }
  .public-nav { flex-wrap: wrap; row-gap: var(--space-3); padding: var(--space-4); }
  .public-links { order: 3; width: 100%; justify-content: space-between; gap: var(--space-2) var(--space-4); }
  .public-links a { font-size: .84rem; }
  .public-footer-inner { padding: var(--space-4); }
  .legal-links { gap: var(--space-2) var(--space-4); }
  .hero-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  /* Tabla de cookies apilada: cada fila como ficha, con el nombre de la columna delante de cada dato */
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border); }
  .legal-table tr:last-child { border-bottom: none; }
  .legal-table td { position: relative; padding: .35rem .85rem .35rem 7.6rem; border-bottom: none; }
  .legal-table td::before { content: attr(data-label); position: absolute; left: .85rem; width: 6.2rem; font-weight: 600; color: var(--c-text-muted); }
  .hero-inner, .public-section { padding-left: var(--space-4); padding-right: var(--space-4); }
  .public-section > h1 { font-size: 1.55rem; }
  .flow { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: var(--space-4); }
  .flow-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
  .flow-inputs li { padding: .65rem .8rem; font-size: .88rem; }
  .flow-core { justify-self: center; width: 5rem; height: 5rem; }
  .flow-core::before, .flow-core::after { display: none; }
  .flow-outputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
  .flow-outputs li:last-child { grid-column: 1 / -1; }
  .features, .process { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .sidebar, .appbar, .subnav, .form-panel, .btn, #flash, .nav-backdrop { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; }
  .section { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}