/* =============================================================================
   mode-educativo.css — Modo Educativo (piloto UBB 2026-07-09)
   Todo scoped a `body.mode-educativo` → para cuentas profesionales: 0 efecto.
   El enforcement REAL es server-side (require_can_emit); esto es reflejo de UX.
   Branding: brand-system-2026-refined-preview.html (SSOT vigente). Acento del modo
   = Warning/Amber #f59e0b ("atención"); Success/Emerald #10b981 y Info/Sky #0ea5e9.
   ============================================================================= */

:root {
  /* Brand refined 2026: Warning/Amber = acento "atención" del modo educativo. */
  --edu-accent: #f59e0b;                      /* amber-500 (brand) */
  --edu-accent-dim: rgba(245, 158, 11, 0.12);
  --edu-accent-border: rgba(245, 158, 11, 0.35);
}

/* --- 1. Nav whitelist: ocultar secciones fuera del alcance educativo --------- */
/* De-CEV (requisito ratificado): la letra/demanda CEV desaparece del flujo.     */
body.mode-educativo .nav-item[data-section="demand"],
body.mode-educativo .nav-item[data-section="oguc"],
body.mode-educativo .nav-item[data-section="library"] {
  display: none !important;
}

/* --- 2. Config adelgazada: solo Nombre + Comuna (la zona se deriva) ---------- */
/* zoneSelect se OCULTA pero permanece en el DOM: location-sync sigue escribiendo
   zoneSelect.value desde la comuna. Ocultamos el campo completo (label+select). */
body.mode-educativo #section-config div:has(> #zoneSelect) {
  display: none;
}

/* Smart Import fuera del flujo educativo + grid a una sola columna. */
body.mode-educativo #smart-import-zone {
  display: none;
}
body.mode-educativo #section-config .grid-2-1 {
  grid-template-columns: 1fr;
}

/* Datos legales/profesionales: el educativo nunca emite documento oficial. */
body.mode-educativo #legalPanelAccordion {
  display: none;
}

/* Barra de contexto (MAPA): el educativo no tiene EXPEDIENTE (no emite documento
   oficial). Ocultar la etapa Expediente + el "Objetivo: Datos legales + CIP"
   (framing de tramitación DOM que no aplica). */
body.mode-educativo .context-flow-stage[data-context-stage="expediente"] {
  display: none;
}
body.mode-educativo .context-meta-item:has(#contextStageGoal) {
  display: none;
}

/* --- 3. Badge de modo en el header (ámbar) ---------------------------------- */
.edu-mode-badge {
  display: none;  /* sólo visible en modo educativo */
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--edu-accent);
  background: var(--edu-accent-dim);
  border: 1px solid var(--edu-accent-border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
body.mode-educativo .edu-mode-badge {
  display: inline-flex;
}
.edu-mode-badge .edu-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--edu-accent);
  flex: 0 0 auto;
}

/* --- 4. Banner persistente sobre el área de cálculo ------------------------- */
.edu-mode-banner {
  display: none;
}
body.mode-educativo .edu-mode-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--edu-accent-dim);
  border: 1px solid var(--edu-accent-border);
  border-radius: 8px;
  font-size: 12.5px;
  color: #fde68a;
}
.edu-mode-banner .edu-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--edu-accent);
  flex: 0 0 auto;
}

/* --- 5. Tooltips pedagógicos "¿qué estás mirando?" -------------------------- */
.edu-learn-tip {
  display: none;
}
body.mode-educativo .edu-learn-tip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(14, 165, 233, 0.06); /* sky-500 (brand) */
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  font-size: 12.5px;
  color: #a1a1aa;
}
.edu-learn-tip .edu-q {
  font-family: 'JetBrains Mono', monospace;
  color: #0ea5e9;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* --- 6. Panel Informe Educativo (report section en modo educativo) ---------- */
.edu-report-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.edu-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 7px;
  font-size: 13px;
}
.edu-report-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 3px 10px;
  flex: 0 0 auto;
}
.edu-report-status.ok {
  color: #10b981; /* emerald-500 (brand) */
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.edu-report-status.pending {
  color: var(--edu-accent);
  background: var(--edu-accent-dim);
  border: 1px solid var(--edu-accent-border);
}
.edu-report-btn {
  width: 100%;
  margin-top: 1rem;
}
.edu-report-note {
  font-size: 12px;
  color: #82828c;
  margin-top: 0.75rem;
  line-height: 1.5;
}