.theme-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fffaf0;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 220, 168, .6);
  background: rgba(255, 255, 255, .14);
}

.theme-toggle-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #111315;
  background: linear-gradient(135deg, #fffaf0, #df851f);
  font-size: 14px;
  line-height: 1;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

label,
.role-select-label,
.check,
.form-copy,
#passwordHelp,
form small {
  color: #174b76;
}

label,
.role-select-label {
  letter-spacing: .025em;
}

input,
select,
textarea {
  color: #111315;
  box-shadow: inset 0 0 0 1px rgba(28, 111, 189, .04);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #df851f;
  box-shadow: 0 0 0 4px rgba(223, 133, 31, .16), inset 0 0 0 1px rgba(223, 133, 31, .12);
  outline: none;
}

.auth-card label,
.panel label,
.team-invite-form label,
.connection-form label,
.inline-form label {
  color: #174b76;
}

.auth-card label::first-letter,
.panel label::first-letter,
.team-invite-form label::first-letter {
  color: #df851f;
}

html[data-theme="dark"] {
  --carbon: #090d12;
  --grafito: #151b22;
  --gris: #a8b3bd;
  --gris-claro: #cad2d9;
  --humo: #0d1218;
  --marfil: #f7ead9;
  --marfil-suave: #d8cdbc;
  --blanco: #121820;
  --texto: #eef3f6;
  --borde: rgba(255, 255, 255, .13);
  --sombra: 0 24px 70px rgba(0, 0, 0, .42);
  --sombra-suave: 0 18px 50px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] body {
  color: #eef3f6;
  background:
    radial-gradient(circle at 8% 12%, rgba(28, 111, 189, .18), transparent 28%),
    radial-gradient(circle at 92% 58%, rgba(225, 132, 27, .14), transparent 30%),
    linear-gradient(145deg, #070b10, #111821 48%, #0a0d11);
}

html[data-theme="dark"] main > section + section {
  border-top-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] header,
html[data-theme="dark"] .portal-header {
  background: rgba(6, 9, 13, .94);
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .dashboard-mini,
html[data-theme="dark"] .agente-identidad,
html[data-theme="dark"] .capacidad,
html[data-theme="dark"] .fuente-card,
html[data-theme="dark"] .demo-card,
html[data-theme="dark"] .resultado-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .reporte,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .panel {
  color: #eef3f6;
  border-color: rgba(255, 255, 255, .11);
  background: linear-gradient(145deg, rgba(18, 24, 32, .96), rgba(12, 17, 23, .94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .titulo-seccion p,
html[data-theme="dark"] .hero-texto,
html[data-theme="dark"] .capacidad p,
html[data-theme="dark"] .fuente-card p,
html[data-theme="dark"] .demo-card p,
html[data-theme="dark"] .resultado-card p,
html[data-theme="dark"] .plan-card p,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .auth-panel > div:first-child p,
html[data-theme="dark"] .workspace-head p,
html[data-theme="dark"] .status,
html[data-theme="dark"] .member-info em,
html[data-theme="dark"] .member-info small {
  color: #b9c5ce;
}

html[data-theme="dark"] .etiqueta,
html[data-theme="dark"] .fuente-estado,
html[data-theme="dark"] .plan-badge,
html[data-theme="dark"] .team-summary {
  color: #f7ead9 !important;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .mini-kpi,
html[data-theme="dark"] .paso,
html[data-theme="dark"] .dato,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .categoria-card,
html[data-theme="dark"] .grafico-card,
html[data-theme="dark"] .detalle-panel,
html[data-theme="dark"] .role-guide article,
html[data-theme="dark"] .team-invite-form,
html[data-theme="dark"] .team-row,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .chat-messages {
  color: #eef3f6;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .team-row.pending {
  border-color: rgba(223, 133, 31, .28);
  background: rgba(223, 133, 31, .09);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: #eef3f6;
  border-color: rgba(255, 220, 168, .22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(28, 111, 189, .12);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #ffba66;
  box-shadow: 0 0 0 4px rgba(223, 133, 31, .2), inset 0 0 0 1px rgba(255, 220, 168, .16);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .auth-card label,
html[data-theme="dark"] .panel label,
html[data-theme="dark"] .team-invite-form label,
html[data-theme="dark"] .connection-form label,
html[data-theme="dark"] .inline-form label,
html[data-theme="dark"] .role-select-label,
html[data-theme="dark"] .check,
html[data-theme="dark"] .form-copy,
html[data-theme="dark"] #passwordHelp,
html[data-theme="dark"] form small {
  color: #ffdca8;
  text-shadow: 0 1px 12px rgba(223, 133, 31, .14);
}

html[data-theme="dark"] .auth-card label::first-letter,
html[data-theme="dark"] .panel label::first-letter,
html[data-theme="dark"] .team-invite-form label::first-letter {
  color: #7fc4ff;
}

html[data-theme="dark"] option {
  color: #111315;
  background: #fffaf0;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] select:invalid {
  color: #aebbc5;
}

html[data-theme="dark"] .boton.secundario,
html[data-theme="dark"] .auth-tabs button,
html[data-theme="dark"] .chat-message.assistant {
  color: #eef3f6;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .auth-tabs button.active,
html[data-theme="dark"] .boton,
html[data-theme="dark"] .primary,
html[data-theme="dark"] .boton-pdf {
  color: #fffaf0;
  background: linear-gradient(110deg, #1c6fbd, #102d45 58%, #df851f);
}

html[data-theme="dark"] .planes-seccion,
html[data-theme="dark"] .demo-seccion {
  background:
    radial-gradient(circle at 8% 12%, rgba(28, 111, 189, .17), transparent 26%),
    radial-gradient(circle at 92% 88%, rgba(225, 132, 27, .14), transparent 28%),
    #0d1218;
}

html[data-theme="dark"] .oscuro,
html[data-theme="dark"] .contacto {
  background:
    radial-gradient(circle at 12% 20%, rgba(28, 111, 189, .24), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(225, 132, 27, .18), transparent 30%),
    linear-gradient(135deg, #070b10, #151b22);
}

html[data-theme="dark"] .mini-grafico svg polyline {
  stroke: #f7ead9;
}

html[data-theme="dark"] .plan-card.plan-basico {
  border-color: rgba(72, 235, 151, .28);
  background:
    radial-gradient(circle at 8% 8%, rgba(38, 208, 124, .2), transparent 30%),
    linear-gradient(145deg, rgba(11, 55, 38, .96), rgba(12, 25, 22, .96) 48%, rgba(81, 45, 12, .88));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .34), 0 0 32px rgba(38, 208, 124, .08);
}

html[data-theme="dark"] .plan-card.plan-profesional {
  border-color: rgba(255, 186, 102, .3);
  background:
    radial-gradient(circle at 8% 8%, rgba(223, 133, 31, .22), transparent 30%),
    linear-gradient(145deg, rgba(72, 42, 13, .96), rgba(28, 22, 16, .96) 48%, rgba(13, 42, 67, .88));
  box-shadow: 0 28px 65px rgba(0, 0, 0, .36), 0 0 32px rgba(223, 133, 31, .08);
}

html[data-theme="dark"] .plan-card.plan-empresarial {
  border-color: rgba(126, 189, 255, .3);
  background:
    radial-gradient(circle at 8% 8%, rgba(28, 111, 189, .22), transparent 30%),
    linear-gradient(145deg, rgba(13, 45, 73, .96), rgba(12, 20, 32, .96) 48%, rgba(43, 31, 74, .9));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .34), 0 0 32px rgba(28, 111, 189, .09);
}

html[data-theme="dark"] .plan-basico .plan-cabecera h3,
html[data-theme="dark"] .plan-basico .plan-precios strong,
html[data-theme="dark"] .plan-basico .plan-incluye > strong {
  color: #bdf8d4;
}

html[data-theme="dark"] .plan-profesional .plan-cabecera h3,
html[data-theme="dark"] .plan-profesional .plan-precios strong,
html[data-theme="dark"] .plan-profesional .plan-incluye > strong {
  color: #ffdca8;
}

html[data-theme="dark"] .plan-empresarial .plan-cabecera h3,
html[data-theme="dark"] .plan-empresarial .plan-precios strong,
html[data-theme="dark"] .plan-empresarial .plan-incluye > strong {
  color: #b8ddff;
}

html[data-theme="dark"] .plan-card .plan-precios div {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .075);
}

html[data-theme="dark"] .plan-card .plan-incluye li {
  color: #e8f0f5;
}

html[data-theme="dark"] .resultado-grupo p {
  color: #111315 !important;
}

html[data-theme="dark"] .resultado-grupo p b {
  color: #111315 !important;
  font-weight: 900;
}

html[data-theme="dark"] .resultado.resultado-basico {
  border-color: rgba(72, 235, 151, .32);
  background:
    radial-gradient(circle at 8% 12%, rgba(38, 208, 124, .22), transparent 32%),
    linear-gradient(145deg, rgba(11, 55, 38, .96), rgba(12, 25, 22, .96) 48%, rgba(81, 45, 12, .92));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34), 0 0 34px rgba(38, 208, 124, .09);
}

html[data-theme="dark"] .resultado.resultado-basico h3 {
  color: #bdf8d4;
}

html[data-theme="dark"] .resultado.resultado-basico p {
  color: #e2fff0;
}

html[data-theme="dark"] .resultado.resultado-basico .nivel-basico {
  color: #062f20;
  background: linear-gradient(135deg, #88f3b5, #ffd78f);
}

html[data-theme="dark"] .resultado.resultado-profesional {
  border-color: rgba(255, 186, 102, .32);
  background:
    radial-gradient(circle at 8% 12%, rgba(223, 133, 31, .22), transparent 32%),
    linear-gradient(145deg, rgba(72, 42, 13, .96), rgba(28, 22, 16, .96) 48%, rgba(13, 42, 67, .9));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34), 0 0 34px rgba(223, 133, 31, .08);
}

html[data-theme="dark"] .resultado.resultado-profesional h3 {
  color: #ffdca8;
}

html[data-theme="dark"] .resultado.resultado-profesional p {
  color: #fff0d9;
}

html[data-theme="dark"] .resultado.resultado-profesional .nivel-profesional {
  color: #472604;
  background: linear-gradient(135deg, #ffd08a, #cfe8ff);
}

html[data-theme="dark"] .resultado.resultado-avanzado {
  border-color: rgba(126, 189, 255, .32);
  background:
    radial-gradient(circle at 8% 12%, rgba(28, 111, 189, .24), transparent 32%),
    linear-gradient(145deg, rgba(13, 45, 73, .96), rgba(12, 20, 32, .96) 48%, rgba(43, 31, 74, .92));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34), 0 0 34px rgba(28, 111, 189, .1);
}

html[data-theme="dark"] .resultado.resultado-avanzado h3 {
  color: #b8ddff;
}

html[data-theme="dark"] .resultado.resultado-avanzado p {
  color: #e3f1ff;
}

html[data-theme="dark"] .resultado.resultado-avanzado .nivel-avanzado {
  color: #123958;
  background: linear-gradient(135deg, #b8ddff, #dac8ff);
}

@media (max-width: 780px) {
  .theme-toggle {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .nav {
    gap: 8px;
  }

  .portal-header {
    height: auto;
    min-height: 72px;
    gap: 12px;
  }

  .portal-header-actions {
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .theme-toggle [data-theme-label] {
    display: none;
  }

  .theme-toggle {
    width: 40px;
    padding: 7px;
  }

  .portal-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}