/* Sala de póker. Variables según la skill diseno-web: verde de tapete como principal y rojo
   (vecino del complementario) como acento. Los componentes solo usan variables --color-*. */

:root {
  --hue-primary: 155;
  --hue-accent: 5;
  --chroma-primary: 0.11;
  --chroma-accent: 0.17;

  --primary-50: oklch(0.97 calc(var(--chroma-primary) * 0.15) var(--hue-primary));
  --primary-100: oklch(0.94 calc(var(--chroma-primary) * 0.3) var(--hue-primary));
  --primary-200: oklch(0.88 calc(var(--chroma-primary) * 0.5) var(--hue-primary));
  --primary-300: oklch(0.8 calc(var(--chroma-primary) * 0.75) var(--hue-primary));
  --primary-400: oklch(0.7 var(--chroma-primary) var(--hue-primary));
  --primary-500: oklch(0.6 var(--chroma-primary) var(--hue-primary));
  --primary-600: oklch(0.52 var(--chroma-primary) var(--hue-primary));
  --primary-700: oklch(0.44 calc(var(--chroma-primary) * 0.9) var(--hue-primary));
  --primary-800: oklch(0.36 calc(var(--chroma-primary) * 0.8) var(--hue-primary));
  --primary-900: oklch(0.28 calc(var(--chroma-primary) * 0.65) var(--hue-primary));
  --primary-950: oklch(0.2 calc(var(--chroma-primary) * 0.5) var(--hue-primary));

  --accent-100: oklch(0.94 calc(var(--chroma-accent) * 0.3) var(--hue-accent));
  --accent-300: oklch(0.78 calc(var(--chroma-accent) * 0.8) var(--hue-accent));
  --accent-500: oklch(0.6 var(--chroma-accent) var(--hue-accent));
  --accent-700: oklch(0.48 calc(var(--chroma-accent) * 0.9) var(--hue-accent));

  --neutral-0: oklch(1 0 0);
  --neutral-50: oklch(0.98 0.006 var(--hue-primary));
  --neutral-100: oklch(0.955 0.008 var(--hue-primary));
  --neutral-200: oklch(0.91 0.01 var(--hue-primary));
  --neutral-300: oklch(0.84 0.012 var(--hue-primary));
  --neutral-500: oklch(0.6 0.014 var(--hue-primary));
  --neutral-600: oklch(0.5 0.014 var(--hue-primary));
  --neutral-700: oklch(0.4 0.014 var(--hue-primary));
  --neutral-800: oklch(0.3 0.012 var(--hue-primary));
  --neutral-850: oklch(0.25 0.012 var(--hue-primary));
  --neutral-900: oklch(0.21 0.01 var(--hue-primary));
  --neutral-950: oklch(0.16 0.008 var(--hue-primary));

  /* Estado: fijos. El error se mueve hacia el naranja para no confundirse con el acento rojo
     y el éxito hacia el azul verdoso para no confundirse con el verde del tapete. */
  --success: oklch(0.58 0.12 185);
  --warning: oklch(0.66 0.14 75);
  --danger: oklch(0.58 0.17 45);
  --info: oklch(0.55 0.14 255);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem;
  --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --control-height: 40px;
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
  --color-bg: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-muted: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text: var(--neutral-950);
  --color-text-muted: var(--neutral-600);
  --color-primary: var(--primary-700);
  --color-primary-hover: var(--primary-800);
  --color-primary-soft: var(--primary-50);
  --color-on-primary: var(--neutral-0);
  --color-accent: var(--accent-500);
  --color-accent-soft: var(--accent-100);
  --color-focus: var(--primary-500);
  --color-active: var(--primary-600);
  /* El tapete y las cartas son contenido del juego: iguales en los dos modos salvo el borde. */
  --color-felt: var(--primary-700);
  --color-felt-edge: var(--primary-900);
  --color-felt-text: var(--primary-50);
  --color-card: var(--neutral-0);
  --color-card-back: var(--accent-700);
  --color-suit-red: oklch(0.52 0.19 25);
  --color-suit-black: var(--neutral-950);
  --color-chip: var(--warning);
  --active-line: linear-gradient(90deg, transparent, var(--color-active) 50%, transparent);
  --active-glow: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-active) 14%, transparent) 50%, transparent);
  --shadow-1: 0 1px 2px oklch(0.3 0.03 var(--hue-primary) / 0.08);
  --shadow-2: 0 6px 16px oklch(0.3 0.03 var(--hue-primary) / 0.1);
  --shadow-3: 0 16px 40px oklch(0.3 0.03 var(--hue-primary) / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--neutral-950);
    --color-surface: var(--neutral-900);
    --color-surface-muted: var(--neutral-850);
    --color-border: var(--neutral-800);
    --color-border-strong: var(--neutral-700);
    --color-text: var(--neutral-50);
    --color-text-muted: var(--neutral-300);
    --color-primary: var(--primary-300);
    --color-active: var(--primary-400);
    --color-primary-hover: var(--primary-200);
    --color-primary-soft: oklch(0.3 calc(var(--chroma-primary) * 0.5) var(--hue-primary));
    --color-on-primary: var(--primary-950);
    --color-accent: var(--accent-300);
    --color-accent-soft: oklch(0.3 calc(var(--chroma-accent) * 0.5) var(--hue-accent));
    --color-felt: var(--primary-800);
    --color-felt-edge: var(--neutral-800);
    --shadow-1: 0 0 0 1px var(--neutral-800);
    --shadow-2: 0 0 0 1px var(--neutral-700);
    --shadow-3: 0 0 0 1px var(--neutral-700), 0 16px 40px oklch(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--neutral-950);
  --color-surface: var(--neutral-900);
  --color-surface-muted: var(--neutral-850);
  --color-border: var(--neutral-800);
  --color-border-strong: var(--neutral-700);
  --color-text: var(--neutral-50);
  --color-text-muted: var(--neutral-300);
  --color-primary: var(--primary-300);
  --color-active: var(--primary-400);
  --color-primary-hover: var(--primary-200);
  --color-primary-soft: oklch(0.3 calc(var(--chroma-primary) * 0.5) var(--hue-primary));
  --color-on-primary: var(--primary-950);
  --color-accent: var(--accent-300);
  --color-accent-soft: oklch(0.3 calc(var(--chroma-accent) * 0.5) var(--hue-accent));
  --color-felt: var(--primary-800);
  --color-felt-edge: var(--neutral-800);
  --shadow-1: 0 0 0 1px var(--neutral-800);
  --shadow-2: 0 0 0 1px var(--neutral-700);
  --shadow-3: 0 0 0 1px var(--neutral-700), 0 16px 40px oklch(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.5;
  background: var(--color-bg); color: var(--color-text); min-height: 100vh;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
p { margin: 0; }
.muted { color: var(--color-text-muted); }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; }
.icon-16 { width: 16px; height: 16px; }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: 56px;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-text); text-decoration: none; }
.brand .icon { color: var(--color-primary); }
.crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); min-width: 0; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-text); }
.crumbs .sep { color: var(--color-border-strong); }
.crumbs strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.who { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- controles ---------- */
.btn {
  height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--color-surface-muted); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--color-text-muted); }
.btn.ghost:hover { color: var(--color-text); background: var(--color-surface-muted); }
.btn.lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn.loading { pointer-events: none; opacity: 0.7; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field .help { font-size: var(--text-xs); color: var(--color-text-muted); }
.field .error { font-size: var(--text-xs); color: var(--danger); }
.input {
  height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: var(--text-md);
}
.input:hover { border-color: var(--color-text-muted); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.seg { display: inline-flex; gap: var(--space-1); }
.seg button {
  height: 32px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--color-text-muted);
  font: inherit; font-size: var(--text-sm); cursor: pointer; border-radius: 0;
}
.seg button:hover { color: var(--color-text); }
.seg button.on { color: var(--color-text); font-weight: 600; background: var(--active-line) bottom / 100% 2px no-repeat; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); height: 20px;
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600;
  background: var(--color-surface-muted); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.badge.bot { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; }
.badge.live { color: var(--color-text); }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* ---------- avisos ---------- */
.toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 50; display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--info);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); max-width: 360px; animation: entra var(--duration) var(--ease);
}
.toast.error { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--success); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.banner {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-8);
  font-size: var(--text-sm); background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border);
}
.banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }

/* ---------- pantallas ---------- */
main { padding: var(--space-8); max-width: 1680px; margin: 0 auto; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.head p { margin-top: var(--space-2); color: var(--color-text-muted); max-width: 640px; }

/* entrada */
.entrada { max-width: 640px; margin: var(--space-12) auto; }
.entrada .card { display: flex; flex-direction: column; gap: var(--space-6); }
.entrada form { display: flex; flex-direction: column; gap: var(--space-4); }
.entrada .points { display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.entrada .points div { display: flex; gap: var(--space-2); align-items: flex-start; }
.entrada .points .icon { color: var(--color-primary); margin-top: 2px; }

/* vestíbulo */
.mesas { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mesa-card { display: flex; flex-direction: column; gap: var(--space-4); }
.mesa-card .top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.mesa-card .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mesa-card .datos div { display: flex; flex-direction: column; }
.mesa-card .datos span:first-child { font-size: var(--text-xs); color: var(--color-text-muted); }
.mesa-card .datos span:last-child { font-weight: 600; }
.mesa-card .plazas { display: flex; gap: var(--space-1); }
.mesa-card .plazas i { flex: 1; height: 6px; border-radius: 3px; background: var(--color-border); }
.mesa-card .plazas i.ocupada { background: var(--color-primary); }
.mesa-card .acciones { display: flex; gap: var(--space-2); }
.mesa-card .acciones .btn { flex: 1; }
.skeleton { background: linear-gradient(90deg, var(--color-surface-muted), var(--color-border), var(--color-surface-muted));
            background-size: 200% 100%; animation: brillo 1.2s linear infinite; border-radius: var(--radius-sm); }
.skeleton.card { height: 220px; border-radius: var(--radius-lg); border: 0; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- mesa ---------- */
.juego { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.tablero { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.felt-wrap { position: relative; width: 100%; height: clamp(360px, calc(100vh - 470px), 560px); }
.felt {
  position: absolute; inset: 10% 8%; border-radius: 999px; background: var(--color-felt);
  border: 10px solid var(--color-felt-edge); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-felt-text);
}
.felt .bote { font-size: var(--text-sm); font-weight: 500; display: flex; align-items: center; gap: var(--space-2); }
.felt .bote strong { font-size: var(--text-lg); }
.felt .board { display: flex; gap: var(--space-2); min-height: 76px; }
.felt .estado { font-size: var(--text-sm); min-height: 21px; text-align: center; padding: 0 var(--space-4); }

.naipe {
  width: 52px; height: 74px; border-radius: var(--radius-sm); background: var(--color-card);
  box-shadow: var(--shadow-1); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 600; line-height: 1; border: 1px solid oklch(0 0 0 / 0.12);
}
.naipe .r { font-size: var(--text-lg); }
.naipe .p { font-size: var(--text-lg); }
.naipe.rojo { color: var(--color-suit-red); }
.naipe.negro { color: var(--color-suit-black); }
.naipe.dorso { background: var(--color-card-back) repeating-linear-gradient(45deg, transparent 0 6px, oklch(1 0 0 / 0.12) 6px 8px); }
.naipe.hueco { background: transparent; border: 1px dashed oklch(1 0 0 / 0.25); box-shadow: none; }
.naipe.nuevo { animation: entra var(--duration) var(--ease); }
.naipe.sm { width: 40px; height: 56px; }
.naipe.sm .r, .naipe.sm .p { font-size: var(--text-md); }

.asiento {
  position: absolute; transform: translate(-50%, -50%); width: 168px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
}
.asiento .cartas { display: flex; gap: var(--space-1); min-height: 56px; }
.asiento .placa {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-2); position: relative; overflow: hidden;
}
.asiento .placa .n { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.asiento .placa .n span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asiento .placa .s { font-size: var(--text-sm); color: var(--color-text-muted); }
.asiento.turno .placa { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.asiento.fuera .cartas, .asiento.fuera .n, .asiento.fuera .s { opacity: 0.5; }
.asiento.yo .placa { border-color: var(--color-primary); }
.asiento .reloj { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--color-accent); transform-origin: left; }
.asiento .apuesta {
  font-size: var(--text-xs); font-weight: 600; background: var(--color-surface); color: var(--color-text);
  border-radius: 999px; padding: 0 var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--color-border);
}
.asiento .apuesta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-chip); }
.asiento .gana { font-size: var(--text-xs); font-weight: 600; color: var(--success); }
.asiento .dealer {
  position: absolute; top: 58px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-card); color: var(--color-suit-black); font-size: var(--text-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); z-index: 1;
}
.asiento.libre .placa { background: var(--color-bg); border-style: dashed; box-shadow: none; text-align: center; }
.asiento.libre button { width: 100%; }

/* panel de acciones */
.mando { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.mando .fila { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.mando .fila .btn { flex: 1; min-width: 120px; }
.mando .subida { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--space-3); align-items: center; }
.mando input[type="range"] { width: 100%; accent-color: var(--color-primary); height: 44px; }
.mando .presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mando .presets .btn { height: 32px; flex: 1; }
.mando .espera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* lateral */
.lateral { display: flex; flex-direction: column; gap: var(--space-6); }
.lateral .card { padding: var(--space-4); }
.lateral h2 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); max-height: 420px; overflow: auto; }
.log li { display: flex; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); }
.log li:last-child { border-bottom: 0; }
.log .calle { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.vacio { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- adaptación ---------- */
@media (max-width: 1100px) {
  .juego { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .topbar { padding: 0 var(--space-4); }
  .banner { padding: var(--space-2) var(--space-4); }
  main { padding: var(--space-4); }
  .crumbs a, .crumbs .sep { display: none; }
  .who, .brand span { display: none; }
  .topbar { gap: var(--space-2); }
  .seg button { padding: 0 var(--space-2); }
  .badge.bot .t { display: none; }
  .head { margin-bottom: var(--space-4); }
  .btn { height: 44px; }
  .felt-wrap { height: 500px; }
  .felt { inset: 14% 6%; border-radius: 120px; border-width: 8px; }
  .asiento { width: 112px; }
  .asiento .placa { padding: var(--space-1) var(--space-2); }
  .naipe { width: 40px; height: 58px; }
  .naipe .r, .naipe .p { font-size: var(--text-md); }
  .naipe.sm { width: 32px; height: 46px; }
  .naipe.sm .r, .naipe.sm .p { font-size: var(--text-sm); }
  .asiento .cartas { min-height: 46px; }
  .asiento .dealer { top: 48px; }
  .mando .subida { grid-template-columns: 1fr; }
  .toasts { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
}