/* ================================================================
   SK WELLNESS CENTER — DESIGN TOKENS v3
   /escuela/css/sk-mini.css

   FUENTE ÚNICA DE VERDAD para toda la plataforma.
   Ningún otro archivo debe redefinir variables de color,
   tipografía, sombra o radio. Sólo referenciarlas.

   Paleta base estricta:
     Dorado  → #c9a84c
     Tierra  → #6b4c3b
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. TOKENS CANÓNICOS
   ──────────────────────────────────────────────────────────────── */
:root {

  /* ── Dorado (base #c9a84c) ─────────────────────────────────── */
  --gold:           #c9a84c;
  --gold-light:     #e8c96a;   /* +luminosidad ~14%  */
  --gold-dark:      #a8832c;   /* –luminosidad ~14%  */
  --gold-pale:      #f9f3e3;   /* fondo muy claro     */
  --gold-glow:      rgba(201, 168, 76, .22);
  --gold-ring:      rgba(201, 168, 76, .35);
  --gold-border:    rgba(201, 168, 76, .50);
  --gold-border-mid:rgba(201, 168, 76, .28);

  /* ── Tierra (base #6b4c3b) ─────────────────────────────────── */
  --earth:          #6b4c3b;
  --earth-dark:     #3d2a1e;   /* –luminosidad ~18%  */
  --earth-light:    #8c6652;   /* +luminosidad ~12%  */
  --earth-xdark:    #1c1814;   /* casi negro cálido   */

  /* ── Superficies ───────────────────────────────────────────── */
  --bg:             #faf7f2;
  --paper:          #f8f4ee;
  --surface:        #ffffff;
  --soft:           #f3ede3;

  /* ── Texto ─────────────────────────────────────────────────── */
  --ink:            #1c1814;
  --muted:          #7a7268;

  /* ── Bordes ────────────────────────────────────────────────── */
  --border:         rgba(107, 76, 59, .12);
  --border-mid:     rgba(201, 168, 76, .28);
  --border-gold:    rgba(201, 168, 76, .50);

  /* ── Sombras ───────────────────────────────────────────────── */
  --shadow-xs:  0 2px  8px  rgba(28, 24, 20, .06);
  --shadow-sm:  0 8px  24px rgba(28, 24, 20, .08);
  --shadow-md:  0 18px 42px rgba(28, 24, 20, .11);
  --shadow-lg:  0 28px 60px rgba(28, 24, 20, .14);

  /* ── Tipografía ────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Radios ────────────────────────────────────────────────── */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;

  /* ── Movimiento ────────────────────────────────────────────── */
  --ease:    cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, .6, 1);
  --t:       .25s var(--ease);

  /* ── Contenedor ────────────────────────────────────────────── */
  --container: 1220px;

  /* ── Ring de foco ──────────────────────────────────────────── */
  --ring: 0 0 0 3px var(--gold-ring);

  /* ────────────────────────────────────────────────────────────
     ALIASES de compatibilidad
     Mantienen funcionando aula-2.css y cualquier archivo
     que use los nombres anteriores (--sk-*, --brand, etc.)
     SIN tocar esos archivos.
  ──────────────────────────────────────────────────────────── */

  /* aliases sk- (aula-2.css) */
  --sk-bg:           var(--bg);
  --sk-paper:        var(--surface);
  --sk-ink:          var(--ink);
  --sk-muted:        var(--muted);
  --sk-soft:         var(--soft);
  --sk-gold:         var(--gold);
  --sk-gold-light:   var(--gold-light);
  --sk-gold-pale:    var(--gold-pale);
  --sk-gold-glow:    var(--gold-glow);
  --sk-earth:        var(--earth);
  --sk-earth-dark:   var(--earth-dark);
  --sk-earth-light:  var(--earth-light);
  --sk-border:       var(--border);
  --sk-border-mid:   var(--border-mid);
  --sk-border-gold:  var(--border-gold);
  --sk-shadow-xs:    var(--shadow-xs);
  --sk-shadow-sm:    var(--shadow-sm);
  --sk-shadow-md:    var(--shadow-md);
  --sk-shadow-lg:    var(--shadow-lg);
  --sk-font-display: var(--font-display);
  --sk-font-ui:      var(--font-ui);
  --sk-r-sm:         var(--r-sm);
  --sk-r-md:         var(--r-md);
  --sk-r-lg:         var(--r-lg);
  --sk-r-xl:         var(--r-xl);
  --sk-ease:         var(--ease);
  --sk-ease-in:      var(--ease-in);
  --sk-t:            var(--t);

  /* aliases --brand (sk-mini legacy) */
  --brand:           var(--gold);
  --brand-dark:      var(--gold-dark);

  /* aliases sin prefijo que usaban algunos parches */
  --primary:         var(--earth);
  --primary-dark:    var(--earth-dark);
  --secondary:       var(--gold);
  --shadow-card:     var(--shadow-sm);
}


/* ────────────────────────────────────────────────────────────────
   2. RESET MÍNIMO
   ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 105%  -5%, rgba(201,168,76,.09),  transparent 55%),
    radial-gradient(ellipse 700px 600px at  -10%  30%, rgba(107,76,59,.07),  transparent 55%),
    radial-gradient(ellipse 500px 400px at   55% 100%, rgba(201,168,76,.05), transparent 60%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ────────────────────────────────────────────────────────────────
   3. UTILIDADES BASE
   ──────────────────────────────────────────────────────────────── */

/* Contenedor */
.container,
.sk-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}

/* Sección */
.section {
  padding: 28px 0 56px;
}

/* Grilla 2 columnas responsive */
.grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .grid { grid-template-columns: 1.3fr .7fr; }
}

/* Card base */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  transition: box-shadow var(--t);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Texto secundario */
.lead {
  color: var(--muted);
  line-height: 1.55;
}


/* ────────────────────────────────────────────────────────────────
   4. BOTONES
   ──────────────────────────────────────────────────────────────── */
.btn,
.sk-btn,
.aula-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--ink);
  transition:
    transform var(--t),
    box-shadow var(--t),
    background var(--t),
    border-color var(--t),
    color var(--t);
}

.btn:hover,
.sk-btn:hover,
.aula-btn:hover {
  transform: translateY(-2px);
}

.btn:active,
.sk-btn:active,
.aula-btn:active {
  transform: translateY(0);
}

/* Tamaño pequeño */
.btn--sm,
.sk-btn--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
}

/* Variante ghost */
.btn-ghost,
.sk-btn--ghost,
.aula-btn--ghost {
  background: rgba(255, 255, 255, .75);
  border-color: var(--border);
  color: var(--earth-dark);
}
.btn-ghost:hover,
.sk-btn--ghost:hover,
.aula-btn--ghost:hover {
  background: var(--surface);
  color: var(--earth-dark);
}

/* Variante outline */
.sk-btn--outline,
.aula-btn--outline {
  background: rgba(255, 255, 255, .75);
  border-color: var(--border);
  color: var(--earth-dark);
}
.sk-btn--outline:hover,
.aula-btn--outline:hover {
  background: var(--surface);
  border-color: var(--border-mid);
  box-shadow: var(--shadow-xs);
}

/* Variante dorada */
.btn-brand,
.sk-btn--gold,
.aula-btn--gold {
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold)       55%,
    var(--gold-dark)  100%
  );
  color: var(--earth-dark);
  border: none;
  font-weight: 800;
  box-shadow: 0 8px 22px var(--gold-glow);
}
.btn-brand:hover,
.sk-btn--gold:hover,
.aula-btn--gold:hover {
  box-shadow: 0 14px 30px rgba(201, 168, 76, .38);
}

/* Variante CTA tierra */
.sk-btn--cta,
.aula-btn--admin,
#btnContinue {
  min-height: 50px;
  padding: 0 28px;
  font-size: 15px;
  border-radius: var(--r-lg);
  background: linear-gradient(
    145deg,
    var(--earth-light) 0%,
    var(--earth)       50%,
    var(--earth-dark)  100%
  );
  color: #fff;
  border: none;
  box-shadow: 0 12px 30px rgba(61, 42, 30, .22);
}
.sk-btn--cta:hover,
#btnContinue:hover {
  box-shadow: 0 18px 40px rgba(61, 42, 30, .32);
}
.sk-btn--cta:disabled,
#btnContinue:disabled {
  opacity: .45;
  transform: none;
  cursor: not-allowed;
  box-shadow: none;
}

/* Variante limpiar */
.btn--clear,
.sk-btn--clear,
.aula-btn--clear {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  font-size: 13px;
  width: 100%;
}
.btn--clear:hover,
.sk-btn--clear:hover,
.aula-btn--clear:hover {
  background: var(--soft);
  color: var(--earth);
  border-color: var(--border-mid);
}

/* Logout */
.aula-btn--logout,
.sk-btn--logout {
  background: transparent;
  border: none;
  color: var(--muted);
}
.aula-btn--logout:hover,
.sk-btn--logout:hover {
  color: var(--earth-dark);
  background: var(--soft);
}


/* ────────────────────────────────────────────────────────────────
   5. CHIPS / PILLS
   ──────────────────────────────────────────────────────────────── */
.chip,
.pill,
.sk-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: var(--gold-pale);
  color: var(--earth);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.chip--gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--earth-dark);
  border-color: transparent;
}


/* ────────────────────────────────────────────────────────────────
   6. ACCESIBILIDAD
   ──────────────────────────────────────────────────────────────── */
:focus { outline: none; }

:focus-visible {
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}