/* ============================================================
   PORTAL PANANDINA · APD — SISTEMA DE DISEÑO UNIFICADO
   Un solo CSS para los tres mundos:
     · Portal de documentos (staff + proveedor)
     · Panel de comercial (licitaciones)
     · Panel del postulante (público)
   Reemplaza tanto el portal.css actual como el <style> embebido
   de licitaciones/base_pub.html. Todo se construye sobre tokens.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* — Marca / superficies — */
  --navy: #191931;
  --navy-2: #2A2A4D;
  --navy-line: #26263F;
  --sky: #9FD3F4;
  --sky-soft: #EAF4FC;
  --cream: #F3EFE5;
  --cream-soft: #F8F5EC;
  --cream-hover: #FBF9F1;
  --cream-line: #EFEBDF;
  --cream-ink: #7A7461;

  /* — Texto — */
  --ink: #1B2138;
  --muted: #6A7286;
  --faint: #8B93A6;

  /* — Líneas y fondos — */
  --line: #E2E6EC;
  --line-soft: #F2F4F8;
  --input-line: #D8DDE6;
  --bg: #F4F6F8;
  --card: #FFFFFF;

  /* — Estado (UN solo set para los tres mundos) — */
  --ok: #1E7A52;   --ok-soft: #E2F3EB;
  --warn: #8F5A0E; --warn-soft: #FAF0DC;
  --bad: #A83232;  --bad-soft: #FBEAEA;
  --info: #2B6CA3; --info-soft: #EAF4FC;

  /* — Tipografía — */
  --font: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-h1: 22px;   --fs-h2: 16px;   --fs-h3: 14.5px;
  --fs-body: 14.5px; --fs-sm: 13px; --fs-xs: 11.5px;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;

  /* — Escala de espaciado (4-base, consistente) — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 26px; --sp-7: 32px; --sp-8: 48px;

  /* — Radios — */
  --r-sm: 8px;    /* chips, inputs sm */
  --r: 9px;       /* botones, inputs */
  --r-md: 12px;   /* iconos, badges grandes */
  --r-lg: 14px;   /* cards, paneles */
  --r-xl: 16px;   /* login box */
  --r-pill: 999px;

  /* — Sombras — */
  --sh-1: 0 8px 18px rgba(25, 25, 49, 0.08);   /* hover de card */
  --sh-2: 0 10px 30px rgba(25, 25, 49, 0.06);  /* login / modal */
  --sh-pop: 0 8px 30px rgba(0, 0, 0, 0.18);    /* toasts, popovers */

  /* — Layout — */
  --content-w: 1060px;   /* ancho de contenido ÚNICO en todos los mundos */
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--fs-body)/1.5 var(--font);
}
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.empty { color: var(--faint); font-style: italic; }
.subtext { font-size: 12px; color: var(--faint); margin-top: 3px; font-weight: var(--fw-reg); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
::placeholder { color: #9AA3B5; }

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   2. ENCABEZADOS  (h1/h2/h3 AHORA SÍ definidos los tres)
   ============================================================ */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); color: var(--navy); margin: 0 0 3px; line-height: 1.2; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--navy); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--navy); margin: 0 0 var(--sp-3); }
h4 { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase;
     color: var(--cream-ink); margin: var(--sp-4) 0 var(--sp-2); }

.page-head { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head .grow { flex: 1; min-width: 240px; }
.page-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.back-link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.back-link:hover { color: var(--info); text-decoration: none; }

/* ============================================================
   3. SHELL AUTENTICADO (sidebar + topbar)  — staff, vendor, comercial
   ============================================================ */
.shell { display: flex; height: 100vh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--navy);
           display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-3); }
.sidebar .brand { display: flex; align-items: center; gap: 10px;
  padding: 2px 8px 18px; border-bottom: 1px solid var(--navy-line); margin-bottom: var(--sp-3); }
.sidebar .brand img, .sidebar .brand .brand-logo { width: 34px; height: 34px; border-radius: var(--r); display: block; }
.sidebar .brand b { display: block; color: var(--cream); font-size: 15px; font-weight: var(--fw-black); line-height: 1.2; }
.sidebar .brand small { display: block; color: var(--sky); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.09em; }

.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--r); color: #A9B2CC; font-size: 14px; font-weight: var(--fw-semi);
  transition: background 0.15s, color 0.15s; }
.sidebar nav a:hover { background: rgba(159, 211, 244, 0.18); text-decoration: none; }
.sidebar nav a.active { background: var(--sky); color: var(--navy); }
.sidebar nav a svg { flex-shrink: 0; }
.sidebar nav a .badge { margin-left: auto; }

.sidebar .logout { margin-top: auto; border-top: 1px solid var(--navy-line); padding-top: var(--sp-3); }
.sidebar .logout form { margin: 0; }
.sidebar .logout button { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: none; border-radius: var(--r); background: none;
  color: #A9B2CC; font: inherit; font-size: 14px; font-weight: var(--fw-semi); cursor: pointer;
  transition: background 0.15s, color 0.15s; }
.sidebar .logout button:hover { background: rgba(168, 50, 50, 0.25); color: var(--cream); }
.sidebar .logout a { display: block; font-size: 12px; margin-bottom: 6px; color: #A9B2CC; }

.main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 58px; flex-shrink: 0; background: var(--card); border-bottom: 1px solid #E7EAF0;
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 30px; }
.topbar .title { font-size: 15.5px; font-weight: var(--fw-bold); color: var(--navy); }
.user-chip { margin-left: auto; display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.user-chip .avatar { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--sky); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: var(--fw-black); }
.user-chip .name { font-size: 13px; font-weight: var(--fw-bold); }
.user-chip small { display: block; color: var(--muted); font-size: 11.5px; }

main.content { flex: 1; overflow-y: auto; }
main.content > .inner { max-width: var(--content-w); margin: 0 auto; padding: 28px 32px 56px; animation: fadeUp 0.35s ease both; }

/* ============================================================
   4. TOPBAR PÚBLICO  — postulante (reemplaza .topbar embebido de base_pub)
   Mismo navy, mismos tokens; layout de marca + nav.
   ============================================================ */
.pub-shell { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.pub-topbar { background: var(--navy); display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 clamp(16px, 4vw, 40px); height: 60px; }
.pub-topbar .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.pub-topbar .brand .brand-logo { width: 32px; height: 32px; border-radius: var(--r); }
.pub-topbar .brand .brand-logo svg { width: 22px; height: 22px; }  /* px fijo: blinda el logo público contra el bug del SVG sin dimensiones en contexto flex */
.pub-topbar .brand b { color: var(--cream); font-weight: var(--fw-black); font-size: 15px; }
.pub-topbar .brand small { display: block; color: var(--sky); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.pub-topbar nav { display: flex; align-items: center; gap: var(--sp-1); }
.pub-topbar nav a, .pub-topbar nav button { color: #CFE6F8; font-size: 13px; font-weight: var(--fw-semi);
  padding: 8px 12px; border-radius: var(--r-sm); background: none; border: 0; font-family: inherit; cursor: pointer; }
.pub-topbar nav a:hover, .pub-topbar nav button:hover { background: rgba(159,211,244,0.16); text-decoration: none; }
.pub-topbar nav a.active { background: var(--sky); color: var(--navy); }
.pub-main { flex: 1; }
.pub-main > .inner { max-width: var(--content-w); margin: 0 auto; padding: 28px clamp(16px,4vw,40px) 56px; animation: fadeUp 0.35s ease both; }

/* ============================================================
   5. KPIs
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.kpi { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 18px 16px; color: inherit; transition: transform 0.18s, box-shadow 0.18s; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-1); text-decoration: none; }
.kpi .label { display: block; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.09em; color: var(--muted); }
.kpi .num { display: block; font-size: 30px; font-weight: var(--fw-black); color: var(--navy); margin: 4px 0 2px; }
.kpi .hint { display: block; font-size: 12.5px; color: var(--muted); }
.kpi.navy { background: var(--navy); border-color: var(--navy); }
.kpi.navy:hover { box-shadow: 0 10px 22px rgba(25, 25, 49, 0.25); }
.kpi.navy .label { color: var(--sky); } .kpi.navy .num { color: var(--cream); } .kpi.navy .hint { color: #A9B2CC; }
.kpi .label.ok { color: var(--ok); } .kpi .label.warn { color: var(--warn); } .kpi .label.bad { color: var(--bad); }

/* ============================================================
   6. PANELES, CARDS Y TABLAS
   ============================================================ */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-6); }
.panel-head { padding: 15px 20px; border-bottom: 1px solid #EDF0F4;
  display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: var(--fw-bold); }
.panel-head small { font-weight: var(--fw-reg); color: var(--muted); font-size: 12.5px; }
.panel-head .right { margin-left: auto; font-size: 13px; font-weight: var(--fw-semi); }
.panel-body { padding: 20px; }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.card.narrow { max-width: 560px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); }
table.standalone { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
th { text-align: left; padding: 9px 20px; background: var(--cream-soft);
  border-bottom: 1px solid var(--cream-line); font-size: 11.5px; font-weight: var(--fw-bold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-ink); }
td { padding: 13px 20px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td, table tr:hover td { background: var(--cream-hover); transition: background 0.12s; }
td .row-arrow { color: #B6BDCC; font-size: 16px; }
td strong { font-weight: var(--fw-semi); font-size: 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   7. PILLS, BADGES, TAGS  (set semántico ÚNICO)
   ============================================================ */
.pill { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--fw-bold); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.mute { background: #EDF0F4; color: var(--muted); }
/* punto de estado opcional dentro del pill */
.pill .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }

.badge { background: var(--sky); color: var(--navy); border-radius: var(--r-pill); padding: 1px 7px; font-size: 11px; font-weight: var(--fw-bold); }
.tag { display: inline-block; background: var(--sky-soft); color: var(--info);
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.08em; padding: 4px 10px;
  border-radius: var(--r-pill); margin-bottom: var(--sp-3); }

/* ============================================================
   8. BOTONES  — 4 ROLES, no 8. Reglas de uso:
      .btn            → PRIMARIO (navy). UNA acción principal por pantalla.
      .btn.outline    → SECUNDARIO (blanco con borde). Acciones de apoyo.
      .btn.danger     → PELIGRO (outline rojo). Acciones destructivas/irreversibles.
      .btn.ghost      → ENLACE/terciario. Back-links, editar, cancelar, "eliminar".
      Modificadores: .sm (compacto)  .block (ancho completo)  [disabled]
      (Se eliminan .btn.sky y .btn.ok como variantes de color.)
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: var(--r);
  padding: 9px 18px; font: inherit; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s; text-align: center; }
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(159, 211, 244, 0.55); }

.btn.outline { background: var(--card); color: var(--ink); border-color: var(--input-line); font-weight: var(--fw-semi); }
.btn.outline:hover { border-color: var(--sky); background: #F8FBFE; }

.btn.danger { background: var(--card); color: var(--bad); border-color: #ECC9C9; font-weight: var(--fw-semi); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }

.btn.ghost { background: none; color: var(--muted); border-color: transparent; font-weight: var(--fw-semi); padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover { background: var(--line-soft); color: var(--ink); transform: none; }
.btn.ghost.danger { color: var(--bad); }
.btn.ghost.danger:hover { background: var(--bad-soft); }

.btn.sm { padding: 7px 14px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.block { display: flex; width: 100%; padding: 13px; font-size: 14.5px; border-radius: var(--r); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.link-cancel { color: var(--muted); font-size: 13.5px; font-weight: var(--fw-semi); }
.link-cancel:hover { color: var(--ink); text-decoration: none; }

/* ============================================================
   9. FORMULARIOS Y CAMPOS  (con agrupación por secciones)
   ============================================================ */
form.stacked p, .field { margin: 0 0 var(--sp-4); }
form.stacked label, .field > label, .field-label { display: block; font-weight: var(--fw-semi); font-size: 13px; margin-bottom: 6px; }
form.stacked input:not([type="checkbox"]):not([type="radio"]),
form.stacked select, form.stacked textarea,
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; max-width: 100%; padding: 11px 13px; border: 1px solid var(--input-line);
  border-radius: var(--r); font: inherit; font-size: 14px; background: #fff; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s; color: var(--ink); }
form.stacked input:focus, form.stacked select:focus, form.stacked textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--sky); box-shadow: 0 0 0 3px rgba(159, 211, 244, 0.35); }
form.stacked input:disabled, .field input:disabled, form.stacked select:disabled {
  background: var(--line-soft); color: var(--muted); cursor: not-allowed; }
form.stacked input[type="checkbox"], form.stacked input[type="radio"] { width: 16px; height: 16px; accent-color: var(--navy); }
form.stacked .helptext, .field .helptext, .helptext {
  display: block; color: var(--faint); font-size: 12px; margin-top: 4px; line-height: 1.45; }

/* Agrupación de un formulario largo en secciones legibles */
.form-section { border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.form-section > .sec-title { font-size: 13px; font-weight: var(--fw-bold); color: var(--navy); margin: 0 0 2px; }
.form-section > .sec-desc { font-size: 12.5px; color: var(--muted); margin: 0 0 var(--sp-4); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.field-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }

.search-form { display: flex; gap: var(--sp-2); align-items: center; }
.search-form input[type="search"] { width: 300px; max-width: 100%; padding: 10px 13px;
  border: 1px solid var(--input-line); border-radius: var(--r); font: inherit; font-size: 13.5px;
  background: #fff; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.search-form input[type="search"]:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(159, 211, 244, 0.35); }

.filters { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.filters .field { margin: 0; }
.filters select, .filters input { min-width: 180px; }

/* Decisión inline (aprobar / rechazar / observación) */
form.decide { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0; }
form.decide input[type="text"] { width: 210px; padding: 8px 11px; border: 1px solid var(--input-line);
  border-radius: var(--r-sm); font: inherit; font-size: 12.5px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
form.decide input[type="text"]:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(159, 211, 244, 0.35); }

ul.errorlist { color: var(--bad); padding-left: 1.1rem; font-size: 13px; margin: 4px 0 0; list-style: none; }
ul.errorlist li::before { content: "⚠ "; }

/* ============================================================
   10. SELECTOR DE TIPO DE CAMPO  (claridad: qué hace cada tipo)
   Tarjetas radio con icono + ejemplo. Reemplaza el <select> de 9 opciones.
   ============================================================ */
.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.type-opt { position: relative; }
.type-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.type-opt label { display: block; height: 100%; border: 1px solid var(--input-line); border-radius: var(--r-md);
  padding: 12px 13px; cursor: pointer; transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; background: #fff; }
.type-opt label:hover { border-color: var(--sky); background: #F8FBFE; }
.type-opt input:checked + label { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--sky-soft); }
.type-opt input:focus-visible + label { box-shadow: 0 0 0 3px rgba(159, 211, 244, 0.55); }
.type-opt .t-name { display: flex; align-items: center; gap: 7px; font-weight: var(--fw-bold); font-size: 13px; color: var(--navy); }
.type-opt .t-ex { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.type-opt .t-ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--info); }

/* ============================================================
   11. LÍNEA DE TIEMPO DE ESTADO  (con paso actual + conector + fechas)
   Sustituye ol.timeline embebido; sirve a postulante y comercial.
   ============================================================ */
ol.timeline { list-style: none; display: flex; gap: 0; margin: var(--sp-2) 0 0; padding: 0; }
ol.timeline li { flex: 1; min-width: 0; position: relative; padding-top: 26px; text-align: center;
  font-size: 12.5px; font-weight: var(--fw-semi); color: var(--faint); }
ol.timeline li::before { content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px;
  transform: translateX(-50%); border-radius: 50%; background: #fff; border: 2px solid var(--line); z-index: 1; }
ol.timeline li::after { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
ol.timeline li:first-child::after { display: none; }
ol.timeline li .t-date { display: block; font-size: 11px; font-weight: var(--fw-reg); color: var(--faint); margin-top: 2px; }
/* completado */
ol.timeline li.done { color: var(--navy); }
ol.timeline li.done::before { background: var(--navy); border-color: var(--navy); }
ol.timeline li.done::after { background: var(--navy); }
/* paso actual (resaltado sky) */
ol.timeline li.current { color: var(--navy); font-weight: var(--fw-bold); }
ol.timeline li.current::before { background: var(--sky); border-color: var(--navy); width: 16px; height: 16px; top: 5px;
  box-shadow: 0 0 0 4px rgba(159,211,244,0.45); }
/* resultado negativo */
ol.timeline li.bad { color: var(--bad); }
ol.timeline li.bad::before { background: var(--bad); border-color: var(--bad); }
ol.timeline li.bad::after { background: var(--navy); }

/* Cronograma vertical (fechas con guía visual) — reemplaza los <ul> con viñetas */
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li { display: flex; align-items: baseline; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.schedule li:last-child { border-bottom: none; }
.schedule .s-label { flex: 1; color: var(--muted); font-size: 13.5px; }
.schedule .s-date { font-weight: var(--fw-bold); color: var(--ink); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.schedule li.key .s-label { color: var(--ink); font-weight: var(--fw-semi); }
.schedule li.key .s-date { color: var(--bad); }

/* Lista de requisitos / definición (sin viñetas del navegador) */
.req-list { list-style: none; margin: 0; padding: 0; }
.req-list li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: var(--sp-3); align-items: flex-start; }
.req-list li:last-child { border-bottom: none; }
.req-list .r-main { flex: 1; }
.req-list .r-title { font-weight: var(--fw-semi); font-size: 14px; }
.req-list .r-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.req-list .r-actions { display: flex; gap: var(--sp-1); align-items: center; flex-shrink: 0; }

/* ============================================================
   12. ESTADOS VACÍOS  (con guía, no solo "no hay nada")
   ============================================================ */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--muted); }
.empty-state .es-ico { width: 44px; height: 44px; margin: 0 auto var(--sp-3); border-radius: var(--r-md);
  background: var(--sky-soft); color: var(--info); display: flex; align-items: center; justify-content: center; }
.empty-state .es-title { font-size: 15px; font-weight: var(--fw-bold); color: var(--navy); margin-bottom: 4px; }
.empty-state .es-desc { font-size: 13.5px; max-width: 380px; margin: 0 auto var(--sp-4); line-height: 1.55; }

/* ============================================================
   13. MENSAJES (django messages)
   ============================================================ */
ul.messages { list-style: none; padding: 0; margin: 0 0 18px; }
ul.messages li { padding: 11px 16px; border-radius: var(--r); margin-bottom: 8px; font-size: 13.5px; font-weight: var(--fw-semi); animation: fadeUp 0.3s ease both; }
ul.messages li.success { background: var(--ok-soft); color: var(--ok); }
ul.messages li.error { background: var(--bad-soft); color: var(--bad); }
ul.messages li.warning { background: var(--warn-soft); color: var(--warn); }
ul.messages li.info { background: var(--info-soft); color: var(--info); }

/* Aviso destacado (p. ej. propuestas selladas, acción irreversible) */
.callout { display: flex; gap: var(--sp-3); padding: 14px 16px; border-radius: var(--r); font-size: 13px; line-height: 1.5; }
.callout.info { background: var(--info-soft); color: var(--info); }
.callout.warn { background: var(--warn-soft); color: var(--warn); }
.callout .c-ico { flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   14. LAYOUT DE ACCESO (no autenticado)
   ============================================================ */
.auth { display: flex; min-height: 100vh; }
.auth-brand { width: 42%; min-width: 360px; background: var(--navy);
  display: flex; flex-direction: column; justify-content: space-between; padding: 48px 52px; overflow: hidden; }
.auth-brand .lockup { display: flex; align-items: center; gap: 12px; }
.auth-brand .lockup img, .auth-brand .lockup .brand-logo { width: 42px; height: 42px; border-radius: var(--r-md); }
.auth-brand .lockup b { display: block; color: var(--cream); font-size: 19px; font-weight: var(--fw-black); }
.auth-brand .lockup small { display: block; color: var(--sky); font-size: 12px; font-weight: var(--fw-semi); letter-spacing: 0.06em; }
.auth-brand .pitch { color: #A9B2CC; font-size: 15px; max-width: 360px; margin-top: 28px; line-height: 1.65; }
.auth-brand .figure { width: 75%; max-width: 340px; align-self: center; margin: 20px 0; animation: fadeUp 0.6s ease both; }
.auth-brand .foot { color: #565F7C; font-size: 12px; }
.auth-main { flex: 1; background: #F5F2E9; display: flex; align-items: center; justify-content: center; padding: 32px; overflow-y: auto; }
.login-box { width: 400px; max-width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 34px 34px 26px; box-shadow: var(--sh-2); animation: fadeUp 0.35s ease both; margin: 0; }
.login-box h1 { font-size: 21px; margin-bottom: 6px; }
.login-box .lead { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }
.login-box .links { border-top: 1px solid #EDF0F4; margin-top: 22px; padding-top: 16px;
  display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.login-box .links a.quiet { color: var(--muted); }
.login-box .links a.quiet:hover { color: var(--info); }

/* Logo del personaje Panandina (vectorial).
   OJO: el <svg> del logo solo trae viewBox, NO trae width/height propios. Por eso el
   tamaño SIEMPRE debe salir del cuadro (.brand-logo) y el svg jamás debe poder desbordarlo.
   En el mundo autenticado (base.html) hay un <style> de respaldo; en el público
   (base_pub.html, elegir_modulo.html) no, así que el control debe estar completo aquí:
   tamaño por defecto definido + tope al 100% + recorte de seguridad. */
.brand-logo, .lockup-logo { width: 32px; height: 32px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); border-radius: var(--r-md); }
.brand-logo svg, .lockup-logo svg { width: 72%; height: 72%; max-width: 100%; max-height: 100%;
  display: block; flex: none; }

/* ============================================================
   15. UTILIDADES
   ============================================================ */
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.stack-sm > * + * { margin-top: var(--sp-2); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .shell { flex-direction: column; height: auto; min-height: 100vh; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .sidebar .brand { border-bottom: none; padding: 0; margin: 0 10px 0 0; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .logout { margin: 0 0 0 auto; border-top: none; padding-top: 0; }
  .main-col { overflow: visible; }
  main.content > .inner { padding: 20px 16px 40px; }
  .auth { flex-direction: column; }
  .auth-brand { width: 100%; min-width: 0; padding: 28px; }
  .auth-brand .figure { display: none; }
  .field-grid { grid-template-columns: 1fr; }
}