/* ============================================================================
   btn-3d.css — Canonical 3D button system (Skora identity)
   ----------------------------------------------------------------------------
   This is the SINGLE source of truth for the 3D button look used across the
   platform. Mirrors the patterns in css/features/skill-tree.css and
   css/pages/learn.css.

   Usage:
     <button class="btn-3d btn-3d--violet">Comenzar</button>
     <button class="btn-3d btn-3d--area" data-area="mat">Matemáticas</button>
     <button class="btn-3d btn-3d--ghost">Cancelar</button>
     <button class="btn-3d btn-3d--danger">Finalizar Simulacro</button>
     <button class="btn-3d btn-3d--sm">Compacto</button>

   Anatomy:
     - Vertical gradient (light → base → dark)
     - Box shadow apilado:  0 6px 0 [dark]  +  0 8px 18px [base alpha]
     - Inset highlight superior + inset shadow inferior
     - Hover: translateY(-2px) + amplified shadow
     - Active: translateY(3px) scale(0.97) + reduced shadow
   ============================================================================ */

/* ── Token defaults — overridden per variant ───────────────────────────── */
.btn-3d {
  --btn-c:      var(--violet);
  --btn-c-dark: var(--violet-dark);
  --btn-c-fg:   #fff;
  --btn-depth:  6px;
  --btn-radius: 12px;
  --btn-pad-y:  12px;
  --btn-pad-x:  22px;
  --btn-fs:     0.92rem;

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

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: none;
  border-radius: var(--btn-radius);

  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--btn-c-fg);
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--btn-c), #fff 22%) 0%,
    var(--btn-c) 50%,
    color-mix(in srgb, var(--btn-c), #000 12%) 100%
  );

  box-shadow:
    0 var(--btn-depth) 0 var(--btn-c-dark),
    0 calc(var(--btn-depth) + 4px) 18px color-mix(in srgb, var(--btn-c), transparent 60%),
    inset 0 -3px 6px rgba(0, 0, 0, 0.10),
    inset 0 2px 4px rgba(255, 255, 255, 0.28);

  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1),
    filter 160ms ease;

  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-3d .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
}

/* ── Hover (only on real pointer) ──────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn-3d:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
    box-shadow:
      0 calc(var(--btn-depth) + 2px) 0 var(--btn-c-dark),
      0 calc(var(--btn-depth) + 8px) 22px color-mix(in srgb, var(--btn-c), transparent 50%),
      inset 0 -3px 6px rgba(0, 0, 0, 0.10),
      inset 0 2px 4px rgba(255, 255, 255, 0.32);
    filter: brightness(1.04);
  }
}

/* ── Active (press) ────────────────────────────────────────────────────── */
.btn-3d:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(calc(var(--btn-depth) - 2px)) scale(0.98);
  box-shadow:
    0 2px 0 var(--btn-c-dark),
    0 3px 6px color-mix(in srgb, var(--btn-c), transparent 70%),
    inset 0 -2px 4px rgba(0, 0, 0, 0.12),
    inset 0 2px 4px rgba(255, 255, 255, 0.22);
  filter: brightness(0.98);
}

/* ── Disabled ──────────────────────────────────────────────────────────── */
.btn-3d:disabled,
.btn-3d[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.4);
  pointer-events: none;
}

/* ── Focus ring ────────────────────────────────────────────────────────── */
.btn-3d:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--btn-c), #fff 30%);
  outline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────────────────
   VARIANTS — by color
   ────────────────────────────────────────────────────────────────────────── */

/* Brand violet (default) */
.btn-3d--violet {
  --btn-c:      var(--violet);
  --btn-c-dark: var(--violet-dark);
}

/* Success green */
.btn-3d--success {
  --btn-c:      #22C55E;
  --btn-c-dark: #15803D;
}

/* Warning amber */
.btn-3d--warn {
  --btn-c:      #F59E0B;
  --btn-c-dark: #B45309;
}

/* Danger red */
.btn-3d--danger {
  --btn-c:      #EF4444;
  --btn-c-dark: #B91C1C;
}

/* Premium gold */
.btn-3d--gold {
  --btn-c:      #F59E0B;
  --btn-c-dark: #D97706;
}

/* Neutral / secondary */
.btn-3d--neutral {
  --btn-c:      #6b7280;
  --btn-c-dark: #374151;
}

/* Area-dynamic — reads data-area attribute */
.btn-3d--area[data-area="mat"],
.btn-3d--area[data-area="matematicas"] {
  --btn-c:      var(--area-mat);
  --btn-c-dark: var(--area-mat-dark);
  --btn-c-fg:   #0a3a3f;
}
.btn-3d--area[data-area="lec"],
.btn-3d--area[data-area="lectura-critica"] {
  --btn-c:      var(--area-lec);
  --btn-c-dark: var(--area-lec-dark);
}
.btn-3d--area[data-area="soc"],
.btn-3d--area[data-area="sociales"],
.btn-3d--area[data-area="sociales-y-ciudadanas"] {
  --btn-c:      var(--area-soc);
  --btn-c-dark: var(--area-soc-dark);
}
.btn-3d--area[data-area="nat"],
.btn-3d--area[data-area="ciencias"],
.btn-3d--area[data-area="ciencias-naturales"] {
  --btn-c:      var(--area-nat);
  --btn-c-dark: var(--area-nat-dark);
}
.btn-3d--area[data-area="eng"],
.btn-3d--area[data-area="ingles"] {
  --btn-c:      var(--area-eng);
  --btn-c-dark: var(--area-eng-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   VARIANTS — ghost (outlined 3D, white interior, colored shadow)
   ────────────────────────────────────────────────────────────────────────── */
.btn-3d--ghost {
  --ghost-c: var(--btn-c, var(--violet));
  --ghost-c-dark: var(--btn-c-dark, var(--violet-dark));

  background: var(--bg-white);
  color: var(--ghost-c);
  font-weight: 700;

  box-shadow:
    0 var(--btn-depth) 0 var(--ghost-c-dark),
    0 calc(var(--btn-depth) + 2px) 12px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1.5px color-mix(in srgb, var(--ghost-c), transparent 70%);
}

@media (hover: hover) and (pointer: fine) {
  .btn-3d--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ghost-c), #fff 92%);
    box-shadow:
      0 calc(var(--btn-depth) + 2px) 0 var(--ghost-c-dark),
      0 calc(var(--btn-depth) + 6px) 16px rgba(0, 0, 0, 0.08),
      inset 0 0 0 1.5px color-mix(in srgb, var(--ghost-c), transparent 55%);
    filter: none;
  }
}

.btn-3d--ghost:active:not(:disabled) {
  box-shadow:
    0 2px 0 var(--ghost-c-dark),
    0 3px 6px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1.5px color-mix(in srgb, var(--ghost-c), transparent 60%);
  filter: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   VARIANTS — pill (rounded, used for toggles/filters)
   ────────────────────────────────────────────────────────────────────────── */
.btn-3d--pill {
  --btn-radius: 999px;
  --btn-pad-x: 18px;
  --btn-pad-y: 9px;
  --btn-fs: 0.82rem;
  --btn-depth: 4px;
}

/* When pill is INACTIVE (data-state="inactive"): neutral surface, colored ring */
.btn-3d--pill[data-state="inactive"] {
  background: var(--bg-white);
  color: var(--text-secondary);
  box-shadow:
    0 var(--btn-depth) 0 color-mix(in srgb, var(--text-secondary), transparent 75%),
    inset 0 0 0 1.5px var(--border);
  filter: none;
}
.btn-3d--pill[data-state="inactive"]:hover {
  color: var(--text-primary);
  box-shadow:
    0 calc(var(--btn-depth) + 1px) 0 color-mix(in srgb, var(--text-secondary), transparent 65%),
    inset 0 0 0 1.5px color-mix(in srgb, var(--text-primary), transparent 80%);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────────
   VARIANTS — sizes
   ────────────────────────────────────────────────────────────────────────── */
.btn-3d--sm {
  --btn-pad-y: 8px;
  --btn-pad-x: 14px;
  --btn-fs: 0.78rem;
  --btn-depth: 4px;
  --btn-radius: 10px;
}
.btn-3d--sm .material-symbols-outlined { font-size: 15px; }

.btn-3d--lg {
  --btn-pad-y: 16px;
  --btn-pad-x: 28px;
  --btn-fs: 1.02rem;
  --btn-depth: 7px;
  --btn-radius: 14px;
}
.btn-3d--lg .material-symbols-outlined { font-size: 21px; }

.btn-3d--xl {
  --btn-pad-y: 18px;
  --btn-pad-x: 32px;
  --btn-fs: 1.1rem;
  --btn-depth: 8px;
  --btn-radius: 16px;
}
.btn-3d--xl .material-symbols-outlined { font-size: 22px; }

/* Full-width block */
.btn-3d--block {
  display: flex;
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Touch tweak — slightly reduce depth on coarse pointers (less jarring)
   ────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn-3d {
    --btn-depth: 5px;
  }
  .btn-3d--lg, .btn-3d--xl {
    --btn-depth: 6px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Dark mode adjustments
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .btn-3d {
  box-shadow:
    0 var(--btn-depth) 0 var(--btn-c-dark),
    0 calc(var(--btn-depth) + 4px) 22px color-mix(in srgb, var(--btn-c), transparent 50%),
    inset 0 -3px 6px rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .btn-3d--ghost {
  background: var(--bg-white);
  box-shadow:
    0 var(--btn-depth) 0 var(--ghost-c-dark, var(--violet-dark)),
    0 calc(var(--btn-depth) + 2px) 12px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1.5px color-mix(in srgb, var(--ghost-c, var(--violet)), transparent 60%);
}

[data-theme="dark"] .btn-3d--pill[data-state="inactive"] {
  background: var(--bg-secondary);
  box-shadow:
    0 var(--btn-depth) 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1.5px var(--border);
}