/* Dominó — Marcador y récords.
   Tokens del design system "Industry" (blueprint) + superficies de cristal. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;

  --color-accent-100: #eef6ff;
  --color-accent-300: #b5d9fd;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --alto-cabecera: 88px;
  --glass: linear-gradient(158deg, rgba(255,255,255,.72), rgba(255,255,255,.38));
  --glass-suave: linear-gradient(158deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  --glass-on: linear-gradient(158deg, rgba(89,128,166,.28), rgba(89,128,166,.12));
  --glass-oscuro: linear-gradient(158deg, rgba(41,69,93,.92), rgba(29,45,61,.88));
  --cta: linear-gradient(180deg, #7395b7, #4f7599);
  --sombra-glass: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px rgba(29,45,61,.13);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: #e4e4e6;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 21px; /* los números y textos grandes son una decisión para personas mayores */
  line-height: 1.45;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; margin: 0; }
a { color: inherit; text-decoration: none; }

/* ── Marco de teléfono: a pantalla completa en móvil, centrado en escritorio ── */
.pantalla {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 500px) {
  body { padding: 24px 0; }
  .pantalla {
    height: calc(100dvh - 48px);
    min-height: 640px;
    box-shadow: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
  }
}

/* Fondo de acero con manchas de luz */
.fondo { position: absolute; inset: 0; z-index: 0; background: linear-gradient(178deg, #f6f8fa 0%, #e7edf3 46%, #d9e3ec 78%, #e9eef2 100%); }
.fondo i { position: absolute; border-radius: 50%; display: block; }
.fondo .b1 { top: -90px; left: -70px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(89,128,166,.42), transparent 68%); filter: blur(24px); }
.fondo .b2 { bottom: 60px; right: -90px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(65,97,128,.34), transparent 70%); filter: blur(26px); }
.fondo .b3 { top: 340px; left: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(148,188,227,.5), transparent 70%); filter: blur(22px); }

.contenido {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: calc(var(--alto-cabecera) + 16px) 20px 116px;
  -webkit-overflow-scrolling: touch;
}

/* ── Cabecera y barra inferior de cristal ── */
.cabecera {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: var(--alto-cabecera);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 0 rgba(29,45,61,.08), 0 8px 24px rgba(29,45,61,.06);
  padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.cabecera .logo { width: 44px; height: 44px; flex: none; display: block; }
.cabecera .marca { flex: 1; min-width: 0; }
.cabecera .app { font: 600 12px var(--font-heading); letter-spacing: .22em; color: var(--color-accent-700); }
.cabecera .grupo { font: 600 24px/1.05 var(--font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera .avatar {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  display: flex; padding-bottom: env(safe-area-inset-bottom, 10px);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.8));
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 -8px 24px rgba(29,45,61,.08);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 11px 0 9px; min-height: 60px;
  color: var(--color-neutral-700); border-top: 3px solid transparent; margin-top: -1px;
  font: 600 13px var(--font-heading); letter-spacing: .1em;
}
.tabbar a.activa { color: var(--color-accent-800); border-top-color: var(--color-accent); }
.tabbar svg { width: 27px; height: 27px; }

/* ── Marcos blueprint: rectos, sin radios ── */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-color: rgba(255,255,255,.75);
  box-shadow: var(--sombra-glass);
}
.glass-suave { background: var(--glass-suave); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.88); }
.glass-acento { background: linear-gradient(158deg, rgba(89,128,166,.20), rgba(89,128,166,.08)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(89,128,166,.45); }
.glass-oscuro { background: var(--glass-oscuro); border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px rgba(29,45,61,.28); color: #f6f8fa; }
.glass-on { background: var(--glass-on) !important; border-color: var(--color-accent) !important; }

/* ── Botones: zonas táctiles de 60 px o más ── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 60px; padding: 8px 16px;
  font: 600 17px var(--font-heading); letter-spacing: .05em;
  color: var(--color-text); text-align: center;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 0; cursor: pointer;
}
.btn svg { flex: none; }
.btn-primary {
  min-height: 78px; font-size: 21px; letter-spacing: .06em; color: #f6f8fa;
  background: var(--cta); border-color: #41617f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(65,97,128,.34);
}
.btn-primary:disabled { background: var(--color-neutral-400); border-color: var(--color-neutral-500); opacity: .5; }
.btn-ghost { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--color-accent-700); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Piezas de texto ── */
.kicker { font: 600 15px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 2px; }
.kicker-gris { color: var(--color-neutral-700); }
.sub { font-size: 17px; color: var(--color-neutral-700); }
.tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; padding: 4px 9px;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.pos { color: var(--color-accent-700); font-weight: 600; }
.neg { color: var(--color-neutral-700); font-weight: 600; }
.cero { color: var(--color-neutral-600); font-weight: 600; }

/* Filas de tabla */
.fila { display: flex; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid rgba(29,31,32,.08); color: inherit; }
.fila .num { font: 600 16px var(--font-heading); color: var(--color-neutral-600); width: 22px; flex: none; }
.fila .quien { flex: 1; min-width: 0; font-weight: 500; }
.fila .pts { font: 600 25px/1 var(--font-heading); min-width: 52px; text-align: right; }

.marcador { font: 600 44px/.85 var(--font-heading); }
.marcador-xl { font: 600 64px/.82 var(--font-heading); }

.input {
  width: 100%; min-height: 64px; padding: 8px 14px; font: inherit;
  color: var(--color-text); caret-color: var(--color-accent);
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: 0;
}
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* ── Hojas y diálogos ── */
@keyframes upsheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes popin { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.velo {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(20,24,28,.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: fadein .16s ease-out;
}
.velo.centro { align-items: center; justify-content: center; padding: 20px; }
.velo[hidden] { display: none; }
.hoja {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,250,.96));
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 -14px 40px rgba(20,24,28,.22);
  padding: 20px; max-height: 96%; overflow-y: auto;
  animation: upsheet .22s cubic-bezier(.2,.8,.3,1);
}
.dialogo {
  width: 100%; padding: 24px 20px;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,244,248,.95));
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 60px rgba(20,24,28,.28);
  animation: popin .2s cubic-bezier(.2,.8,.3,1);
}
.cerrar { width: 50px; min-height: 50px; padding: 0; flex: none; }

/* Pad numérico */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.teclado .btn { min-height: 64px; font-size: 25px; background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(29,45,61,.08); }

/* Interruptor (modo público) */
.switch { width: 60px; height: 32px; flex: none; border: 2px solid var(--color-accent); display: flex; align-items: center; padding: 3px; background: rgba(255,255,255,.5); }
.switch .bola { width: 22px; height: 22px; background: var(--color-neutral-400); display: block; }
.switch.on { background: var(--color-accent); justify-content: flex-end; }
.switch.on .bola { background: #f6f8fa; }

/* Separador de año en el historial: flota bajo la cabecera al desplazar */
.sep-anio {
  /* El offset sticky se mide desde el borde interior del padding de .contenido
     (16px bajo la cabecera): -16px lo deja pegado justo debajo de ella. */
  position: sticky; top: -16px; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 14px -20px 12px; padding: 9px 20px;
  font: 600 22px/1 var(--font-heading); letter-spacing: .08em;
  background: linear-gradient(180deg, rgba(246,248,250,.92), rgba(233,238,242,.82));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.8);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 6px 16px rgba(29,45,61,.07);
}

/* Selector de periodo de Estadísticas */
.selector-periodo {
  display: flex; border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.selector-periodo a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 6px 4px;
  font: 600 14px var(--font-heading); letter-spacing: .08em;
  color: var(--color-neutral-700); text-align: center;
}
.selector-periodo a + a { border-left: 1px solid rgba(29,31,32,.12); }
.selector-periodo a.activo {
  background: var(--cta); color: #f6f8fa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

/* ── Marcador en vivo: el número viejo estalla y entra el nuevo ──
   Todo queda recortado dentro del campo del número (overflow hidden). */
.num-vivo { position: relative; display: inline-block; min-width: 1.4em; text-align: center; overflow: hidden; }
.num-vivo .cifra { display: inline-block; }
.num-vivo .cifra.entra { animation: entra-cifra .34s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes entra-cifra {
  0% { transform: scale(.35); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.num-vivo .estalla {
  position: absolute; inset: 0; pointer-events: none;
  animation: estalla-cifra .3s ease-out forwards;
}
@keyframes estalla-cifra {
  0% { transform: scale(1); opacity: .9; filter: blur(0); }
  100% { transform: scale(1.6); opacity: 0; filter: blur(2px); }
}
.num-vivo .esquirla {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  background: var(--color-accent-700); pointer-events: none;
  animation: vuela-esquirla .45s ease-out forwards;
}
@keyframes vuela-esquirla {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: .9; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(120deg) scale(.25); opacity: 0; }
}

/* Utilidades */
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 14px; } .mb-5 { margin-bottom: 20px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 28px; }
.seccion { font: 600 15px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 9px; }
form.inline { display: contents; }
button.btn { font-family: var(--font-heading); }
button { appearance: none; }