/* =========================================================
   STYLE.CSS — FACHADA (HOME + AUTH + LEGALES + HEADER/FOOTER)
   Incluye modo oscuro (auto por sistema + manual por clase)
   + Menú móvil CSS-only (checkbox)
   + Footer links centrados y visibles
   + Botones con texto blanco garantizado
   + FIX: footer no recorta letras a la izquierda
   + FIX: botón "Crear cuenta" hover con texto negro
   ========================================================= */

/* =========================================================
   VARIABLES GLOBALES (LIGHT)
========================================================= */
:root{
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fb;
  --color-bg-light: #ffffff;

  --color-text: #111827;
  --color-text-muted: #6b7280;

  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;
  --color-accent-red: #e31717;
  --color-primary-soft: rgba(37, 99, 235, 0.10);

  --color-border: #e5e7eb;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.08);

  --header-height: 74px;
  --container: 1120px;

  --focus: 0 0 0 4px rgba(37,99,235,.18);

  /* Degradado rojo+azul */
  --gradient-primary: linear-gradient(90deg, var(--color-accent-red), var(--color-primary-strong));
}

/* =========================================================
   MODO OSCURO (AUTO)
========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --color-bg: #0b1220;
    --color-bg-soft: #0f172a;
    --color-bg-light: rgba(15, 23, 42, 0.85);

    --color-text: #e5e7eb;
    --color-text-muted: #94a3b8;

    --color-border: rgba(148,163,184,.22);

    --shadow: 0 12px 40px rgba(0,0,0,.45);
    --shadow-soft: 0 10px 24px rgba(0,0,0,.35);

    --focus: 0 0 0 4px rgba(37,99,235,.28);
  }
}

/* =========================================================
   MODO OSCURO (MANUAL)
========================================================= */
.theme-dark{
  --color-bg: #0b1220;
  --color-bg-soft: #0f172a;
  --color-bg-light: rgba(15, 23, 42, 0.85);

  --color-text: #e5e7eb;
  --color-text-muted: #94a3b8;

  --color-border: rgba(148,163,184,.22);

  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.35);

  --focus: 0 0 0 4px rgba(37,99,235,.28);
}

.theme-light{
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fb;
  --color-bg-light: #ffffff;

  --color-text: #111827;
  --color-text-muted: #6b7280;

  --color-border: #e5e7eb;

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.08);

  --focus: 0 0 0 4px rgba(37,99,235,.18);
}

/* =========================================================
   BASE
========================================================= */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
  width: 100%;
}

/* ✅ Evita scroll horizontal fantasma sin “comerse” letras */
body{
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  body{ overflow-x: hidden; }
}

body{
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  padding-top: var(--header-height);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; }
img{ max-width: 100%; display: block; }
p{ margin: 0 0 12px; }
h1, h2, h3, h4{ margin: 0 0 10px; line-height: 1.2; }

button, input, select, textarea{
  font: inherit;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

/* Utilidades */
.muted{ color: var(--color-text-muted); }

.card{
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-soft);
}
@media (prefers-color-scheme: dark){
  .card{ background: rgba(15,23,42,.72); }
}
.theme-dark .card{ background: rgba(15,23,42,.72); }

/* =========================================================
   HEADER (FIJO, CENTRADO, RESPONSIVE)
========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;

  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}

.header-container{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  /* ✅ importante para evitar desbordes en flex */
  min-width: 0;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;

  min-width: 0;
  flex: 1;
}

.brand-logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav desktop */
.main-nav{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.main-nav a{
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--color-text);
  max-width: 100%;
}

.main-nav a:hover{
  background: rgba(148,163,184,.18);
}

/* =========================================================
   BOTONES (UNIFICADOS)
   - Normal: degradado + texto blanco
   - Hover: fondo blanco + texto negro (igual en todo el sitio)
   - Sin “fix” especial del header (ya no hace falta)
========================================================= */

/* Base */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 22px;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1;

  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    color .12s ease,
    border-color .12s ease,
    filter .12s ease;
}

/* Accesibilidad */
.btn:focus{
  outline: none;
  box-shadow: var(--focus);
}
.btn:active{
  transform: translateY(1px);
}

/* =========================================================
   PRIMARY (degradado)
========================================================= */
/* =========================================================
   PRIMARY (degradado SIEMPRE como "Crear cuenta")
========================================================= */
.btn-primary{
  background: var(--gradient-primary);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28);
}

/* Garantiza blanco también en <a> */
.btn-primary:link,
.btn-primary:visited{
  color: #ffffff !important;
}

/* Hover: sigue degradado (solo leve brillo) */
.btn-primary:hover{
  background: var(--gradient-primary);
  color: #ffffff !important;
  border-color: transparent;
  filter: brightness(1.03);
  text-decoration: none;
}

/* Active: también degradado */
.btn-primary:active{
  background: var(--gradient-primary);
  color: #ffffff !important;
  border-color: transparent;
  filter: brightness(0.98);
}

/* =========================================================
   OUTLINE
========================================================= */
.btn-outline{
  background: transparent;
  color: var(--color-primary);
  border-color: rgba(37,99,235,.65);
  box-shadow: none;
}

.btn-outline:hover{
  background: var(--color-primary-soft);
  text-decoration: none;
}

/* =========================================================
   GHOST
========================================================= */
.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
  box-shadow: none;
}

.btn-ghost:hover{
  background: rgba(148,163,184,.18);
  text-decoration: none;
}

/* Sizes */
.btn-lg{ padding: 12px 26px; }
.btn-sm{ padding: 8px 14px; font-size: 13px; }


/* =========================================================
   MENÚ MÓVIL (CSS-only: checkbox + panel)
========================================================= */
.nav-check{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Botón hamburguesa */
.menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.70);
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  user-select: none;
  transition: background .12s ease, transform .12s ease;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark){
  .menu-toggle{ background: rgba(15,23,42,.65); }
}
.theme-dark .menu-toggle{ background: rgba(15,23,42,.65); }

.menu-toggle:hover{ background: rgba(148,163,184,.18); }
.menu-toggle:active{ transform: translateY(1px); }

/* Fondo para cerrar al tocar fuera */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.35);
  z-index: 998;
  display: none;
}

/* Panel */
.mobile-nav{
  position: fixed;
  top: calc(var(--header-height) + 10px);
  right: 16px;
  width: min(320px, calc(100% - 32px));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 999;
  display: none;
}
@media (prefers-color-scheme: dark){
  .mobile-nav{ background: rgba(15,23,42,.92); }
}
.theme-dark .mobile-nav{ background: rgba(15,23,42,.92); }

.mobile-nav a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 12px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--color-text);
}
.mobile-nav a:hover{
  background: rgba(148,163,184,.18);
}
.mobile-nav .btn{
  width: 100%;
  margin-top: 8px;
}

/* Abierto */
.nav-check:checked ~ .nav-backdrop{ display: block; }
.nav-check:checked ~ .mobile-nav{ display: block; }

/* =========================================================
   MAIN
========================================================= */
.site-main{
  min-height: calc(100vh - var(--header-height));
}

/* =========================================================
   HERO / HOME
========================================================= */
.hero{
  padding: 36px 0 26px;
  background:
    radial-gradient(900px 380px at 10% 10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 380px at 90% 20%, rgba(227,23,23,.10), transparent 60%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 55%, var(--color-bg-soft) 100%);
}

.hero-container{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: start;
  min-width: 0;
}

.hero-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.70);
  font-size: 12px;
}
@media (prefers-color-scheme: dark){
  .hero-tag{ background: rgba(15,23,42,.65); }
}
.theme-dark .hero-tag{ background: rgba(15,23,42,.65); }

.hero-text h1{
  margin: 10px 0 10px;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.hero-subtitle{
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
  max-width: 62ch;
}

.hero-actions{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-bullets{
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--color-text);
  font-size: 14px;
}

.hero-panel .progress-card{
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  padding: 18px;
}
@media (prefers-color-scheme: dark){
  .hero-panel .progress-card{ background: rgba(15,23,42,.72); }
}
.theme-dark .hero-panel .progress-card{ background: rgba(15,23,42,.72); }

.progress-card h2{ font-size: 18px; }
.progress-card-text{ color: var(--color-text-muted); font-size: 13px; margin-bottom: 10px; }

.progress-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
  overflow: hidden;
  margin-top: 12px;
}
.progress-fill{
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
}

.progress-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.metric{
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.90);
}
@media (prefers-color-scheme: dark){
  .metric{ background: rgba(2,6,23,.35); }
}
.theme-dark .metric{ background: rgba(2,6,23,.35); }

.metric-label{ display: block; font-size: 12px; color: var(--color-text-muted); }
.metric-value{ display: block; font-weight: 700; font-size: 14px; }

.progress-note{
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* =========================================================
   SECCIONES
========================================================= */
.features,
.steps{
  padding: 26px 0;
  background: var(--color-bg-soft);
}

.features-header,
.steps-header{
  margin-bottom: 14px;
}

.features-header h2,
.steps-header h2{
  font-size: 20px;
  letter-spacing: -0.2px;
}

.features-header p,
.steps-header p{
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.features-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  min-width: 0;
}

.feature-card{
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
@media (prefers-color-scheme: dark){
  .feature-card{ background: rgba(15,23,42,.72); }
}
.theme-dark .feature-card{ background: rgba(15,23,42,.72); }

.feature-card h3{ font-size: 14px; margin-bottom: 6px; }
.feature-card p{ margin: 0; font-size: 13px; color: var(--color-text-muted); }

.steps-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  min-width: 0;
}

.step-card{
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
@media (prefers-color-scheme: dark){
  .step-card{ background: rgba(15,23,42,.72); }
}
.theme-dark .step-card{ background: rgba(15,23,42,.72); }

.step-number{
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--gradient-primary);
  margin-bottom: 10px;
}

/* =========================================================
   FORMULARIOS
========================================================= */
.auth-main{
  min-height: calc(100vh - var(--header-height));
  background: linear-gradient(180deg, var(--color-bg-soft), var(--color-bg));
  padding: 34px 0;
}

.form-card{
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 18px;
}
@media (prefers-color-scheme: dark){
  .form-card{ background: rgba(15,23,42,.78); }
}
.theme-dark .form-card{ background: rgba(15,23,42,.78); }

.form-card h1{ font-size: 20px; margin-bottom: 6px; }
.form-card p{ color: var(--color-text-muted); font-size: 13px; margin-bottom: 14px; }

.form-grid{ display: grid; gap: 12px; }

.form-field label{
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.90);
  color: var(--color-text);
  font-size: 14px;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
@media (prefers-color-scheme: dark){
  .form-field input,
  .form-field select,
  .form-field textarea{ background: rgba(2,6,23,.35); }
}
.theme-dark .form-field input,
.theme-dark .form-field select,
.theme-dark .form-field textarea{ background: rgba(2,6,23,.35); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--focus);
}

.form-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.form-help{
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.form-help a{
  color: var(--color-primary);
  text-decoration: none;
}
.form-help a:hover{ text-decoration: underline; }

/* Mensajes */
.alert{
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.88);
  font-size: 13px;
  margin-bottom: 12px;
}
@media (prefers-color-scheme: dark){
  .alert{ background: rgba(15,23,42,.72); }
}
.theme-dark .alert{ background: rgba(15,23,42,.72); }

/* =========================================================
   LEGALES
========================================================= */
.legal-page{
  padding: 34px 0;
  background: var(--color-bg-soft);
}

.legal-content{
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
@media (prefers-color-scheme: dark){
  .legal-content{ background: rgba(15,23,42,.78); }
}
.theme-dark .legal-content{ background: rgba(15,23,42,.78); }

.legal-content h1{ font-size: 22px; margin-bottom: 8px; }
.legal-content h2{ font-size: 15px; margin-top: 16px; }
.legal-content p, .legal-content li{ font-size: 14px; }
.legal-content ul{ padding-left: 18px; }
.legal-meta{ color: var(--color-text-muted); font-size: 13px; }

/* =========================================================
   FOOTER (✅ FIX: NO RECORTA LETRAS A LA IZQUIERDA)
   OBJETIVO:
   - Escritorio: TODO en una sola línea (© + links legales)
   - Móvil: puede partir a 2 líneas, pero TODO con el mismo tamaño del ©
========================================================= */

.site-footer{
  border-top: 2px solid var(--color-border);
  background: var(--color-bg-soft);

  /* ✅ padding lateral REAL (safe-area + margen normal) */
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
}

/* Contenedor */
.footer-container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;

  padding-top: 18px;
  padding-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  text-align: center;
  min-width: 0;
  flex-wrap: nowrap; /* ✅ escritorio: una sola línea */
}

/* Texto base del footer (©) */
.site-footer .footer-copy,
.site-footer p{
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.35;

  /* ✅ no permite que el © se rompa */
  white-space: nowrap;
}

/* Links: mismo tamaño/alto que el texto del © */
.site-footer .footer-links{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 12.5px;   /* 🔥 igual que © */
  line-height: 1.35;
  color: var(--color-text-muted);

  /* ✅ escritorio: no partir línea */
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* Separadores */
.site-footer .footer-links .footer-sep,
.site-footer .footer-links span{
  font-size: 12.5px;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* Links legales */
.site-footer .footer-links a{
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-text-muted);

  text-decoration: none;
  padding: 6px 8px;   /* ✅ clickeable sin “inflar” */
  border-radius: 10px;
}

.site-footer .footer-links a:hover{
  background: rgba(148,163,184,.18);
  text-decoration: none;
}

/* =========================
   RESPONSIVE (MÓVIL)
   - Permite 2 líneas
   - Mantiene el MISMO tamaño que ©
========================= */
@media (max-width: 780px){
  .footer-container{
    flex-wrap: wrap;          /* ✅ ya puede partir línea */
    row-gap: 10px;
    column-gap: 10px;
  }

  /* En móvil dejamos que el texto y links puedan bajar,
     pero siguen con el MISMO tamaño */
  .site-footer .footer-copy,
  .site-footer p{
    white-space: normal;
  }

  .site-footer .footer-links{
    white-space: normal;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px){
  .footer-container{
    padding-top: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* ✅ en móvil, centra bien */
  .site-footer .footer-links{
    justify-content: center;
  }
}


/* =========================================================
   COOKIE BANNER
========================================================= */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: none;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,.14);
  z-index: 200;
}
@media (prefers-color-scheme: dark){
  .cookie-banner{
    background: rgba(15,23,42,.86);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
  }
}
.theme-dark .cookie-banner{
  background: rgba(15,23,42,.86);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.cookie-banner p{ margin:0; font-size: 13px; color: var(--color-text-muted); }
.cookie-banner a{ text-decoration: underline; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .hero-container{ grid-template-columns: 1fr; }
  .features-container{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: 1fr; }
  .hero-text h1{ font-size: 32px; }
}

@media (max-width: 560px){
  .main-nav{ display: none; }
  .menu-toggle{ display: inline-flex; }

  .brand{
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .brand-name{
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.15;
  }

  .hero-text h1{ font-size: 28px; }
}

/* =========================================================
   OPCIONAL: Botón/Toggle de tema
========================================================= */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.70);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark){
  .theme-toggle{ background: rgba(15,23,42,.65); }
}
.theme-dark .theme-toggle{ background: rgba(15,23,42,.65); }

.theme-toggle:hover{ background: rgba(148,163,184,.18); }
.theme-toggle:active{ transform: translateY(1px); }
/* "Inicio" fijo en móvil (entre logo y hamburguesa) */
.nav-home{
  display: none;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--color-text);
}
.nav-home:hover{
  background: rgba(148,163,184,.18);
}

@media (max-width: 560px){
  /* ...tus reglas actuales... */

  /* Mostrar Inicio fijo móvil */
  .nav-home{
    display: inline-flex;
    flex: 1;
    justify-content: center;
    margin-left: 6px; /* aire después del logo */
  }

  /* Logo solo, sin empujar */
  .brand{
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-start;
  }

  

  /* ☰ a la derecha fijo */
  .menu-toggle{
    flex-shrink: 0;
  }
}
/* =========================================================
   CURSO / LEVEL / LESSON (PÚBLICAS)
   - course.php, level.php, lesson.php
   - Mantiene estética actual (card + badges + grid)
========================================================= */

/* contenedor superior de páginas de curso */
.course-wrap{
  padding: 16px 0 26px;
  background: var(--color-bg-soft);
}

/* Tabs (US/UK) */
.course-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.86);
  text-decoration: none;

  color: var(--color-text);
  font-weight: 600;
  font-size: 13px;

  transition: background .12s ease, border-color .12s ease, filter .12s ease;
}
@media (prefers-color-scheme: dark){
  .tab{ background: rgba(15,23,42,.72); }
}
.theme-dark .tab{ background: rgba(15,23,42,.72); }

.tab:hover{
  background: var(--color-primary-soft);
}
.tab.active{
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

/* Grid niveles */
.grid-levels{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){
  .grid-levels{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid-levels{ grid-template-columns: 1fr; }
}

.level-card{
  padding: 16px;
}

.level-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.level-title{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

/* Listado de lecciones */
.lesson-list{
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.lesson-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;

  background: rgba(255,255,255,.72);
}
@media (prefers-color-scheme: dark){
  .lesson-row{
    background: rgba(15,23,42,.52);
    border-color: rgba(255,255,255,.10);
  }
}
.theme-dark .lesson-row{
  background: rgba(15,23,42,.52);
  border-color: rgba(255,255,255,.10);
}

.lesson-name{
  font-weight: 600;
  font-size: 13px;
}
.lesson-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.lesson-meta{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Badge (estado) */
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.10);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){
  .badge{ border-color: rgba(255,255,255,.12); }
}
.theme-dark .badge{ border-color: rgba(255,255,255,.12); }

/* Badge variaciones */
.badge-free{
  color: #0f172a;
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.35);
}
@media (prefers-color-scheme: dark){
  .badge-free{ color: #e5e7eb; }
}
.theme-dark .badge-free{ color: #e5e7eb; }

.badge-locked{
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.35);
}

.badge-done{
  background: rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.35);
}

/* Botones disabled (para "Abrir" bloqueado) */
.btn[disabled],
.btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Nota (avisos tipo: falta lesson.php) */
.note{
  padding: 12px;
  border-left: 4px solid rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark){
  .note{ border-left-color: rgba(255,255,255,.18); }
}
.theme-dark .note{ border-left-color: rgba(255,255,255,.18); }

/* =========================================================
   LESSON VIEW (contenido de lección)
========================================================= */
.lesson-wrap{
  padding: 16px 0 26px;
  background: var(--color-bg-soft);
}

.lesson-card{
  padding: 16px;
}

.lesson-header{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.lesson-header h1{
  font-size: 18px;
  margin: 0;
  line-height: 1.2;
  font-weight: 900;
}

.lesson-body{
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text);
}

.lesson-body p{
  margin: 0 0 12px;
}

/* Bloques de ejemplo / cajas */
.box{
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(255,255,255,.90);
  padding: 12px;
}
@media (prefers-color-scheme: dark){
  .box{ background: rgba(2,6,23,.35); }
}
.theme-dark .box{ background: rgba(2,6,23,.35); }

/* tabla simple si la usas */
.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-border);
}
.table th, .table td{
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}
.table th{
  text-align: left;
  font-weight: 700;
  background: rgba(148,163,184,.12);
}
@media (prefers-color-scheme: dark){
  .table th{ background: rgba(148,163,184,.10); }
}
.theme-dark .table th{ background: rgba(148,163,184,.10); }