:root {
  /* Superficies NEUTRAS + un solo acento.
     Antes todo estaba teñido de azul (fondo, paneles, bordes y encabezados celestes), lo que
     daba ese aspecto lavado y le restaba fuerza al propio acento. La práctica actual en apps
     de datos es la inversa: gris neutro para las superficies y color solo donde significa algo
     (acción, estado, alerta). Contrastes verificados AA sobre las tres superficies. */

  /* Superficies y texto — neutros */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #eceff3;      /* encabezados de tabla y hover */
  --text: #16191f;         /* 15.8:1 */
  --muted: #5b6472;        /* 5.4:1 */
  --border: #c8d0d9;       /* 1.56:1 — visible sin gritar */
  --border-suave: #e6e9ee;
  --sidebar: #ffffff;

  /* Acento: azul de la marca, reservado para lo interactivo */
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-suave: #eff6ff;

  /* Estado: texto en tono oscuro (AA), punto en tono vivo (forma, 3:1) */
  --cumple: #166534;
  --advertencia: #a04a06;
  --no_cumple: #b91c1c;
  --cumple-punto: #16a34a;
  --advertencia-punto: #d97706;
  --no_cumple-punto: #dc2626;

  --shadow: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: inherit; }

/* ===================== App shell (sidebar + content) ===================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; }
.brand.center { justify-content: center; padding: 0 0 18px; }
.logo { width: 34px; height: 34px; display: block; flex-shrink: 0; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt strong { font-size: 16px; }
.brand-txt small { color: var(--muted); font-size: 11px; }

.nav { display: flex; flex-direction: column; padding: 6px 10px; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--accent); color: #ffffff; font-weight: 600; }
.nav-ico { width: 20px; text-align: center; }
.nav-sep {
  margin: 14px 12px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted); opacity: 0.7;
}

.sidebar-foot { padding: 14px; border-top: 1px solid var(--border); }
.user-box { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.user-meta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--muted); font-size: 11px; }
.logout {
  display: block; text-align: center; padding: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: 13px;
}
.logout:hover { color: var(--text); border-color: var(--accent); }

.content { flex: 1; overflow-x: hidden; }
.page { max-width: 960px; margin: 0 auto; padding: 28px; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.page-head h1 { margin: 0 0 4px; font-size: 22px; }
.subtitle { margin: 0; color: var(--muted); font-size: 14px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card-title { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } .sidebar { width: 200px; } }

.badge-demo {
  background: var(--advertencia); color: #ffffff;
  font-weight: 700; font-size: 11px; letter-spacing: 0.5px;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}

/* ===================== Login ===================== */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  width: 360px; max-width: calc(100vw - 40px);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 30px;
  box-shadow: 0 10px 40px rgba(16,24,40,0.10);
}
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 13px; color: var(--muted); margin-top: 8px; }
.login-form input {
  padding: 12px 14px; font-size: 15px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
}
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-form button {
  margin-top: 16px; padding: 12px; font-size: 15px; font-weight: 600;
  background: var(--accent); color: #ffffff; border: none; border-radius: 10px; cursor: pointer;
}
.login-foot { margin: 16px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ===================== Forms (buscador) ===================== */
.buscador label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.input-row { display: flex; gap: 10px; }
.buscador input[type="text"], .buscador input[type="email"], .buscador textarea {
  width: 100%; padding: 14px 16px; font-size: 16px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: inherit;
}
.input-row input { flex: 1; }
.buscador input:focus, .buscador textarea:focus { outline: none; border-color: var(--accent); }
.buscador button, .user-form button {
  padding: 0 24px; font-size: 15px; font-weight: 600;
  background: var(--accent); color: #ffffff; border: none; border-radius: 10px; cursor: pointer;
}
.user-form button { padding: 12px 24px; margin-top: 10px; }
.buscador button:disabled { opacity: 0.5; cursor: default; }
.buscador button[type="submit"] { min-height: 48px; }

.bases-row { margin-top: 14px; }
.bases-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.bases-row input[type="file"] { font-size: 13px; color: var(--text); }
.nota-bases { font-size: 11px; color: var(--muted); margin: 6px 0 0; opacity: 0.85; }

.hidden { display: none; }

#estado-carga { text-align: center; color: var(--muted); margin-top: 36px; }
.nota-tiempo { font-size: 12px; opacity: 0.8; }
.spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; margin: 0 auto 12px; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-box {
  margin-top: 16px; padding: 16px;
  background: rgba(239, 68, 68, 0.12); border: 1px solid var(--no_cumple);
  border-radius: 10px; color: #b91c1c;
}
.ok-box {
  margin-bottom: 16px; padding: 14px;
  background: rgba(34,197,94,0.12); border: 1px solid var(--cumple);
  border-radius: 10px; color: #15803d;
}

/* ===================== Resultado (matriz) ===================== */
.resumen-card {
  margin-top: 8px; padding: 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
.resumen-card h2 { margin: 0 0 4px; font-size: 18px; }
.resumen-card .codigo { color: var(--muted); font-size: 13px; }
.resumen-card .resumen-texto { margin: 12px 0 0; }

/* Ranking en columnas reales: con flex por fila, los badges arrancaban en distinta posición
   según cuántos tuviera cada oferente. El grid vive en el <ul> y cada <li> aporta sus celdas
   (display:contents), así las columnas se alinean entre todas las filas. */
.ranking {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center; gap: 8px 12px;
}
.ranking li { display: contents; }
.ranking .of-nombre {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.of-chips { display: inline-flex; gap: 4px; justify-content: flex-end; }
.badge-hueco { display: block; }
.integridad, .dte, .cert { justify-self: start; white-space: nowrap; }
@media (max-width: 860px) {
  .ranking { grid-template-columns: 1fr; }
  .ranking li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                padding: 8px 0; border-bottom: 1px solid var(--border-suave); }
  .ranking .of-nombre { flex: 1 1 100%; white-space: normal; }
}
.chip { min-width: 24px; text-align: center; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #ffffff; }
.chip.cumple { background: var(--cumple); }
.chip.advertencia { background: var(--advertencia); }
.chip.no_cumple { background: var(--no_cumple); }

.integridad { padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: help; border: 1px solid var(--border); }
.integridad.ok { color: var(--cumple); border-color: var(--cumple); }
.integridad.sin_firma { color: var(--muted); }
.integridad.sospechoso { color: var(--advertencia); border-color: var(--advertencia); }
.integridad.alerta { color: #fff; background: var(--no_cumple); border-color: var(--no_cumple); }

.leyenda { display: flex; gap: 18px; flex-wrap: wrap; margin: 20px 0 10px; font-size: 13px; color: var(--muted); }
.leyenda .semaforo { margin-right: 4px; }
/* Los puntos son formas, no texto: llevan el tono vivo (basta 3:1) para que el semáforo
   siga leyéndose como semáforo; el texto usa el tono oscuro de la variable base. */
.semaforo.cumple { color: var(--cumple-punto); }
.semaforo.advertencia { color: var(--advertencia-punto); }
.semaforo.no_cumple { color: var(--no_cumple-punto); }
.semaforo.no_presenta { color: var(--no_cumple-punto); }

.tabla-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.matriz { border-collapse: collapse; width: 100%; font-size: 13px; }
.matriz th, .matriz td { border: 1px solid var(--border); padding: 10px; }
.matriz thead th { background: var(--panel-2); position: sticky; top: 0; z-index: 1;
  border-bottom: 2px solid var(--border); }
.matriz tbody tr:hover th.req { background: var(--accent-suave); }
.matriz th.esquina { text-align: left; color: var(--muted); font-weight: 600; }
.matriz th.of { min-width: 150px; text-align: center; }
.matriz th.of small { color: var(--muted); font-weight: 400; }
.matriz th.req { text-align: left; background: var(--panel); min-width: 200px; max-width: 280px; }
.matriz th.req .crit { margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--accent); }
.matriz th.req .cat { display: inline-block; margin-top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); background: var(--panel-2); padding: 2px 6px; border-radius: 4px; }
.cat.origen { color: #fff; background: var(--accent); margin-left: 4px; }
.ctx-nota { margin: 12px 0 0; padding: 8px 12px; background: var(--panel-2); border-radius: 8px; font-size: 12px; color: var(--text); }
.ctx-nota .cat { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; margin: 0 2px; }
.ctx-nota small { color: var(--muted); }
.matriz td.cell { text-align: center; cursor: help; }
/* La celda queda casi neutra y el estado se lee en la pastilla. Antes la celda iba teñida del
   mismo color que el punto (verde sobre verde claro = 1,45:1) y el indicador se perdía. */
.matriz td.cell.cumple { background: rgba(22,101,52,0.05); }
.matriz td.cell.advertencia { background: rgba(160,74,6,0.05); }
.matriz td.cell.no_cumple { background: rgba(185,28,28,0.06); }
.matriz td.cell.no_presenta { background: rgba(185,28,28,0.03); }
.matriz td.cell.vacio { color: var(--muted); }

/* Pastilla sólida con el símbolo en blanco: 6–7:1 en todos los estados. */
.matriz .semaforo, .leyenda .semaforo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 1; color: #ffffff;
}
.matriz .semaforo.cumple, .leyenda .semaforo.cumple { background: var(--cumple); }
.matriz .semaforo.advertencia, .leyenda .semaforo.advertencia { background: var(--advertencia); }
.matriz .semaforo.no_cumple, .leyenda .semaforo.no_cumple { background: var(--no_cumple); }
.matriz .semaforo.no_presenta, .leyenda .semaforo.no_presenta {
  background: transparent; color: var(--no_cumple); border: 2px solid var(--no_cumple);
}
.matriz .semaforo.no_verificable, .leyenda .semaforo.no_verificable {
  background: transparent; color: var(--muted); border: 2px dashed var(--muted);
}

/* Tooltip oscuro con texto claro (patrón habitual y el que más contrasta sobre cualquier
   superficie). Antes tenía fondo casi negro Y texto casi negro: era ilegible. */
.tooltip {
  position: absolute; max-width: 320px; padding: 10px 12px;
  background: #1f2430; border: 1px solid #343b4a; border-radius: 8px;
  font-size: 12px; color: #f2f4f7; pointer-events: none; z-index: 50;
  box-shadow: 0 8px 24px rgba(16,24,40,0.28);
}

/* ===================== Historial ===================== */
.historial { margin-top: 32px; }
.historial h2 { font-size: 15px; color: var(--muted); }
.historial ul { list-style: none; padding: 0; margin: 0; }
.historial li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.historial a { color: var(--text); text-decoration: none; }
.historial a:hover { color: var(--accent); }
.mini-semaforos { display: flex; gap: 6px; }
.mini-semaforos .dot { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #ffffff; }
.mini-semaforos .dot.cumple { background: var(--cumple); }
.mini-semaforos .dot.advertencia { background: var(--advertencia); }
.mini-semaforos .dot.no_cumple { background: var(--no_cumple); }

/* ===================== Autoevaluación (checklist 1 columna) ===================== */
.check-list { list-style: none; padding: 0; margin: 14px 0 0; }
.check-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
  background: var(--panel);
}
.check-item .semaforo { font-size: 20px; margin-top: 1px; }
.check-item .ci-body { flex: 1; }
.check-item .ci-nombre { font-weight: 600; }
.check-item .ci-crit { font-size: 12px; color: var(--accent); margin-top: 2px; }
.check-item .ci-hallazgo { font-size: 13px; color: var(--muted); margin-top: 4px; }
.check-item.no_cumple, .check-item.no_presenta { border-color: var(--no_cumple); background: rgba(239,68,68,0.06); }
.check-item.advertencia { border-color: var(--advertencia); }

/* ===================== Tablas (admin, precios) ===================== */
.tabla { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabla th, .tabla td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.tabla thead th {
  background: var(--panel-2); color: var(--text); font-weight: 700;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
/* Filas alternadas: con todo blanco y bordes claros, las filas largas se leían corridas. */
.tabla tbody tr:nth-child(even) { background: #fafbfc; }
.tabla tbody tr:hover { background: var(--accent-suave); }
.tabla td { vertical-align: top; }
.tabla td.c, .tabla th.c { text-align: center; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.tag.admin { background: var(--accent); color: #ffffff; }
.tag.ok { background: var(--cumple); color: #ffffff; }
.tag.off { background: var(--border); color: var(--muted); }

.user-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.user-form input[type="text"], .user-form input[type="email"] {
  width: 100%; padding: 11px 13px; font-size: 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.user-form input:focus { outline: none; border-color: var(--accent); }
.perms .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.perms .chk input { width: auto; }

/* ===================== Radar / bandeja de oportunidades ===================== */
.btn-sec { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; }
.btn-sm { padding: 6px 12px !important; font-size: 13px !important; min-height: auto !important; }
.bandeja-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.badge-nuevas { background: var(--no_cumple); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }

.oport-list { list-style: none; padding: 0; margin: 0; }
.oport-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--panel); }
.oport-item.nueva { border-left: 3px solid var(--accent); }
.oport-score {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #ffffff;
  background: var(--advertencia);
}
.oport-score.alto { background: var(--cumple); }
.oport-score.medio { background: var(--advertencia); }
.oport-score.bajo { background: var(--border); color: var(--text); }
.oport-body { flex: 1; min-width: 0; }
.oport-nombre { font-weight: 600; }
.oport-nombre a { color: var(--accent); text-decoration: none; }
.oport-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.oport-razon { font-size: 13px; color: var(--text); margin-top: 6px; font-style: italic; opacity: 0.9; }
.chip-leyenda { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin: 0 2px; }
.chip-leyenda.alto { background: var(--cumple); color: #fff; }
.chip-leyenda.medio { background: var(--advertencia); color: #fff; }
.chip-leyenda.bajo { background: var(--border); color: var(--text); }

/* Pills de región y riesgo del organismo */
.pill-region, .pill-riesgo, .pill-cotizando { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-right: 6px; margin-top: 4px; border: 1px solid var(--border); }
.pill-region { color: var(--muted); background: var(--panel-2); }
.pill-riesgo.bajo { color: #15803d; border-color: var(--cumple); background: rgba(22,163,74,0.08); }
.pill-riesgo.medio { color: #b45309; border-color: var(--advertencia); background: rgba(217,119,6,0.10); }
.pill-riesgo.alto { color: #fff; background: var(--no_cumple); border-color: var(--no_cumple); }
/* Origen de cada oportunidad: Compra Ágil (monto menor, cierra en días) o Licitación
   pública. Va delante del código para distinguirlas de un vistazo en un listado mixto.
   Texto blanco sobre ambos fondos: azul de acento 5,2:1 y pizarra 10,3:1. La pizarra se
   eligió para no confundirse con los colores del semáforo (verde, ámbar, rojo). */
.pill-origen { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: middle;
  color: #fff; margin-right: 6px; white-space: nowrap; }
.pill-origen.agil { background: var(--accent); }
.pill-origen.licitacion { background: #334155; }
.pill-cotizando { color: var(--muted); background: var(--panel-2); }

/* ---- Precios: última Compra Ágil adjudicada (precio realmente pagado) ---- */
.ca-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--panel-2); }
.ca-cargando, .ca-vacio { color: var(--muted); font-size: 13px; }
.ca-titulo { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.ca-lic { font-size: 13px; margin-bottom: 10px; }
.ca-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; }
.ca-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ca-v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ca-sub { font-weight: 400; color: var(--muted); }
/* El ahorro contra el presupuesto estimado se lee de un vistazo: va en verde con texto
   blanco, no verde sobre claro, que no alcanza el contraste mínimo. */
.ca-ahorro { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: #fff; background: var(--cumple); }
.ca-parcial { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 5px; border-radius: 4px; color: #fff; background: var(--advertencia); cursor: help; }
.ca-motivo { margin-top: 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }

/* ===================== Precios: sugerido + referencias ===================== */
.precio-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.precio-card h3 { margin: 0 0 12px; font-size: 16px; text-transform: capitalize; }
.sug-box { background: var(--accent-suave); border: 1px solid var(--accent); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.sug-precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sug-label { font-size: 13px; color: var(--muted); }
.sug-valor { font-size: 26px; font-weight: 800; color: var(--accent); }
.sug-ctx { font-size: 12px; color: var(--muted); }
.sug-razon { font-size: 13px; color: var(--text); margin-top: 6px; font-style: italic; }
.ref-titulo { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 4px 0 8px; }
.tag-tipo { display: inline-block; background: var(--advertencia); color: #ffffff; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.oport-item .btn-seguir { align-self: center; white-space: nowrap; }

/* --- Foro de preguntas y respuestas --- */
.foro-box { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.foro-box > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--text); user-select: none; }
.foro-box > summary:hover { color: var(--accent); }
.foro-list { list-style: none; margin: 0; padding: 0 14px 12px; }
.foro-item { border-top: 1px solid var(--border); padding: 12px 0; }
.foro-p { font-weight: 600; color: var(--text); }
.foro-n { display: inline-block; font-size: 11px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-right: 6px; color: var(--muted); }
.foro-r { margin-top: 6px; padding-left: 12px; border-left: 3px solid var(--accent); color: var(--text); }
.foro-r.pendiente { border-left-color: var(--border); color: var(--muted); font-style: italic; }
.foro-fecha { color: var(--muted); font-size: 11px; margin-left: 6px; }

/* --- Facturas electrónicas (DTE) --- */
.dte { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.dte.valido { color: var(--cumple); border-color: var(--cumple); }
.dte.alterado { color: var(--no_cumple); border-color: var(--no_cumple); font-weight: 600; }
.dte.sin_timbre_legible { color: var(--advertencia); border-color: var(--advertencia); }
.dte.no_verificable { color: var(--muted); }
.dte-box { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.dte-box.alterado { border-color: var(--no_cumple); }
.dte-box > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; user-select: none; }
.dte-list { list-style: none; margin: 0; padding: 0 14px; }
.dte-item { border-top: 1px solid var(--border); padding: 12px 0; }
.dte-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dte-datos { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.dte-motivos { margin: 8px 0 0; padding-left: 20px; color: var(--no_cumple); font-size: 13px; }
.dte-nota { padding: 10px 14px 12px; margin: 0; font-size: 11px; color: var(--muted); }

/* --- Certificados --- */
.cert { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.cert.firmado { color: var(--cumple); border-color: var(--cumple); }
.cert.verificable { color: var(--accent); border-color: var(--accent); }
.cert.sin_respaldo { color: var(--muted); }
.cert.vencido { color: var(--advertencia); border-color: var(--advertencia); font-weight: 600; }
.cert.adulterado { color: var(--no_cumple); border-color: var(--no_cumple); font-weight: 600; }
.cert-box { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.cert-box.adulterado { border-color: var(--no_cumple); }
.cert-box.vencido { border-color: var(--advertencia); }
.cert-box > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; user-select: none; }
.cert-list { list-style: none; margin: 0; padding: 0 14px; }
.cert-item { border-top: 1px solid var(--border); padding: 12px 0; }
.cert-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cert-datos { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.cert-motivos { margin: 8px 0 0; padding-left: 20px; color: var(--advertencia); font-size: 13px; }
.cert-acciones { margin: 8px 0 0; padding-left: 20px; color: var(--accent); font-size: 13px; }
.cert-nota { padding: 10px 14px 12px; margin: 0; font-size: 11px; color: var(--muted); }

/* --- Documentos presentados por el oferente --- */
.doc-box { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.doc-box > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; user-select: none; }
.doc-cat { padding: 4px 14px 10px; }
.doc-lista { margin: 6px 0 0; padding-left: 22px; font-size: 13px; color: var(--text); }
.doc-lista li { padding: 1px 0; }

/* --- Estado "no verificable" y avisos de cobertura --- */
.semaforo.no_verificable { color: var(--muted); font-weight: 700; }
.cell.no_verificable { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--panel-2) 4px, var(--panel-2) 8px); }
.check-item.no_verificable { opacity: 0.9; }
.cobertura-aviso {
  margin: 12px 0; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: #fff7ed; border: 1px solid var(--advertencia); color: #7c2d12;
}
.cobertura-aviso em { font-style: normal; font-weight: 600; }
.cobertura-aviso.ocr { background: var(--accent-suave); border-color: var(--accent); color: #1e3a8a; }

/* --- Gráfico comparativo de precios --- */
.grafico-precios { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.gp-fila { display: flex; flex-direction: column; gap: 4px; }
.gp-cab { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.gp-lbl { font-weight: 600; color: var(--text); }
.gp-det { color: var(--muted); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gp-pista { background: var(--panel-2); border-radius: 4px; height: 14px; overflow: hidden; }
.gp-bar { height: 100%; border-radius: 4px; }
/* Las referencias van en gris: el azul queda para el dato accionable (el sugerido). */
.gp-bar.ref { background: #98a2b3; }
.gp-bar.sug { background: var(--accent); }

/* --- Historial de consultas de precios --- */
.hist-nota { color: var(--muted); font-size: 12px; margin: -6px 0 10px; }
.historial a.hist-precio { color: var(--accent); text-decoration: none; font-weight: 600; }
.historial a.hist-precio:hover { text-decoration: underline; color: var(--accent-2); }
.hist-meta { color: var(--muted); font-size: 12px; margin-left: 8px; }
.hist-aviso {
  margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: var(--accent-suave); border: 1px solid var(--border); color: var(--text);
}
.gp-aviso { font-size: 12px; color: var(--advertencia); margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--advertencia); }

/* --- Mi historial --- */
.hist-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.hist-tab { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.hist-tab:hover { color: var(--text); border-color: var(--muted); }
.hist-tab.activa { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 600; }
.hist-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.hist-check-todos { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.hist-lista { display: flex; flex-direction: column; }
.hist-fila { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-suave); cursor: pointer; }
.hist-fila:hover { background: var(--accent-suave); }
.hist-txt { display: flex; flex-direction: column; min-width: 0; }
.hist-titulo { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-detalle { font-size: 12px; color: var(--muted); }
.hist-fecha { font-size: 12px; color: var(--muted); white-space: nowrap; }
.btn-peligro { background: var(--no_cumple); color: #ffffff; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-peligro:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
.btn-peligro:not(:disabled):hover { background: #991b1b; }

/* --- Registro y aviso de prueba vencida --- */
.login-card.ancha { max-width: 460px; }
.registro-intro { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 18px; }
.opcional { color: var(--muted); font-weight: 400; }
.vencida-box { border: 1px solid var(--advertencia); border-radius: 10px; padding: 18px; background: #fffbf5; }
.vencida-box h2 { margin: 0 0 10px; font-size: 17px; color: var(--text); }
.vencida-box p { font-size: 14px; color: var(--text); margin: 8px 0; }
.vencida-contacto { text-align: center; margin: 16px 0 8px !important; }
.btn-contacto { display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.btn-contacto:hover { background: var(--accent-2); }
.vencida-nota { font-size: 12px !important; color: var(--muted) !important; }
/* Aviso de días restantes en el sidebar */
.demo-aviso { margin: 10px 12px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  background: #fffbf5; border: 1px solid var(--advertencia); color: #7c2d12; }
.demo-aviso strong { display: block; font-size: 13px; }
.tag.prueba { background: var(--advertencia); color: #ffffff; }
.plan-celda { white-space: nowrap; }
.plan-form { display: flex; gap: 4px; justify-content: center; margin-top: 5px; }
.mini-btn { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; }
.mini-btn.suave { background: transparent; color: var(--accent); }
.mini-btn:hover { background: var(--accent-2); color: #fff; }

/* ===========================================================================
   Móvil: el sidebar de 248px dejaba 119px útiles de contenido en un teléfono.
   Bajo 820px pasa a ser un panel deslizante que se abre desde la barra superior.
   =========================================================================== */
.topbar { display: none; }
.overlay-menu { display: none; }

@media (max-width: 820px) {
  .topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    padding: 10px 14px; background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .topbar-logo { display: block; }
  .topbar-nombre { font-size: 16px; color: var(--text); }

  /* Botón de menú: 44px de lado, el mínimo cómodo para el dedo */
  .btn-menu {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
    padding: 0 10px; cursor: pointer;
  }
  .btn-menu span { display: block; height: 2px; background: var(--text); border-radius: 2px; }

  .app { display: block; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 268px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 30px rgba(16,24,40,0.18);
    overflow-y: auto;
  }
  .sidebar.abierto { transform: translateX(0); }

  .overlay-menu {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(16,24,40,0.45);
  }
  .overlay-menu[hidden] { display: none; }

  .content { width: 100%; }
  .page { padding: 16px 14px 28px; max-width: 100%; }
  .page-head { flex-direction: column; gap: 8px; }
  .page-head h1 { font-size: 19px; }

  /* Formularios: 16px evita que iOS haga zoom al enfocar un campo */
  input, textarea, select, button { font-size: 16px; }
  .card { padding: 14px; }
  .input-row, .bases-row { flex-direction: column; align-items: stretch; }
  button[type="submit"] { width: 100%; min-height: 44px; }

  /* Tablas anchas: se desplazan dentro de su caja, nunca empujan la página */
  .tabla-scroll { -webkit-overflow-scrolling: touch; }
  .tabla th, .tabla td { padding: 8px; font-size: 13px; }
  .matriz th.req { min-width: 150px; max-width: 200px; }
  .matriz th.of { min-width: 120px; }

  /* Historial y listas: la fecha baja bajo el título en vez de apretarlo */
  .hist-fila { grid-template-columns: auto minmax(0,1fr); row-gap: 2px; }
  .hist-fecha { grid-column: 2; }
  .historial li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hist-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; }
  .hist-tab { white-space: nowrap; }
  .hist-acciones { flex-direction: column; align-items: stretch; }
  .btn-peligro { width: 100%; min-height: 44px; }

  /* Bloques de detalle */
  .gp-cab { flex-wrap: wrap; }
  .login-card { margin: 20px auto; }
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width: 380px) {
  .page { padding: 12px 10px 24px; }
  .card { padding: 12px; }
  .sug-valor { font-size: 22px; }
}

/* --- Selector de idioma --- */
.selector-idioma { display: block; margin-bottom: 8px; }
.selector-idioma select {
  width: 100%; padding: 7px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); cursor: pointer;
}
.selector-idioma select:hover { border-color: var(--accent); }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===================== Ayuda: botón "Guía rápida" en la barra ===================== */
/* Es un <button> y no un enlace, así que se le quita el estilo de botón para que se vea
   igual que el resto de los ítems de la barra. */
button.nav-item { background: none; border: 0; width: 100%; text-align: left;
  font: inherit; cursor: pointer; }
button.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===================== Ayuda: "¿Cómo funciona?" en cada módulo ===================== */
.ayuda-modulo { margin-top: 10px; max-width: 70ch; }
.ayuda-modulo > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--accent-2); font-size: 13px; font-weight: 600; list-style: none; user-select: none;
  padding: 4px 10px; border-radius: 999px; background: var(--accent-suave); }
.ayuda-modulo > summary::-webkit-details-marker { display: none; }
.ayuda-modulo > summary::before { content: "?"; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; }
.ayuda-modulo > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ayuda-modulo[open] > summary { margin-bottom: 8px; }
.ayuda-pasos { margin: 0; padding: 12px 14px 12px 34px; background: var(--panel);
  border: 1px solid var(--border-suave); border-radius: 10px; display: grid; gap: 6px;
  font-size: 14px; line-height: 1.5; color: var(--text); }
.ayuda-pasos li::marker { color: var(--accent); font-weight: 700; }
.ayuda-tip { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ayuda-tip strong { color: var(--text); }

/* ===================== Recorrido de bienvenida ===================== */
/* Por encima de todo, incluida la barra lateral en celular (z-index 60). */
.tour { position: fixed; inset: 0; z-index: 1000; }
/* El foco oscurece todo MENOS el elemento: una sombra enorme alrededor de un recuadro
   transparente. Así el elemento resaltado se ve tal cual es en la página. */
.tour-foco { position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.58), 0 0 0 3px var(--accent);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour.tour-centrado { background: rgba(15, 23, 42, 0.58); display: grid; place-items: center; }
.tour-tarjeta { position: fixed; width: min(360px, calc(100vw - 32px)); background: var(--panel);
  color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28); transition: top .25s ease, left .25s ease; }
.tour.tour-centrado .tour-tarjeta { position: static; }
.tour-cont { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.tour-titulo { margin: 0 0 6px; font-size: 18px; line-height: 1.25; text-wrap: balance; }
.tour-texto { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tour-acciones { display: flex; align-items: center; gap: 8px; }
.tour-espacio { flex: 1; }
.tour-saltar { background: none; border: 0; padding: 6px 4px; color: var(--muted); font: inherit;
  font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-saltar:hover { color: var(--text); }
.tour button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tour-foco, .tour-tarjeta { transition: none; }
}
/* Los botones solo tienen estilo dentro de formularios concretos (.buscador, login), así
   que los del recorrido llevan el suyo. Blanco sobre el acento: 5,2:1. */
.tour-acciones button[data-accion]:not(.tour-saltar) { border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer; }
.tour-acciones button[data-accion]:not(.tour-saltar):hover { background: var(--accent-2); border-color: var(--accent-2); }
.tour-acciones button[data-accion="anterior"] { background: transparent; color: var(--accent); }
.tour-acciones button[data-accion="anterior"]:hover { background: var(--accent-suave); color: var(--accent-2); }

/* ===================== Escritorio (página de inicio) =====================
   Se escanea, no se lee: primero el resumen (métricas), después lo urgente con su nivel
   marcado en forma y color (franja + etiqueta), y el detalle abajo. Los niveles usan los
   mismos tonos del semáforo; el azul queda para lo que se puede clickear. */
.page.ancha { max-width: 1180px; }
.esc-head { align-items: center; }
.esc-en-curso { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--accent-2); background: var(--accent-suave); border: 1px solid #bfdbfe;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.esc-pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: esc-pulso 1.6s ease-in-out infinite; }
@keyframes esc-pulso { 50% { opacity: .3; } }

.esc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.esc-kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s; }
.esc-kpi:hover { border-color: var(--accent); transform: translateY(-1px); }
.esc-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.esc-kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.esc-kpi-valor { font-size: 32px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.esc-kpi-sub { font-size: 12.5px; color: var(--muted); }
.esc-kpi.tono-acento .esc-kpi-valor { color: var(--accent-2); }
.esc-kpi.tono-atencion .esc-kpi-sub { color: var(--advertencia); font-weight: 600; }

.esc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.esc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.esc-col > .card { margin-bottom: 0; }
@media (max-width: 980px) { .esc-grid { grid-template-columns: 1fr; } }

.esc-titulo { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.esc-titulo-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.esc-card > .esc-titulo { margin-bottom: 12px; }
.esc-nota { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.esc-vacio { margin: 0; padding: 14px; font-size: 13.5px; color: var(--muted); background: var(--panel-2); border-radius: 8px; }
.esc-vacio.ok { color: var(--cumple); background: rgba(22,163,74,0.08); font-weight: 600; }
.esc-conteo { font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--text); padding: 1px 8px; border-radius: 999px; }
.esc-ver-todo { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.esc-ver-todo:hover { text-decoration: underline; }
.esc-card button { cursor: pointer; border-radius: 8px; font: inherit; font-weight: 600; }

/* Lo que requiere atención */
.esc-atencion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esc-at { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 11px 14px; border: 1px solid var(--border-suave); border-left: 4px solid var(--border); border-radius: 8px; background: var(--panel); }
.esc-at-nivel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 66px; }
.esc-at-texto { font-size: 14px; }
.esc-at-accion { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.esc-at-accion:hover { text-decoration: underline; }
.esc-at.nivel-critico { border-left-color: var(--no_cumple-punto); background: rgba(220,38,38,0.05); }
.esc-at.nivel-critico .esc-at-nivel { color: var(--no_cumple); }
.esc-at.nivel-atencion { border-left-color: var(--advertencia-punto); }
.esc-at.nivel-atencion .esc-at-nivel { color: var(--advertencia); }
.esc-at.nivel-info { border-left-color: var(--accent); }
.esc-at.nivel-info .esc-at-nivel { color: var(--accent-2); }
@media (max-width: 600px) {
  .esc-at { grid-template-columns: 1fr; }
  .esc-at-accion { justify-self: start; }
}

/* Recomendaciones de la IA */
.esc-ia { border-color: #bfdbfe; background: linear-gradient(180deg, var(--accent-suave) 0, var(--panel) 90px); }
.esc-ia-marca { color: var(--accent); }
.esc-ia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esc-ia-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--border-suave); border-radius: 8px; }
.esc-ia-prio { grid-row: span 2; align-self: start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.esc-ia-prio.alta { color: #fff; background: var(--no_cumple); border-color: var(--no_cumple); }
.esc-ia-prio.media { color: var(--advertencia); border-color: var(--advertencia-punto); background: rgba(217,119,6,0.08); }
.esc-ia-tit { font-weight: 700; font-size: 14px; }
.esc-ia-det { font-size: 13.5px; color: var(--text); }
.esc-ia-det a { color: var(--accent); font-weight: 600; text-decoration: none; }
.esc-ia-aviso { margin-top: 12px; font-size: 11.5px; }
.esc-ia-cargando { display: flex; flex-direction: column; gap: 8px; }
.esc-skel { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2) 0, #f8fafc 50%, var(--panel-2) 100%);
  background-size: 200% 100%; animation: esc-skel 1.3s linear infinite; }
.esc-skel.corto { width: 60%; }
@keyframes esc-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Cuenta regresiva de cierre */
.esc-cuenta { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.esc-cuenta.atencion { color: var(--advertencia); }
.esc-cuenta.critico { color: var(--no_cumple); }
.esc-cuenta.grande { display: inline-flex; justify-content: center; min-width: 74px; padding: 5px 8px; border-radius: 8px;
  font-size: 12.5px; background: var(--panel-2); color: var(--text); }
.esc-cuenta.grande.atencion { background: rgba(217,119,6,0.12); color: var(--advertencia); }
.esc-cuenta.grande.critico { background: var(--no_cumple); color: #fff; }

.esc-cierres, .esc-recientes { list-style: none; margin: 0; padding: 0; }
.esc-cierres li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-suave); }
.esc-cierres li:last-child { border-bottom: 0; }
.esc-cierre-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.esc-cierre-cod { font-weight: 700; font-size: 13px; color: var(--accent); text-decoration: none; }
.esc-cierre-nombre { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Gráfico: barras apiladas por día (licitación abajo, Compra Ágil arriba) */
.esc-barras { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 150px;
  padding-top: 6px; background: repeating-linear-gradient(to top, transparent 0 36px, var(--border-suave) 36px 37px); }
.esc-barra { display: flex; flex-direction: column; align-items: center; height: 100%; }
.esc-barra-pila { flex: 1; width: 100%; max-width: 22px; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.esc-barra-pila .seg { display: block; width: 100%; min-height: 3px; }
.esc-barra-pila .seg.lic { background: #334155; border-radius: 0; }
.esc-barra-pila .seg.agil { background: var(--accent); }
.esc-barra-pila .seg:last-child { border-radius: 4px 4px 0 0; }
.esc-barra-dia { font-size: 10.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.esc-barra-dia.hoy { color: var(--text); font-weight: 700; }
.esc-leyenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.esc-leyenda .punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.esc-leyenda .punto.lic { background: #334155; }
.esc-leyenda .punto.agil { background: var(--accent); margin-left: 10px; }

/* Actividad reciente */
.esc-recientes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-suave); }
.esc-recientes li:last-child { border-bottom: 0; }
.esc-recientes a { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.esc-recientes a:hover .esc-rec-nombre { color: var(--accent); }
.esc-rec-modulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.esc-rec-nombre { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-semaforo { display: inline-flex; gap: 4px; flex-shrink: 0; }
.esc-semaforo .s { font-size: 11px; font-weight: 700; min-width: 24px; text-align: center; padding: 1px 6px; border-radius: 999px; color: #fff; font-variant-numeric: tabular-nums; }
.esc-semaforo .rojo { background: var(--no_cumple); }
.esc-semaforo .amarillo { background: var(--advertencia); }
.esc-semaforo .verde { background: var(--cumple); }

.esc-seguir { align-self: center; white-space: nowrap; }
@media (max-width: 600px) {
  .esc-kpi-valor { font-size: 26px; }
  .esc-kpi { padding: 12px 14px; }
  .esc-kpi-label, .esc-kpi-sub { font-size: 11.5px; }
  .oport-item .esc-seguir { align-self: flex-start; }
  .esc-ia-item { grid-template-columns: 1fr; gap: 4px; }
  /* En pantallas angostas el botón "Seguir" baja a su propia línea: al lado del texto le
     robaba un tercio del ancho y los nombres quedaban en columnas de dos palabras. */
  .oport-item { flex-wrap: wrap; }
  .oport-body { flex-basis: calc(100% - 60px); }
  .oport-item .esc-seguir, .oport-item .btn-seguir { margin-left: 54px; align-self: flex-start; }
  .esc-ia-prio { grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .esc-pulso, .esc-skel { animation: none; }
  .esc-kpi { transition: none; }
}

/* ===================== Radar: filtros de la bandeja ===================== */
.filtros-bandeja { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 12px 14px; margin: 4px 0 8px; background: var(--panel-2); border: 1px solid var(--border-suave); border-radius: 10px; }
.filtro { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.filtro select { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 28px 7px 10px; min-width: 130px; max-width: 220px; }
.filtro select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filtro-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding-bottom: 8px; cursor: pointer; }
.filtro-chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.filtros-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-bottom: 2px; }
.btn-link { background: none; border: 0; padding: 4px 2px; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-link[hidden] { display: none; }
#btn-exportar { cursor: pointer; border-radius: 8px; font-weight: 600; }
#btn-exportar:disabled { opacity: .45; cursor: not-allowed; }
.filtros-conteo { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.oport-item.hidden { display: none; }
@media (max-width: 600px) {
  .filtro { flex: 1 1 calc(50% - 7px); }
  .filtro select { max-width: none; min-width: 0; width: 100%; }
  .filtros-acciones { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ===================== Radar: diagnóstico de palabras clave ===================== */
.diag-caja { margin-top: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid #fcd34d;
  background: rgba(217,119,6,0.08); display: flex; flex-direction: column; gap: 6px; }
.diag-caja.hidden { display: none; }
.diag-caja.cero { margin: 0 0 16px; border-color: var(--border); background: var(--panel); box-shadow: var(--shadow); padding: 14px 16px; }
.diag-item { margin: 0; font-size: 13.5px; color: var(--text); padding-left: 22px; position: relative; }
.diag-item::before { content: "⚠"; position: absolute; left: 0; color: var(--advertencia); }
.diag-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.diag-lista { margin: 0; padding-left: 20px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }

/* ===================== Administración: usuarios y actividad ===================== */
.link-actividad { color: var(--accent); font-weight: 600; text-decoration: none; }
.link-actividad:hover { text-decoration: underline; }
.celda-sub { font-size: 11.5px; color: var(--muted); }
.celda-fecha { white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fila-baja td { opacity: .55; }
.fila-baja td.acciones-usuario { opacity: 1; }
.acciones-usuario { white-space: nowrap; }
.acciones-usuario form { display: inline; margin: 0; }
.acciones-usuario .mini-btn { margin: 2px 2px 2px 0; text-decoration: none; display: inline-block; }
.mini-btn.peligro { background: transparent; color: var(--no_cumple); border: 1px solid var(--no_cumple-punto); }
.mini-btn.peligro:hover { background: var(--no_cumple); color: #fff; }

.volver { margin: 0 0 8px; font-size: 13px; }
.volver a { color: var(--accent); text-decoration: none; font-weight: 600; }
.act-valor-fecha { font-size: 22px; }
.act-dia { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.act-dia:first-of-type { margin-top: 0; }
.act-eventos { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--border-suave); }
.act-ev { display: flex; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.act-hora { flex-shrink: 0; width: 42px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; padding-top: 1px; }
.act-ev.tipo-login .act-texto, .act-ev.tipo-registro .act-texto { font-weight: 600; }
.act-ev.alerta .act-texto { color: var(--no_cumple); font-weight: 600; }
.act-perfil { margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.act-perfil dt { color: var(--muted); font-weight: 600; font-size: 12px; }
.act-perfil dd { margin: 0; }
.act-modulos { list-style: none; margin: 0; padding: 0; }
.act-modulos li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border-suave); font-size: 13.5px; }
.act-modulos li:last-child { border-bottom: 0; }
.act-modulos strong { font-variant-numeric: tabular-nums; }

/* ===================== Administración: indicadores ===================== */
.ind-periodo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ind-periodo .filtro-chk { padding-bottom: 0; font-size: 13px; color: var(--muted); }
.segmentado { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.segmentado button { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.segmentado button + button { border-left: 1px solid var(--border); }
.segmentado button.activo { background: var(--accent); color: #fff; }
.segmentado button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ind-sep { color: var(--muted); font-weight: 400; font-size: 20px; }
.ind-valor-texto { font-size: 22px; }
.ind-pulso { display: inline-block; margin-right: 8px; vertical-align: middle; }
.sube { color: var(--cumple); font-weight: 700; }
.baja { color: var(--no_cumple); font-weight: 700; }
.ind-atencion { color: var(--advertencia); font-weight: 600; }
.esc-kpis + .esc-kpis { margin-top: -6px; }
.ind-barras { height: 130px; gap: 2px; }
.ind-horas { grid-template-columns: repeat(24, 1fr); gap: 2px; height: 110px; }
.ind-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ind-embudo li, .ind-hbarras li { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ind-emb-barra, .ind-hb-barra { height: 12px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.ind-emb-barra span, .ind-hb-barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.ind-emb-n, .ind-hb-n { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 56px; }
.ind-emb-n small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.ind-hbarras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ind-hbarras.acciones .ind-hb-barra span { background: #334155; }
.ind-atender { list-style: none; margin: 0; padding: 0; }
.ind-atender li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border-suave); }
.ind-atender li:last-child { border-bottom: 0; }
.ind-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ind-motivo { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--advertencia); background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.35); }
.ind-lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ind-lista-simple li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ind-top { font-size: 13px; }
@media (max-width: 600px) {
  .ind-embudo li, .ind-hbarras li { grid-template-columns: 1fr auto; }
  .ind-emb-barra, .ind-hb-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* ===================== Radar: conceptos monitoreados =====================
   Interruptor compacto (.sw) reutilizado en los correos y en cada concepto: un checkbox
   real con role="switch" debajo, así funciona con teclado y lector de pantalla. */
.sw-fila { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
.sw-etiqueta { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.sw-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--border); transition: background .15s; flex-shrink: 0; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.3); transition: transform .15s; }
.sw-input:checked + .sw { background: var(--cumple-punto); }
.sw-input:checked + .sw::after { transform: translateX(16px); }
.sw-input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-input:disabled + .sw { opacity: .55; }

.rd-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rd-nota { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.rd-estado-correo { margin: 6px 0 0; min-height: 0; font-size: 12.5px; color: var(--cumple); text-align: right; }
.rd-estado-correo:empty { display: none; }
.rd-agregar { display: flex; gap: 8px; margin: 14px 0 0; }
.rd-agregar input { flex: 1 1 auto; width: auto !important; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }
.rd-agregar input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.rd-agregar button { flex: 0 0 auto; width: auto !important; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }
.rd-agregar button:hover { background: var(--accent-2); }
.rd-agregar button:disabled { opacity: .6; cursor: wait; }
.rd-error { margin: 8px 0 0; font-size: 13px; color: var(--no_cumple); }
.rd-lista-cab { display: flex; justify-content: flex-end; margin: 12px 0 6px; }
.rd-cupo { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-cupo:empty { display: none; }
.rd-conceptos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-suave); border-radius: 10px; overflow: hidden; }
.rd-conceptos:empty { display: none; }
.rd-concepto { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--panel); }
.rd-concepto + .rd-concepto { border-top: 1px solid var(--border-suave); }
.rd-c-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-c-texto { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.rd-c-meta { font-size: 12px; color: var(--muted); }
.rd-c-pausa { font-weight: 700; color: var(--advertencia); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.rd-c-aviso { font-size: 12.5px; color: var(--advertencia); margin-top: 2px; }
.rd-concepto.pausado { background: var(--panel-2); }
.rd-concepto.pausado .rd-c-texto { color: var(--muted); }
.rd-c-borrar { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 13px; cursor: pointer; }
.rd-c-borrar:hover { color: var(--no_cumple); border-color: var(--border); background: var(--panel); }
.rd-c-borrar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill-concepto { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-right: 6px;
  margin-top: 4px; color: var(--accent-2); background: var(--accent-suave); border: 1px solid #bfdbfe; }
@media (max-width: 600px) {
  .rd-cab { flex-direction: column; }
  .rd-estado-correo { text-align: left; }
  .rd-concepto { gap: 10px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }