/* ===========================================================================
   Checklist de Innovación — Ofar / Biosintex

   Los colores, tipografías y proporciones son los mismos del prototipo que el
   equipo ya validó. Lo que cambia es que acá no hay un solo estilo incrustado
   en el HTML: la política de contenido de la aplicación no admite
   `style-src 'unsafe-inline'`, así que todo lo que en el prototipo era un
   atributo `style=` es una clase.

   Eso obliga a nombrar cada variación (`.punto--rojo` en vez de
   `style="background:#e0524f"`), que además de ser un requisito de seguridad
   deja el CSS más fácil de leer.
   =========================================================================== */

:root {
  /* Paleta del semáforo, tal cual el prototipo. */
  --rojo: #e0524f;
  --amarillo: #e8c547;
  --amarillo-fuerte: #c9a52e;  /* sobre fondo, para que el texto blanco contraste */
  --verde: #5aa96b;
  --sin: #b9bec5;

  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1f2937;
  --ink-soft: #6b7280;
  --border: #e5e7eb;
  --accent: #1f4e78;

  --exito: #2e7d4f;
  --alerta: #b45309;

  --sidebar: 320px;
  --radio: 6px;
  --radio-panel: 10px;

  /* La paleta de esta aplicación es la del prototipo y es clara. Sin esta
     declaración, quien tenga el sistema en modo oscuro recibe los colores por
     defecto del navegador para los controles de formulario —texto blanco— y
     los desplegables quedan blanco sobre blanco: el valor elegido no se ve.
     Declarar el esquema es lo que hace que el navegador use sus defaults
     claros, y de paso arregla las barras de desplazamiento. */
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* --- Barra lateral ------------------------------------------------------ */

#sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#sidebar > header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}

#sidebar > header h1 {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--accent);
}

#sidebar > header p {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0;
}

.nav-fija {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: none;
  background: transparent;
  border-radius: var(--radio);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  font-weight: bold;
}

.nav-btn:hover,
.nav-btn.es-activo {
  background: #eef2f6;
  color: var(--accent);
}

.nav-btn:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
.proy-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#filtros {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

#buscador {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  font-size: 12px;
  font-family: inherit;
  margin-bottom: 6px;
}

.filtro-fila {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Los tres filtros del índice. Dos columnas: en el ancho de la barra lateral
   tres desplegables en fila quedan demasiado angostos para leer «Sin definir»
   o «Especialidad medicinal», que son los valores más largos. */
.filtro-desplegables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.filtro-campo span {
  font-size: 10.5px;
  font-weight: bold;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filtro-campo select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  /* Explícito: un control de formulario no hereda el color del documento. */
  color: var(--ink);
}

/* Un filtro puesto se nota sin tener que leerlo: el desplegable en «Todos» es
   el estado de reposo y no debería llamar la atención. */
.filtro-campo select.es-activo {
  border-color: var(--accent);
  background: #fffef4;
  font-weight: bold;
}

.chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-soft);
}

.chip.es-activo {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

#lista-proyectos {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
}

.proy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radio);
  cursor: pointer;
  font-size: 12.5px;
  margin-bottom: 2px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.proy-item:hover {
  background: #f2f4f7;
}

.proy-item.es-activo {
  background: #e7edf3;
}

.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.punto--rojo { background: var(--rojo); }
.punto--amarillo { background: var(--amarillo-fuerte); }
.punto--verde { background: var(--verde); }
.punto--sin-evaluar { background: var(--sin); }

.proy-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proy-tipo {
  font-size: 9.5px;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 5px;
}

.lista-vacia {
  padding: 16px;
  color: #9aa0a6;
  font-size: 12px;
}

#sesion {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sesion-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sesion-nombre {
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesion-rol {
  font-size: 10.5px;
  color: var(--ink-soft);
  text-transform: capitalize;
}

#barra-inferior {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

/* Para las etiquetas que existen para los lectores de pantalla y no deben
   verse. Se usa en el buscador de la barra lateral. No alcanza con
   `display: none`: eso también las oculta al lector. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.aviso-confidencial {
  font-size: 10px;
  color: var(--alerta);
  margin: 8px 0 0;
  line-height: 1.35;
}

/* --- Panel principal ---------------------------------------------------- */

#principal {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px;
}

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radio-panel);
  padding: 22px 26px;
  margin-bottom: 20px;
}

.titulo-pagina {
  color: var(--accent);
  margin: 0 0 4px;
  font-size: 20px;
}

.subtitulo {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin: 0 0 18px;
}

.titulo-seccion {
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
  margin: 22px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* --- Indicadores del resumen -------------------------------------------- */

.kpi-fila {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.kpi {
  flex: 1;
  min-width: 150px;
  border-radius: var(--radio-panel);
  padding: 14px 16px;
  color: #fff;
}

.kpi-numero {
  font-size: 26px;
  font-weight: bold;
}

.kpi-etiqueta {
  font-size: 12px;
  opacity: 0.92;
}

.kpi--rojo { background: var(--rojo); }
.kpi--amarillo { background: var(--amarillo-fuerte); }
.kpi--verde { background: var(--verde); }
.kpi--sin-evaluar { background: #7d838c; }
.kpi--lanzado { background: #2f6fb0; }

/* --- Tablas ------------------------------------------------------------- */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 10px;
}

.tabla th,
.tabla td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: center;
}

.tabla th {
  background: var(--accent);
  color: #fff;
}

.tabla td:first-child,
.tabla th:first-child {
  text-align: left;
}

.tabla tbody tr {
  cursor: pointer;
}

.tabla tbody tr:hover {
  background: #f2f4f7;
}

.etiqueta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: bold;
  color: #fff;
}

.etiqueta--rojo { background: var(--rojo); }
.etiqueta--amarillo { background: #b8901f; }
.etiqueta--verde { background: var(--verde); }
.etiqueta--sin-evaluar { background: #7d838c; }

/* --- Ficha de proyecto -------------------------------------------------- */

.campo {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.campo label {
  font-size: 12.5px;
  font-weight: bold;
  color: var(--ink-soft);
}

.campo input[type="text"],
.campo textarea,
.campo select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  font-size: 13px;
  font-family: inherit;
  background: #fffef4;
  /* Explícito y no heredado: un control de formulario no hereda el color del
     documento, lo toma del navegador. */
  color: var(--ink);
}

.campo textarea {
  min-height: 44px;
  resize: vertical;
}

.campo--solo-lectura input,
.campo--solo-lectura select {
  background: #f4f5f6;
  color: var(--ink-soft);
}

.caja-global {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}

.caja-global--rojo { background: var(--rojo); }
.caja-global--amarillo { background: var(--amarillo-fuerte); }
.caja-global--verde { background: var(--verde); }
.caja-global--sin-evaluar { background: var(--sin); color: #333; }

.grilla-areas {
  display: grid;
  grid-template-columns: 170px 140px 1fr;
  gap: 8px 12px;
  align-items: start;
  margin-bottom: 16px;
}

.area-nombre {
  font-weight: bold;
  font-size: 13px;
  padding-top: 8px;
}

.select-semaforo {
  font-weight: bold;
  color: #fff;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  font-size: 13px;
  font-family: inherit;
}

.select-semaforo--rojo { background: var(--rojo); }
.select-semaforo--amarillo { background: var(--amarillo-fuerte); }
.select-semaforo--verde { background: var(--verde); }
.select-semaforo--sin-evaluar { background: var(--sin); color: #333; }

/* --- Botones ------------------------------------------------------------ */

.btn {
  padding: 8px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.btn--secundario {
  background: #fff;
  color: var(--accent);
}

/* Los modificadores van después de `.btn` a propósito: tienen la misma
   especificidad, así que si estuvieran antes, `.btn` les pisaría el relleno y
   `.btn--chico` no achicaría nada. */
.btn--chico {
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.btn--ancho {
  width: 100%;
}

.btn:hover {
  opacity: 0.88;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Estado del guardado ------------------------------------------------ */

#estado-guardado {
  font-size: 12px;
  min-height: 18px;
  margin: 0 0 14px;
  color: var(--ink-soft);
}

#estado-guardado.es-guardando { color: var(--ink-soft); }
#estado-guardado.es-guardado { color: var(--exito); }
#estado-guardado.es-error { color: var(--rojo); font-weight: bold; }

/* --- Conflicto de edición ----------------------------------------------- */

.conflicto {
  border: 2px solid var(--alerta);
  border-radius: 8px;
  background: #fff8ed;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.conflicto h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--alerta);
}

.conflicto p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
}

.conflicto-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.conflicto-valor {
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: #fff;
  padding: 8px 10px;
}

.conflicto-valor h4 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.conflicto-valor pre {
  margin: 0;
  font-family: inherit;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.conflicto-acciones {
  display: flex;
  gap: 8px;
}

/* --- Historial ---------------------------------------------------------- */

.historial {
  font-size: 12.5px;
}

.historial-vacio {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.historial td:first-child {
  white-space: nowrap;
  color: var(--ink-soft);
}

/* --- Avisos ------------------------------------------------------------- */

#avisos {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.aviso {
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radio);
  font-size: 12.5px;
  max-width: 340px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}

.aviso--error { background: var(--rojo); }

/* --- Nota de confidencialidad ------------------------------------------- */

.nota-confidencial {
  font-size: 11px;
  color: #b00000;
  margin-top: 16px;
  line-height: 1.45;
}

/* --- Barra de desplazamiento -------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #cbd2d9;
  border-radius: 8px;
}

/* --- Pantallas angostas -------------------------------------------------- */

/* --- Alta de proyectos --------------------------------------------------- */

.formulario {
  max-width: 640px;
}

/* `.campo` es una grilla de dos columnas: sin esto la ayuda cae debajo de la
   etiqueta en lugar de debajo del control que explica. */
/* Texto de ayuda, en cualquier contexto. */
.campo-ayuda {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* Dentro de la grilla de dos columnas de `.campo` se acomoda bajo el control,
   y el margen negativo lo pega a él. Ese margen tiene que quedar acá adentro:
   suelto, en un contenedor que no sea la grilla, la ayuda se sube por encima
   de lo que tenga arriba. Pasó en el bloque del brief, donde el texto quedaba
   tapado por el botón de adjuntar. */
.campo > .campo-ayuda {
  grid-column: 2;
  margin-top: -4px;
}

.obligatorio {
  color: var(--rojo);
}

/* Alineadas con los controles (200px de etiqueta + 10px de separación), no con
   el borde izquierdo: la vista queda con una sola línea vertical. */
.formulario-acciones {
  display: flex;
  gap: 10px;
  margin: 22px 0 0 210px;
}

.aviso-error {
  background: #fdecec;
  border: 1px solid var(--rojo);
  color: #8d2b29;
  border-radius: var(--radio);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 16px;
}

/* --- Baja de proyectos --------------------------------------------------- */

.btn--peligro {
  background: var(--rojo);
  border-color: var(--rojo);
}

.zona-baja {
  margin-top: 34px;
  padding-top: 4px;
  border-top: 2px solid var(--border);
}

.zona-baja p {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.cartel-baja {
  background: #fff8e6;
  border: 1px solid var(--alerta);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.cartel-baja h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--alerta);
}

.cartel-baja p {
  margin: 0 0 12px;
  font-size: 12.5px;
}

.etiqueta--baja {
  background: #7d838c;
  margin-left: 8px;
  font-weight: normal;
}

.proy-tipo--baja {
  border-color: #7d838c;
  color: #fff;
  background: #7d838c;
}

/* Una fila archivada se ve apagada, pero legible: se sigue pudiendo abrir. */
.tabla tbody tr.es-archivado td {
  opacity: 0.6;
}

/* --- Métricas de flujo (tanda 3) ----------------------------------------- */

/* Los dos contadores de la ficha: días desde el alta y días en el estado. */
.metricas {
  display: flex;
  gap: 12px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
}

.metrica {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--border);
  border-radius: var(--radio-panel);
  background: var(--bg);
  padding: 10px 14px;
}

.metrica-valor {
  font-size: 20px;
  font-weight: bold;
  color: var(--ink);
}

.metrica-etiqueta {
  font-size: 12px;
  color: var(--ink-soft);
}

.metrica-nota {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* La columna de días, alineada a la derecha como cualquier número. */
.celda-dias {
  text-align: right;
  white-space: nowrap;
}

/* Los dos bloques de la pestaña de lanzados, uno al lado del otro. Se apilan
   solos cuando no entran: el `minmax(0, ...)` evita que una tabla ancha
   desborde la grilla en lugar de encogerse. */
.columnas-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 18px;
  align-items: start;
}

/* La fila de «sin fecha cargada»: cuenta, pero es una deuda de carga. */
.tabla tbody tr.fila-sin-dato td {
  color: var(--ink-soft);
  font-style: italic;
}

/* --- Brief adjunto (tanda 4) --------------------------------------------- */

.brief {
  border: 1px solid var(--border);
  border-radius: var(--radio-panel);
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--bg);
}

.brief-vigente {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brief-nombre {
  font-weight: bold;
  color: var(--ink);
  word-break: break-word;
}

.brief-version {
  margin-left: 8px;
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.brief-detalle {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.brief-ausente {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--alerta);
}

.brief-ok {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--exito);
}

.brief-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.brief-historial {
  margin-top: 12px;
  font-size: 13px;
}

.brief-historial summary {
  cursor: pointer;
  color: var(--accent);
}

.brief-historial ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.brief-historial li {
  margin-bottom: 4px;
}

/* Un botón que se lee como un enlace: la acción es navegar a una descarga,
   pero tiene que ser <button> para que la política de contenido no necesite
   manejadores incrustados. */
.enlace {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.enlace:disabled {
  color: var(--ink-soft);
  text-decoration: none;
  cursor: default;
}

/* El cartel sobre la grilla de áreas cuando el proyecto no tiene brief. */
.aviso-bloqueado {
  border: 1px solid var(--alerta);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: #fff7ed;
  color: var(--ink);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}

.etiqueta--sin-brief {
  background: var(--alerta);
  margin-left: 8px;
  font-weight: normal;
}

/* --- Marca de seguimiento ------------------------------------------------ */

/* El marcador que pidió la reunión del 2/10: señalar lo que hay que revisar
   más adelante. Usa el azul de acento y no un color del semáforo: la marca es
   independiente del estado del proyecto —uno en verde puede necesitar
   revisión— y pintarla de rojo o amarillo haría leer una alarma donde no la
   hay. */
.etiqueta--marcado {
  background: var(--accent);
  margin-left: 8px;
  font-weight: normal;
}

/* La estrella de la lista lateral. Va antes del nombre, donde no la alcanza
   el recorte de los nombres largos. */
.proy-marca {
  color: var(--accent);
  font-size: 11px;
  flex: 0 0 auto;
}

/* El bloque de la ficha: el check y, debajo, qué hay que revisar. */
.marca-seguimiento {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: #fbfcfd;
}

.marca-linea {
  display: flex;
  align-items: center;
  gap: 8px;
}

.marca-linea label {
  font-size: 12.5px;
  font-weight: bold;
  color: var(--ink-soft);
}

.marca-nota {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  font-size: 13px;
  font-family: inherit;
  background: #fffef4;
  /* Explícito: un control de formulario no hereda el color del documento. */
  color: var(--ink);
}

/* --- Guardado explícito -------------------------------------------------- */

/* La barra aparece pegada abajo cuando hay algo sin guardar. Pegada y no al
   final del documento: la ficha es larga, y un botón al que hay que bajar
   scrolleando es un botón que no se aprieta. */
.barra-guardado {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px -22px -22px;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 -6px 16px rgb(0 0 0 / 8%);
  font-size: 13px;
  color: var(--ink-soft);
}

.barra-guardado-botones {
  display: flex;
  gap: 8px;
}

/* Verde: la acción que confirma. Es la única de este color en la aplicación,
   justamente para que no se confunda con ninguna otra. */
.btn--guardar {
  background: var(--exito);
  border-color: var(--exito);
  color: #fff;
  font-weight: bold;
}

.btn--guardar:hover:not(:disabled) {
  background: #24603c;
  border-color: #24603c;
}

/* Un campo editado y todavía sin guardar. El borde alcanza: marcarlo con
   color de fondo competiría con los semáforos, que en esta pantalla ya
   significan otra cosa. */
.es-pendiente {
  border-color: var(--exito) !important;
  box-shadow: inset 3px 0 0 var(--exito);
}

/* --- Campo de fecha ------------------------------------------------------ */

.campo-fecha {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entrada-fecha {
  max-width: 220px;
}

/* La fecha escrita en palabras. Es lo que hace visible un año a medio tipear:
   en el campo segmentado, «26» y «2026» se ven igual. */
.leyenda-fecha {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.leyenda-fecha.es-sospechosa {
  color: var(--alerta);
  font-weight: bold;
}

/* --- Conflicto por lote -------------------------------------------------- */

.tabla--conflicto {
  margin: 12px 0;
  font-size: 12.5px;
}

.tabla--conflicto .conflicto-propio {
  font-weight: bold;
}

@media (width <= 860px) {
  body {
    flex-direction: column;
    height: auto;
    overflow: auto;
  }

  #sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #lista-proyectos {
    max-height: 40vh;
  }

  #principal {
    padding: 18px;
  }

  .campo,
  .grilla-areas,
  .conflicto-valores {
    grid-template-columns: 1fr;
  }

  /* `.campo` pasa a una sola columna, así que la ayuda y las acciones dejan
     de tener una segunda columna donde ubicarse. */
  .campo > .campo-ayuda {
    grid-column: 1;
  }

  .formulario-acciones {
    margin-left: 0;
  }
}

/* ===========================================================================
   Hitos del pipeline

   Cuatro filas, cada una con su fecha estimada, su cumplimiento y el desvío.
   El bloqueo se muestra atenuando la fila entera: los controles además van
   `disabled`, pero el gris es lo que hace que se entienda sin intentar.
   =========================================================================== */

.lista-hitos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

/* La caja de cada hito. El borde vive acá y no en `.hito` para que la
   documentación de abajo quede DENTRO del mismo recuadro: son del mismo hito,
   y separarlas en dos cajas haría leer los documentos como una sección aparte
   que no se sabe a cuál pertenece. */
.hito-bloque {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

.hito {
  display: grid;
  grid-template-columns: 28px minmax(160px, 1.4fr) auto auto minmax(110px, 0.8fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.hito--bloqueado {
  opacity: 0.55;
  background: var(--bg);
}

/* --- Documentación de cada hito ----------------------------------------- */

.hito-docs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 12px 9px;
  border-top: 1px dashed var(--border);
}

/* El aviso de documentación faltante. Es ámbar y no rojo a propósito: no hay
   nada roto ni nada bloqueado —el hito está cumplido— y pintarlo de rojo haría
   buscar un error que no existe. Es una tarea pendiente, no una falla. */
.hito-sin-doc {
  margin: 0;
  font-size: 11.5px;
  color: var(--alerta);
}

.lista-adjuntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lista-adjuntos li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.adjunto-detalle {
  font-size: 11px;
  color: var(--ink-soft);
}

/* Separado del nombre y chico: quitar un documento es irreversible, así que no
   debería quedar pegado al botón de descargarlo. */
.adjunto-quitar {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-soft);
}

.adjunto-quitar:hover {
  color: var(--rojo);
}

.enlace--accion {
  align-self: flex-start;
  font-size: 11.5px;
}

.hito-orden {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.hito--bloqueado .hito-orden {
  background: var(--ink-soft);
}

.hito-nombre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
}

.hito-candado {
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.hito-fecha,
.hito-cumplido {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hito-etiqueta {
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.hito-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.hito--bloqueado .hito-check {
  cursor: not-allowed;
}

.hito-real {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  min-width: 78px;
}

.hito-desvio {
  text-align: right;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.hito-desvio--tarde { color: var(--rojo); }
.hito-desvio--en-fecha { color: var(--verde); }
.hito-desvio--sin-dato { color: var(--ink-soft); font-weight: 400; }

/* La celda del índice que reemplazó a «Etapa»: el hito y cuánto lleva. */
.celda-hito {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.avance-hitos {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 6px;
}

@media (max-width: 900px) {
  .hito {
    grid-template-columns: 28px 1fr;
    row-gap: 8px;
  }
  .hito-desvio {
    text-align: left;
    grid-column: 2;
  }
}

/* ===========================================================================
   Diálogo de baja

   `<dialog>` nativo: ya sabe ser modal, atrapar el foco y cerrarse con Escape.
   No hace falta ninguna biblioteca, y la política de contenido sigue intacta.
   =========================================================================== */

.dialogo {
  border: 1px solid var(--border);
  border-radius: var(--radio-panel);
  padding: 22px 24px;
  max-width: 460px;
  width: calc(100% - 32px);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 12px 40px rgb(0 0 0 / 22%);
}

.dialogo::backdrop {
  background: rgb(15 23 42 / 45%);
}

.dialogo h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.dialogo-ayuda {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* La celda de conteo de las tablas de la pestaña de lanzados y desestimados. */
.celda-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ===========================================================================
   Gráficos

   La caja fija la altura porque Chart.js con `maintainAspectRatio: false`
   toma la del contenedor. Sin altura declarada el canvas crece sin freno en
   cada redibujo, que es el clásico «el gráfico se estira hasta el infinito».
   =========================================================================== */

.grafico {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
}

.grafico canvas {
  max-width: 100%;
}

/* --- Glosario ------------------------------------------------------------ */

.glosario-grupo {
  margin-bottom: 18px;
}

/* El aviso de términos pendientes. Ámbar y no rojo: no hay nada roto, hay
   trabajo por hacer, y son dos lecturas distintas. */
.glosario-aviso {
  margin: 0 0 16px;
  padding: 9px 11px;
  border-left: 3px solid var(--alerta);
  background: #fffaf0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}

.glosario-conteo {
  margin-left: 8px;
  font-size: 11px;
  font-weight: normal;
  color: var(--alerta);
}

.glosario-lista {
  margin: 0;
  /* Dos columnas: el término a la izquierda y su definición a la derecha. Un
     `dl` por defecto apila y sangra, que en una lista larga obliga a saltar la
     vista en zigzag para leer solo los términos. */
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr;
  gap: 5px 16px;
  align-items: baseline;
}

.glosario-lista dt {
  font-weight: bold;
  font-size: 12.5px;
  color: var(--ink);
}

.glosario-lista dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.glosario-pendiente {
  font-style: italic;
  color: var(--alerta);
}

/* En pantallas angostas las dos columnas no entran: se apila, con el término
   pegado a su definición. */
@media (max-width: 720px) {
  .glosario-lista {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .glosario-lista dd {
    margin-bottom: 9px;
  }
}

/* --- Cronograma ---------------------------------------------------------- */

.gantt {
  margin: 14px 0 10px;
  /* En una pantalla angosta no hay forma de comprimir una línea de tiempo sin
     que deje de leerse: se desplaza horizontalmente, con un ancho mínimo. */
  overflow-x: auto;
}

.gantt-fila {
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid var(--border);
}

.gantt-fila:last-child {
  border-bottom: 0;
}

.gantt-fila--eje {
  border-bottom: 1px solid var(--ink-soft);
  margin-bottom: 4px;
  min-height: 20px;
}

.gantt-etiqueta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  padding: 3px 0;
}

.gantt-codigo {
  font-size: 11.5px;
  font-weight: bold;
  text-align: left;
}

.gantt-nombre {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La pista es el sistema de coordenadas: todo lo que va adentro se ubica con
   un `left` en porcentaje sobre ella. */
.gantt-pista {
  position: relative;
  height: 22px;
}

.gantt-barra {
  position: absolute;
  top: 8px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

.gantt-marca {
  position: absolute;
  top: 2px;
  /* El `left` que calcula el JavaScript es el borde izquierdo; este
     desplazamiento lo lleva al centro de la marca, que es donde cae la fecha. */
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  cursor: default;
}

/* Lleno es cumplido, hueco es estimado. La diferencia es de relleno y no de
   color: el color ya significa otra cosa en esta aplicación —el semáforo— y
   sumarle un segundo significado haría dudar de los dos. */
.gantt-marca--cumplida {
  background: var(--accent);
  color: #fff;
}

/* Una marca que agrupa varios hitos en la misma fecha. Mas ancha porque
   lleva un rango («1-4») en vez de un solo numero, y con el borde mas marcado
   para que se distinga de una marca suelta. */
.gantt-marca--grupo {
  width: 28px;
  border-radius: 9px;
  border-width: 2px;
  font-size: 9.5px;
  letter-spacing: -0.02em;
}

.gantt-marca--muestra {
  position: static;
  transform: none;
  display: inline-block;
  vertical-align: middle;
}

.gantt-lanzamiento {
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  font-size: 13px;
}

.gantt-tick {
  position: absolute;
  top: 2px;
  font-size: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* La línea de hoy cruza la fila del eje. Es de referencia, así que va fina y
   por detrás de las marcas. */
.gantt-hoy {
  position: absolute;
  top: 0;
  bottom: -400px;
  width: 1px;
  background: var(--rojo);
  opacity: 0.35;
  pointer-events: none;
}

.gantt-sin-fechas {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 22px;
}

.gantt-nota {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.gantt-nota--alerta {
  padding: 9px 11px;
  border-left: 3px solid var(--alerta);
  background: #fffaf0;
  color: var(--ink);
  line-height: 1.5;
}

.gantt-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-soft);
}

/* --- Registro de certificados ANMAT -------------------------------------- */

.cert-resumen {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Los certificados sin proyecto son el dato que importa del registro —son 46
   de 58— así que el contador va destacado y no como una cifra más. */
.cert-resumen-destacado {
  font-weight: bold;
  color: var(--alerta);
}

.cert-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.cert-buscador {
  flex: 1 1 280px;
  min-width: 200px;
}

.cert-tabla td {
  vertical-align: top;
}

.cert-nombre,
.cert-proyecto {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: bold;
  text-align: left;
  color: var(--accent);
  cursor: pointer;
}

.cert-nombre:hover,
.cert-proyecto:hover {
  text-decoration: underline;
}

.cert-proyecto {
  font-weight: normal;
  font-size: 12px;
}

.cert-numero {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
}

.cert-estado {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
}

/* Gris para el que solo tiene el certificado y verde para el que ya resolvió
   el primer lote: la diferencia entre los dos es cuánto falta para volver a
   vender, y es lo único que el registro distingue por sí mismo. */
.cert-estado--dormido {
  background: #eef0f3;
  color: var(--ink-soft);
}

.cert-estado--avanzado {
  background: #e8f3ec;
  color: var(--exito);
  font-weight: bold;
}

.cert-presentaciones {
  display: block;
  font-size: 12px;
  color: var(--ink);
}

.cert-formas {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.cert-sin-proyecto {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
}

.cert-pendiente {
  font-size: 11px;
  color: var(--alerta);
}

/* --- Ficha del certificado --- */

.cert-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.cert-cabecera .cert-numero {
  display: inline;
  font-size: 12.5px;
}

.cert-clasificacion {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
}

.cert-vinculo {
  margin: 0 0 16px;
  font-size: 12.5px;
}

.cert-vinculo .cert-proyecto {
  display: inline;
}

.cert-presentacion {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--bg);
}

.cert-variante {
  margin-left: 8px;
  font-size: 11px;
  font-weight: normal;
  color: var(--ink-soft);
}

.cert-datos {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 5px 16px;
  align-items: baseline;
}

.cert-datos dt {
  font-weight: bold;
  font-size: 12px;
  color: var(--ink);
}

.cert-datos dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* «No figura en el certificado» no es un dato faltante: es el resultado de
   haberlo buscado. Se muestra distinto de un campo vacío —que directamente no
   aparece— para que se note cuál de las dos cosas es. */
.cert-datos .cert-dato--no-figura {
  font-style: italic;
  color: var(--alerta);
}

.cert-dato {
  display: contents;
}

@media (max-width: 720px) {
  .cert-datos {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}