/* ============================================================
   SIT Service — Sistema de diseño
   Basado en el BrandBook de SIT Distribuidora (Media Dream, ago 2021).

   Paleta oficial:
     AZUL     Pantone 2388 C — #005DD6 — marca, acciones, navegación
     CELESTE  Pantone  306 C — #00AEFF — acentos, destacados, degradados

   Los colores de estado (verde/amarillo/rojo) NO son de marca: comunican
   situación (completado / espera / alerta) y por eso se mantienen aparte.
   ============================================================ */

/* Tipografía.

   El BrandBook define DIN Pro como familia institucional, pero su licencia
   es comercial y las licencias de escritorio no cubren el uso como fuente
   web. Se usa Barlow, una grotesca libre (SIL Open Font License) de
   proporciones y remates muy parecidos, servida desde el propio servidor
   para no depender de Google ni de la conexión de cada tienda.

   Si algún día se adquiere la licencia web de DIN Pro, basta con reemplazar
   estos bloques y el valor de --fuente-base: nada más de la identidad
   (colores, logotipo, composición) depende de la tipografía.

   Solo se incluyen los subconjuntos latin y latin-ext, que cubren el
   español completo: 84 KB en total. */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-500-latin.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-500-latin-ext.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-700-latin.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-700-latin-ext.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- Paleta de marca ---- */
  --sit-azul: #005DD6;        /* color institucional principal */
  --sit-celeste: #00AEFF;     /* color institucional secundario */

  /* Escala derivada del azul institucional, para fondos y estados */
  --azul-950: #001736;
  --azul-900: #00234F;
  --azul-800: #003077;
  --azul-700: #00419E;
  --azul-600: #004FBE;
  --azul-500: #005DD6;
  --azul-400: #2E7FE2;
  --azul-300: #6BA6ED;
  --azul-200: #AFCFF7;
  --azul-100: #DCEAFC;
  --azul-050: #EEF5FE;

  --celeste-600: #0089CC;
  --celeste-500: #00AEFF;
  --celeste-200: #A8E3FF;
  --celeste-100: #DCF3FF;

  /* Alias de uso (el resto de la hoja se escribe contra estos) */
  --brand-ink: var(--azul-900);       /* textos y fondos de marca oscuros */
  --brand-primary: var(--sit-azul);   /* botones y elementos activos */
  --brand-primary-hover: var(--azul-700);
  --brand-tint: var(--azul-050);      /* fondo suave de marca */
  --brand-tint-strong: var(--azul-100);
  --brand-gradient: linear-gradient(135deg, var(--sit-azul) 0%, var(--sit-celeste) 100%);

  /* Nombres heredados de la versión anterior, ahora apuntando a la marca,
     para que ningún componente quede con el azul genérico de antes. */
  --navy-900: var(--azul-900);
  --navy-800: var(--azul-800);
  --navy-700: var(--azul-700);
  --navy-600: var(--azul-600);
  --navy-accent: var(--sit-azul);
  --navy-accent-hover: var(--azul-700);
  --navy-accent-tint: var(--azul-050);

  /* ---- Superficies ---- */
  --bg-page: #F3F6FA;
  --bg-card: #ffffff;
  --bg-card-alt: #F7FAFD;
  --bg-sidebar: #ffffff;
  --border-hairline: rgba(0, 35, 79, 0.10);
  --border-hairline-strong: rgba(0, 35, 79, 0.17);
  --shadow-card: 0 1px 2px rgba(0, 35, 79, 0.07), 0 1px 1px rgba(0, 35, 79, 0.04);
  --shadow-pop: 0 10px 30px rgba(0, 35, 79, 0.16);

  /* ---- Texto ---- */
  --ink-primary: #0C1A2B;
  --ink-secondary: #4D5B6E;
  --ink-muted: #7E8C9E;
  --ink-inverse: #F3F8FF;

  /* ---- Estados (no son colores de marca) ---- */
  --status-good-fg: #0d7a2f;
  --status-good-bg: #e5f6ea;
  --status-good-solid: #0ca30c;

  --status-warning-fg: #8a5a06;
  --status-warning-bg: #fdf1dc;
  --status-warning-solid: #eda100;

  --status-critical-fg: #b0271f;
  --status-critical-bg: #fbe9e7;
  --status-critical-solid: #d03b3b;

  /* "Información" sí usa el azul institucional */
  --status-info-fg: var(--azul-700);
  --status-info-bg: var(--azul-050);
  --status-info-solid: var(--sit-azul);

  --status-neutral-fg: #4b5563;
  --status-neutral-bg: #ECF0F5;
  --status-neutral-solid: #7E8C9E;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --sidebar-w: 248px;
  --topbar-h: 64px;

  --fuente-base: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--fuente-base);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Layout shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-w);
}
.content {
  padding: 24px 28px 48px;
  max-width: 1400px;
  width: 100%;
}

/* ---------- Sidebar ---------- */
/* El BrandBook define el logotipo sobre fondo blanco como uso principal,
   así que la barra lateral es blanca y el logo aparece tal cual, sin
   recolorear ni recortar. La marca se refuerza con el filete celeste. */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-hairline);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.sidebar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-hairline);
}
.sidebar-brand .logo {
  width: 150px; height: auto; display: block;
}
.sidebar-brand .sub {
  font-size: 10.5px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  margin-top: 6px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px; }
.sidebar-section { margin-top: 14px; }
.sidebar-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted); padding: 6px 10px 4px;
  font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, color .12s ease;
  margin-bottom: 2px;
  position: relative;
}
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
.nav-item:hover { background: var(--brand-tint); color: var(--brand-primary); }
.nav-item:hover .ico { opacity: 1; }
.nav-item.active {
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 93, 214, 0.28);
}
.nav-item.active .ico { opacity: 1; }
.nav-item .badge-count {
  margin-left: auto;
  background: var(--brand-tint-strong);
  color: var(--brand-primary-hover);
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}
.nav-item.active .badge-count { background: rgba(255,255,255,0.26); color: #fff; }

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-hairline);
}

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-hairline);
  display: flex; align-items: center;
  padding: 0 28px;
  gap: 16px;
  position: sticky; top: 0; z-index: 10;
}
.topbar .page-title { font-size: 18px; font-weight: 700; }
.topbar .breadcrumb { font-size: 12px; color: var(--ink-muted); }
.topbar-search {
  flex: 1; max-width: 380px; margin-left: 12px;
}
.topbar-search input {
  width: 100%; border: 1px solid var(--border-hairline-strong);
  background: var(--bg-card-alt); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; color: var(--ink-primary);
}
.topbar-search input:focus { outline: 2px solid var(--navy-accent); outline-offset: -1px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--bg-card-alt); font-size: 12.5px; font-weight: 600;
}
.topbar-user .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy-700); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--navy-accent); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--navy-accent-hover); }
.btn-secondary { background: var(--bg-card); color: var(--ink-primary); border-color: var(--border-hairline-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-card-alt); }
.btn-ghost { background: transparent; color: var(--ink-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-card-alt); color: var(--ink-primary); }
.btn-danger { background: var(--status-critical-solid); color: white; }
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; }
.btn .ico { width: 15px; height: 15px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 18px 20px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-hairline);
}
.card-header h3 { font-size: 14.5px; }
.card-header .hint { font-size: 12px; color: var(--ink-muted); font-weight: 500; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: 16px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4{margin-top:4px;} .mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.w-full { width: 100%; }

/* ---------- Typography helpers ---------- */
.text-xs { font-size: 11.5px; }
.text-sm { font-size: 12.5px; }
.text-muted { color: var(--ink-muted); }
.text-secondary { color: var(--ink-secondary); }
.font-semibold { font-weight: 650; }
.font-bold { font-weight: 750; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Stat tiles ---------- */
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.stat-tile .label { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.stat-tile .value { font-size: 26px; font-weight: 750; margin-top: 6px; letter-spacing: -0.02em; }
.stat-tile .delta { font-size: 11.5px; margin-top: 6px; font-weight: 650; display: flex; align-items: center; gap: 4px; }
.stat-tile .delta.up { color: var(--status-good-fg); }
.stat-tile .delta.down { color: var(--status-critical-fg); }
.stat-tile .icon-badge {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

/* ---------- Badges / status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip-good { background: var(--status-good-bg); color: var(--status-good-fg); }
.chip-good .dot { background: var(--status-good-solid); }
.chip-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.chip-warning .dot { background: var(--status-warning-solid); }
.chip-critical { background: var(--status-critical-bg); color: var(--status-critical-fg); }
.chip-critical .dot { background: var(--status-critical-solid); }
.chip-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.chip-info .dot { background: var(--status-info-solid); }
.chip-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.chip-neutral .dot { background: var(--status-neutral-solid); }

/* ---------- Tables ---------- */
.data-table { font-size: 13px; }
.data-table thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--border-hairline); background: var(--bg-card-alt);
  position: sticky; top: 0;
}
.data-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.data-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-hairline); vertical-align: middle; }
.data-table tbody tr { cursor: pointer; transition: background .1s ease; }
.data-table tbody tr:hover { background: var(--bg-card-alt); }
.data-table tbody tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 650; color: var(--ink-secondary); }
.field .req { color: var(--status-critical-solid); }
.field input[type=text], .field input[type=tel], .field input[type=email],
.field input[type=date], .field input[type=number], .field select, .field textarea {
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 13.5px; color: var(--ink-primary);
  background: var(--bg-card); font-family: inherit;
}
.field textarea { resize: vertical; min-height: 72px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--navy-accent); outline-offset: -1px; border-color: transparent;
}
.field .help { font-size: 11.5px; color: var(--ink-muted); }
.field .error { font-size: 11.5px; color: var(--status-critical-fg); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--status-critical-solid);
}
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }
.checkbox-row input { margin-top: 3px; }

/* ---------- Wizard ---------- */
.wizard-steps { display: flex; align-items: center; margin-bottom: 22px; }
.wizard-step { display: flex; align-items: center; gap: 10px; flex: 1; }
.wizard-step .circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 750;
  background: var(--bg-card-alt); color: var(--ink-muted);
  border: 2px solid var(--border-hairline-strong); flex-shrink: 0;
}
.wizard-step.done .circle { background: var(--status-good-solid); border-color: var(--status-good-solid); color: white; }
.wizard-step.active .circle { background: var(--navy-accent); border-color: var(--navy-accent); color: white; }
.wizard-step .label { font-size: 12.5px; font-weight: 650; color: var(--ink-muted); }
.wizard-step.active .label, .wizard-step.done .label { color: var(--ink-primary); }
.wizard-step .connector { flex: 1; height: 2px; background: var(--border-hairline-strong); margin: 0 8px; }
.wizard-step.done .connector { background: var(--status-good-solid); }

/* ---------- Kanban ---------- */
.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-col {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  width: 268px; flex-shrink: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 190px);
}
.kanban-col-header {
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-hairline);
}
.kanban-col-header .title { font-size: 12.5px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.kanban-col-header .dot { width: 8px; height: 8px; border-radius: 50%; }
.kanban-col-header .count {
  font-size: 11px; font-weight: 700; color: var(--ink-muted);
  background: var(--bg-card); border-radius: 999px; padding: 1px 8px;
}
.kanban-col-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kanban-card {
  background: var(--bg-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); padding: 11px 12px; cursor: grab;
  box-shadow: var(--shadow-card);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .5; }
.kanban-col.drop-target { outline: 2px dashed var(--navy-accent); outline-offset: -2px; }
.kanban-card .order-no { font-size: 11px; font-weight: 750; color: var(--navy-accent); }
.kanban-card .device { font-size: 13px; font-weight: 650; margin-top: 3px; }
.kanban-card .client { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.kanban-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.kanban-card .tech-avatar {
  width: 20px; height: 20px; border-radius: 50%; background: var(--navy-700); color: white;
  font-size: 9px; font-weight: 750; display: flex; align-items: center; justify-content: center;
}

/* ---------- Empty / misc ---------- */
.empty-state { text-align: center; padding: 48px 20px; color: var(--ink-muted); }
.empty-state .ico { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .5; }
.divider { height: 1px; background: var(--border-hairline); margin: 16px 0; }
.hr-hairline { border: none; border-top: 1px solid var(--border-hairline); }

/* Simple CSS bar chart (sin librerías) */
.barchart { display: flex; flex-direction: column; gap: 10px; }
.barchart-row { display: grid; grid-template-columns: 120px 1fr 42px; align-items: center; gap: 10px; }
.barchart-row .name { font-size: 12px; color: var(--ink-secondary); font-weight: 600; text-align: right; }
.barchart-track { background: var(--bg-card-alt); border-radius: 6px; height: 12px; overflow: hidden; }
.barchart-fill { height: 100%; border-radius: 6px; background: var(--navy-accent); }
.barchart-row .val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Timeline / history */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--border-hairline-strong); }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -22px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--navy-accent); border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--border-hairline-strong);
}
.timeline-item .t-title { font-size: 13px; font-weight: 650; }
.timeline-item .t-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.timeline-item .t-note { font-size: 12.5px; color: var(--ink-secondary); margin-top: 4px; }

/* Toasts */
.toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--navy-900); color: white; padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop);
  animation: toast-in .18s ease;
}
.toast.error { background: var(--status-critical-solid); }
.toast.success { background: var(--status-good-solid); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(11,20,34,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px;
}
.modal {
  background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border-hairline); display: flex; justify-content: flex-end; gap: 10px; }

/* Responsive */
@media (max-width: 980px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  .sidebar.open { transform: translateX(0); width: 248px; }
  .main-col { margin-left: 0; }
  .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
}

/* ---------- Pantallas de acceso (login y portal del cliente) ----------
   Son la cara visible de la marca: fondo con el degradado institucional
   azul → celeste y el logotipo oficial sobre la tarjeta blanca. */
.auth-screen {
  /* Se monta dentro de #app, que es flex: sin flex:1 y width:100% el
     degradado no cubriría todo el ancho y la tarjeta quedaría descentrada. */
  flex: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px;
  background: var(--brand-gradient);
}
.auth-card {
  max-width: 420px; width: 100%;
  box-shadow: 0 18px 50px rgba(0, 35, 79, 0.25);
  border: none;
}
.auth-logo {
  width: 180px; height: auto;
  display: block; margin: 0 auto 16px;
}
.auth-pie {
  margin-top: 18px; text-align: center;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,0.85);
}

/* El portal del cliente se monta sin el shell de la app: su contenedor
   recibe el mismo tratamiento de marca en la cabecera. */
.portal-shell {
  flex: 1; width: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-page);
}
.portal-detalle {
  max-width: 720px; width: 100%;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.portal-header {
  background: var(--brand-gradient);
  color: #fff;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* El logotipo va sobre una placa blanca: el BrandBook reserva el fondo blanco
   para el uso principal, y sobre el degradado azul el logo en su color
   institucional no tendría contraste suficiente. */
.portal-header .placa {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  display: inline-flex;
  box-shadow: 0 2px 10px rgba(0, 35, 79, 0.18);
}
.portal-header .logo { width: 140px; height: auto; display: block; }
.portal-header .lema {
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: rgba(255,255,255,0.92);
}

@media (max-width: 560px) {
  .auth-logo { width: 150px; }
  .portal-header { padding: 18px; }
}