/* Semáforo de eventos (2026-10-20) — ver js/semaforo.js.
   Luis es daltónico: HECHO = ✔ + pastilla redonda + borde continuo;
   ATRASADO = ⚠️ + etiqueta cuadrada + rayas diagonales + borde punteado. */

.sem-chip {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 9px; font-weight: 800; letter-spacing: .3px; line-height: 1;
  color: #fff; padding: 2px 5px; margin-right: 4px; vertical-align: 1px;
  white-space: nowrap; font-style: normal;
}
.sem-chip b { font-weight: 900; }
.sem-chip i { font-style: normal; }
.sem-chip-hecho { background: #166534; border-radius: 999px; }
.sem-chip-atrasado { background: #b91c1c; border-radius: 0; box-shadow: 0 0 0 1px #fff inset; }

/* Bloques de la vista semana */
.cal-event.realizado { opacity: 1; }
.cal-event.realizado::after { content: none; }
.cal-event.sem-hecho { outline: 2px solid #166534; outline-offset: -2px; }
.cal-event.sem-atrasado {
  outline: 2px dashed #b91c1c; outline-offset: -2px;
  background-image: repeating-linear-gradient(135deg, rgba(185,28,28,.16) 0 6px, transparent 6px 12px);
}

/* Vista mes */
.month-event.realizado { opacity: 1; }
.month-event.sem-hecho { outline: 1px solid #166534; outline-offset: -1px; }
.month-event.sem-atrasado {
  outline: 1px dashed #b91c1c; outline-offset: -1px;
  background-image: repeating-linear-gradient(135deg, rgba(185,28,28,.16) 0 5px, transparent 5px 10px);
}
.month-event .sem-chip { padding: 1px 3px; margin-right: 3px; }
.month-event .sem-chip i { display: none; }

/* Ficha */
.sem-ficha {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 4px; padding: 10px 12px; font-size: 14px; line-height: 1.3; color: #fff;
}
.sem-ficha.hidden { display: none; }
.sem-ficha-ico { font-size: 20px; font-weight: 900; line-height: 1; }
.sem-ficha-hecho { background: #166534; border-radius: 999px; }
.sem-ficha-atrasado {
  background: #b91c1c repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 8px, transparent 8px 16px);
  border-radius: 0; border: 2px dashed #fff; outline: 2px solid #b91c1c;
}

/* Modo oscuro neuronal: mismos símbolos, bordes más claros */
html.theme-neuronal .cal-event.sem-hecho,
html.theme-neuronal .month-event.sem-hecho { outline-color: #4ade80; }
html.theme-neuronal .cal-event.sem-atrasado,
html.theme-neuronal .month-event.sem-atrasado {
  outline-color: #ff6b7d;
  background-image: repeating-linear-gradient(135deg, rgba(255,90,110,.22) 0 6px, transparent 6px 12px);
}

/* Celular: columnas angostas → solo el símbolo en los bloques */
@media (max-width: 767px) {
  .cal-event .sem-chip i { display: none; }
  .cal-event .sem-chip { padding: 2px 3px; margin-right: 2px; }
  .sem-ficha { margin: 0 12px 4px; font-size: 13px; }
}