/* SIGE Guía 34 — Complementos de estilo sobre Tailwind CSS */

:root {
  --nivel-1: #f43f5e; /* Existencia            */
  --nivel-2: #f59e0b; /* Pertinencia           */
  --nivel-3: #06b6d4; /* Apropiación           */
  --nivel-4: #22c55e; /* Mejoramiento continuo */
}

.nivel-1 { --nivel: var(--nivel-1); }
.nivel-2 { --nivel: var(--nivel-2); }
.nivel-3 { --nivel: var(--nivel-3); }
.nivel-4 { --nivel: var(--nivel-4); }

/* Tarjeta de descriptor seleccionable */
.descriptor {
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.875rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  background: #fff;
}
.descriptor:hover:not([aria-disabled="true"]) { border-color: var(--nivel); }
.descriptor[aria-checked="true"] {
  border-color: var(--nivel);
  background: color-mix(in srgb, var(--nivel) 8%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nivel) 22%, transparent);
}
.descriptor[aria-disabled="true"] { cursor: not-allowed; opacity: .65; }
.descriptor:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.descriptor__encabezado {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--nivel); margin-bottom: .375rem;
}
.descriptor__punto {
  width: .625rem; height: .625rem; border-radius: 9999px; background: var(--nivel);
}
.descriptor__texto { font-size: .8125rem; line-height: 1.45; color: #475569; }

/* Barra de avance */
.barra { height: .5rem; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 9999px; transition: width .4s ease; }

/* Impresión de reportes */
@media print {
  header, footer, nav, #toasts, .no-imprimir { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
}