:root {
  --color-bg: #f5f6f8;
  --color-card: #ffffff;
  --color-border: #d9dde3;
  --color-text: #1f2430;
  --color-muted: #667085;
  --color-primary: #1f6f50;
  --color-primary-hover: #17593f;
  --color-error: #b3261e;
  --color-sim: #a15c00;
  --color-sim-bg: #fff3dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

.sim-banner {
  background: var(--color-sim-bg);
  color: var(--color-sim);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid #f0c98a;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.topbar-brand { font-weight: 700; font-size: 1.1rem; }

.topbar-user { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.topbar-user a { color: var(--color-primary); text-decoration: none; }
.topbar-user a:hover { text-decoration: underline; }

main#app { max-width: 720px; margin: 0 auto; padding: 1.5rem; }

.view h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.muted { color: var(--color-muted); font-size: 0.92rem; }

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin-top: 0; font-size: 1.1rem; }

form { display: flex; flex-direction: column; gap: 0.85rem; }
/* Mismo hallazgo exacto que `.analysis-columns[hidden]` más abajo (misma especificidad 0,1,0
   contra la regla `[hidden]` del navegador): un `<form hidden>` seguía renderizándose con
   `display: flex` (W3 Bloque D1 — el formulario de ampliar presupuesto, el primer `<form>` de
   esta app que usa `hidden` directamente sobre sí mismo en vez de sobre un contenedor). */
form[hidden] { display: none; }
label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
label.inline { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: normal; }

input, select, textarea {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 3.5rem; }

fieldset { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.6rem 0.8rem; }
fieldset legend { font-size: 0.85rem; color: var(--color-muted); padding: 0 0.3rem; }

button, .button-link {
  align-self: flex-start;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button-link:hover { background: var(--color-primary-hover); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

#btn-logout {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}
#btn-logout:hover { background: #eee; }

.error {
  color: var(--color-error);
  font-size: 0.88rem;
  margin: 0;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}
.badge-sim { background: var(--color-sim-bg); color: var(--color-sim); }
.badge-completada { background: #dff3e6; color: #1f6f50; }
.badge-en_curso { background: #dbeafe; color: #1d4ed8; }
.badge-pendiente { background: #eee; color: var(--color-muted); }
.badge-sin_implementar { background: #f2f2f2; color: #9aa0aa; }
.badge-cancelada { background: #fde2e1; color: #b42318; }
.badge-en_cola { background: #fef3c7; color: #92400e; }
.badge-ejecutando { background: #dbeafe; color: #1d4ed8; }

/* W2C — pestañas "Buscar"/"Importar" (P-07/P-08). */
.tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid #e2e2e2; }
.tab-button {
  background: none; border: none; padding: 0.5rem 0.25rem; cursor: pointer;
  font-weight: 600; color: var(--color-muted); border-bottom: 2px solid transparent;
}
.tab-button[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* W2D Bloque 1 — P-10, análisis de video completo: dos columnas observado/interpretado
   (Principio P13), cada conclusión con su evidencia justo debajo (tarea 15 del bloque). */
.analysis-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 0.75rem;
}
/* `.analysis-columns` y la regla del navegador para `[hidden]` tienen la misma especificidad
   (0,1,0); como esta hoja se aplica después de la del navegador, `display: grid` ganaba
   incluso con el atributo `hidden` puesto (el bloque de video/estática oculto seguía
   renderizándose). Este selector agrega el atributo a la clase (0,2,0) para ganar siempre,
   sin `!important` ni tocar el resto de los usos de `[hidden]` en el resto de la app. */
.analysis-columns[hidden] { display: none; }
@media (max-width: 640px) {
  .analysis-columns { grid-template-columns: 1fr; }
}
.analysis-column h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.analysis-escena {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}
.analysis-escena .escena-rango { color: var(--color-muted); font-size: 0.78rem; }
.analysis-finding {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}
.analysis-finding .finding-label { font-weight: 600; display: block; margin-bottom: 0.15rem; }
.analysis-evidence { color: var(--color-muted); font-size: 0.8rem; margin: 0.3rem 0 0; padding-top: 0.3rem; border-top: 1px dashed var(--color-border); }
.analysis-puntaje-valor { font-weight: 700; }
/* E4-H03 — checkbox "enviar al guion" dentro de cada tarjeta de hallazgo/puntaje. */
.finding-checkbox { margin-top: 0.4rem; font-size: 0.82rem; }

.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.stage-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.85rem;
}
.stage-card .stage-order { color: var(--color-muted); font-size: 0.75rem; }
.stage-card .stage-name { font-weight: 600; margin: 0.15rem 0 0.4rem; }

/* E10-H15 — tarjetas de acceso de P-31; las que no tienen pantalla propia todavía
   (Proveedores, Estado del sistema) se muestran deshabilitadas, nunca ocultas. */
.stages-grid a.card { color: var(--color-text); text-decoration: none; display: block; }
.stages-grid a.card:hover { border-color: var(--color-primary); }
.card.is-disabled { opacity: 0.6; }

.audit-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.audit-table th, .audit-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.audit-table th { color: var(--color-muted); font-weight: 600; }
.audit-table tbody tr:hover { background: var(--color-bg); }