.jg {
  --ink: #101A33; --ink2: #566074; --paper: #F4F6F9; --surface: #FFFFFF; --line: #E2E6EC;
  --focus: #2350C8; --ok: #0F7A62; --ok-t: #E3F3EE; --warn: #8A5A06; --warn-t: #FCF3E1; --err: #B42318;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--paper); min-height: 100vh; line-height: 1.55; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
.jg *, .jg *::before, .jg *::after { box-sizing: border-box; }
.jg h1, .jg h2, .jg h3, .jg .display { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.jg h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
.jg h2 { font-size: clamp(1.55rem, 5.5vw, 1.95rem); }
.jg h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
.jg p { margin: 0; }
.jg a { color: inherit; text-underline-offset: 3px; }
.jg :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: 600px; margin: 0 auto; padding: 24px 18px 112px; }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 24px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.muted { color: var(--ink2); }
.small { font-size: .9rem; }
.tiny { font-size: .78rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 10px; font: inherit; font-weight: 550; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; text-decoration: none; transition: background-color .15s; }
.btn:hover { background: #1E2B4D; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sec { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.sec:hover { border-color: var(--ink2); }
.btn.block { width: 100%; }
.btn.mini { min-height: 38px; padding: 0 12px; font-size: .88rem; }

.opt { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--ink); font: inherit; transition: border-color .12s; }
.opt:hover { border-color: #C5CCD6; }
.opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt:disabled { opacity: .5; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; text-align: left; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:disabled { opacity: .55; cursor: not-allowed; }
.field { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; resize: vertical; }
.field:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.label { display: block; font-weight: 550; margin-bottom: 6px; }
.error { color: var(--err); font-size: .88rem; margin-top: 6px; }

.hud { position: sticky; top: 0; z-index: 20; background: rgba(244,246,249,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hud-in { max-width: 600px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 14px; }
.dias { display: flex; gap: 3px; flex: 1; min-width: 0; }
.dias span { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.dias span.on { background: var(--ink2); }
.dias span.hoy { background: var(--ink); }
.stat { font-size: .75rem; line-height: 1.15; text-align: right; white-space: nowrap; }
.stat b { display: block; font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tile .v { font-weight: 600; font-size: 1.4rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.bocadillo { border-radius: 14px; padding: 10px 14px; max-width: 85%; font-size: .95rem; }
.bocadillo.yo { background: var(--ink); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bocadillo.ellos { background: var(--paper); border-bottom-left-radius: 4px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.avatar { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; background: var(--paper); border: 1px solid var(--line); flex-shrink: 0; }

.barra { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--ink); transition: width 1s linear; }
.barra.alerta i { background: var(--err); }
.aviso { background: var(--warn-t); color: var(--warn); border-radius: 12px; padding: 12px 14px; }

.carta { background: #fff; border: 1px solid; border-radius: 16px; overflow: hidden; width: 100%; }
.carta-top { padding: 18px 18px 18px; color: #fff; display: flex; gap: 14px; align-items: flex-end; }
.carta-num { font-weight: 600; font-size: 3rem; line-height: .8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.carta-nombre { font-weight: 600; font-size: 1.35rem; line-height: 1.05; letter-spacing: -0.025em; }
.carta-body { padding: 16px 18px 18px; }
.carta-body > * + * { margin-top: 12px; }
.sello { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 550; }

.flip { perspective: 1400px; }
.flip-in { display: grid; transition: transform .8s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.flip-in.girada { transform: rotateY(180deg); }
.cara { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara.frente { transform: rotateY(180deg); }
.dorso { height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.dorso-rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.dorso-rejilla span { aspect-ratio: 1; border-radius: 5px; border: 1px solid var(--line); }
.dorso-rejilla span.bloque { border-color: var(--c); }
.dorso-rejilla span.on { background: var(--c); border-color: var(--c); }
.dorso-pie { font-weight: 600; color: var(--c); letter-spacing: -0.01em; }

.rejilla-portada { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 320px; }
.rejilla-portada span { aspect-ratio: 1; border-radius: 5px; border: 1.5px solid var(--c); }
.rejilla-portada span.on { background: var(--c); }

.album-slot { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; min-height: 78px; text-align: left; background: transparent; font: inherit; color: var(--ink2); width: 100%; }
.album-slot.ok { border: 1px solid var(--line); border-top: 3px solid var(--c); background: #fff; color: var(--ink); cursor: pointer; }
.overlay { position: fixed; inset: 0; z-index: 50; background: var(--paper); overflow-y: auto; }
.cargando { display: flex; align-items: center; gap: 10px; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: lat 1s infinite ease-in-out; }
.punto:nth-child(2) { animation-delay: .15s; } .punto:nth-child(3) { animation-delay: .3s; }
@keyframes lat { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.jg input[type=range] { width: 100%; accent-color: var(--ink); height: 32px; }
.enlace-web { font-size: .9rem; color: var(--ink2); }

@media (prefers-reduced-motion: reduce) { .flip-in, .barra i { transition: none; } .punto { animation: none; } }