/* SG-SST, etapa 2: exámenes médicos, accidentes e incidentes, indicadores, capacitaciones y
   elementos de protección. Usa las variables de app.css; el tema oscuro va al final. */

.sst-salud { display: grid; gap: 14px; }
.sst-salud .aviso { margin-bottom: 0; }
.sst-salud-subtitulo { margin: 14px 0 6px; font-size: 13px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .03em; }
.campo .sst-salud-subtitulo { margin: 6px 0 0; }
.sst-salud-volver { display: flex; }
.sst-salud-botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.sst-salud-borrar { margin-top: 12px; }
.sst-salud-fila-acciones { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sst-salud .sst-pendientes li { align-items: center; }

/* Cifras grandes (cobertura, alertas, firmas) */
.sst-salud-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sst-salud-cifras > div { display: grid; gap: 2px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 12px 14px; }
.sst-salud-cifras b { font-family: Poppins, Inter, sans-serif; font-size: 20px; line-height: 1.15; }
.sst-salud-cifras span { color: var(--tinta-suave); font-size: 12.5px; }
.sst-salud-cifras .rojo { background: var(--peligro-50); border-color: transparent; color: var(--peligro); }
.sst-salud-cifras .ambar { background: var(--aviso-50); border-color: transparent; color: var(--aviso); }
.sst-salud-cifras .verde { background: var(--exito-50); border-color: transparent; color: var(--exito); }
.sst-salud-cifras .rojo span, .sst-salud-cifras .ambar span, .sst-salud-cifras .verde span { color: inherit; opacity: .85; }

/* Semáforo de plazos */
.sst-salud-semaforo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.sst-salud-semaforo.rojo { background: var(--peligro); }
.sst-salud-semaforo.ambar { background: var(--acento); }
.sst-salud-semaforo.azul { background: var(--info); }
.sst-salud-semaforo.verde { background: var(--exito); }
.sst-salud-plazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sst-salud-plazos > div { display: grid; gap: 2px; border-radius: var(--radio-sm); padding: 12px 14px; border-left: 4px solid var(--linea); background: var(--tarjeta); }
.sst-salud-plazos span { font-weight: 600; font-size: 13px; }
.sst-salud-plazos small { color: var(--tinta-suave); }
.sst-salud-plazos .rojo { border-left-color: var(--peligro); background: var(--peligro-50); }
.sst-salud-plazos .ambar { border-left-color: var(--acento); background: var(--aviso-50); }
.sst-salud-plazos .azul { border-left-color: var(--info); background: var(--info-50); }
.sst-salud-plazos .verde { border-left-color: var(--exito); background: var(--exito-50); }

/* Soportes */
.sst-salud-soportes { display: grid; gap: 8px; justify-items: start; }
.sst-salud-soportes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.sst-salud-soportes li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sst-salud-soportes li a { display: inline-flex; align-items: center; gap: 6px; word-break: break-word; }
.sst-salud-soportes small { color: var(--tinta-suave); }
.sst-salud-soportes p { margin: 0; }

/* Indicadores */
.sst-salud-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sst-salud-indicador { display: grid; gap: 3px; align-content: start; border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 12px 14px; }
.sst-salud-indicador small { color: var(--marca-700); font-weight: 600; font-size: 12px; }
.sst-salud-indicador b { font-family: Poppins, Inter, sans-serif; font-size: 24px; line-height: 1.1; }
.sst-salud-indicador > span { color: var(--tinta-suave); font-size: 12px; }
.sst-salud-formula { margin-top: 6px; font-size: 12px; background: var(--fondo); border-radius: 6px; padding: 6px 8px; }

/* Capacitaciones: elegir asistentes */
.sst-salud-asistentes-barra { display: flex; gap: 8px; margin-bottom: 8px; }
.sst-salud-asistentes-barra input { flex: 1; min-width: 0; }
.sst-salud-asistentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto;
  border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 8px 10px; }
.sst-salud-asistentes label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 3px 0; cursor: pointer; }
.sst-salud-asistentes label span { display: grid; }
.sst-salud-asistentes small { color: var(--tinta-suave); font-size: 11.5px; }

/* Firma y enlaces */
.sst-salud-certifica { margin-top: 0; padding: 10px 12px; background: var(--fondo); border-radius: var(--radio-sm); font-size: 13px; line-height: 1.5; }
.sst-salud-medios { display: grid; gap: 8px; }
.sst-salud-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sst-salud-enlaces li { display: grid; gap: 4px; }
.sst-salud-enlaces input { width: 100%; font-size: 12px; }

:root[data-tema="oscuro"] .sst-salud-cifras .rojo, :root[data-tema="oscuro"] .sst-salud-plazos .rojo { background: #3a1a1a; }
:root[data-tema="oscuro"] .sst-salud-cifras .ambar, :root[data-tema="oscuro"] .sst-salud-plazos .ambar { background: #3a2c14; }
:root[data-tema="oscuro"] .sst-salud-cifras .verde, :root[data-tema="oscuro"] .sst-salud-plazos .verde { background: #163326; }
:root[data-tema="oscuro"] .sst-salud-plazos .azul { background: #14283d; }
:root[data-tema="oscuro"] .sst-salud-formula, :root[data-tema="oscuro"] .sst-salud-certifica { background: rgba(255, 255, 255, .06); }
:root[data-tema="oscuro"] .sst-salud-indicador small { color: var(--marca-300); }

@media (max-width: 640px) {
  .sst-salud-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sst-salud-cifras b { font-size: 17px; }
  .sst-salud .sst-pendientes li { flex-wrap: wrap; }
  .sst-salud-fila-acciones { justify-content: flex-start; }
  .sst-salud-indicadores { grid-template-columns: 1fr; }
  .sst-salud-asistentes { grid-template-columns: 1fr; }
}