/* app.css — Matriz de Proyectos TI. Dark sobrio, cero dependencias.
 * spec/UI.md §1. Todo el CSS vive aquí: cero <style> inline, cero style="…"
 * en las plantillas (piso CSP, spec/UI.md §0).
 */

:root {
  --bg: #0e1116; /* fondo casi negro, cálido-neutro */
  --bg-panel: #161b22; /* tarjetas / paneles */
  --bg-elev: #1c222b; /* filas hover, inputs */
  --linea: #2a313c; /* bordes 1px */
  --txt: #e6edf3; /* texto principal */
  --txt-mut: #9aa7b4; /* texto secundario */
  --txt-tenue: #6b7684; /* metadatos, timestamps */
  --acento: #4c8dff; /* único acento: enlaces, foco, botón primario */
  --ok: #3fb950; /* estatus sano / KPI al día */
  --alerta: #d29922; /* sin_compromiso / preliminar */
  --grave: #f85149; /* VENCIDO / bloqueado / déficit>0 */
  --radio: 10px;
  --gap: 16px;
  --fuente: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
}

a {
  color: var(--acento);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 6px 10px;
}

button {
  cursor: pointer;
  background: var(--acento);
  color: #0b1220;
  font-weight: 600;
  border: none;
}

button:hover {
  filter: brightness(1.08);
}

.mono {
  font-family: var(--mono);
}

/* --- Barra superior + navegación (templates/base.html) --- */

.barra {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 12px var(--gap);
  border-bottom: 1px solid var(--linea);
  background: var(--bg-panel);
}

.barra .marca {
  font-weight: 700;
  color: var(--txt);
}

.barra nav {
  display: flex;
  gap: var(--gap);
  flex: 1;
}

.barra nav a {
  color: var(--txt-mut);
}

.barra nav a:hover {
  color: var(--txt);
}

.sesion {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sesion .quien {
  color: var(--txt-mut);
}

.rol {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  color: var(--txt-tenue);
}

.rol-admin_ti {
  color: var(--acento);
  border-color: var(--acento);
}

.rol-direccion {
  color: var(--txt-mut);
}

.sesion form {
  margin: 0;
}

.sesion button {
  background: transparent;
  color: var(--txt-mut);
  border: 1px solid var(--linea);
  font-weight: 400;
}

/* --- Avisos --- */

.aviso-federacion {
  background: color-mix(in srgb, var(--alerta) 15%, var(--bg-panel));
  color: var(--alerta);
  border-bottom: 1px solid var(--linea);
  padding: 8px var(--gap);
  font-size: 13px;
}

/* --- Contenido --- */

#contenido {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap);
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--gap);
  margin-bottom: var(--gap);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
}

tr:hover td {
  background: var(--bg-elev);
}

.error {
  color: var(--grave);
  font-size: 13px;
  margin-top: 4px;
}

/* --- Semáforos (cero color inline; spec/UI.md §4) --- */

.sem-ok {
  color: var(--ok);
}

.sem-alerta {
  color: var(--alerta);
}

.sem-grave {
  color: var(--grave);
}

.sem-neutro,
.sem-tenue {
  color: var(--txt-tenue);
}

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

.badge.alerta {
  background: color-mix(in srgb, var(--alerta) 20%, transparent);
  color: var(--alerta);
}

.badge.grave {
  background: color-mix(in srgb, var(--grave) 20%, transparent);
  color: var(--grave);
}

/* --- Feed de actividad (SSE, patrón A de spec/UI.md §6.1) --- */

.feed {
  position: fixed;
  right: var(--gap);
  bottom: var(--gap);
  width: 320px;
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}

.feed-item {
  background: var(--bg-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--txt-mut);
}

/* --- Anillo delgado standalone (templates/standalone/anillo.html) --- */

body.anillo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--gap);
}

body.anillo main {
  max-width: 420px;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px var(--gap);
  text-align: center;
}

body.anillo .folio {
  font-size: 20px;
  letter-spacing: 0.03em;
}

body.anillo .estado {
  color: var(--txt-mut);
  margin-bottom: var(--gap);
}

/* --- Responsive: tabla -> tarjetas (spec/UI.md §1) --- */

@media (max-width: 800px) {
  .barra {
    flex-wrap: wrap;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    margin-bottom: 8px;
  }

  td {
    border-bottom: none;
  }
}

/* Contenedores de tablas anchas: scroll propio, jamás scroll horizontal del
 * body (regla dura de artefactos/paneles anchos). */
.tabla-envoltura {
  overflow-x: auto;
}

/* .tabla: tipografía compacta + cabecera en mayúsculas para las tablas
 * densas del cockpit (todas, tras la unificación de nomenclatura de la fase
 * integradora — antes solo la vertical de Cola usaba esta clase). */
.tabla {
  font-size: 0.9rem;
}

.tabla th,
.tabla td {
  padding: 8px 10px;
  white-space: nowrap;
}

.tabla th {
  color: var(--txt-mut);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Panel de estado vacío ("Sin proyectos todavía.", etc.) dentro de una fila
 * de tabla (<td colspan> de las fases Producto-Cola/Dashboard). */
.panel-vacio {
  color: var(--txt-tenue);
  font-style: italic;
  padding: 8px 0;
}

/* Layout de dos columnas lado a lado (ceremonia_detalle.html: propuesta viva
 * vs. snapshot publicado, spec/UI.md §7.3). Colapsa a una columna en móvil,
 * mismo punto de quiebre que el resto del cockpit. */
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 800px) {
  .dos-columnas {
    grid-template-columns: 1fr;
  }
}

/* Enlace de seguimiento del anillo (frag_enlace_anillo.html): se muestra UNA
 * sola vez (D14/token en claro), así que se distingue visualmente como un
 * valor a copiar, no como texto corrido. */
.enlace {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  word-break: break-all;
}

/* Indicador de carga htmx (UI.md §8): clase que htmx alterna sola durante un
 * request en vuelo, nunca un estilo inline. */
.htmx-request {
  opacity: 0.6;
  cursor: progress;
}

/* --- Fase Producto-Cockpit: capacidad/carriles/ausencias/KPIs/dashboard/
 * informe (internal/web/routes_admin.go, routes_dashboard.go). Utilidades
 * mínimas que faltaban en el set base de Cimientos-A; mismas variables,
 * cero color inline (spec/UI.md §0/§4). */

.txt-mut {
  color: var(--txt-mut);
}

.badge.ok {
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  color: var(--ok);
}

.badge.neutro {
  background: color-mix(in srgb, var(--txt-mut) 20%, transparent);
  color: var(--txt-mut);
}

/* Panel del déficit D (frag/_deficit_panel.html): la cifra que no puede
 * mentir, con jerarquía tipográfica en vez de color de fondo. */
.deficit-cifra {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 700;
}

.deficit-sub {
  color: var(--txt-mut);
  font-size: 0.85rem;
  margin: 4px 0 0;
}

/* --- Utilidades de texto (templates/proyectos/) --- */

.txt-mut {
  color: var(--txt-mut);
}

.txt-tenue {
  color: var(--txt-tenue);
}

/* --- Filas de proyecto como grid (frag_proyecto_fila): un <div>, no un
 * <tr>, porque el mismo fragmento se reusa como cabecera del detalle fuera
 * de cualquier <table> (spec/UI.md §5). --- */

.filas-proyecto {
  display: flex;
  flex-direction: column;
}

.fila-proyecto {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr 1fr;
  gap: var(--gap);
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
}

.fila-proyecto:hover {
  background: var(--bg-elev);
}

@media (max-width: 800px) {
  .fila-proyecto {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* --- Formularios compactos (filtro de lista, triage/estado inline) --- */

.filtro,
.form-estatus,
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--gap);
}

.col-acciones {
  min-width: 260px;
}

/* --- Login local (standalone/login.html, routes_login.go) --------------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px 24px;
}
.login-title { margin: 0 0 4px; font-size: 1.25rem; }
.login-form { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.login-label { font-size: 0.85rem; color: var(--txt-mut); margin-top: 8px; }
.login-input {
  background: var(--bg-elev);
  color: var(--txt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 10px 12px;
  font-family: var(--fuente);
  font-size: 1rem;
}
.login-btn {
  margin-top: 18px;
  background: var(--acento);
  color: #0b1220;
  border: none;
  border-radius: var(--radio);
  padding: 11px 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.login-error {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid var(--grave);
  color: var(--txt);
  border-radius: var(--radio);
  padding: 9px 12px;
  margin: 14px 0 0;
  font-size: 0.9rem;
}
.login-alt { margin-top: 20px; font-size: 0.82rem; }