/* Liga de Póker — sala oscura, mesa de paño verde, fichas de color. */
:root {
  color-scheme: dark;
  --fondo: #14110e;
  --fondo-2: #1d1915;
  --caja: #221d18;
  --linea: #3a322a;
  --texto: #f2eadb;
  --suave: #a89b88;
  --oro: #e0ad4a;
  --oro-osc: #a97a24;
  --rojo: #e8604c;
  --verde: #2f9e6b;
  --pano: #0f5c40;
  --pano-2: #0a4531;
  --madera: #4a2c17;
  --madera-2: #2a180c;
  --titulo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ficha: 58px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.45 var(--cuerpo);
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: .01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 600; }
h3 i { font-style: normal; color: var(--texto); margin-left: .25em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
[hidden] { display: none !important; }
.suave { color: var(--suave); }
.rojo { color: var(--rojo); }
.oro { color: var(--oro); }

/* Barra */
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 10px 16px; background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 8px; font: 700 1.3rem/1 var(--titulo); letter-spacing: .02em; min-width: 0; }
.marca #nombre-liga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-pica { color: var(--oro); font-size: 1.25rem; }
.pildora { display: inline-block; font-size: .85rem; font-weight: 600; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 99px; color: var(--texto); white-space: nowrap; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--fondo-2); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom);
}
.nav a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 2px 8px; font-size: .78rem; font-weight: 500; color: var(--suave); }
.nav a span { font-size: 1.15rem; line-height: 1.1; }
.nav a.activo { color: var(--oro); }

main { max-width: 1180px; margin: 0 auto; padding: 16px; }
.pagina { max-width: 760px; margin: 0 auto; }
.pagina.angosta { max-width: 640px; }
.pagina-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* Botones */
.bot {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: 10px;
  background: #2c261f; border: 1px solid #4a4036; font-weight: 600; text-align: center; transition: background .15s, transform .08s;
}
.bot:hover:not(:disabled) { background: #383027; }
.bot:active:not(:disabled) { transform: scale(.98); }
.bot.chico { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.bot.oro { background: var(--oro); border-color: var(--oro); color: #241802; }
.bot.oro:hover { background: #ecbd5e; }
.bot.verde { background: #17573f; border-color: #237355; }
.bot.verde:hover { background: #1c6a4d; }
.bot.peligro { background: #7f2a1e; border-color: #a33a2a; }
.bot.peligro:hover { background: #943325; }
.enlace { color: var(--oro); font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.enlace.peligro { color: var(--rojo); }
.x { width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--suave); flex: none; }
.x:hover { background: #2c261f; color: var(--texto); }
.x.chica { width: 30px; height: 30px; font-size: 1.15rem; }

/* Encabezado del torneo */
.torneo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.marcador { display: flex; flex-wrap: wrap; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.dato { flex: 1 1 0; min-width: 0; background: var(--fondo-2); padding: 8px 10px; }
.marcador.cinco .dato { flex-basis: 30%; }
.dato small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); white-space: nowrap; }
.dato b { font: 700 1.45rem/1.1 var(--titulo); }
.dato b i { font: 500 .95rem var(--titulo); color: var(--suave); }
.dato.oro b { color: var(--oro); }
.dato.rojo b { color: var(--rojo); }
.ev-reloj span { color: var(--suave); }
.pestanas { display: flex; gap: 22px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.pestanas button { padding: 8px 2px 9px; font: 600 1.15rem var(--titulo); color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas button[aria-selected="true"] { color: var(--texto); border-color: var(--oro); }

/* Mesa */
.mesa-grid { display: grid; gap: 16px; }
.mesa-col, .lado { min-width: 0; }
.mesa-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.mesa-tabs:empty { display: none; }
.mesa-tabs button { padding: 7px 12px; border-radius: 8px; background: var(--fondo-2); border: 1px solid var(--linea); font-weight: 500; white-space: nowrap; font-size: .92rem; }
.mesa-tabs button i { font-style: normal; color: var(--suave); margin-left: 3px; }
.mesa-tabs button.activa { background: var(--pano); border-color: #1d8460; }
.mesa-tabs button.activa i { color: var(--texto); }
.mover-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; background: #3b2e12; border: 1px solid var(--oro-osc); border-radius: 10px; font-size: .95rem; }
.mesa { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 640px; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.riel {
  position: absolute; inset: 9% 10%; border-radius: 50%; padding: 15px;
  background: radial-gradient(ellipse at 50% 18%, #6b4326, var(--madera) 45%, var(--madera-2));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 220, 170, .25);
}
.pano {
  width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(ellipse at 50% 42%, #187250, var(--pano) 48%, var(--pano-2));
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 0 0 2px #0a3324;
}
.pano::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(232, 214, 160, .2); pointer-events: none; }
.centro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12%; }
.centro small { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: #bfdccc; margin-top: 6px; }
.centro b { font: 700 clamp(1.9rem, 8vw, 2.7rem)/1 var(--titulo); color: #fff5d9; font-variant-numeric: tabular-nums; }
.centro b.late { animation: late .5s ease-out; }
.centro span { font-size: .84rem; color: #bfdccc; line-height: 1.2; margin-top: 2px; }
@keyframes late { 40% { transform: scale(1.1); color: var(--oro); } }
.pila { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 38px; }
.pila:empty { display: none; }
.pila span { display: flex; flex-direction: column-reverse; }
.pila i { display: block; width: 24px; height: 6px; margin-top: -2px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .45); animation: cae .3s ease-out; }
.pila .c0 { background: repeating-linear-gradient(90deg, #d9402f 0 6px, #f5ecdc 6px 9px); }
.pila .c1 { background: repeating-linear-gradient(90deg, #15151a 0 6px, #f5ecdc 6px 9px); }
.pila .c2 { background: repeating-linear-gradient(90deg, #2f6fc2 0 6px, #f5ecdc 6px 9px); }
.pila .c3 { background: repeating-linear-gradient(90deg, #e0ad4a 0 6px, #f5ecdc 6px 9px); }
@keyframes cae { from { transform: translateY(-14px); opacity: 0; } }

.silla {
  position: absolute; width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(12, 10, 8, .72); border: 2px dashed #6d6050; color: var(--suave); font: 600 1rem var(--titulo); transition: border-color .15s, background .15s, transform .15s;
}
.silla.ocupada { visibility: hidden; }
.silla:hover { border-color: var(--oro); color: var(--oro); }
.silla.objetivo, .moviendo .silla:not(.ocupada) { border-color: var(--oro); color: var(--oro); background: rgba(70, 52, 14, .85); }
.silla.objetivo { transform: translate(-50%, -50%) scale(1.18); visibility: visible; }

.ficha {
  position: absolute; width: 84px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: left .42s cubic-bezier(.3, .9, .3, 1), top .42s cubic-bezier(.3, .9, .3, 1), opacity .3s; z-index: 2;
}
.mesa.editable .ficha { touch-action: none; }
.mesa:not(.editable) .silla { pointer-events: none; }
.ficha.arrastrando { transition: none; z-index: 9; cursor: grabbing; }
.ficha.arrastrando .chip { box-shadow: 0 12px 22px rgba(0, 0, 0, .65); }
.ficha.parado .chip { filter: grayscale(.75) brightness(.72); }
.ficha.parado .nom { color: var(--suave); }
.ficha.elegida .chip { box-shadow: 0 0 0 3px var(--oro), 0 4px 10px rgba(0, 0, 0, .5); }
.ficha.entra { animation: entra .42s cubic-bezier(.3, 1.4, .5, 1); }
.ficha.sale { animation: sale .46s ease-in forwards; pointer-events: none; }
.ficha.recompro .chip { animation: pulso .7s ease-out; }
@keyframes entra { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
@keyframes sale { to { opacity: 0; transform: translate(-50%, -20%) scale(.55) rotate(14deg); } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(224, 173, 74, .9); } 100% { box-shadow: 0 0 0 20px rgba(224, 173, 74, 0); } }
.flota { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 .9rem var(--titulo); color: var(--oro); text-shadow: 0 1px 3px #000; animation: flota 1.1s ease-out forwards; pointer-events: none; }
@keyframes flota { from { opacity: 1; margin-top: 8px; } to { opacity: 0; margin-top: -22px; } }

/* La ficha de cada jugador: ribete de ficha de casino con sus iniciales */
.chip {
  --c: #b53a2b; position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ficha); height: var(--ficha); border-radius: 50%;
  background: repeating-conic-gradient(var(--c) 0 30deg, #f5ecdc 30deg 45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.chip > span {
  width: 74%; height: 74%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--c); box-shadow: 0 0 0 2px rgba(245, 236, 220, .85); color: #fff; font: 700 1.28rem/1 var(--titulo); letter-spacing: .02em;
}
.chip.c0 { --c: #b53a2b; }
.chip.c1 { --c: #1f5fae; }
.chip.c2 { --c: #17181d; }
.chip.c3 { --c: #6d3a9c; }
.chip.c4 { --c: #0f7a68; }
.chip.c5 { --c: #b4631a; }
.chip.c6 { --c: #a22d68; }
.chip.c7 { --c: #4b6b1d; }
.chip.mini { --ficha: 34px; margin-right: 10px; }
.chip.mini > span { font-size: .78rem; box-shadow: 0 0 0 1px rgba(245, 236, 220, .85); }
.nom {
  max-width: 88px; padding: 0 7px; border-radius: 6px; background: rgba(12, 10, 8, .82); font-size: .84rem; font-weight: 600; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marcas { display: flex; gap: 2px; margin-top: 1px; }
.marcas i, i.m-r, i.m-a, i.m-d, i.m-p { font: 700 .7rem/1.35 var(--titulo); font-style: normal; padding: 0 4px; border-radius: 4px; letter-spacing: .02em; }
.m-r { background: var(--oro); color: #241802; }
.m-a { background: #7cc4e8; color: #06222f; }
.m-d { background: var(--rojo); color: #2a0b05; }
.m-p { background: #5b5247; color: var(--texto); }

.banda-ganador { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-top: 12px; border-radius: 12px; background: linear-gradient(100deg, #3f2f10, #2a2112); border: 1px solid var(--oro-osc); }
.banda-ganador small { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--oro); }
.banda-ganador b { font: 700 1.6rem/1.1 var(--titulo); }
.nota { font-size: .88rem; color: var(--suave); margin-top: 10px; }
.herr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.herr:empty { display: none; }

/* Cajas de al lado */
.lado { display: flex; flex-direction: column; gap: 12px; }
.lado > div:empty { display: none; }
.caja { background: var(--caja); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.caja.acento { border-color: var(--oro-osc); }
.caja-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.caja h3 { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-jug { padding: 8px 13px; border-radius: 99px; background: #2c261f; border: 1px solid #4a4036; font-weight: 500; }
.chip-jug:hover { border-color: var(--oro); }
.premios, .lista-fuera, .bitacora, .movs, .cuentas, .tarjetas, .jugadores, .ranking { list-style: none; margin: 0; padding: 0; }
.premios li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--linea); }
.premios li:first-child { border: 0; }
.lug { font: 700 1.05rem var(--titulo); color: var(--oro); min-width: 30px; }
.lug em { font: 500 .78rem var(--cuerpo); color: var(--suave); }
.qn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.qn em { color: var(--suave); font-size: .92rem; }
.premios b { font: 700 1.2rem var(--titulo); }
.lista-fuera button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0; text-align: left; border-top: 1px solid var(--linea); }
.lista-fuera li:first-child button { border: 0; }
.pts { color: var(--suave); font-size: .9rem; white-space: nowrap; }
.bitacora li { display: flex; gap: 10px; padding: 5px 0; font-size: .92rem; border-top: 1px solid rgba(58, 50, 42, .7); }
.bitacora li:first-child { border: 0; }
.bitacora time { flex: none; width: 62px; color: var(--suave); font-size: .82rem; padding-top: 1px; }
.ev-salio span { color: #f0a99d; }
.ev-recompra span { color: var(--oro); }
.ev-addon span { color: #9ed3ee; }

/* Hoja */
.hoja {
  width: 100%; max-width: 560px; max-height: 88vh; margin: auto auto 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--linea); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: var(--fondo-2); color: var(--texto); overflow-y: auto;
}
.hoja[open] { animation: subir .24s cubic-bezier(.2, .9, .3, 1); }
.hoja::backdrop { background: rgba(0, 0, 0, .6); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.bloque { margin-top: 16px; }
.bloque h3 { margin-bottom: 8px; }
.pagos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pagos .bot { padding-left: 4px; padding-right: 4px; font-size: .94rem; }
.monto-en-linea { display: inline-flex; align-items: center; gap: 4px; }
.monto-en-linea input { width: 100px; }
.movs li { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linea); }
.movs small { color: var(--suave); margin-left: 8px; }
.movs .seg { grid-row: 2; grid-column: 1 / -1; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.seg button { padding: 7px 2px; font-size: .84rem; color: var(--suave); border-left: 1px solid var(--linea); }
.seg button:first-child { border: 0; }
.seg button.si { background: var(--pano); color: #fff; font-weight: 600; }
.seg button.si[data-metodo=""] { background: #7f2a1e; }
.totales { display: flex; gap: 18px; margin: 8px 0; font-size: .95rem; }
.fila-bot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.fila-bot .bot { flex: 1 1 130px; }

/* Formularios */
input:not([type=checkbox]), select, textarea { width: 100%; min-height: 44px; padding: 9px 11px; border-radius: 9px; background: #151210; border: 1px solid #4a4036; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--oro); }
textarea { resize: vertical; }
.forma { display: flex; flex-direction: column; gap: 12px; }
.forma label { display: block; font-size: .88rem; font-weight: 500; color: var(--suave); }
.forma label input, .forma label select { margin-top: 4px; color: var(--texto); font-weight: 400; font-size: 1rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dos-col { display: grid; gap: 16px; margin-top: 10px; }
.dos-col h3 { margin-bottom: 8px; }
.margen { margin-top: 10px; }
.en-linea { display: flex; gap: 8px; }
.en-linea input { flex: 1; min-width: 0; }
.en-linea .bot { flex: none; }
.alta { margin-bottom: 16px; }
.plegable { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.plegable summary { cursor: pointer; font-weight: 500; }
.marcables { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.marcables label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 9px; cursor: pointer; min-width: 0; }
.marcables input { accent-color: var(--oro); width: 18px; height: 18px; flex: none; }
.marcables label:has(input:checked) { border-color: var(--oro); background: #2b2312; }
.marcables span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-filas { display: flex; flex-direction: column; gap: 6px; }
.ed-fila { display: flex; align-items: center; gap: 8px; }
.ed-fila input { width: 84px; min-height: 38px; padding: 6px 9px; }
.suf { color: var(--suave); font-size: .9rem; width: 26px; }
.ed-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.suma { font-size: .9rem; color: var(--suave); }
.suma.mal { color: var(--rojo); font-weight: 600; }

/* Cuentas */
.totales-grandes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.totales-grandes > div { padding: 10px 12px; background: var(--caja); border: 1px solid var(--linea); border-radius: 10px; }
.totales-grandes small { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.totales-grandes b { font: 700 1.4rem var(--titulo); }
.cuentas li { border-top: 1px solid var(--linea); padding: 3px 0; }
.cuentas li:first-child { border: 0; }
.fila-cuenta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; width: 100%; padding: 8px 0; text-align: left; }
.fila-cuenta .lug { flex: none; min-width: 34px; }
.fila-cuenta .qn { flex: 1 1 calc(100% - 50px); font-weight: 600; font-size: 1.05rem; }
.fila-cuenta .num { flex: 1 1 20%; min-width: 0; }
.num { font: 600 1.05rem var(--titulo); font-variant-numeric: tabular-nums; }
.num small { display: block; font: 400 .72rem var(--cuerpo); color: var(--suave); }
.entregado { display: flex; gap: 8px; align-items: center; padding: 2px 0 8px; font-size: .9rem; color: var(--suave); cursor: pointer; }
.entregado input { accent-color: var(--verde); width: 18px; height: 18px; flex: none; }
.podio { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 8px; margin-bottom: 16px; }
.escalon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 12px 6px; background: var(--caja); border: 1px solid var(--linea); border-radius: 12px; min-width: 0; --ficha: 50px; }
.escalon b { font: 700 1.15rem var(--titulo); margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escalon small { font-size: .78rem; color: var(--suave); }
.escalon strong { font: 700 1.4rem var(--titulo); color: var(--oro); }
.escalon.l1 { order: 2; border-color: var(--oro-osc); padding-top: 22px; padding-bottom: 18px; background: linear-gradient(180deg, #3a2c12, var(--caja)); --ficha: 62px; }
.escalon.l2 { order: 1; }
.escalon.l3 { order: 3; }

/* Torneos */
.tarjetas { display: flex; flex-direction: column; gap: 8px; }
.tarjeta { display: block; padding: 12px 14px; background: var(--caja); border: 1px solid var(--linea); border-radius: 12px; transition: border-color .15s; }
.tarjeta:hover { border-color: #6d6050; }
.t-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.t-cab b { font: 700 1.3rem var(--titulo); }
.t-pills { display: flex; gap: 5px; flex: none; }
.estado.final { background: var(--oro); color: #241802; }
.al-pozo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 7px; border-top: 1px dashed #6d6050; color: var(--suave); font-size: .92rem; }
.al-pozo b { font: 700 1.1rem var(--titulo); color: var(--oro); }
.pozo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--oro-osc); background: linear-gradient(105deg, #3f2f10, #241d12); }
.pozo small { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--oro); }
.pozo b { display: block; font: 700 2.4rem/1.05 var(--titulo); color: #fff5d9; }
.pozo p { color: var(--suave); font-size: .9rem; }
.pozo-hoja { margin-bottom: 12px; }
.pozo-hoja b { color: var(--oro); }
.clasificados { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; }
.clasificados li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--linea); }
.clasificados li:first-child { border-top: 0; }
.clasificados li.no-entra { opacity: .35; text-decoration: line-through; }
.estado { font-size: .76rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; background: #383027; color: var(--suave); }
.estado.abierto { background: var(--pano); color: #d4f2e3; }
.t-datos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .93rem; color: var(--suave); }
.t-datos b { color: var(--texto); }

/* Tabla general */
.selector { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: .9rem; }
.selector select { width: auto; color: var(--texto); }
.ranking li { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px 10px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--linea); }
.ranking li.enc { display: none; }
.pos { font: 700 1.3rem var(--titulo); color: var(--suave); text-align: center; }
.top1 .pos { color: var(--oro); }
.top2 .pos { color: #cfd2d6; }
.top3 .pos { color: #cf9064; }
.ranking .qn { font-weight: 600; }
.ranking .pts { color: var(--texto); }
.ranking .pts b { font: 700 1.5rem var(--titulo); color: var(--oro); }
.dato-t { font-size: .86rem; grid-column: 2 / -1; color: var(--texto); }
.dato-t::before { content: attr(data-etq) ': '; color: var(--suave); }
.verde-t { color: #6fd3a3; }
.dato-t.rojo { color: var(--rojo); }

/* Jugadores */
.jugadores li { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.jugadores .chip.mini { margin-right: 0; }
.jugadores .qn { font-weight: 500; }

.vacio { padding: 32px 16px; text-align: center; color: var(--suave); }
.vacio.grande { padding-top: 64px; }
.vacio.grande h1 { color: var(--texto); margin-bottom: 8px; }
.vacio.grande .bot { margin-top: 18px; }
.vacio-pinta { font-size: 3.4rem; line-height: 1; color: var(--oro-osc); margin-bottom: 8px; }

/* Aviso */
.aviso {
  position: fixed; z-index: 60; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 11px; background: #efe5d2; color: #1c1711; font-weight: 500; font-size: .95rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso button { font-weight: 700; color: #8a2a18; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Pantallas anchas */
@media (min-width: 700px) {
  :root { --ficha: 64px; }
  body { padding-bottom: 24px; }
  .barra { padding: 10px 24px; }
  .nav { position: static; display: flex; gap: 4px; background: none; border: 0; padding: 0; margin-right: auto; margin-left: 18px; }
  .nav a { flex-direction: row; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: .95rem; }
  .nav a span { font-size: 1rem; }
  .nav a.activo { background: #2c261f; }
  main { padding: 22px 24px; }
  .mesa { aspect-ratio: 16 / 10; }
  .riel { inset: 10% 8%; padding: 18px; }
  .marcador { max-width: 760px; }
  .marcador.cinco .dato { flex-basis: 0; }
  .silla { width: 56px; height: 56px; }
  .ficha { width: 96px; }
  .nom { max-width: 100px; }
  .dos-col { grid-template-columns: 1fr 1fr; }
  .hoja { margin: auto; border-radius: 18px; border-bottom: 1px solid var(--linea); padding-bottom: 18px; }
  .fila-cuenta { display: grid; grid-template-columns: 70px minmax(0, 1.5fr) repeat(4, minmax(70px, .7fr)); }
  .cuentas:not(.con-dinero) .fila-cuenta { grid-template-columns: 70px minmax(0, 1.5fr) repeat(2, minmax(70px, .7fr)); }
  .entregado { padding-left: 80px; }
  .ranking li.enc { display: grid; padding: 4px; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); border: 0; }
  .ranking li { grid-template-columns: 36px minmax(0, 1fr) 90px 70px 110px; }
  .ranking.con-dinero li { grid-template-columns: 36px minmax(0, 1fr) 90px 70px 110px 90px; }
  .dato-t { grid-column: auto; font-size: .95rem; }
  .dato-t::before { content: none; }
  .aviso { bottom: 24px; }
}
@media (min-width: 1020px) {
  .mesa-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}