/* ── Paleta HUD (mismo estilo que informe-mesa) ────────────────────────── */
:root {
  /* Etiquetas del asistente sobre los elementos de la pantalla. */
  --etiqueta-bg: #fbbf24;
  --etiqueta-texto: #05080d;
  --bg: #05080d;
  --bg-panel: #0a0f16;
  --bg-card: #0d141d;
  --border: #16344080;
  --cyan: #22d3ee;
  --cyan-dim: #0e7490;
  --amber: #f59e0b;
  --red: #ef4444;
  --green: #34d399;
  --yellow: #fbbf24;
  --text: #cdeef7;
  --text-dim: #6b8a94;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Variables de apoyo (colores por usuario) ──────────────────────────
     Los colores que estaban sueltos en las reglas pasaron a variables
     (regla de AGENTS.md: toda variable usada tiene que existir en
     `:root`). Son
     variables NUEVAS: no se renombra ni se borra ninguna de las de
     arriba. Las paletas de la parte inferior solo redefinen valores. */
  /* Tonos translúcidos: nota, pastillas de etiquetas y filas alternas */
  --note: #f59e0b1f;
  --cyan-soft: #22d3ee1f;
  --green-soft: #34d3991f;
  --red-soft: #ef44441f;
  --yellow-soft: #fbbf241f;
  /* Degradado del fondo de la página (extremos del radial-gradient) */
  --bg-glow-top: #0a1622;
  --bg-glow-bottom: #020305;
  /* Fondos con contexto propio: barra superior, panel de jobs, consolas */
  --bg-topbar: rgba(10, 15, 22, 0.85);
  --bg-console: #030608;
  --bg-code: #000;
  --bg-chat: rgba(0, 0, 0, 0.25);
  --bg-tenue: rgba(255, 255, 255, 0.03);
  --bg-msg-user: rgba(34, 211, 238, 0.08);
  --overlay-bg: rgba(2, 4, 8, 0.7);
  /* Texto encima de los fondos de acento (botones) */
  --cyan-contraste: #04141a;
  --amber-contraste: #241703;
  /* Resplandor del acento (sombras y brillos) */
  --cyan-glow: rgba(34, 211, 238, 0.4);
  /* Sombras: en la paleta actual las tarjetas no tienen sombra */
  --card-shadow: none;
  --shadow-panel: 0 0 40px rgba(34, 211, 238, 0.15), 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-lateral: -20px 0 50px rgba(0, 0, 0, 0.6);
  --shadow-fuerte: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ── Paletas por usuario (misión 05) ──────────────────────────────────────
   Solo redefinen VALORES de variables que ya existen en `:root`. La paleta
   "actual" es la de arriba: sin atributo `data-paleta` en <html> el sitio
   se ve exactamente como antes. Los valores salen del bosquejo aprobado
   (contexto-gentle/datos/bosquejo-postulacion.html). */
:root[data-paleta="oscuro"] {
  color-scheme: dark;
  --bg: #0b1220; --bg-panel: #0f1829; --bg-card: #131e31; --border: #22314a;
  --cyan: #5b9cf5; --cyan-dim: #2f5f9e; --amber: #d98e2b; --red: #e5534b;
  --green: #3fb68b; --yellow: #d9a441; --text: #e3e9f2; --text-dim: #8592a6;
  --note: #d98e2b1f; --cyan-soft: #5b9cf51c; --green-soft: #3fb68b1f; --red-soft: #e5534b1f; --yellow-soft: #d9a4411f;
  --bg-glow-top: #0b1220; --bg-glow-bottom: #060a12;
  --bg-topbar: rgba(15, 24, 41, 0.85);
  --bg-console: #0b1220;
  --bg-code: #060a12;
  --bg-tenue: rgba(255, 255, 255, 0.04);
  --bg-msg-user: rgba(91, 156, 245, 0.10);
  --cyan-glow: rgba(91, 156, 245, 0.45);
  --shadow-panel: 0 0 40px rgba(91, 156, 245, 0.18), 0 20px 50px rgba(0, 0, 0, 0.6);
}
:root[data-paleta="claro"] {
  color-scheme: light;
  --bg: #f4f6f9; --bg-panel: #ffffff; --bg-card: #ffffff; --border: #dbe2eb;
  --cyan: #1f5fbf; --cyan-dim: #9db8e0; --amber: #b86e12; --red: #c13b3b;
  --green: #1d7f57; --yellow: #966a0e; --text: #1b2533; --text-dim: #5d6b7e;
  --note: #b86e1214; --cyan-soft: #1f5fbf12; --green-soft: #1d7f5714; --red-soft: #c13b3b12; --yellow-soft: #966a0e14;
  --bg-glow-top: #ffffff; --bg-glow-bottom: #e7ecf3;
  --bg-topbar: rgba(255, 255, 255, 0.92);
  --bg-console: #ffffff;
  --bg-code: #f7f9fc;
  --bg-chat: rgba(27, 37, 51, 0.05);
  --bg-tenue: rgba(27, 37, 51, 0.04);
  --bg-msg-user: rgba(31, 95, 191, 0.08);
  --cyan-contraste: #ffffff;
  --amber-contraste: #ffffff;
  --cyan-glow: rgba(31, 95, 191, 0.35);
  --card-shadow: 0 1px 2px #1b25330f;
  --shadow-panel: 0 0 40px rgba(31, 95, 191, 0.12), 0 20px 50px rgba(27, 37, 51, 0.18);
  --shadow-lateral: -20px 0 50px rgba(27, 37, 51, 0.18);
  --shadow-fuerte: 0 1px 4px rgba(27, 37, 51, 0.25);
}
/* Con la paleta clara, `--cyan-dim` es un azul clarito pensado para bordes:
   como texto sobre fondo blanco sería ilegible, así que el nombre de
   usuario usa el gris secundario. */
:root[data-paleta="claro"] .user-chip { color: var(--text-dim); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, var(--bg-glow-top) 0%, var(--bg) 55%, var(--bg-glow-bottom) 100%);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
}

body {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.scanline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .6;
  animation: scan 6s linear infinite;
  z-index: 50;
  pointer-events: none;
}
@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand-mini {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.brand-glow {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan-glow);
}
.brand-sub {
  font-size: .7rem;
  color: var(--text-dim);
  letter-spacing: .2em;
  margin-top: 2px;
}

.status-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem;
}
.nav-link {
  font-size: .85rem;
  color: var(--text-dim);
  letter-spacing: .05em;
  padding: .4rem .8rem;
  border-radius: 4px;
  transition: background .15s ease;
}
.nav-link:hover {
  background: var(--yellow);
  color: var(--bg);
  text-decoration: none;
}
.user-chip {
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--cyan-dim);
  margin-left: .5rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El "Salir" pasó de <a> a <form method=post>: el form tiene que
   comportarse como inline-block para no romper el flex del menú. */
.logout-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.logout-form button { margin: 0; }
.nav-link { white-space: nowrap; }
.nav-toggle, .nav-burger { display: none; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .55rem 1.1rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { border-color: var(--cyan-dim); }
.btn-sm { padding: .4rem .8rem; font-size: .78rem; }
.btn-block { width: 100%; }
.btn-primary {
  border-color: var(--cyan);
  color: var(--cyan-contraste);
  background: var(--cyan);
}
.btn-primary:hover { box-shadow: 0 0 22px var(--cyan-glow); }
.btn-warn {
  border-color: var(--amber);
  color: var(--amber-contraste);
  background: var(--amber);
}
.btn-ghost { color: var(--text-dim); }

/* ── Main ─────────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--text-dim);
}

/* ── Util ─────────────────────────────────────────────────────────────── */
.dim { color: var(--text-dim); }

/* ── Tablero ──────────────────────────────────────────────────────────── */
.page-header h1 {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: .1em;
  margin: 0 0 .25rem 0;
  color: var(--cyan);
}

.filters {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.filter-form, .sync-form {
  display: flex;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
}
.filter-form label, .sync-form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8rem;
  color: var(--text-dim);
}
.filter-form select, .filter-form input[type="number"] {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: 4px;
  font-family: var(--mono);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 1rem;
}

.cards-grid-2 { grid-template-columns: 1fr 1fr; }

.lic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  transition: border-color .15s ease;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.lic-card:hover { border-color: var(--cyan-dim); }

/* Sombra de las tarjetas: en la paleta actual no hay sombra (igual que
   antes); en la paleta clara las tarjetas son blancas sobre un fondo
   gris, así que una sombra muy suave las separa (misma idea que la
   regla `.card` del bosquejo). Solo variables de :root. */
.lic-card, .score-card, .lic-meta-card, .score-breakdown-card,
.decision-card, .calc-card, .pipeline-col {
  box-shadow: var(--card-shadow);
}

.lic-card.rec-participar { border-left: 3px solid var(--green); }
.lic-card.rec-condicionado { border-left: 3px solid var(--yellow); }
.lic-card.rec-desertar { border-left: 3px solid var(--red); }

/* ── Pipeline Kanban ──────────────────────────────────────────────────── */
.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.pipeline-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 240px;
}
.pipeline-col h2 {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cyan);
}
.pipeline-col .lic-card { padding: .7rem; gap: .4rem; }

.lic-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.score-badge {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.2rem;
  padding: .3rem .6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  min-width: 50px;
  text-align: center;
}
.score-100, .score-90, .score-80 { color: var(--green); border-color: var(--green); }
.score-70, .score-60 { color: var(--yellow); border-color: var(--yellow); }
.score-50, .score-40 { color: var(--amber); border-color: var(--amber); }
.score-30, .score-20, .score-10, .score-0 { color: var(--red); border-color: var(--red); }

.rec-pill {
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 3px;
  letter-spacing: .05em;
}
.rec-pill.rec-participar { background: var(--green-soft); color: var(--green); }
.rec-pill.rec-condicionado { background: var(--yellow-soft); color: var(--yellow); }
.rec-pill.rec-desertar { background: var(--red-soft); color: var(--red); }

.card-code {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-dim);
  margin-left: auto;
}

.lic-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.lic-name a { color: var(--text); }
.lic-name a:hover { color: var(--cyan); text-decoration: none; }

.lic-meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  font-size: .85rem;
}
.lic-meta dt { color: var(--text-dim); }
.lic-meta dd { margin: 0; }

.lic-card.rec-participar .lic-meta dd { color: var(--green); }
.lic-card.rec-condicionado .lic-meta dd { color: var(--yellow); }
.lic-card.rec-desertar .lic-meta dd { color: var(--red); }

.lic-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.cat-pill {
  font-size: .7rem;
  padding: .15rem .5rem;
  background: var(--cyan-soft);
  color: var(--cyan);
  border-radius: 3px;
  font-family: var(--mono);
}

.score-breakdown summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-dim);
  padding: .2rem 0;
}
.score-breakdown summary:hover { color: var(--cyan); }
.score-breakdown ul {
  margin: .5rem 0 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
}
.score-breakdown li {
  padding: .3rem 0;
  border-top: 1px solid var(--border);
}

.lic-card-foot {
  display: flex;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-dim);
}

/* ── Detalle ──────────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: .85rem;
  margin-bottom: 1rem;
}

.lic-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.lic-header-main h1 {
  margin: 0 0 .5rem 0;
  font-size: 1.4rem;
  line-height: 1.3;
}
.score-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.2rem;
  text-align: center;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.score-value {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.lic-meta-card, .score-breakdown-card, .decision-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.hist-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}
.hist-note-warn { border-left-color: var(--amber); }
.hist-note-warn p strong { color: var(--amber); }
.hist-note-info p strong { color: var(--cyan); }
.hist-note p { margin: 0; }
.hist-razones {
  margin: .6rem 0 0 0;
  padding-left: 1.2rem;
  color: var(--text-dim);
}
.hist-insight {
  margin-top: .8rem !important;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
}

.calc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.calc-card h2 {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--cyan);
  margin: 0 0 .5rem 0;
}
.calc-inputs {
  display: flex;
  gap: 1.5rem;
  align-items: end;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.calc-inputs label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8rem;
  color: var(--text-dim);
}
.calc-inputs input[type="number"] {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: 4px;
  font-family: var(--mono);
  width: 220px;
}
.calc-inputs .calc-checkbox {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
}
.calc-out {
  font-family: var(--mono);
  text-align: right;
}
#calc-resultado td:nth-child(2) {
  width: auto;
}
.lic-meta-card h2, .score-breakdown-card h2, .decision-card h2 {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--cyan);
  margin: 0 0 1rem 0;
}

.meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.5rem;
  margin: 0 0 1.5rem 0;
}
/* Una línea divisora por fila, como en las tablas: facilita leer
   etiquetas y valores largos. */
.meta-grid dt, .meta-grid dd { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.meta-grid dt { color: var(--text-dim); }
.meta-grid dd { margin: 0; }

.lic-desc h3, .lic-links {
  margin-top: 1rem;
}
.lic-desc p {
  background: var(--bg-panel);
  padding: .8rem;
  border-radius: 4px;
  border-left: 2px solid var(--cyan);
  font-size: .9rem;
  line-height: 1.5;
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.score-table th, .score-table td {
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.score-table th {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
}
.score-table td:nth-child(2), .score-table td:nth-child(3) {
  width: 130px;
}

.mini-bar {
  position: relative;
  height: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .2rem;
}
.mini-bar-fill {
  height: 100%;
  transition: width .2s ease;
}
.mini-bar-fill.score-100, .mini-bar-fill.score-90, .mini-bar-fill.score-80 {
  background: var(--green);
}
.mini-bar-fill.score-70, .mini-bar-fill.score-60 {
  background: var(--yellow);
}
.mini-bar-fill.score-50, .mini-bar-fill.score-40 {
  background: var(--amber);
}
.mini-bar-fill.score-30, .mini-bar-fill.score-20, .mini-bar-fill.score-10, .mini-bar-fill.score-0 {
  background: var(--red);
}
.mini-bar-label {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-dim);
}

/* Barras comparativas del cruce licitaciones vs Convenio Marco */
.barra-fila { margin-bottom: .9rem; }
.barra-fila .barra-etiqueta {
  font-size: .9rem;
  margin-bottom: .25rem;
}
.barra-par {
  display: grid;
  grid-template-columns: 8.5rem 1fr 7rem;
  align-items: center;
  gap: .5rem;
  margin-bottom: .2rem;
}
.barra-par .barra-fuente { font-size: .8rem; color: var(--text-dim); }
.barra-par .barra-pista {
  height: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.barra-par .barra-relleno { height: 100%; }
.barra-par .barra-relleno.lic { background: var(--cyan); }
.barra-par .barra-relleno.cm { background: var(--amber); }
.barra-par .barra-valor {
  font-family: var(--mono);
  font-size: .8rem;
  text-align: right;
}

.decision-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.decision-form select, .motivo-input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: .85rem;
}
.motivo-input { flex: 1; min-width: 200px; }

.decision-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.decision-history li {
  padding: .5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.decision-history p {
  width: 100%;
  margin: .3rem 0 0 0;
  font-size: .85rem;
  color: var(--text-dim);
}

/* ── Jobs ─────────────────────────────────────────────────────────────── */
.job-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.job-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.job-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.job-status {
  font-family: var(--mono);
  font-size: .8rem;
  padding: .2rem .5rem;
  border-radius: 3px;
  background: var(--bg-panel);
}
.status-running { color: var(--cyan); }
.status-done { color: var(--green); }
.status-error { color: var(--red); }

.job-logs {
  background: var(--bg-code);
  color: var(--green);
  font-family: var(--mono);
  font-size: .75rem;
  padding: .8rem;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin: 0;
}

/* ── Chat sobre la licitación ────────────────────────────────────────── */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-height: 480px;
  overflow-y: auto;
  padding: .8rem;
  background: var(--bg-chat);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 1rem;
}
.chat-msg {
  border-radius: 4px;
  padding: .7rem .9rem;
  max-width: 85%;
  border: 1px solid var(--border);
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--bg-msg-user);
  border-color: var(--cyan-dim);
}
.chat-msg-assistant {
  align-self: flex-start;
  background: var(--bg-tenue);
}
.chat-msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  font-size: .88rem;
}
.chat-msg-meta {
  font-size: .7rem;
  margin-top: .4rem;
  font-family: var(--mono);
}
.chat-form {
  display: block;
  width: 100%;
}
.chat-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--bg-code);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .6rem .8rem;
  font-family: inherit;
  font-size: .9rem;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}
.chat-form textarea:focus {
  outline: none;
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 1px var(--cyan-dim);
}
.chat-form textarea:disabled {
  opacity: .55;
}
.chat-actions {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-top: .6rem;
}

/* ── Asistente flotante (_asistente_panel.html) ─────────────────────────────
   Pestaña discreta en el borde derecho (solo administradores) que abre un
   panel lateral con el chat. Va sobre el panel de jobs. */
.asistente-fab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding: .8rem .35rem;
  background: var(--bg-panel);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .55;
  z-index: 45;
  transition: opacity .15s, color .15s, border-color .15s;
}
.asistente-fab:hover,
.asistente-fab:focus-visible,
.asistente-fab[aria-expanded="true"] {
  opacity: 1;
  color: var(--cyan);
  border-color: var(--cyan-dim);
}
.asistente-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .9rem 1rem 1rem;
  box-sizing: border-box;
  background: var(--bg-panel);
  border-left: 1px solid var(--cyan-dim);
  box-shadow: var(--shadow-lateral);
  z-index: 50;
}
/* `hidden` pierde contra el `display: flex` de arriba sin esto. */
.asistente-panel[hidden] { display: none; }
.asistente-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .85rem;
}
.asistente-panel-ayuda { margin: 0; font-size: .78rem; line-height: 1.45; }
.asistente-panel-acciones { display: flex; gap: .4rem; align-items: center; }
/* Con el panel abierto, el contenido se corre para no quedar tapado. */
@media (min-width: 1000px) {
  body.asistente-abierto { padding-right: min(420px, 100vw); }
}
/* asistente-etiquetas.js: una etiqueta por elemento que se puede pedir cambiar. */
.asistente-etiquetas-capa {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 44;
}
.asistente-etiqueta,
.asistente-etiqueta-muestra {
  background: var(--etiqueta-bg);
  color: var(--etiqueta-texto);
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1;
  padding: .15rem .3rem;
  border-radius: 3px;
  white-space: nowrap;
}
.asistente-etiqueta {
  position: absolute;
  border: none;
  opacity: .85;
  cursor: pointer;
  box-shadow: var(--shadow-fuerte);
}
.asistente-etiqueta:hover,
.asistente-etiqueta:focus-visible { opacity: 1; z-index: 1; }
.asistente-resaltado {
  outline: 2px dashed var(--etiqueta-bg) !important;
  outline-offset: 2px;
}
.asistente-panel-log { flex: 1; max-height: none; margin-bottom: 0; }
.asistente-panel .chat-msg { max-width: 95%; }

/* ── Panel flotante de jobs (mismo diseño que informe-mesa) ─────────────── */
.console-panel {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: min(620px, calc(100vw - 3rem));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-console);
  border: 1px solid var(--cyan-dim);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  z-index: 40;
  /* El panel ENTERO scrollea si log + tablas no caben; el header queda fijo. */
  overflow-y: auto;
}
/* `hidden` pierde contra el `display: flex` de arriba sin esto. */
.console-panel[hidden] { display: none; }
.console-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: .78rem;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-console);
}
#console-title { flex-grow: 1; color: var(--cyan); }
.console-status {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .15rem .5rem; border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim);
}
.console-status.running { color: var(--cyan); border-color: var(--cyan-dim); }
.console-status.done { color: var(--green); border-color: var(--green); }
.console-status.error { color: var(--red); border-color: var(--red); }
.console-log {
  margin: 0;
  padding: .8rem .9rem;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40vh;
  flex-shrink: 0;
}
.console-table-wrap { margin: 0 0 .5rem; flex-shrink: 0; }
.console-table-wrap .console-detalle { margin: 0 .9rem; }
.console-table-scroll { max-height: 45vh; overflow: auto; padding-bottom: .5rem; }
.console-table-wrap[hidden] { display: none; }
.console-table-block + .console-table-block { margin-top: 1rem; }
.confirm-seccion-titulo {
  margin: .7rem 0 .3rem; font-size: .75rem; font-weight: 600; color: var(--text-dim);
}
.console-table {
  width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .7rem;
}
.console-table th, .console-table td {
  text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.console-table th {
  color: var(--text-dim); font-weight: 600; position: sticky; top: 0;
  background: var(--bg-panel);
}
.console-table td:last-child { white-space: normal; word-break: break-word; min-width: 16rem; }
.console-table tbody tr:nth-child(even) { background: var(--bg-tenue); }

/* Botón de sincronizar + checkbox "Analizar con IA" (tableros) */
.sync-form { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.sync-form label { display: inline-flex; align-items: center; gap: .35rem; }

/* Entregables de una cotización de Convenio Marco (nombre corto + detalle
   largo). Tabla propia: con `.score-table` la 2ª columna queda fija en
   130px (pensada para "Peso" del desglose del score) y el detalle se
   aplastaba en una franja angosta. */
.entregables-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.entregables-table th, .entregables-table td {
  padding: .6rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.entregables-table th {
  color: var(--text-dim); font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
}
.entregables-table td:first-child { width: 30%; font-weight: 600; }

/* Tecnologías en /empresa: pastilla con botón ✕ para quitar */
.tec-pill { display: inline-flex; align-items: center; gap: .35rem; }
.tec-quitar { display: inline; margin: 0; }
.tec-quitar button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim); font-size: .7rem; line-height: 1;
}
.tec-quitar button:hover { color: var(--red); }

/* Pasos legibles del panel de jobs (ver routes_jobs._paso) */
.console-pasos { list-style: none; margin: 0; padding: .8rem .9rem .4rem; flex-shrink: 0; }
.console-pasos[hidden] { display: none; }
.paso { display: flex; gap: .6rem; padding: .35rem 0; font-size: .82rem; }
/* align-self: flex-start + line-height fija: sin esto la caja del ícono se
   estiraba a la altura de todo el paso (título + barra + detalle). */
.paso-icono {
  width: 1.1rem; flex-shrink: 0; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.3em; font-family: var(--mono);
}
.paso-cuerpo { flex-grow: 1; min-width: 0; }
.paso-titulo { color: var(--text); }
.paso-detalle { color: var(--text-dim); font-size: .75rem; margin-top: .15rem; overflow-wrap: anywhere; }
.paso-pendiente .paso-titulo, .paso-pendiente .paso-icono { color: var(--text-dim); }
.paso-omitido .paso-titulo, .paso-omitido .paso-icono { color: var(--text-dim); text-decoration: line-through; opacity: .7; }
/* Spinner de tamaño fijo que gira sobre su propio centro (antes se rotaba
   el glifo "◐" dentro de una caja alta y daba vueltas por todo el paso). */
.paso-spinner {
  width: .75rem; height: .75rem; border-radius: 50%;
  border: 2px solid var(--cyan-dim); border-top-color: var(--cyan);
  animation: paso-giro .8s linear infinite;
}
.paso-en_curso .paso-titulo { color: var(--cyan); }
.paso-listo .paso-icono { color: var(--green); }
.paso-error .paso-icono, .paso-error .paso-titulo { color: var(--red); }
.paso-error .paso-detalle { color: var(--red); }
@keyframes paso-giro { to { transform: rotate(360deg); } }
.paso-barra { height: 4px; background: var(--border); border-radius: 2px; margin-top: .35rem; overflow: hidden; }
.paso-barra-fill { height: 100%; background: var(--cyan); transition: width .3s; }
.paso-contador { font-family: var(--mono); font-size: .68rem; color: var(--text-dim); }

.console-detalle { margin: 0 .9rem .5rem; border-top: 1px dashed var(--border); flex-shrink: 0; }
.console-detalle > summary {
  cursor: pointer; padding: .5rem 0; font-size: .75rem; color: var(--text-dim); font-family: var(--mono);
}
.console-detalle > summary:hover { color: var(--text); }
.console-detalle .console-log { padding: .4rem 0 .6rem; max-height: 30vh; }

/* Diálogo "¿Qué analizar con IA?" antes de sincronizar (static/jobs.js) */
.ia-dialogo-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay-bg);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ia-dialogo {
  width: min(560px, 100%);
  background: var(--bg-panel); border: 1px solid var(--cyan-dim); border-radius: 8px;
  box-shadow: var(--shadow-panel);
  padding: 1.2rem 1.4rem;
}
.ia-dialogo h3 { margin: 0 0 .6rem; color: var(--cyan); font-family: var(--mono); font-size: 1rem; }
.ia-dialogo p { font-size: .85rem; margin: .4rem 0; }
.ia-dialogo-conteo { margin: .6rem 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.7; }
.ia-dialogo-acciones { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.ia-dialogo-acciones .btn { text-align: left; }

/* Perfiles requeridos × CVs (ficha de licitación / Convenio Marco) */
.perfil-req { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.perfil-req:first-of-type { border-top: none; }
.crit { display: inline-block; margin: 0 0.6rem 0.25rem 0; font-size: 0.9em; white-space: nowrap; }
.crit-ok { color: var(--green); }
.crit-no { color: var(--red); }
.crit-parcial { color: var(--yellow); }
.crit-desconocido { opacity: 0.6; }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Pantallas medianas (~1280–1600px): menú más compacto. */
@media (max-width: 1600px) {
  .topbar { padding: .8rem 1rem; gap: 1rem; }
  .brand-glow { font-size: 1.2rem; }
  .brand-sub { letter-spacing: .1em; }
  .nav-link { padding: .35rem .55rem; font-size: .8rem; letter-spacing: .02em; }
}

/* Angostas: el menú pasa a hamburguesa desplegable. */
@media (max-width: 1200px) {
  .topbar { flex-wrap: wrap; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--border); border-radius: 4px;
    color: var(--cyan); font-size: 1.3rem; cursor: pointer; user-select: none;
  }
  .nav-burger:hover { border-color: var(--cyan-dim); }
  .status-cluster {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
  }
  .nav-toggle:checked ~ .status-cluster { display: flex; }
  .nav-link { padding: .6rem .8rem; font-size: .9rem; }
  .user-chip { margin: .5rem 0 0; max-width: none; text-align: center; }
  .status-cluster .btn { text-align: center; }
}

@media (max-width: 900px) {
  .main { padding: 1.2rem 1rem; }
  .cards-grid-2 { grid-template-columns: 1fr; }
  .lic-header { flex-direction: column; gap: 1rem; }
  .score-card { align-self: stretch; }
  /* Las tablas anchas scrollean dentro de su tarjeta en vez de romper la página. */
  .score-table, .entregables-table { display: block; overflow-x: auto; }
  .footer { flex-direction: column; gap: .3rem; }
}

@media (max-width: 600px) {
  .brand-sub { display: none; }
  .lic-meta-card, .score-breakdown-card, .decision-card, .calc-card { padding: 1rem; }
  .meta-grid { grid-template-columns: 1fr; gap: .1rem; }
  .meta-grid dd { margin-bottom: .5rem; }
  .calc-inputs input[type="number"] { width: 100%; }
  .chat-msg { max-width: 100%; }
  .console-panel { right: .5rem; bottom: .5rem; width: calc(100vw - 1rem); }
}

/* /empresa — formulario de cliente acreditable (agregar / editar) */
.cliente-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; max-width: 640px; }
.cliente-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.cliente-form label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
.cliente-form textarea { font: inherit; resize: vertical; }
.cliente-form button { align-self: flex-start; }
.cliente-editar { margin-bottom: .3rem; }
.cliente-editar > summary { list-style: none; cursor: pointer; display: inline-block; }
.cliente-editar[open] { min-width: min(480px, 80vw); }

/* /convenio-marco — el enlace "N descartada(s)" del encabezado se marca en
   rojo, igual que la etiqueta "Descartada por IA". Clase propia de esta
   pantalla: no cambia el color de los enlaces de las otras pantallas. */
.lic-resumen a { color: var(--red); }

/* ── /usuarios — administración de cuentas y perfiles ───────────────────
   Formularios chicos dentro de la tabla (perfil, contraseña temporal) y
   el formulario de alta de usuarios. Solo variables de :root. */
.usuarios-acciones { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.usuarios-inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.usuarios-inline select, .usuarios-form input, .usuarios-form select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .8rem;
}
.usuarios-form { display: flex; flex-direction: column; gap: .5rem; max-width: 420px; }
.usuarios-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-dim); }
.usuarios-form button { align-self: flex-start; }
.usuarios-reset summary { cursor: pointer; color: var(--text-dim); font-size: .78rem; }
.usuarios-reset summary:hover { color: var(--cyan); }
.usuarios-reset[open] summary { margin-bottom: .5rem; }

/* ── Sección "Datos para postular" (fichas de licitación y de CM) ───────
   Formulario de captura y tabla del equipo propuesto. Solo variables de
   :root; no se toca ninguna clase existente. */
.post-form { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0 1.5rem; }
.post-form .post-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
}
.post-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--text-dim); }
.post-form input[type="text"], .post-form input[type="number"], .post-form input[type="date"],
.post-form select, .post-form textarea {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .85rem;
  width: 100%;
}
.post-form textarea { font-family: var(--sans); resize: vertical; min-height: 70px; }
.post-form .post-check { flex-direction: row; align-items: center; gap: .5rem; }
.post-form .post-check input[type="checkbox"] { width: auto; }
.post-form h3 { margin: .2rem 0 0; font-size: .9rem; color: var(--cyan); }
.post-form .post-nota { font-size: .78rem; color: var(--text-dim); margin: 0; }

/* Tabla del equipo propuesto: es propia porque `.score-table` deja la 2ª y
   la 3ª columna fijas en 130px (pensadas para el desglose del score) y aquí
   las columnas son campos del formulario. */
.post-equipo-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.post-equipo-table th, .post-equipo-table td {
  padding: .4rem .6rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.post-equipo-table th {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
}
.post-equipo-table input, .post-equipo-table select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .35rem .5rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .8rem;
  width: 100%;
}
.post-equipo-table td:first-child { width: 32%; }
.post-quitar-fila { white-space: nowrap; }

/* La tabla de experiencia comparte la clase del equipo, pero su primera
   columna es una casilla: no puede ocupar el 32 % que deja la tabla, y la
   casilla no hereda el ancho ni el relleno de los campos de texto. */
#post-experiencia-table td:first-child { width: 3rem; }
#post-experiencia-table input[type="checkbox"] { width: auto; padding: 0; }

/* La columna del valor de la tabla de resultados no puede quedar fija en
   130px (lo hereda de `.score-table`): los montos son largos. */
#post-resultado td:nth-child(2) { width: auto; }

/* ── Subsección "Propuesta técnica" (fichas de licitación y de CM) ─────
   Reutiliza `.post-form` (los formularios de sección no pueden anidarse
   dentro del formulario principal), `.hist-note`, `.rec-pill` y
   `.meta-grid`: lo único propio son los bloques de la subsección. Solo
   variables de :root. */
.propuesta-seccion {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  padding: 1rem;
  margin-bottom: 1rem;
}
.propuesta-cabecera {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.propuesta-cabecera h4 { margin: 0; font-size: .95rem; color: var(--cyan); }
.propuesta-acciones {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: .8rem 0 1.2rem;
}
.propuesta-pasos {
  margin: .5rem 0 0 0;
  padding-left: 1.2rem;
  font-size: .8rem;
  color: var(--text-dim);
}
/* El texto de la sección se muestra tal como se escribió (con sus
   saltos de línea), en un bloque legible. */
.propuesta-texto {
  white-space: pre-wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: 4px;
  padding: .8rem;
  margin: 0 0 .8rem 0;
  font-size: .9rem;
  line-height: 1.5;
}

/* ── /apariencia — elección de la paleta de color ───────────────────────
   Cada opción tiene un botón de vista previa (cambia el atributo
   `data-paleta` de <html> al vuelo, sin guardar nada) y un botón
   "Guardar" (POST). Solo variables de :root. */
.apariencia-lista { list-style: none; margin: 0; padding: 0; }
.apariencia-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 0;
  border-top: 1px solid var(--border);
}
.apariencia-opcion:first-child { border-top: none; }
.apariencia-info strong { display: block; }
.apariencia-info p { margin: .2rem 0 0 0; font-size: .85rem; }
.apariencia-acciones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* El form del botón "Guardar" va en línea con los demás controles. */
.apariencia-form { display: inline; margin: 0; padding: 0; }
/* El botón de vista previa se marca cuando esa paleta es la activa. */
.apariencia-acciones button[aria-pressed="true"] {
  border-color: var(--cyan);
  color: var(--cyan);
}
/* Formulario de subida de respaldo: va en línea con la celda. */
.respaldo-form { display: inline-flex; align-items: center; gap: .4rem; }
/* Celda que no parte la etiqueta ("sin respaldo" en una sola línea). */
.sin-salto { white-space: nowrap; }
/* Experiencia del perfil: las columnas de más texto (empresa, cargo y
   tecnologías) se llevan el ancho; período y años no se parten. El respaldo
   y «Eliminar» quedan en la misma línea, centrados con «Falta». */
.tabla-experiencia td:first-child { width: 18%; }
.tabla-experiencia .col-cargo { width: 13%; }
.tabla-experiencia .col-tec { width: 36%; }
.tabla-experiencia .respaldo-celda { white-space: nowrap; }
.tabla-experiencia .respaldo-celda .respaldo-form { margin-left: .4rem; vertical-align: middle; }
.tabla-experiencia .respaldo-form input[type="file"] { max-width: 10rem; font-size: .78rem; }
.tabla-experiencia .experiencia-eliminar { margin: 0; }
/* Experiencia de la empresa: cada respaldo de OC o CIE en su línea, con
   su ✕, y el formulario para subir otro debajo. */
.respaldo-proyecto { margin-top: .3rem; }
.respaldo-proyecto input[type="file"] { max-width: 10rem; font-size: .78rem; }

/* ── Sección «Postulación» (misión 06) ─────────────────────────────────
   Las cinco pestañas de la ficha de licitación y de Convenio Marco: la
   barra de resumen pegada, las pestañas, los paneles (uno solo a la
   vez), el estado del guardado y el índice del avance.

   Solo variables de :root: no hay ningún color suelto, así que las tres
   paletas (actual, oscuro y claro) siguen funcionando sin cambiar nada.
   No se renombra ni se borra ninguna clase que ya exista. */

/* Contenedor de la sección. */
.postulacion { display: flex; flex-direction: column; gap: 1rem; }

/* Barra de resumen: pegada arriba de la sección mientras se desplaza. */
.postulacion-resumen {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem 1.1rem;
  padding: .65rem .85rem;
  background: var(--bg-panel);
  border: 1px solid var(--cyan-dim);
  border-radius: 6px;
  box-shadow: var(--shadow-fuerte);
}
.postulacion-cifras { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; }
.postulacion-cifras > div { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.postulacion-cifras strong {
  font-family: var(--mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
/* Las etiquetas cortas de lo que falta ("Falta: meses"). */
.postulacion-faltantes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: .5rem 0 0;
  font-size: .78rem;
}
.postulacion-faltantes > span:not(.dim) {
  font-size: .72rem;
  padding: .05rem .45rem;
  border: 1px solid var(--yellow);
  border-radius: 10px;
  background: var(--yellow-soft);
  color: var(--yellow);
  white-space: nowrap;
}
.postulacion-acciones {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
/* En la barra de resumen las acciones quedan a la derecha. */
.postulacion-resumen .postulacion-acciones { margin-left: auto; }

/* Estado del guardado (lo escribe el JavaScript). */
.postulacion-estado {
  margin: 0;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--text-dim);
}
.postulacion-estado[data-estado="guardando"] { color: var(--amber); }
.postulacion-estado[data-estado="guardado"] { color: var(--green); }
.postulacion-estado[data-estado="error"] { color: var(--red); }

/* Mensaje de error del servidor (el fragmento lo reemplaza). */
.postulacion-error {
  margin: 0;
  padding: .5rem .7rem;
  font-size: .8rem;
  color: var(--red);
  background: var(--red-soft);
  border-left: 2px solid var(--red);
  border-radius: 4px;
}
.postulacion-error[hidden] { display: none; }

/* Las pestañas: en pantallas angostas la barra se desplaza con el dedo. */
.postulacion-tabs {
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.postulacion-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: .5rem .75rem;
  font-size: .85rem;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.postulacion-tab:hover { color: var(--cyan); text-decoration: none; }
.postulacion-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.postulacion-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* Los paneles: uno solo a la vez. */
.postulacion-paneles { min-width: 0; }
.postulacion-panel { display: none; scroll-margin-top: 7rem; }
.postulacion-panel.is-active { display: block; }

/* Sin JavaScript el ancla de la URL elige el panel (y la pestaña que
   queda activa). Con JavaScript la clase `postulacion-js` apaga estas
   reglas: de ahí en adelante elige el JavaScript. */
.postulacion:not(.postulacion-js) .postulacion-panel:first-of-type { display: block; }
.postulacion:not(.postulacion-js) .postulacion-panel:target { display: block; }
.postulacion:not(.postulacion-js):has(.postulacion-panel:target) .postulacion-panel:first-of-type:not(:target) { display: none; }
.postulacion:not(.postulacion-js):has(#paso-oferta:target) .postulacion-tab[href$="#paso-oferta"],
.postulacion:not(.postulacion-js):has(#paso-equipo:target) .postulacion-tab[href$="#paso-equipo"],
.postulacion:not(.postulacion-js):has(#paso-experiencia:target) .postulacion-tab[href$="#paso-experiencia"],
.postulacion:not(.postulacion-js):has(#paso-propuesta:target) .postulacion-tab[href$="#paso-propuesta"],
.postulacion:not(.postulacion-js):has(#paso-generar:target) .postulacion-tab[href$="#paso-generar"] {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
/* Sin ancla en la URL se ve el primer paso: su pestaña queda activa. */
.postulacion:not(.postulacion-js):not(:has(.postulacion-panel:target)) .postulacion-tabs > a.postulacion-tab:first-of-type {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* Las cifras del paso 1 (el resultado del cálculo): una fila de cifras. */
.postulacion-resultados { margin: .8rem 0; }
.postulacion-resultados .postulacion-cifras > div {
  flex: 1 1 150px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .5rem .6rem;
}
.postulacion-resultados .postulacion-faltantes { margin-top: .6rem; }

/* La lista de verificación del paso 5: los ítems los calcula el
   servidor y usan la lista de siempre (`.decision-history`). */
.postulacion-checklist { margin: .6rem 0; }
.postulacion-checklist > ul { margin: .3rem 0; }

/* Cada sección de la propuesta técnica. */
.postulacion-seccion {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  padding: .7rem .85rem;
  margin-bottom: .7rem;
}
.postulacion-seccion > summary {
  cursor: pointer;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.postulacion-seccion > summary strong,
.postulacion-seccion > summary .titulo { font-weight: 600; }
.postulacion-seccion textarea { width: 100%; min-height: 90px; }
.postulacion-seccion[data-estado="en_curso"] { border-color: var(--cyan-dim); }
.postulacion-seccion[data-estado="listo"] { border-color: var(--green); }
.postulacion-seccion[data-estado="error"] { border-color: var(--red); }
.postulacion-etapa-estado {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text-dim);
}

/* La confirmación en línea del reemplazo de una sección: el bloque usa
   las clases que ya existen (`.hist-note`); aquí solo se garantiza que
   el atributo `hidden` lo tape. */
.postulacion [id^="confirmacion-"][hidden] { display: none; }

/* ── Postulación en pantallas angostas ──────────────────────────────── */
@media (max-width: 600px) {
  .postulacion-resumen { padding: .5rem .6rem; gap: .35rem .7rem; }
  .postulacion-acciones { margin-left: 0; width: 100%; }
  .postulacion-cifras strong { font-size: .85rem; }
  .postulacion-tab { font-size: .8rem; padding: .45rem .6rem; }
}

/* ── Índice lateral de la ficha ────────────────────────────────────────
   Una columna fija a la izquierda con las secciones de la ficha. En
   pantallas angostas se oculta: la ficha se lee completa en una columna. */
.ficha-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.ficha-cuerpo { min-width: 0; }

nav.indice {
  display: none;
  flex-direction: column;
  gap: .15rem;
  font-size: .85rem;
}
nav.indice .tit {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .4rem;
}
nav.indice a {
  color: var(--text-dim);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
nav.indice a:hover { background: var(--bg-card); color: var(--cyan); }
nav.indice a.act { background: var(--bg-card); color: var(--cyan); }
nav.indice .indice-seccion { font-weight: 600; }
nav.indice .indice-badge {
  font-family: var(--mono);
  font-size: .68rem;
  padding: 0 .35rem;
  border-radius: 4px;
  background: var(--bg-tenue);
  color: var(--text-dim);
}
nav.indice .indice-badge-ok { background: var(--green-soft); color: var(--green); }
nav.indice .indice-badge-warn { background: var(--yellow-soft); color: var(--yellow); }
/* Los cinco pasos de la postulación, debajo de su sección. */
nav.indice .indice-postulacion { display: flex; flex-direction: column; gap: .1rem; }
nav.indice .indice-sub {
  list-style: none;
  margin: 0 0 .2rem;
  padding: 0 0 0 .9rem;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
nav.indice .indice-sub li { margin: 0; }
nav.indice .indice-sub-enlace {
  font-size: .8rem;
  padding: .2rem .5rem;
  color: var(--text-dim);
}
nav.indice .indice-sub-enlace.is-active { color: var(--cyan); }

@media (min-width: 900px) {
  .ficha-layout { grid-template-columns: 210px minmax(0, 1fr); }
  nav.indice {
    display: flex;
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* Panel de jobs: renovar la sesión de la tienda de Convenio Marco cuando
   vence (se pega la cookie nueva sin salir del panel). */
.console-accion { margin: 0 .9rem .6rem; padding: .7rem .8rem; border: 1px solid var(--cyan-dim); border-radius: 6px; display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.console-accion p, .console-accion ol { margin: 0; }
.console-accion ol { padding-left: 1.2rem; font-size: .85rem; }
.console-accion-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.console-accion-fila input { flex: 1 1 14rem; min-width: 0; }
.console-accion-msg:empty { display: none; }

/* Postulación con cajas, como el bosquejo aprobado: la sección es una
   tarjeta y cada grupo de campos (base de cálculo, oferta, cierre…) va
   en su propio recuadro. */
.postulacion.decision-card { gap: 1rem; }
.post-form .post-campos {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .8rem .9rem;
}
.post-form h4 { margin: .4rem 0 0; }

/* Base común de los controles de formulario. `:where()` no suma
   especificidad: cualquier regla de un componente (p. ej. `.post-form`)
   sigue mandando; esto solo evita el aspecto por defecto del navegador
   donde nadie definió estilo (Firefox y Chrome los pintan distinto). */
:where(input[type="text"], input[type="search"], input[type="number"], input[type="date"],
       input[type="email"], input[type="password"], input[type="url"], select, textarea) {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: .85rem;
}
:where(input, select, textarea):focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan); }
/* Botón «Examinar…» / «Seleccionar archivo»: con el aspecto de `.btn`. */
input[type="file"] { color: var(--text-dim); font-family: var(--sans); font-size: .85rem; max-width: 100%; }
input[type="file"]::file-selector-button {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .9rem;
  margin-right: .7rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--cyan-dim); color: var(--cyan); }

/* Buscador de experiencia (paso 3): los filtros en recuadro, con la
   etiqueta arriba de cada campo; el orden ocupa su propia columna. */
.post-filtros { margin: .5rem 0 1rem; }
.post-filtros .post-campos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.post-filtros .postulacion-acciones { justify-content: flex-start; }
/* La casilla de elegir no necesita más que su propio ancho. */
.post-experiencia-tabla td:first-child, .post-experiencia-tabla th:first-child { width: 2.5rem; text-align: center; }
/* Paso del trabajo de la propuesta que está corriendo ahora. */
.propuesta-pasos li.is-en-curso { color: var(--cyan); font-weight: 600; }

/* ── Paso 2 · Equipo, como el bosquejo aprobado ─────────────────────────
   Un recuadro por perfil pedido (con su estado a la derecha) y una fila
   por candidato: nombre | criterios | acciones. */
.ayuda-corta { font-size: .85rem; margin: 0 0 .8rem; }
.ayuda-corta .crit { margin-right: .4rem; }
.perfil-req { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel); margin-bottom: .6rem; }
.perfil-req > summary { list-style: none; cursor: pointer; padding: .7rem .9rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.perfil-req > summary::-webkit-details-marker { display: none; }
.perfil-req-rol { font-weight: 600; }
.perfil-req-cant { font-size: .82rem; }
.perfil-req-estado { margin-left: auto; font-size: .85rem; font-weight: 600; }
.pill-obligatorio, .pill-puntua {
  font-family: var(--mono); font-size: .68rem; padding: .1rem .4rem; border-radius: 4px; letter-spacing: .03em;
}
.pill-obligatorio { background: var(--red-soft); color: var(--red); }
.pill-puntua { background: var(--cyan-soft); color: var(--cyan); }
.asignado { color: var(--green); font-weight: 600; font-size: .85rem; }
.sin-asignar { color: var(--yellow); }
.perfil-req-cuerpo { padding: 0 .9rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.perfil-req-pide, .perfil-req-nota { font-size: .82rem; margin: 0; }
.candidato {
  display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(0, 2fr) auto;
  gap: .4rem 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--border);
}
.candidato-nombre a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.candidato-nombre small { display: block; font-size: .8rem; }
.candidato-criterios .crit { margin: 0 .6rem .15rem 0; font-size: .82rem; }
.candidato-acciones { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.candidato-acciones form { margin: 0; }
.cajon-experiencia {
  grid-column: 1 / -1; border: 1px solid var(--cyan-dim); border-radius: 6px;
  padding: .8rem; background: var(--bg); margin: .2rem 0 0;
}
.cajon-experiencia p { font-size: .8rem; margin: 0; }
.cajon-experiencia[hidden] { display: none; }
.postulacion-subtitulo { margin: 1rem 0 .4rem; font-size: .9rem; color: var(--cyan); }
@media (max-width: 700px) {
  .candidato { grid-template-columns: minmax(0, 1fr); }
  .candidato-acciones { justify-content: flex-start; }
}

/* Cabecera, barra de resumen y pestañas de «Postulación», como el bosquejo. */
.postulacion-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; }
.postulacion-cabecera h2 { margin: 0; }
.postulacion-cabecera .dim { font-size: .82rem; }
.postulacion > .postulacion-estado { text-align: right; margin: 0 0 -.6rem; font-size: .8rem; }
.postulacion-cifras > div > .dim:first-child {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
}
.postulacion-cifras strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.postulacion-tab { display: inline-flex; align-items: center; gap: .4rem; }
.postulacion-tab-n {
  font-family: var(--mono); font-size: .72rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: inline-grid; place-items: center; border: 1px solid currentColor; flex: none;
}
.postulacion-tab-n.is-ok { background: var(--green); border-color: var(--green); color: var(--bg); }

/* ── Paso 4 · Propuesta técnica, como el bosquejo ──────────────────────
   Las dos etapas lado a lado y el color de cada estado de sección. */
.flujo-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin: .4rem 0 .6rem; }
.etapa {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel);
  padding: .7rem .9rem; display: flex; flex-direction: column; gap: .4rem;
}
.etapa[data-estado="en_curso"] { border-color: var(--cyan-dim); }
.etapa-titulo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.etapa p { font-size: .82rem; margin: 0; }
.etapa form { margin: 0; align-self: flex-start; }
.leyenda-estados { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; margin: 0 0 .6rem; }
.rec-pill.estado-borrador { background: var(--cyan-soft); color: var(--cyan); }
.rec-pill.estado-revisada { background: var(--green-soft); color: var(--green); }
.rec-pill.estado-revisar, .rec-pill.estado-sin-respuesta { background: var(--yellow-soft); color: var(--yellow); }
.rec-pill.estado-vacia { background: var(--red-soft); color: var(--red); }
#postulacion-propuesta-estados .postulacion-seccion > summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#postulacion-propuesta-estados .postulacion-seccion > summary > .dim {
  flex: 1 1 200px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem;
}

/* ── Paso 3 · Experiencia, como el bosquejo ─────────────────────────── */
.elegidos-titulo { font-size: .8rem; margin: 0 0 .3rem; }
.elegidos-lista { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .3rem; }
.elegidos-lista li {
  display: flex; align-items: center; gap: .6rem; background: var(--cyan-soft);
  border-radius: 5px; padding: .3rem .6rem; font-size: .85rem;
}
.elegido-orden { font-family: var(--mono); color: var(--cyan); min-width: 1.2rem; }
.elegido-nombre { flex: 1 1 auto; min-width: 0; }
.elegido-acciones { display: flex; gap: .25rem; flex: none; }
.elegido-acciones form { margin: 0; }
.post-experiencia-tabla tr.is-elegido td { background: var(--cyan-soft); }
.exp-meta { display: flex; gap: .7rem; font-size: .75rem; margin-top: .15rem; }
.parecido-alto { color: var(--green); }
.exp-vigencia { white-space: nowrap; }

/* ── Paso 5 · Revisar y generar ─────────────────────────────────────── */
.checklist-lista { list-style: none; padding: 0; margin: 0 0 .6rem; }
.checklist-lista li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.check-icono { font-family: var(--mono); width: 1.1rem; flex: none; text-align: center; }
.check-ok { color: var(--green); }
.check-aviso { color: var(--yellow); }
.check-no { color: var(--red); }
.checklist-lista a { color: var(--cyan); margin-left: .3rem; }
.candidato-criterios { min-width: 0; }
.candidato-criterios .crit { white-space: normal; }
.candidato-criterios .criterios-grupo { margin-bottom: .15rem; }
.candidato-criterios .criterios-rotulo { font-size: .78rem; margin-right: .4rem; }