/* src/ui/estilos/componentes.css
 *
 * Componentes reutilizables, portados de app-referencia.html (clases y estructura CSS
 * citadas en docs/ANALISIS_APP_REFERENCIA.md). Los nombres de clase se mantienen tal
 * cual la referencia para que el porting sea directo; donde se corrige un defecto
 * documentado en el análisis (foco, aria-live, recorte de contenido largo) se anota.
 */

/* ========== SHELL: HEADER ========== */
.shell-header {
  background: var(--color-primary);
  color: white;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  border-bottom-left-radius: var(--radius-bubble);
  border-bottom-right-radius: var(--radius-bubble);
}

.shell-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.shell-header-logo img,
.shell-header-logo svg {
  width: 84px;
  height: auto;
}

.shell-header-wordmark {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.header-brand {
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent);
}

.shell-header h1 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.shell-header-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 500;
}

@media (min-width: 601px) {
  .shell-header h1 { font-size: 1.4rem; }
}
@media (min-width: 768px) {
  .shell-header h1 { font-size: 1.6rem; }
}

/* ========== SHELL: TAB NAV ========== */
.tab-nav {
  background: white;
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 0.7rem 1.25rem;
  background: var(--color-pill-idle);
  border: none;
  color: var(--color-text);
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: all 0.3s;
  white-space: nowrap;
}
.tab-btn:hover { background: var(--color-pill-idle-hover); transform: translateY(-2px); }
.tab-btn.active {
  color: white;
  background: var(--color-primary);
  box-shadow: 0 4px 15px rgba(1, 30, 244, 0.3);
}
.tab-btn .tab-icon { font-size: 1rem; }

/* ========== SHELL: FOOTER ========== */
.shell-footer {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  background: var(--color-primary);
  margin-top: var(--space-8);
  border-top-left-radius: var(--radius-bubble);
  border-top-right-radius: var(--radius-bubble);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.shell-footer a { color: var(--color-accent); text-decoration: none; font-weight: 800; }
.shell-footer-disclaimer {
  max-width: 640px;
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.85;
}
.header-fuentes { margin-top: var(--space-4); border: 1px solid rgba(255, 255, 255, 0.65); background: transparent; color: white; }
/* Especificidad reforzada (.boton.header-fuentes) a propósito: con la misma especificidad
   que ".boton:hover" (una clase), el hover se perdía porque ".boton:hover" se declara
   después en este mismo archivo y gana el empate por orden de aparición. */
.boton.header-fuentes:hover,
.boton.header-fuentes:focus-visible {
  background: white;
  color: var(--color-primary);
}

/* ========== FUENTES NORMATIVAS ========== */
.fuentes-intro { margin: 0 0 var(--space-5); color: var(--color-text-light); line-height: 1.55; }
.fuentes-lista { display: flex; flex-direction: column; gap: var(--space-5); }
.fuentes-grupo h4 { margin: 0 0 var(--space-3); color: var(--color-primary); font-size: 0.95rem; }
.fuente-item { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-secondary); }
.fuente-item + .fuente-item { margin-top: var(--space-2); }
.fuente-item h5 { margin: 0; font-size: 0.88rem; line-height: 1.35; }
.fuente-notas { margin: var(--space-2) 0 0; color: var(--color-text-light); font-size: 0.78rem; line-height: 1.5; }
.fuente-articulos { margin-top: var(--space-3); border-top: 1px solid var(--color-divider); padding-top: var(--space-2); }
.fuente-articulos > strong { display: block; margin-bottom: var(--space-2); color: var(--color-primary); font-size: 0.8rem; }
.fuente-articulos ul { margin: 0; padding-left: var(--space-4); }
.fuente-articulos li { margin-bottom: var(--space-2); color: var(--color-text); font-size: 0.78rem; line-height: 1.5; text-align: justify; hyphens: auto; }
.fuente-articulos li:last-child { margin-bottom: 0; }
.fuente-enlace-oficial { display: inline-block; margin-top: var(--space-3); color: var(--color-primary); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.fuente-enlace-oficial:hover { text-decoration: underline; }

/* ========== RUTA DE AVANCE (landing) ========== */
.ruta-avance {
  display: flex;
  gap: var(--space-2);
  max-width: 640px;
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-4);
}
.ruta-hito {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--color-pill-idle);
  color: var(--color-text-light);
  transition: all 0.3s;
}
.ruta-hito.completado { background: var(--color-bajo); color: white; }
.ruta-hito.actual { background: var(--color-primary); color: white; }

/* ========== TARJETAS ========== */
.card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  border: none;
  transition: all 0.3s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}
.card-title { font-size: 1.2rem; font-weight: 800; color: var(--color-primary); }
.card-description {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-5);
  line-height: 1.6;
}

/* ========== BADGES ========== */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-required { background: var(--color-primary); color: white; }
.badge-optional { background: white; color: var(--color-text-light); border: 1px solid var(--color-border); }

.badge.critico, .badge.uso_indebido { background: var(--color-critico-bg); color: var(--color-critico); }
.badge.en_proceso, .badge.riesgo_alto { background: var(--color-en-proceso-bg); color: var(--color-en-proceso); }
.badge.conforme, .badge.riesgo_aceptable { background: var(--color-conforme-bg); color: var(--color-conforme); }
.badge.sin_evaluar { background: var(--color-sin-evaluar-bg); color: var(--color-sin-evaluar); }
.badge.baja { background: var(--color-sin-evaluar-bg); color: var(--color-text-light); }
.badge.obligatoria { background: var(--color-primary); color: white; }
.badge.voluntaria { background: var(--color-divider); color: var(--color-text-light); border: 1px solid var(--color-border); }
/* .badge.promocional ya no se renderiza (badgeExigibilidad() en componentes.js devuelve
   null para "promocional", punto 11 de la revisión de cliente) — se deja la regla por si
   se reactiva, no afecta nada mientras nadie la use. */
.badge.promocional { background: white; color: var(--color-text-light); border: 1px dashed var(--color-border); }

/* ========== BOTONES ========== */
.boton, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: 0.8rem 1.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: var(--font-primary);
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  letter-spacing: -0.2px;
  background: var(--color-primary);
  color: white;
}
.boton:active, .btn:active { transform: scale(0.97); }
.boton:hover, .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: var(--color-primary-dark); }
.boton:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.boton.secundario {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.boton.secundario:hover { background: var(--color-bg-secondary); }

.boton.peligro { background: var(--color-danger); }
.boton.peligro:hover { background: #e60000; }

.boton.accent {
  background: var(--color-primary);
  color: white;
  transition: all 0.3s;
}
.boton.accent:hover { background: var(--color-primary-dark); transform: scale(1.05); }

.boton.completo {
  display: flex;
  width: 100%;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-text);
  border-radius: 9999px;
  padding: 0.95rem;
}
.boton.completo:hover { background: var(--color-accent-dark); color: white; transform: none; box-shadow: none; }

.acciones-barra {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
/* Modificador que centra la barra de acciones en vez del alineado a la izquierda por
   defecto — Perfil → Inventario, Exportar/Importar JSON, y las barras de Panel y
   Resultados (Guardar evaluación / Ver historial / Generar informe, etc.). informe.js
   sigue con su propio `style="justify-content:flex-end"` porque ahí se busca lo
   contrario (Imprimir/Volver pegados a la derecha). */
.acciones-barra.centrada { justify-content: center; }

/* ========== MIGAS DE PAN ========== */
.migas { color: var(--color-text-light); font-size: 0.85rem; margin-bottom: var(--space-4); }
.migas button { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

/* ========== ENTITY-TYPE-BTN: selector de tarjeta grande ========== */
.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.selector-tarjeta {
  padding: var(--space-5) var(--space-4);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-family: var(--font-primary);
}
.selector-tarjeta:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); }
.selector-tarjeta.selected { border-color: var(--color-primary); background: var(--color-selected-bg); }
.selector-tarjeta .st-icon { font-size: 2rem; display: block; margin-bottom: var(--space-2); }
.selector-tarjeta .st-title { font-size: 1rem; font-weight: 700; color: var(--color-primary); display: block; }
.selector-tarjeta .st-desc { font-size: 0.78rem; color: var(--color-text-light); display: block; margin-top: 0.3rem; }
.modo-seleccion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 74px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}
.modo-seleccion .st-title { font-size: 0.72rem; font-weight: 700; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.3px; }
.modo-seleccion .st-desc { font-size: 0.95rem; font-weight: 700; color: var(--color-text); }

/* ========== PRESETS DE CASOS DE USO ========== */
.presets-sistemas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}
.preset-sistema {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 58px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.preset-sistema:hover { border-color: var(--color-primary-light); background: var(--color-selected-bg); transform: translateY(-1px); }
.preset-sistema.seleccionado { border: 2px solid var(--color-primary); background: var(--color-selected-bg); color: var(--color-primary); }
.preset-sistema-icono { font-size: 1.15rem; flex-shrink: 0; }
.preset-sistema-etiqueta { line-height: 1.2; }

/* ========== CHIPS DE RESPUESTA (Sí/Parcial/No/No aplica) ========== */
.chips-respuesta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip-respuesta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid var(--color-border);
  border-radius: 50px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  background: white;
  color: var(--color-text);
  transition: all 0.2s;
}
.chip-respuesta:hover { border-color: var(--color-primary-light); }
.chip-respuesta.seleccionado { border-color: var(--color-primary); background: var(--color-primary); color: white; }
.chip-respuesta.seleccionado.valor-no { border-color: var(--color-danger); background: var(--color-danger); }
.chip-respuesta.seleccionado.valor-parcial { border-color: var(--color-medio); background: var(--color-medio); color: var(--color-text); }
.chip-respuesta.seleccionado.valor-no_aplica { border-color: var(--color-muted); background: var(--color-muted); }

/* ========== LEYENDA DE COLORES ========== */
.leyenda-grupo { margin-bottom: var(--space-3); }
.leyenda-grupo:last-child { margin-bottom: 0; }
.leyenda-grupo-titulo { font-weight: 700; font-size: 0.85rem; margin-bottom: var(--space-2); }
.leyenda-item { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: 0.85rem; color: var(--color-text-light); }

/* ========== CAMPOS DE FORMULARIO ========== */
.campo { margin-bottom: var(--space-4); }
.campo label { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: var(--space-2); }
.campo input[type="text"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-input-border);
  border-radius: 12px;
  background: var(--color-input-bg);
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--color-text);
  transition: all 0.3s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(1, 30, 244, 0.1);
}
.campo input::placeholder { color: var(--color-placeholder); }
.campo input[aria-invalid="true"] { border-color: var(--color-danger); }
.campo-error { margin-top: var(--space-2); font-size: 0.85rem; font-weight: 600; color: var(--color-danger); }

/* ========== WIZARD: PASOS ========== */
.wizard-steps { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); }
.wizard-step {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--color-divider);
  color: var(--color-text-light);
  transition: all 0.3s;
  /* Reset para cuando se renderiza como <button> (pasos clicables, ver
     componentes.js#pasosWizard) — inofensivo cuando es un <div>. */
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.wizard-step:hover { filter: brightness(0.95); }
.wizard-step.active { background: var(--color-primary); color: white; }
.wizard-step.completed { background: var(--color-bajo); color: white; }
.wizard-step.critico { background: var(--color-critico); color: white; }
.wizard-step.en_proceso { background: var(--color-en-proceso); color: white; }
.wizard-step .step-num { display: block; font-size: 0.95rem; margin-bottom: 0.1rem; }

.wizard-panel { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== BARRAS DE PROGRESO ========== */
.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: 0.75rem 1rem;
  background: white;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.progress-text, .progress-status { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.progress-text { color: var(--color-text-light); }
.progress-status { color: var(--color-primary); }
.progress-track {
  flex: 1;
  height: 8px;
  background: var(--color-track);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill { height: 100%; background: var(--color-primary); border-radius: 4px; transition: width 0.4s ease; }
.progress-fill.critico { background: var(--color-critico); }
.progress-fill.en_proceso { background: var(--color-en-proceso); }
.progress-fill.conforme { background: var(--color-conforme); }

/* ========== ANILLO DE PROGRESO (conic-gradient, sin librería) ========== */
.anillo-progreso {
  --pct: 0;
  --color-anillo: var(--color-sin-evaluar);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--color-anillo) calc(var(--pct) * 1%), var(--color-sin-evaluar-bg) 0);
  position: relative;
  flex-shrink: 0;
}
.anillo-progreso::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: white;
}
.anillo-progreso .anillo-valor {
  position: relative;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
}
.anillo-progreso.pequeno {
  width: 64px;
  height: 64px;
}
.anillo-progreso.pequeno::before { inset: 6px; }
.anillo-progreso.pequeno .anillo-valor { font-size: 0.85rem; }
.anillo-progreso.grande {
  width: 160px;
  height: 160px;
}
.anillo-progreso.grande::before { inset: 14px; }
.anillo-progreso.grande .anillo-valor { font-size: 2rem; }

/* ========== CHECKLIST (data-cl + .ci-ref) ========== */
.checklist-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.checklist-progress .cp-track { flex: 1; height: 8px; background: var(--color-track); border-radius: 4px; overflow: hidden; }
.checklist-progress .cp-fill { height: 100%; background: var(--color-bajo); border-radius: 4px; transition: width 0.4s ease; }
.checklist-progress .cp-text, .checklist-progress .cp-count { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.checklist-item .ci-text { flex: 1; font-size: 0.9rem; }
.checklist-item .ci-ref {
  font-size: 0.72rem;
  color: var(--color-primary-light);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========== BANNERS DE RESULTADO ========== */
.result-banner {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: var(--space-4);
  transition: all 0.4s ease;
  border: none;
}
.result-banner.result-yes, .result-banner.riesgo_aceptable {
  background: var(--color-success); color: white; box-shadow: 0 10px 20px rgba(46, 204, 113, 0.2);
}
.result-banner.result-no, .result-banner.uso_indebido {
  background: var(--color-danger); color: white; box-shadow: 0 10px 20px rgba(255, 77, 77, 0.2);
}
.result-banner.riesgo_alto {
  background: var(--color-medio); color: var(--color-text); box-shadow: 0 10px 20px rgba(243, 156, 18, 0.2);
}
.result-banner.result-pending { background: #eeeeee; color: #777777; }

.result-rule {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-5);
  font-style: italic;
}
.rule-highlight {
  background: #fffde7;
  border-left: 3px solid var(--color-medio);
  padding: 0.15rem var(--space-2);
  border-radius: 0 4px 4px 0;
  font-weight: 600;
}
.regla-lista { list-style: none; font-size: 0.9rem; }
.regla-lista li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: justify;
  hyphens: auto;
}
.regla-lista li:last-child { border-bottom: none; }

/* ========== EXCEPCIÓN / AVISO INLINE ========== */
.excepcion-nota {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.6;
  color: #6b5900;
  text-align: justify;
  hyphens: auto;
}

/* ========== DISCLAIMER ========== */
.disclaimer {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: 0.85rem;
  line-height: 1.6;
  color: #6b5900;
}
.disclaimer-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4rem; }

/* ========== ACORDEÓN / DETAILS ========== */
.criterion-help { margin-top: var(--space-3); }
.criterion-help summary {
  font-size: 0.82rem;
  color: var(--color-primary-light);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.criterion-help summary::-webkit-details-marker { display: none; }
.criterion-help summary::before { content: '▸ '; }
.criterion-help[open] summary::before { content: '▾ '; }
.criterion-help summary:hover { color: var(--color-primary); }
.criterion-help .criterion-help-body {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-align: justify;
  hyphens: auto;
}
.criterion-help ul { padding-left: var(--space-5); }
.criterion-help li { margin-bottom: 0.2rem; }

/* Separado visualmente de "Evidencia esperada" (obligación legal): esto es guía
   voluntaria de una norma técnica, no evidencia exigida por la Ley 31814/DS 115. */
.evidencia-sugerida-iso {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-info);
}
.evidencia-sugerida-iso strong { color: var(--color-info); }

.colapsable {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--color-card);
}
.colapsable > summary {
  padding: 0.85rem 1.1rem;
  background: var(--color-header-fill);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  list-style: none;
  transition: background 0.2s;
}
.colapsable > summary::-webkit-details-marker { display: none; }
.colapsable > summary:hover { background: var(--color-header-fill-hover); }
.colapsable > summary::after { content: '▾'; transition: transform 0.3s; font-size: 0.75rem; }
.colapsable[open] > summary::after { transform: rotate(180deg); }
.colapsable-contenido { padding: var(--space-4) var(--space-5); }

/* ========== TIMELINE (calendario de plazos) ========== */
.today-marker {
  text-align: center;
  padding: var(--space-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-selected-bg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}
.timeline { position: relative; padding-left: var(--space-6); }
.timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-border);
  border-radius: 2px;
}
.timeline-item { position: relative; margin-bottom: var(--space-5); padding-left: var(--space-5); }
.timeline-dot {
  position: absolute;
  left: -1.65rem;
  top: 0.5rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--color-border);
}
.timeline-dot.urgencia-alta { background: var(--color-alto); box-shadow: 0 0 0 2px var(--color-alto); }
.timeline-dot.urgencia-media { background: var(--color-medio); box-shadow: 0 0 0 2px var(--color-medio); }
.timeline-dot.urgencia-baja { background: var(--color-bajo); box-shadow: 0 0 0 2px var(--color-bajo); }
.timeline-dot.urgencia-vencido { background: var(--color-muted); box-shadow: 0 0 0 2px var(--color-muted); }

.timeline-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.timeline-card.highlighted { border-color: var(--color-primary); box-shadow: var(--shadow-md); background: var(--color-selected-bg); }
.timeline-card .tc-category { font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.timeline-card .tc-date { font-size: 0.88rem; color: var(--color-text-light); margin-top: 0.2rem; }
.timeline-card .tc-days { font-size: 0.85rem; font-weight: 700; margin-top: var(--space-2); }
.timeline-card .tc-days.urgente { color: var(--color-alto); }
.timeline-card .tc-days.advertencia { color: var(--color-medio); }
.timeline-card .tc-days.ok { color: var(--color-bajo); }
.timeline-card .tc-days.vencido { color: var(--color-muted); }
.tc-progress { margin-top: var(--space-2); height: 6px; background: var(--color-track); border-radius: 3px; overflow: hidden; }
.tc-progress-fill { height: 100%; border-radius: 3px; }

/* ========== TABLAS ========== */
table.tabla-limpia { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.tabla-limpia th, table.tabla-limpia td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table.tabla-limpia th {
  color: var(--color-primary);
  background: var(--color-table-header-bg);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ========== MODAL (accesible: Escape, backdrop-click, focus trap gestionado en JS) ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
.modal {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 { font-size: 1.05rem; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
  line-height: 1;
  padding: var(--space-1);
}
.modal-body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; font-size: 0.95rem; line-height: 1.6; }
.modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
  .acciones-barra { flex-direction: column; }
  .acciones-barra .boton { justify-content: center; }
  .selector-grid { grid-template-columns: 1fr; }
  .chips-respuesta { flex-direction: column; align-items: stretch; }
  .chip-respuesta { justify-content: center; }
  .wizard-steps { gap: 0.15rem; }
  .wizard-step { font-size: 0.6rem; padding: 0.5rem 0.15rem; }
  .tab-btn { min-width: 96px; font-size: 0.68rem; padding: 0.55rem 0.3rem; }
}