/* ═══════════════════════════════════════════════════════
   PISTON QUARKS — UI System (Botones, tablas y CTAs)
   Spec unificada de proporciones, radios, posiciones y estados.
   Prefijo `.ui-` para no colisionar con Tailwind ni `.btn`.
   Uso:  <link rel="stylesheet" href="/assets/ui-system.css">
   ═══════════════════════════════════════════════════════ */

:root{
  /* Radios */
  --ui-radius-sm:8px;
  --ui-radius-md:12px;
  --ui-radius-lg:16px;
  --ui-radius-full:9999px;

  /* Espaciado entre botones hermanos */
  --ui-gap:12px;

  /* Colores (tema oscuro por defecto) */
  --ui-accent:#00e5ff;
  --ui-accent-hover:#35ecff;
  --ui-accent-soft:rgba(0,229,255,0.12);
  --ui-success:#10b981;
  --ui-success-soft:rgba(16,185,129,0.12);
  --ui-danger:#ef4444;
  --ui-danger-soft:rgba(239,68,68,0.12);
  --ui-text:#e2e8f0;
  --ui-text-secondary:#94a3b8;
  --ui-surface:rgba(255,255,255,0.06);
  --ui-surface-hover:rgba(255,255,255,0.10);
  --ui-border:rgba(255,255,255,0.12);
  --ui-border-hover:rgba(255,255,255,0.24);
  --ui-ink-on-accent:#041418;
}

/* Tema claro opcional: añadir .ui-light a un contenedor */
.ui-light{
  --ui-accent:#00a6c4;
  --ui-accent-hover:#008ca6;
  --ui-accent-soft:rgba(0,166,196,0.12);
  --ui-text:#0f172a;
  --ui-text-secondary:#475569;
  --ui-surface:rgba(15,23,42,0.05);
  --ui-surface-hover:rgba(15,23,42,0.09);
  --ui-border:rgba(15,23,42,0.14);
  --ui-border-hover:rgba(15,23,42,0.28);
  --ui-ink-on-accent:#ffffff;
}

/* ────────────── BOTONES ────────────── */
/* Proporciones: sm 34px · md 40px · lg 46px · xl 50px (alturas) */
.ui-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  min-height:40px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:var(--ui-radius-md);
  font-family:inherit;
  font-size:0.875rem;
  font-weight:600;
  line-height:1;
  letter-spacing:0.01em;
  color:var(--ui-text);
  background:var(--ui-surface);
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
             border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ui-btn:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.ui-btn:hover{transform:translateY(-1px);background:var(--ui-surface-hover)}
.ui-btn:active{transform:translateY(0) scale(0.98)}
.ui-btn:disabled,.ui-btn[disabled],.ui-btn.disabled{
  opacity:0.45;pointer-events:none;cursor:not-allowed;
}

/* Variantes */
.ui-btn-primary{
  background:var(--ui-accent);
  color:var(--ui-ink-on-accent);
  box-shadow:0 0 18px var(--ui-accent-soft);
}
.ui-btn-primary:hover{
  background:var(--ui-accent-hover);
  box-shadow:0 0 26px var(--ui-accent-soft);
}
.ui-btn-secondary{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
.ui-btn-secondary:hover{background:var(--ui-surface-hover);border-color:var(--ui-border-hover)}
.ui-btn-outline{background:transparent;color:var(--ui-accent);border-color:var(--ui-accent)}
.ui-btn-outline:hover{background:var(--ui-accent-soft)}
.ui-btn-ghost{background:transparent;color:var(--ui-text-secondary)}
.ui-btn-ghost:hover{color:var(--ui-text);background:var(--ui-surface)}
.ui-btn-success{background:var(--ui-success);color:var(--ui-ink-on-accent);box-shadow:0 0 18px var(--ui-success-soft)}
.ui-btn-danger{background:var(--ui-danger);color:#fff}
.ui-btn-danger-outline{background:transparent;color:var(--ui-danger);border-color:var(--ui-danger)}
.ui-btn-danger-outline:hover{background:var(--ui-danger-soft)}

/* Tamaños */
.ui-btn-sm{height:34px;min-height:34px;padding:0 14px;font-size:0.78rem;border-radius:var(--ui-radius-sm)}
.ui-btn-lg{height:46px;min-height:46px;padding:0 28px;font-size:0.95rem}
.ui-btn-xl{height:50px;min-height:50px;padding:0 32px;font-size:1rem;border-radius:var(--ui-radius-lg)}

/* Ancho */
.ui-btn-block{width:100%}

/* Hit-area accesible mínimo 44px */
.ui-btn-sm.ui-hit{height:44px;min-height:44px}

/* ────────────── GRUPOS DE BOTONES ────────────── */
/* Posición: fila con gap 12px; wrap para no rebasar el contenedor */
.ui-btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-gap)}
.ui-btn-group.center{justify-content:center}
.ui-btn-group.right{justify-content:flex-end}
.ui-btn-group.stretch > .ui-btn{flex:1 1 0}
.ui-btn-group .ui-btn{flex:0 0 auto}

/* CTA centrado bajo título (hero / cierre de sección) */
.ui-cta-center{display:flex;flex-direction:column;align-items:center;gap:var(--ui-gap);text-align:center}

/* ────────────── TABLAS RESPONSIVE ────────────── */
/* Envolver tablas: <div class="ui-table-wrap">…<table>…</table></div> */
.ui-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--ui-radius-md);
}
.ui-table-min table{min-width:640px}

/* ────────────── FAB (botón flotante) ────────────── */
.ui-fab{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:999;
  width:56px;
  height:56px;
  border-radius:var(--ui-radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  padding:0;
}

/* ────────────── RESPONSIVE ────────────── */
@media(max-width:640px){
  .ui-btn{height:40px;min-height:40px;padding:0 16px;font-size:0.84rem}
  .ui-btn-group{width:100%}
  .ui-btn-group > .ui-btn{flex:1 1 auto}
  .ui-btn-xl{height:50px;padding:0 22px}
}