/* Sistema de botones de cel4 (lo único que define botones en todo el sitio)
   - Tamaño por variables: --bh alto, --bp relleno lateral, --bf letra (y --bh-sm, --bp-sm, --bf-sm para .btn-sm). Cada página fija su escala en :root.
   - Todos: relleno que sube al pasar el mouse e invierte el botón.
   - Principales (negros, no opciones ni íconos): luz que recorre el borde.
   - Con flecha: la flecha va en un círculo que gira al pasar el mouse. */

@property --ba { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes runlight { to { --ba: 360deg; } }

.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh, 44px); padding: 0 var(--bp, 20px); border: 0; border-radius: 999px;
  font: inherit; font-size: var(--bf, 14px); font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none;
  transition: color .45s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-danger { background: #fff; color: var(--bad); box-shadow: inset 0 0 0 1px #f0c9c5; }
.btn-sm { --bh: var(--bh-sm, 38px); --bp: var(--bp-sm, 16px); --bf: var(--bf-sm, 13px); }
.btn-icon { width: var(--bh, 44px); padding: 0; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn[aria-busy="true"] { opacity: .85; cursor: progress; pointer-events: none; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: none; }
.btn:hover { transform: none; }

/* Negros */
.btn-dark::before { background: #fff; }
.btn-dark:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Principales: luz recorriendo el borde */
.btn-dark:not(.btn-opt):not(.btn-icon) {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    conic-gradient(from var(--ba), #0b0b0c 0 62%, #8e8e95 75%, #fff 82%, #8e8e95 88%, #0b0b0c 100%) border-box;
  animation: runlight 3.2s linear infinite;
}
.btn-dark:not(.btn-opt):not(.btn-icon):hover { box-shadow: none; }

/* Opción activa de un grupo (.btn-opt): ya está elegida, no reacciona al mouse */
.btn-opt.btn-dark::before { display: none; }
.btn-opt.btn-dark:hover { color: #fff; box-shadow: none; }

/* Flecha en círculo */
.btn-dark:has(.arrow) { height: var(--bh-arrow, 54px); padding: 0 6px 0 24px; gap: 16px; }
.btn-dark .arrow {
  width: calc(var(--bh-arrow, 54px) - 12px); height: calc(var(--bh-arrow, 54px) - 12px); flex: none;
  border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 16px;
  transition: transform .5s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.btn-dark:hover .arrow { transform: rotate(-45deg); background: var(--ink); color: #fff; }

/* Blancos */
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--ink); }

/* Peligro */
.btn-danger::before { background: #c4362b; }
.btn-danger:hover { color: #fff; }

.btn[disabled]::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-dark { animation: none !important; }
  .btn::before, .btn .arrow { transition: none !important; }
}