/* SG-SST, etapa 1: autoevaluación (años, resultado, barras por estándar, firmas, ítems con su
   calificación y propuesta) y plan de mejoramiento. Prefijo sstev-. */

.sstev { display: grid; gap: 14px; }
.sstev .tarjeta { margin-bottom: 0; }

/* Años */
.sstev-anios { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sstev-anio { display: grid; gap: 1px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--tinta); border-radius: var(--radio-sm);
  padding: 6px 12px; text-decoration: none; min-width: 92px; }
.sstev-anio b { font-family: Poppins, Inter, sans-serif; font-size: 15px; }
.sstev-anio span { font-size: 11.5px; color: var(--tinta-suave); }
.sstev-anio.activa { border-color: var(--marca-600); background: var(--marca-50); }

/* Resultado */
.sstev-resultado .cuerpo { display: grid; gap: 12px; }
.sstev-resultado-fila { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sstev-resultado-datos { flex: 1 1 260px; min-width: 0; }
.sstev-resultado-datos h3 { margin: 0 0 2px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sstev-accion { font-size: 12.5px; margin-top: 4px; }
.sstev-puntaje { display: grid; place-items: center; text-align: center; border-radius: var(--radio-sm); padding: 10px 16px; min-width: 120px; background: var(--fondo); color: var(--tinta-suave); }
.sstev-puntaje b { font-family: Poppins, Inter, sans-serif; font-size: 26px; line-height: 1.1; }
.sstev-puntaje span { font-size: 11.5px; font-weight: 600; }
.sstev-puntaje.verde { background: var(--exito-50); color: var(--exito); }
.sstev-puntaje.ambar { background: var(--aviso-50); color: var(--aviso); }
.sstev-puntaje.rojo { background: var(--peligro-50); color: var(--peligro); }
.sstev-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.sstev-en-linea { margin: 0 4px; vertical-align: middle; }

/* Barras y firmas */
.sstev-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.sstev-barras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sstev-barra-texto { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; }
.sstev-barra-texto span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sstev-barra-texto b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sstev-barra-pista { height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.sstev-barra-pista > div { height: 100%; border-radius: 999px; background: var(--marca-500); transition: width var(--duracion-media, .3s) ease; }
.sstev-barra-pista > .verde { background: var(--exito); }
.sstev-barra-pista > .ambar { background: var(--acento); }
.sstev-barra-pista > .rojo { background: var(--peligro); }
.sstev-firmas { display: grid; gap: 10px; }
.sstev-firmas p { margin: 0; }
.sstev-firma { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed var(--linea); border-radius: var(--radio-sm); padding: 10px 12px; }
.sstev-firma.firmada { border-style: solid; border-color: var(--exito); background: var(--exito-50); }

/* Filtros */
.sstev-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.sstev-filtros button { border: 1px solid var(--linea); background: var(--tarjeta); color: var(--tinta); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sstev-filtros button.activa { background: var(--marca-600); border-color: var(--marca-600); color: #fff; }

/* Ítems */
.sstev-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sstev-estandar { display: grid; gap: 8px; }
.sstev-estandar h4 { margin: 0; font-size: 13.5px; }
.sstev-estandar h4 small { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--marca-700); background: var(--marca-50);
  border-radius: 999px; padding: 1px 8px; margin-right: 4px; vertical-align: middle; }
.sstev-item { border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: var(--radio-sm); padding: 10px 12px; display: grid; gap: 8px; }
.sstev-item.cumple { border-left-color: var(--exito); }
.sstev-item.no_cumple { border-left-color: var(--peligro); }
.sstev-item.no_aplica { border-left-color: var(--info); }
.sstev-item-cabeza { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.sstev-codigo { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 12.5px; color: var(--marca-700); background: var(--marca-50); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.sstev-item-texto { flex: 1 1 240px; min-width: 0; font-size: 13px; }
.sstev-item-texto small { display: block; color: var(--tinta-suave); font-size: 11.5px; }
.sstev-calificar { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio-sm); overflow: hidden; }
.sstev-calificar button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--tarjeta); color: var(--tinta-suave); padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sstev-calificar button + button { border-left: 1px solid var(--linea); }
.sstev-calificar button:hover { background: var(--fondo); }
.sstev-calificar button.activa.cumple { background: var(--exito); color: #fff; }
.sstev-calificar button.activa.no_cumple { background: var(--peligro); color: #fff; }
.sstev-calificar button.activa.no_aplica { background: var(--info); color: #fff; }
.sstev-propuesta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--info-50); color: var(--tinta); border-radius: var(--radio-sm); padding: 8px 10px; font-size: 12.5px; }
.sstev-propuesta > div { flex: 1 1 220px; min-width: 0; }
.sstev-propuesta > .i { color: var(--info); }
.sstev-nota { font-size: 12.5px; color: var(--tinta-suave); }
.sstev-item-pie { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sstev-evidencia { display: inline-flex; align-items: center; gap: 2px; background: var(--fondo); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; max-width: 100%; }
.sstev-evidencia a { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sstev-evidencia a:hover { text-decoration: underline; }

/* Plan de mejoramiento */
.sstev-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sstev-cifras > div { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 10px 12px; display: grid; }
.sstev-cifras b { font-family: Poppins, Inter, sans-serif; font-size: 20px; }
.sstev-cifras span { font-size: 12px; color: var(--tinta-suave); }
.sstev-cifras .rojo b { color: var(--peligro); }
.sstev-barra-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.sstev-barra-filtros select { width: auto; min-width: 150px; }
.sstev-mejoras { display: grid; gap: 10px; }
.sstev-mejora { border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 10px 12px; display: grid; gap: 7px; }
.sstev-mejora.vencida { border-color: var(--peligro); }
.sstev-mejora.cancelada { opacity: .6; }
.sstev-mejora-cabeza { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.sstev-mejora-cabeza b { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.sstev-mejora-datos { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.sstev-mejora-datos span { display: inline-flex; align-items: center; gap: 4px; }

:root[data-tema="oscuro"] .sstev-anio.activa,
:root[data-tema="oscuro"] .sstev-codigo,
:root[data-tema="oscuro"] .sstev-estandar h4 small { background: #17352a; color: var(--marca-300); }
:root[data-tema="oscuro"] .sstev-puntaje.verde,
:root[data-tema="oscuro"] .sstev-firma.firmada { background: #163326; }
:root[data-tema="oscuro"] .sstev-puntaje.ambar { background: #3a2c14; }
:root[data-tema="oscuro"] .sstev-puntaje.rojo { background: #3a1a1a; }
:root[data-tema="oscuro"] .sstev-propuesta { background: #14283b; }

@media (max-width: 860px) {
  .sstev-columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sstev-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sstev-calificar { width: 100%; }
  .sstev-calificar button { flex: 1 1 0; justify-content: center; padding: 8px 6px; }
  .sstev .tarjeta > header { flex-wrap: wrap; }
  .sstev .tarjeta > header .acciones { margin-left: 0; }
  .sstev-barra-filtros select { flex: 1 1 140px; min-width: 0; }
  .sstev-puntaje { min-width: 100px; }
}

/* Fase 3 (IA): revisión de evidencias en el ítem */
.sstev-ia { gap: 4px; }
.sstev-ia .distintivo { font-size: 11px; }
.sstev-ia.desactualizada .distintivo { opacity: .75; }