/* NDE-MH:2026 — Estilos */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
  --navy: #1B3A6B;
  --navy-dark: #122952;
  --navy-light: #2a5298;
  --gold: #C9A84C;
  --gold-light: #e8c96a;
  --gold-pale: #fdf6e3;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-400: #ced4da;
  --gray-600: #6c757d;
  --gray-800: #343a40;
  --green: #2e7d32;
  --green-light: #e8f5e9;
  --red: #c62828;
  --red-light: #ffebee;
  --orange: #e65100;
  --orange-light: #fff3e0;
  --shadow: 0 2px 12px rgba(27,58,107,0.10);
  --shadow-md: 0 4px 24px rgba(27,58,107,0.15);
  --radius: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  background: var(--gray-100);
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Pantallas ── */
.screen { display: none; }
.screen.active { display: block; }

/* ── Auth ── */
#screen-auth {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}
#screen-auth.active { display: flex; }

/* ── Selector de idioma en pantalla de auth ── */
.auth-lang-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}
.auth-lang-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: opacity 0.15s, transform 0.1s;
  opacity: 0.55;
}
.auth-lang-btn:hover { opacity: 0.8; transform: translateY(-1px); }
.auth-lang-active { opacity: 1 !important; }
.auth-lang-es {
  background: #dc2626;
  color: #fff;
}
.auth-lang-en {
  background: #1d4ed8;
  color: #fff;
}

.auth-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 546px;
  padding: 32px 40px;
}

.auth-sponsors {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.auth-sponsors-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.auth-sponsors-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sponsor-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.auth-brand {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  padding: 16px 12px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 15%, rgba(30, 58, 95, 0.05), transparent 60%),
    radial-gradient(circle at 82% 85%, rgba(30, 58, 95, 0.04), transparent 60%),
    repeating-linear-gradient(45deg, rgba(30, 58, 95, 0.025) 0px, rgba(30, 58, 95, 0.025) 1px, transparent 1px, transparent 12px);
}

.auth-logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.auth-logo-text {
  text-align: center;
}

.auth-logo-img {
  height: 120px;
  width: 120px;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.auth-badge {
  display: inline-block;
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 50px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
}

.auth-brand h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 6px;
}

.auth-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 29px;
  line-height: 1.15;
  color: #b0862f;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 8px;
  text-align: center;
}

/* ── Input wrap (password + eye toggle) ── */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap input { padding-right: 44px; }

.btn-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-600);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-eye:hover { color: var(--navy); }
.btn-eye .eye-hide { display: none; }
.btn-eye.active .eye-show { display: none; }
.btn-eye.active .eye-hide { display: inline; }

/* ── Validación inline ── */
.field-error {
  display: block;
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
  min-height: 16px;
}

/* ── Extras del login (recordarme + olvidé contraseña) ── */
.form-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 20px;
}

/* ── Checkbox label ── */
.check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
  cursor: pointer;
  line-height: 1.4;
}
.check-label input[type="checkbox"] {
  width: auto;
  height: auto;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--navy);
}
.check-label a { color: var(--navy); text-decoration: underline; }

/* ── Botón link (olvidé contraseña) ── */
.link-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--navy);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}
.link-btn:hover { color: var(--navy-dark); }

/* ── Hint de olvidé contraseña ── */
.forgot-hint {
  font-size: 12px;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 16px;
  border-left: 3px solid var(--navy-light);
}
.forgot-hint a { color: var(--navy); }

/* ── Botón auth con estados ── */
.btn-auth {
  margin-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-auth .btn-loading { display: none; align-items: center; gap: 8px; }
.btn-auth.loading .btn-label { display: none; }
.btn-auth.loading .btn-loading { display: flex; }
.btn-auth:disabled { opacity: 0.75; cursor: not-allowed; }

/* ── Grupo de checkbox ── */
.form-check-group { margin-bottom: 0; }

/* ── Sección info (debajo del formulario) ── */
.auth-info-section {
  margin-top: 24px;
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
}
.auth-info-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  padding: 4px 0;
  text-align: center;
}
.auth-info-toggle:hover { color: var(--navy-dark); }
.info-chevron { flex-shrink: 0; transition: transform 0.2s; }
.auth-info-section.open .info-chevron { transform: rotate(180deg); }
.auth-info-body { display: none; margin-top: 8px; text-align: justify; }
.auth-info-section.open .auth-info-body { display: block; }

/* ── Auth acordeones ── */

.auth-accordion {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-100);
}

.auth-acc-header {
  width: 100%;
  background: none;
  border: none;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  gap: 8px;
}

.auth-acc-header:hover { background: var(--gray-200); }

.auth-acc-icon { font-size: 11px; }

.auth-acc-chevron {
  font-size: 11px;
  color: var(--gray-600);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.auth-accordion.open .auth-acc-chevron { transform: rotate(180deg); }

.auth-acc-body {
  display: none;
  padding: 0 12px 10px;
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
}

.auth-accordion.open .auth-acc-body { display: block; }

.auth-acc-steps {
  padding-left: 18px;
  margin-top: 4px;
}
.auth-acc-steps li { margin-bottom: 3px; }

.auth-acc-list {
  padding-left: 16px;
  margin: 6px 0;
}
.auth-acc-list li { margin-bottom: 2px; }

.auth-acc-score-hint {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.acc-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
}
.acc-chip.green { background: var(--green-light); color: var(--green); }
.acc-chip.orange { background: var(--orange-light); color: var(--orange); }
.acc-chip.red { background: var(--red-light); color: var(--red); }

.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 14px;
}

.auth-demo-btn {
  width: 100%;
  margin-bottom: 16px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  color: var(--gray-600);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.auth-tab.active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.form-group { margin-bottom: 2px; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 0 14px;
  height: 42px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--gray-100);
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus { border-color: var(--navy); }

.form-group select {
  width: 100%;
  padding: 0 14px;
  height: 42px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--gray-100);
  transition: border-color 0.2s;
  outline: none;
  cursor: pointer;
}

.form-group select:focus { border-color: var(--navy); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 15px;
}

.btn-primary:hover { background: var(--navy-dark); }

.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-danger { background: var(--red); color: white; }
.btn-danger:hover { background: #b71c1c; }

.btn-success { background: var(--green); color: white; }
.btn-success:hover { background: #1b5e20; }

.error-msg {
  background: var(--red-light);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-top: 12px;
}

/* ── Layout principal ── */
#screen-app {
  min-height: 100vh;
  display: none;
  flex-direction: column;
}
#screen-app.active { display: flex; }

/* ── Navbar ── */
.navbar {
  background: #3B6CB7;
  color: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-logo {
  height: 55px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.navbar-brand .brand-badge {
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.navbar-brand .brand-name {
  font-size: 15px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.navbar-brand .brand-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--gold-light);
  white-space: nowrap;
}

.navbar-brand .brand-subtext {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

.navbar-sponsors {
  display: flex;
  align-items: center;
  gap: 14px;
}
.navbar-sponsor-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  background: white;
  border-radius: 4px;
  padding: 2px 5px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-name-nav {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.btn-nav {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-nav:hover { background: rgba(255,255,255,0.22); }
.btn-lang {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.2s;
  margin-right: 6px;
}
.btn-lang:hover { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.5); }
.btn-norma { text-decoration: none; display: inline-flex; align-items: center; }
#btn-logout {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}
#btn-logout:hover { background: rgba(255,255,255,0.1); color: white; }

.btn-evaluate {
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-eval-ai {
  background: var(--navy);
  color: white;
}
.btn-eval-ai:hover { background: var(--navy-dark); }
.btn-eval-self {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-eval-self:hover { background: var(--gold-light); }

/* ── Contenido principal ── */
.app-body {
  display: flex;
  flex: 1;
}

#main-content {
  background-color: #f5f7fa;
  background-image: radial-gradient(circle, #b0bdd4 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

/* ── Sidebar ── */
.sidebar {
  width: 360px;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  padding: 16px 0;
  overflow-y: auto;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  flex-shrink: 0;
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px 4px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: var(--gray-800);
}

.sidebar-item:hover { background: var(--gray-100); }

.sidebar-item.active {
  background: #eef2f8;
  border-left-color: var(--navy);
  color: var(--navy);
  font-weight: 600;
}

.sidebar-item .req-num {
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-item.active .req-num {
  background: var(--navy);
  color: white;
}

.sidebar-item .req-title {
  font-size: 12px;
  line-height: 1.3;
  flex: 1;
}

/* "Requisitos" debe verse del mismo tamaño que "Calcular resultados" arriba */
#sidebar-item-requisitos .req-title {
  font-size: 13px;
}

.sidebar-item .req-dots {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.req-dot {
  font-size: 13px;
  line-height: 1;
  color: var(--gray-400);
}
.req-dot.has-files { color: var(--gold); }
.req-dot.complete  { color: var(--green); }

/* Barra de progreso global en sidebar */
.sidebar-progress-wrap {
  padding: 6px 12px 10px;
}
.sidebar-progress-label {
  font-size: 11px;
  color: var(--gray-600);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.sidebar-progress-bar {
  height: 5px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.sidebar-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width 0.4s;
}

/* ── Panel de bienvenida ── */
#panel-welcome {
  padding: 32px;
  max-width: 780px;
}

.welcome-header {
  margin-bottom: 28px;
}

.welcome-header .label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.welcome-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.welcome-header .company-greeting {
  font-size: 16px;
  color: var(--gray-600);
  margin-top: 8px;
}

.welcome-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 16px;
  margin-bottom: 0;
}

.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
}

.info-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card h3 .icon {
  font-size: 20px;
}

.info-card p, .info-card li {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.7;
}

.info-card ul {
  padding-left: 20px;
}

.info-card li { margin-bottom: 6px; }

/* ── Acordeón en panel de bienvenida ── */
.accordion-card { padding: 0; overflow: hidden; }

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  gap: 8px;
}

.accordion-header:hover { background: var(--gray-50); }

.accordion-chevron {
  font-size: 18px;
  color: var(--gray-400);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.accordion-card.open .accordion-chevron { transform: rotate(180deg); }

.accordion-body {
  display: none;
  padding: 0 24px 20px;
}

.accordion-card.open .accordion-body { display: block; }

.accordion-desc {
  font-size: 12px;
  color: var(--gray-600);
  padding: 0 24px 14px;
  margin-top: -6px;
}

.progress-hint {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 8px;
}

.steps-list {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.steps-list li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-800);
  padding-left: 6px;
}
.steps-list li:last-child {
  background: #fff0f0;
  border: 1px solid #f5c0c0;
  border-radius: 8px;
  padding: 12px 14px 12px 20px;
  list-style-position: inside;
  padding-left: 14px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.step-card {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-card .step-num {
  background: var(--navy);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.step-card .step-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-800);
}

.score-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.score-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.score-chip.green { background: var(--green-light); color: var(--green); }
.score-chip.orange { background: var(--orange-light); color: var(--orange); }
.score-chip.red { background: var(--red-light); color: var(--red); }

.btn-start {
  background: var(--navy);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  margin-top: 8px;
  transition: all 0.2s;
}
.btn-start:hover { background: var(--navy-dark); }

/* ── Panel de requisito ── */
#panel-requirement {
  padding: 28px 32px;
  flex: 1;
  overflow-y: auto;
  max-width: 900px;
}

.req-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--gray-200);
}

.req-header .req-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.req-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.req-header .req-subtitle {
  font-size: 14px;
  color: var(--gray-600);
  font-style: italic;
  margin-top: 4px;
}

.req-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.req-section-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.req-section-header:hover { background: var(--gray-100); }

.req-section-header .section-icon {
  font-size: 18px;
}

.req-section-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
}

.req-section-header .section-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--gray-200);
  color: var(--gray-600);
}

.req-section-header .chevron {
  font-size: 12px;
  color: var(--gray-600);
  transition: transform 0.2s;
}

.req-section.collapsed .chevron { transform: rotate(-90deg); }

.req-section-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--gray-200);
}

.req-section.collapsed .req-section-body { display: none; }

.section-desc {
  font-size: 13px;
  color: var(--gray-800);
  line-height: 1.6;
  padding: 14px 0 12px;
  border-bottom: 1px dashed var(--gray-200);
  margin-bottom: 14px;
}

/* ── Ítems de evidencia ── */
.evidence-item {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--gray-100);
  overflow: hidden;
}

.evidence-item-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}

.evidence-label {
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

.evidence-desc {
  font-size: 13px;
  color: var(--gray-800);
  line-height: 1.5;
  flex: 1;
}

.evidence-upload {
  padding: 10px 14px;
  border-top: 1px solid var(--gray-200);
  background: white;
}

.upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.evidence-note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.evidence-note-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  flex-shrink: 0;
}

.evidence-note-input {
  flex: 1;
  min-width: 180px;
  padding: 6px 10px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius);
  font-size: 12.5px;
  font-family: inherit;
  background: var(--gray-100);
  outline: none;
}

.evidence-note-input:focus { border-color: var(--navy); }

.btn-upload {
  background: transparent;
  color: var(--gray-500);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 2px dashed var(--gray-300);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-upload:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--gray-600);
}

.upload-hint {
  font-size: 11px;
  color: var(--gray-600);
}

.uploaded-files { margin-top: 8px; }

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--navy-dark);
  margin: 3px 3px 3px 0;
}

.file-chip .file-icon { font-size: 13px; }

.file-chip .file-link {
  color: var(--navy-dark);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.file-chip .file-link:hover {
  color: var(--navy);
  text-decoration: underline;
}

.file-chip .btn-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--red);
  font-size: 13px;
  padding: 0;
  line-height: 1;
}

/* ── Tipo de evidencia header ── */
.evidence-type-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
}

.evidence-type-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-doc { background: #e3f2fd; color: #1565c0; }
.badge-fun { background: #e8f5e9; color: #2e7d32; }
.badge-dif { background: #fff3e0; color: #e65100; }
.badge-mej { background: #f3e5f5; color: #6a1b9a; }

.evidence-type-pct {
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 600;
}

/* ── Progress bar ── */
.progress-bar-container {
  background: var(--gray-200);
  border-radius: 4px;
  height: 8px;
  margin: 6px 0;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold);
  transition: width 0.4s ease;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,50,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 48px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Colores encabezados modales según tarjeta */
#modal-self .modal-header {
  background: #dbeafe;
  color: #1e3a8a;
}
#modal-self .modal-header .modal-close {
  background: rgba(30,58,138,0.12);
  color: #1e3a8a;
}
#modal-evaluate .modal-header {
  background: #fee2e2;
  color: #7f1d1d;
}
#modal-evaluate .modal-header .modal-close {
  background: rgba(127,29,29,0.12);
  color: #7f1d1d;
}

/* Modal de autoevaluación — pantalla completa */
#modal-self {
  background: var(--gray-100);
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
#modal-self .modal {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
#modal-self .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.modal-header {
  background: var(--navy);
  color: white;
  padding: 20px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 { font-size: 18px; font-weight: 700; }

.modal-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body { padding: 24px; }

/* ── Modal de evaluación ── */
.eval-mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.eval-mode-card {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.eval-mode-card:hover { border-color: var(--navy); }
.eval-mode-card.selected { border-color: var(--navy); background: #eef2f8; }

.eval-mode-card .mode-icon { font-size: 28px; margin-bottom: 8px; }
.eval-mode-card .mode-title { font-size: 14px; font-weight: 700; color: var(--navy); }
.eval-mode-card .mode-desc { font-size: 12px; color: var(--gray-600); margin-top: 4px; }

/* ── Botones CTA de evaluación en bienvenida ── */
.eval-cta-label {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 12px;
  font-weight: 700;
}
.eval-cta-buttons {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 0 12px;
}
.btn-eval-cta {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.2;
}
.btn-eval-cta .btn-eval-icon {
  font-size: 36px;
  line-height: 1;
}
.btn-eval-cta.btn-eval-self {
  background: #dbeafe;
  color: #1e3a8a;
}
.btn-eval-cta.btn-eval-self:hover {
  background: #bfdbfe;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59,130,246,0.25);
}
/* Tarjeta IA con forma de microchip */
.btn-eval-cta.btn-eval-ai {
  background: #fee2e2;
  color: #7f1d1d;
  position: relative;
}
.btn-eval-cta.btn-eval-ai::before,
.btn-eval-cta.btn-eval-ai::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: 10px;
  height: 70%;
  background: repeating-linear-gradient(
    to bottom,
    #fca5a5 0px, #fca5a5 10px,
    transparent 10px, transparent 18px
  );
}
.btn-eval-cta.btn-eval-ai::before { left: -10px; border-radius: 3px 0 0 3px; }
.btn-eval-cta.btn-eval-ai::after  { right: -10px; border-radius: 0 3px 3px 0; }
.btn-eval-cta.btn-eval-ai:hover {
  background: #fecaca;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239,68,68,0.25);
}
.eval-cta-buttons {
  overflow: visible !important;
}
.btn-eval-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.75;
}

/* ── Botón "Requisitos": mismo alto y familia de estilo que "Calcular resultados", en azul (igual que el encabezado) ── */
#sidebar-item-requisitos {
  background: #3B6CB7 !important;
  color: white !important;
  border-left: none !important;
  border-radius: 8px !important;
  margin: 4px 12px !important;
  width: calc(100% - 24px) !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  box-sizing: border-box;
  line-height: normal;
}
#sidebar-item-requisitos:hover {
  background: #345f9f !important;
}
#sidebar-item-requisitos.active {
  background: #3B6CB7 !important;
  color: white !important;
}
#sidebar-item-requisitos .req-num {
  display: none;
}
#sidebar-item-requisitos .req-chevron {
  font-size: 14px;
  opacity: 1;
  color: white;
  line-height: 1;
}

/* ── Índice desplegable de requisitos en sidebar ── */
.req-chevron {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.5;
  transition: transform 0.2s;
  flex-shrink: 0;
}
#sidebar-req-index {
  margin: 0 0 4px 0;
  border-left: 2px solid var(--gray-200, #e5e7eb);
  margin-left: 18px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.25s ease, opacity 0.2s;
  opacity: 1;
}
#sidebar-req-index.collapsed {
  max-height: 0;
  opacity: 0;
}
#sidebar-item-requisitos .req-chevron.rotated {
  transform: rotate(-90deg);
}
.sidebar-req-idx {
  padding: 6px 10px 6px 12px !important;
  font-size: 12px !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 1px 0 !important;
}
.sidebar-req-idx .req-num-idx {
  font-size: 11px;
  font-weight: 700;
  min-width: 28px;
  color: var(--navy);
  opacity: 0.7;
}
.sidebar-req-idx .req-title {
  font-size: 12px;
  line-height: 1.3;
}
.sidebar-req-idx:hover .req-num-idx,
.sidebar-req-idx.active .req-num-idx {
  opacity: 1;
}

/* ── Botones de evaluación en sidebar ── */
.sidebar-eval-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 4px 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}
.sidebar-eval-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-eval-text small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}
.sidebar-eval-self {
  background: #dbeafe;
  color: #1e3a8a;
}
.sidebar-eval-self:hover { background: #bfdbfe; }
.sidebar-eval-ai {
  background: #fee2e2;
  color: #7f1d1d;
}
.sidebar-eval-ai:hover { background: #fecaca; }

/* ── Lista de requisitos en panel central ── */
.center-progress-wrap {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
}
.req-list-center .sidebar-item {
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 12px 16px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.15s;
}
.req-list-center .sidebar-item:hover {
  border-color: var(--navy);
  background: #f0f4ff;
}
.req-list-center .sidebar-item.active {
  border-color: var(--navy);
  background: #eef2ff;
}
.req-list-center .req-num {
  font-size: 13px;
  min-width: 36px;
}
.req-list-center .req-title {
  font-size: 14px;
}

/* ── Autoevaluación simplificada ── */
.self-req-objective {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 10px;
  line-height: 1.5;
}
.self-req-list {
  font-size: 12px;
  color: var(--gray-800);
  padding-left: 18px;
  margin: 6px 0 0;
  line-height: 1.6;
}
.self-req-chevron {
  font-size: 12px;
  color: var(--gray-600);
}

/* ── Autoevaluación por requisito (legacy) ── */
.self-eval-req {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.self-eval-req-header {
  background: var(--gray-100);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.self-eval-req-body {
  padding: 12px 14px;
  display: none;
}

.self-eval-req.open .self-eval-req-body { display: block; }

.criterion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.criterion-label {
  font-size: 12px;
  font-weight: 600;
  width: 120px;
  flex-shrink: 0;
}

.level-buttons {
  display: flex;
  gap: 4px;
}

.level-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--gray-400);
  border-radius: 4px;
  background: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--gray-600);
}

.level-btn:hover { border-color: var(--navy); color: var(--navy); }
.level-btn.selected { background: var(--navy); border-color: var(--navy); color: white; }

/* ── Resultados de evaluación ── */
#panel-results {
  padding: 28px 32px;
  max-width: 900px;
}

.results-header {
  margin-bottom: 24px;
}

.results-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
}

.results-header .eval-date {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 4px;
}

.total-score-card {
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  text-align: center;
  color: white;
}

.total-score-card.pass { background: linear-gradient(135deg, #2e7d32, #43a047); }
.total-score-card.fail { background: linear-gradient(135deg, #c62828, #e53935); }
.total-score-card.partial { background: linear-gradient(135deg, #e65100, #f57c00); }

.total-score-card .score-number {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.total-score-card .score-label {
  font-size: 15px;
  opacity: 0.9;
  margin-top: 6px;
}

.total-score-card .score-verdict {
  font-size: 18px;
  font-weight: 700;
  margin-top: 10px;
}

.total-score-card .score-min {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.req-result-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}

.req-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s;
}

.req-result-header:hover { background: var(--gray-100); }

.req-result-header .req-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.req-result-header .req-score-badge {
  font-size: 14px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
}

.badge-high { background: var(--green-light); color: var(--green); }
.badge-mid { background: var(--orange-light); color: var(--orange); }
.badge-low { background: var(--red-light); color: var(--red); }

.req-result-body {
  padding: 14px 18px;
  border-top: 1px solid var(--gray-200);
  display: none;
}

.req-result-card.open .req-result-body { display: block; }

/* Mínimos auditables en resultados */
.req-result-blocked .req-result-header { border-left: 4px solid var(--red); }

.minimos-block {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--gray-200);
}

.minimos-block-header {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
}

.minimos-header-ok {
  background: var(--green-light);
  color: var(--green);
}

.minimos-header-fail {
  background: var(--red-light);
  color: var(--red);
}

.minimos-header-revision {
  background: var(--orange-light);
  color: var(--orange);
}

.minimos-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.minimo-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
}

.minimo-icon {
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.minimo-ok .minimo-icon { color: var(--green); }
.minimo-fail .minimo-icon { color: var(--red); }
.minimo-revision .minimo-icon { color: var(--orange); }

.minimo-label {
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.4;
}

.minimo-feedback {
  color: var(--gray-600);
  margin-top: 3px;
  line-height: 1.4;
}

.eval-blocked-notice {
  background: #fff3f3;
  border: 1px solid #fcc;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}

/* ── Resultado de criterio (binario) ─────────────────────────────────── */
.criterion-result {
  margin-bottom: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
}

.crit-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--gray-100);
}

.criterion-result .crit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}

.crit-pct {
  font-weight: 400;
  color: var(--gray-600);
}

.criterion-result .crit-content {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  align-items: flex-start;
}

.crit-level {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.level-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gold-pale);
  color: var(--navy-dark);
  border: 1px solid var(--gold);
}

.crit-justification {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
}

/* Ítems de evaluación binaria */
.eval-items-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eval-item-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.eval-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  margin-top: 1px;
}

.badge-cumple {
  background: var(--green-light);
  color: var(--green);
}

.badge-revision {
  background: var(--orange-light);
  color: var(--orange);
}

.badge-nocumple {
  background: var(--red-light);
  color: var(--red);
}

.eval-item-content {
  flex: 1;
}

.eval-item-label {
  font-size: 12px;
  color: var(--gray-800);
  line-height: 1.4;
}

.eval-item-just {
  font-size: 11px;
  color: var(--gray-600);
  margin-top: 3px;
  line-height: 1.4;
  font-style: italic;
}

/* ── Autoevaluación: toggles Cumple / No cumple ──────────────────────── */
.self-criterion-section {
  margin-bottom: 12px;
}

.self-criterion-label {
  display: inline-block;
  font-size: 11px;
  margin-bottom: 6px;
}

.self-minimos-section {
  background: #fffbf0;
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.self-minimos-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700;
  color: #7a5a00;
  margin-bottom: 4px !important;
}

.ma-block-warning {
  background: #fff3cd;
  border: 1px solid #f0c040;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #856404;
  margin-bottom: 12px;
}

.self-minimos-note {
  font-size: 11px;
  color: var(--gray-600);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.self-item-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
}

.self-item-row:last-child {
  border-bottom: none;
}

.self-item-desc {
  flex: 1;
  font-size: 12px;
  color: var(--gray-800);
  line-height: 1.4;
}

.self-toggle-group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.self-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s;
}

.self-toggle:hover { background: var(--gray-100); }

.self-toggle.sel-yes {
  background: var(--green-light);
  color: var(--green);
  border-color: var(--green);
}

.self-toggle.sel-yes:hover {
  background: var(--green-light);
  color: var(--green);
  border-color: var(--green);
}

.self-toggle.sel-no {
  background: var(--red-light);
  color: var(--red);
  border-color: var(--red);
}

.self-toggle.sel-no:hover {
  background: var(--red-light);
  color: var(--red);
  border-color: var(--red);
}

/* ── Encabezado "Evidencias requeridas" dentro de la autoevaluación ─── */
.self-evidence-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 18px 0 8px;
}

/* ── Aviso de subida opcional de evidencia + autorizaciones ─────────── */
.evidence-notice-box {
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--navy-dark);
}

.evidence-consent-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.evidence-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-800);
  line-height: 1.4;
}

.evidence-consent-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.evidence-consent-item label {
  cursor: pointer;
}

.evidence-consent-item .consent-granted-note {
  display: block;
  font-size: 11px;
  color: var(--green);
  font-style: italic;
  margin-top: 2px;
}

.evidence-consent-item label a {
  color: var(--navy);
  text-decoration: underline;
}

/* ── Evidencia opcional: subida junto al toggle ──────────────────────── */
.self-item-evidence-upload {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--gray-200);
}

/* ── Botones antiguos de modo de evaluación (ocultos, no eliminados) ──── */
.legacy-hidden {
  display: none !important;
}

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Print ── */
/* ── Botón WhatsApp en sidebar ──────────────────────────────────────────── */
.sidebar-whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 8px 12px 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #25D366;
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
}
.sidebar-whatsapp:hover { background: #1ebe5a; }

@media print {
  .navbar, .sidebar, .btn-evaluate, .btn-print, #screen-auth, #modal-evaluate, .stats-cta { display: none !important; }
  .app-body { display: block !important; }
  #panel-results { padding: 0; max-width: 100%; }
  .req-result-body { display: block !important; }
  body { background: white; }
  .req-result-card { box-shadow: none; border: 1px solid #ccc; }
  .total-score-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Notificaciones ── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 999;
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.3s;
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

/* ── Contenido enriquecido de requisitos (sections) ── */
.req-rich-block { margin-bottom: 16px; }
.req-rich-block:last-child { margin-bottom: 0; }
.req-rich-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.req-rich-body {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 6px;
}
.req-rich-list {
  margin: 6px 0 6px 18px;
  padding: 0;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.7;
}
.req-rich-list li { margin-bottom: 2px; }
.req-rich-footer {
  font-size: 12px;
  color: var(--gray-600);
  font-style: italic;
  margin-top: 8px;
}

/* ── Aviso disclaimer IA ── */
.ai-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0 12px;
}
.ai-disclaimer-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.ai-disclaimer-text { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.55; }
.ai-disclaimer-text strong { display: block; margin-bottom: 6px; }
.ai-disclaimer-text p { margin-top: 6px; }
.ai-disclaimer-text p:first-of-type { margin-top: 0; }
.ai-disclaimer-list { margin: 0; padding-left: 20px; list-style: disc; }
.ai-disclaimer-list li { margin-top: 6px; }
.ai-disclaimer-list li:first-child { margin-top: 0; }

/* ── Invitación a compartir estadísticas anónimas ─────────────────────── */
.stats-cta {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.stats-cta-icon { font-size: 24px; flex-shrink: 0; }

.stats-cta-text { flex: 1; }

.stats-cta-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.stats-cta-desc {
  font-size: 12.5px;
  color: var(--gray-600);
  line-height: 1.45;
}

.stats-cta-desc-spaced { margin-top: 1em; }

.stats-cta-desc a { color: var(--navy); text-decoration: underline; }

.stats-cta-btn { flex-shrink: 0; white-space: nowrap; }

.stats-cta-done {
  background: var(--green-light);
  border-color: var(--green);
}

.stats-cta-done .stats-cta-icon { color: var(--green); }

.stats-compare-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(46,125,50,0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.compare-row-mine .compare-label { font-weight: 700; color: var(--navy); }
.compare-row-mine .compare-value { font-weight: 700; color: var(--navy); }

.compare-label { color: var(--gray-800); }
.compare-count { color: var(--gray-600); font-weight: 400; }

.compare-value { font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.compare-value-muted { font-weight: 400; color: var(--gray-600); white-space: normal; text-align: right; }

.compare-delta { font-size: 11px; font-weight: 700; margin-left: 6px; }
.compare-delta-up   { color: var(--green); }
.compare-delta-down { color: var(--red); }
.compare-delta-flat { color: var(--gray-600); }

@media (max-width: 640px) {
  .stats-cta { flex-direction: column; align-items: flex-start; }
  .stats-cta-btn { width: 100%; }
  .compare-row { flex-direction: column; gap: 2px; }
}

/* ── Loader de IA ── */
.ai-loader {
  text-align: center;
  padding: 32px;
}

.ai-loader .ai-icon { font-size: 40px; margin-bottom: 12px; }
.ai-loader p { font-size: 14px; color: var(--gray-600); }
.ai-loader .ai-progress {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 8px;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ══════════════════════════════════════════════════════════════════
   BOTÓN HAMBURGER (oculto en escritorio, visible en móvil)
══════════════════════════════════════════════════════════════════ */
.btn-hamburger {
  display: none;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 6px;
}

/* Backdrop del sidebar en móvil */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 140;
}
.sidebar-backdrop.active { display: block; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tableta / Móvil  (≤ 768 px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Navbar ── */
  .navbar { padding: 0 12px; height: 54px; }
  .brand-name { display: none; }
  .brand-tagline { display: none; }
  .brand-subtext { display: none; }
  .navbar-logo { height: 34px; }
  .brand-badge { font-size: 11px; padding: 2px 8px; }
  .company-name-nav { display: none; }
  .btn-norma { display: none; }
  .btn-hamburger { display: flex; }
  .btn-evaluate { font-size: 12px; padding: 6px 10px; }
  .btn-nav { font-size: 12px; padding: 6px 10px; }

  /* ── Sidebar: drawer deslizante ── */
  .sidebar {
    position: fixed;
    left: 0;
    top: 54px;
    height: calc(100vh - 54px);
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  /* ── Main content: ancho completo ── */
  #main-content { width: 100%; min-width: 0; }

  /* ── Panel de bienvenida ── */
  #panel-welcome > div {
    padding: 16px !important;
    max-width: 100% !important;
  }
  .welcome-header h2 { font-size: 20px; }
  .steps-grid { grid-template-columns: 1fr; gap: 10px; }

  /* ── Panel de autoevaluación ── */
  #panel-self > div:last-child {
    padding: 16px !important;
    max-width: 100% !important;
  }

  /* ── Panel de requisito ── */
  #panel-requirement {
    padding: 16px !important;
    max-width: 100% !important;
  }

  /* ── Panel de resultados ── */
  #panel-results {
    padding: 16px !important;
    max-width: 100% !important;
  }
  .total-score-card .score-number { font-size: 48px; }
  .results-grid { grid-template-columns: 1fr; }

  /* ── Modal: casi pantalla completa ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0;
    width: 100%;
  }

  /* ── Selector de modo de evaluación: 1 columna ── */
  .eval-mode-selector { grid-template-columns: 1fr; gap: 10px; }

  /* ── Auth ── */
  .auth-box { padding: 24px 18px; margin: 12px; }
  #auth-brand-logo { height: 150px !important; }

  /* ── Incisos: toggle debajo de la descripción ── */
  .self-item-row { flex-direction: column; gap: 6px; align-items: flex-start; }
  .self-toggle-group { width: 100%; }

  /* ── Tabla de resultados: scroll horizontal ── */
  .results-table-wrapper { overflow-x: auto; }

  /* ── Criterios de evaluación: wrap ── */
  .criterion-row { flex-wrap: wrap; gap: 6px; }

  /* ── Imágenes de requisitos: ocultar en móvil ── */
  .req-image { max-width: 100%; height: auto; }
  .req-image-wrap { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Teléfono pequeño  (≤ 480 px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .auth-brand h1 { font-size: 17px; }
  .auth-tagline { font-size: 22px; }
  #auth-brand-logo { height: 120px !important; }
  .brand-badge { display: none; }
  .btn-evaluate { font-size: 11px; padding: 5px 8px; }
  .step-card { padding: 12px; }
  .score-chip { font-size: 11px; }
  .modal-header h2 { font-size: 15px; }
}