/* Estilos propios: solo lo que Tailwind no cubre bien desde las clases. */

/* Colores semanticos de madurez y compatibilidad (filtros color_madurez /
   color_compatibilidad de app/web/plantillas.py). */
.nivel-rojo    { --nivel: #dc2626; }
.nivel-naranja { --nivel: #ea580c; }
.nivel-ambar   { --nivel: #d97706; }
.nivel-verde   { --nivel: #15803d; }
.nivel-gris    { --nivel: #64748b; }

.barra-nivel { background-color: var(--nivel); }
.texto-nivel { color: var(--nivel); }
.borde-nivel { border-color: var(--nivel); }

/* Escala 0-4 de la encuesta: botones de radio grandes y accesibles. */
.escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.escala input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.escala label {
  display: flex; flex-direction: column; gap: .15rem; cursor: pointer;
  border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .6rem;
  background: #fff; transition: border-color .12s, background-color .12s;
}
.escala label:hover { border-color: #71bfba; background: #f7fbfa; }
.escala label:has(input[type="radio"]:checked) {
  border-color: #256f6a; background: #eef7f6; box-shadow: inset 0 0 0 1px #256f6a;
}
.escala label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #2f8d86; outline-offset: 2px;
}
.escala .nivel-numero { font-weight: 600; font-size: .95rem; color: #1e5854; }
.escala .nivel-texto { font-size: .7rem; line-height: 1.15; color: #475569; }

/* Indicador de guardado del autoguardado HTMX. */
.htmx-request .indicador-guardado { opacity: 1; }
.indicador-guardado { opacity: 0; transition: opacity .15s; }

@media print {
  header, footer, .no-imprimir { display: none !important; }
  body { background: #fff; }
}

/* Selector de estrellas 1-5 sin JavaScript (CSP: script-src 'self').
   Los inputs van en orden 5..1 dentro de un contenedor flex invertido, de modo
   que se ven de 1 a 5 y el selector de hermanos ~ ilumina de izquierda a la
   estrella elegida. */
.estrellas-input label { color: #cbd5e1; transition: color .1s; }
.estrellas-input input:checked ~ label { color: #f59e0b; }
.estrellas-input label:hover,
.estrellas-input label:hover ~ label { color: #fbbf24; }

/* El chat mantiene la barra de desplazamiento suave dentro del panel. */
.chat-scroll { scroll-behavior: smooth; }