/* =====================================================================
   Diana — estilos. Tokens en :root, tema oscuro automático o forzado.
   ===================================================================== */
:root {
  /* Identidad «índigo y naranja»: índigo profundo (#251D3A, #2A2550) como tinta y fondo de los bloques,
     naranja (#E04D01, #FF7700) para lo importante: el botón principal, el «+» y lo elegido.
     Los colores de la diana (--gold, --red, --blue…) solo se usan donde son funcionales: dianas, teclado y gráficas. */
  /* Paleta base (--pal-*). El tema «Mi licencia» (js/core/palette.js) solo cambia estos valores
     y todo lo demás se deriva de ellos, en claro y en oscuro. */
  --pal-brand: #e04d01;  /* naranja quemado */
  --pal-vivid: #ff7700;  /* naranja vivo (luz del relieve) */
  --pal-hi2: #ff8a20;
  --pal-lo: #b83d00;     /* sombra del naranja */
  --pal-link: #c24300;   /* enlaces sobre fondo claro */
  --pal-dlink: #ff9440;  /* enlaces sobre fondo oscuro */
  --pal-ink: #251d3a;    /* índigo profundo */
  --pal-ink2: #2a2550;   /* índigo */
  --pal-ink3: #352b57;   /* índigo claro (degradados) */
  --pal-deep: #1a1529;   /* fondo oscuro */
  --pal-deeper: #120e1f;
  --pal-bg: #f1eff7; --pal-s2: #e8e6f0; --pal-line: #dedbe8; --pal-soft: #fde8dc;
  --pal-dline: #3a3358; --pal-dsoft: #3d2420;
  --brand: var(--pal-brand);
  --brand-hi: var(--pal-vivid);
  --brand-lo: var(--pal-lo);
  --ivory: #f5f3fa;      /* blanco lavanda: texto sobre índigo y naranja */
  --charcoal: var(--pal-ink);
  --ink-2: var(--pal-ink2);
  --navy: var(--charcoal);    /* nombres antiguos, ya en la paleta nueva */
  --navy-2: var(--ink-2);
  --yellow: var(--brand);
  --yellow-ink: var(--ivory);
  --bg: var(--pal-bg);
  --surface: #fcfbff;
  --surface-hi: #ffffff;
  --surface-2: var(--pal-s2);
  --text: var(--pal-ink);
  --muted: #6b6680;
  --line: var(--pal-line);
  --accent: var(--pal-brand);
  --accent-ink: #ffffff;
  --accent-soft: var(--pal-soft);
  --link: var(--pal-link);
  --danger: #b3261e;
  --trend: #a8741a;
  --good: #3e7d4f;
  --tint-yellow: #fcebd9; --tint-blue: #e6e5f2; --tint-red: var(--pal-soft); --tint-green: #e1efe6; --tint-purple: #ece7f5;
  --bar-bg: color-mix(in srgb, var(--pal-bg) 88%, transparent);
  --tab-bg: var(--pal-ink);
  /* Relieve: lo tocable flota (brillo arriba, sombra cercana y otra lejana); al pulsar se hunde */
  --shadow: 0 1px 1px rgba(37, 29, 58, .05), 0 2px 8px -2px rgba(37, 29, 58, .08);
  --raise: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(37, 29, 58, .06), 0 1px 2px rgba(37, 29, 58, .1), 0 8px 18px -8px rgba(37, 29, 58, .25);
  --raise-hover: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(37, 29, 58, .06), 0 2px 3px rgba(37, 29, 58, .1), 0 12px 24px -10px rgba(37, 29, 58, .3);
  --press: inset 0 1px 3px rgba(37, 29, 58, .16), 0 1px 0 rgba(255, 255, 255, .6);
  --well: inset 0 1px 3px rgba(37, 29, 58, .12), inset 0 0 0 1px rgba(37, 29, 58, .04);
  --raise-dark: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25), 0 8px 18px -8px rgba(0, 0, 0, .45);
  --face: linear-gradient(180deg, var(--surface-hi), var(--surface));
  --gold: #f6cd2b; --red: #e33b3b; --blue: #2a8bd8; --black: #222; --white: #f7f7f2;
  --font-round: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --r-sm: 12px; --r: 20px; --r-lg: 26px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --topbar-h: calc(var(--safe-t) + 52px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--pal-deep); --surface: var(--pal-ink); --surface-hi: var(--pal-ink2); --surface-2: var(--pal-ink2); --text: #f5f3fa; --muted: #a29db8; --line: var(--pal-dline);
    --brand: var(--pal-vivid); --brand-hi: var(--pal-hi2); --brand-lo: var(--pal-link); --accent: var(--pal-vivid); --accent-soft: var(--pal-dsoft); --link: var(--pal-dlink);
    --danger: #e0766b; --good: #7fb48a; --trend: #d4a24a;
    --tint-yellow: #3a2a1c; --tint-blue: #2a2645; --tint-red: var(--pal-dsoft); --tint-green: #1f3029; --tint-purple: #2e2648;
    --bar-bg: color-mix(in srgb, var(--pal-deep) 88%, transparent); --tab-bg: var(--pal-deeper);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --raise: var(--raise-dark); --raise-hover: var(--raise-dark);
    --press: inset 0 2px 4px rgba(0, 0, 0, .45);
    --well: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--pal-deep); --surface: var(--pal-ink); --surface-hi: var(--pal-ink2); --surface-2: var(--pal-ink2); --text: #f5f3fa; --muted: #a29db8; --line: var(--pal-dline);
  --brand: var(--pal-vivid); --brand-hi: var(--pal-hi2); --brand-lo: var(--pal-link); --accent: var(--pal-vivid); --accent-soft: var(--pal-dsoft); --link: var(--pal-dlink);
  --danger: #e0766b; --good: #7fb48a; --trend: #d4a24a;
  --tint-yellow: #3a2a1c; --tint-blue: #2a2645; --tint-red: var(--pal-dsoft); --tint-green: #1f3029; --tint-purple: #2e2648;
  --bar-bg: color-mix(in srgb, var(--pal-deep) 88%, transparent); --tab-bg: var(--pal-deeper);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --raise: var(--raise-dark); --raise-hover: var(--raise-dark);
  --press: inset 0 2px 4px rgba(0, 0, 0, .45);
  --well: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Iconos ---------- */
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.btn .i { width: 19px; height: 19px; }

/* ---------- Cabecera ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
  height: var(--topbar-h); padding: var(--safe-t) var(--s2) 0;
  background: var(--bar-bg); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar h1 { margin: 0; font-size: 17px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
.topbar.large:not(.scrolled) h1 { opacity: 0; }
#topAction { display: flex; justify-content: flex-end; }
.icon-btn { background: none; border: 0; color: var(--accent); padding: 8px; display: grid; place-items: center; justify-self: start; }
.icon-btn .i { width: 26px; height: 26px; }
#topAction .icon-btn { justify-self: end; }
.icon-btn[hidden] { display: grid !important; visibility: hidden; }
.top-link { background: none; border: 0; color: var(--accent); font-weight: 600; padding: 8px 4px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.top-link .i { width: 18px; height: 18px; }
.large-title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 4px var(--s3); }

main { padding: var(--s2) var(--s4) calc(100px + var(--safe-b)); max-width: 640px; margin: 0 auto; }

/* ---------- Barra de pestañas ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + var(--safe-b));
  background: var(--tab-bg); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
}
.tabbar button {
  background: none; border: 0; color: var(--muted); font-size: 10.5px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0;
}
.tabbar .ti .i { width: 25px; height: 25px; }
.tabbar button.active { color: var(--accent); }
.tabbar .tab-main .ti {
  width: 46px; height: 46px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgba(217, 65, 47, .38);
}
.tabbar .tab-main .ti .i { stroke-width: 2.4; }

/* ---------- Transiciones ---------- */
@keyframes in-fwd { from { transform: translateX(28px); opacity: 0; } }
@keyframes in-back { from { transform: translateX(-28px); opacity: 0; } }
@keyframes in-fade { from { opacity: 0; } }
#view.anim-fwd { animation: in-fwd .24s cubic-bezier(.2, .8, .2, 1); }
#view.anim-back { animation: in-back .24s cubic-bezier(.2, .8, .2, 1); }
#view.anim-fade { animation: in-fade .18s ease-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Texto y utilidades ---------- */
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: var(--s5) 4px var(--s2); font-weight: 600; }
h2.day-title { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.accent { color: var(--accent); }
.cap { text-transform: capitalize; }
.hint { font-size: 13px; color: var(--muted); margin: var(--s2) 4px; }
.lead { margin-top: 0; }
.prewrap { white-space: pre-wrap; }
.gap { height: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.steps { padding-left: 20px; margin: 0; line-height: 1.9; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s4); margin-bottom: var(--s3); }
.card.tight { padding: 0; overflow: hidden; }
.card.notice { background: var(--accent-soft); box-shadow: none; }
.hero { background: linear-gradient(140deg, #12202f, #1f3a52); color: #fff; }
.hero-date { color: #a9bccd; font-size: 13px; }
.hero-date::first-letter { text-transform: uppercase; }
.hero-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 var(--s3); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.stat { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 6px; text-align: center; }
.stat b { display: block; font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--muted); }
.hero .stat { background: rgba(255, 255, 255, .08); }
.hero .stat span { color: #a9bccd; }

/* ---------- Listas ---------- */
.list-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 12px var(--s4);
  background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left;
}
.list-item:last-child { border-bottom: 0; }
.list-item:active:not(.static) { background: var(--surface-2); }
.list-item.static { cursor: default; padding: 11px var(--s4); }
.list-item.add { color: var(--accent); font-weight: 600; }
.list-item .chev { width: 18px; height: 18px; color: var(--muted); opacity: .7; }
.ic-bubble { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.ic-bubble.good { color: var(--good); }
.right-num { text-align: right; line-height: 1.15; }
.right-num b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.right-num span { font-size: 12px; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); }
.badge.comp { background: var(--accent-soft); color: var(--accent); }
.progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: var(--good); border-radius: 99px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 15px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(217, 65, 47, .25); }
.btn.block { width: 100%; }
.btn.lg { padding: 15px 16px; font-size: 16px; }
.btn.sm { padding: 7px 12px; font-size: 14px; border-radius: 10px; }
.btn.danger { color: var(--accent); }
.btn.danger-solid { background: var(--accent); color: #fff; }
.card .btn:not(.primary), .sheet .btn:not(.primary):not(.danger-solid) { background: var(--surface-2); box-shadow: none; }
.btn-row { display: flex; gap: var(--s2); margin-top: var(--s3); }
.btn-row > * { flex: 1; }
.icon-round { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); display: grid; place-items: center; }
.icon-round .i { width: 18px; height: 18px; }

/* ---------- Formularios ---------- */
.field { display: block; margin-bottom: var(--s3); }
.field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 2px 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--bg); outline: none; font-size: 16px; /* 16px evita el zoom automático del iPhone */
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e9cab' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field .hint { margin: 0; padding: 11px 2px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s3); }
.check { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.inline-field input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 16px; text-align: center; }
textarea.plain { width: 100%; min-height: 90px; border: 0; background: transparent; outline: none; resize: vertical; font-size: 16px; }

.seg { display: flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 2px; margin-bottom: var(--s3); }
.seg button { flex: 1; border: 0; background: none; padding: 8px 2px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tog {
  display: inline-flex; align-items: center; border: 0; border-radius: 99px; padding: 7px 13px; font-size: 14px;
  background: var(--surface-2); color: var(--text); user-select: none; -webkit-user-select: none;
}
.tog input { display: none; }
.tog.on, .tog:has(input:checked) { background: var(--accent); color: var(--accent-ink); }

.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-card {
  border: 2px solid transparent; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 3px;
}
.type-card b { margin-top: 6px; }
.type-card small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.type-card.on { border-color: var(--accent); }

/* ---------- Puntuación ---------- */
.scoreboard {
  position: sticky; top: var(--topbar-h); z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin: 0 calc(-1 * var(--s4)) var(--s3); padding: 8px var(--s4);
  background: var(--bar-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.scoreboard div { text-align: center; }
.scoreboard span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.scoreboard b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.scoreboard small { font-size: 13px; color: var(--muted); font-weight: 600; }

.target-card { position: relative; margin: 0 calc(-1 * var(--s4)) var(--s3); padding: 6px 4px; background: var(--surface); }
.target-wrap { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.target-wrap.static { touch-action: auto; max-width: 420px; margin: 0 auto; }
.target-wrap svg { display: block; width: 100%; height: auto; }
/* Triple de 40 cm en vertical: centrada y limitada en alto para que no ocupe toda la pantalla */
.target-wrap svg.triple { width: auto; height: 62vh; max-width: 100%; margin: 0 auto; }
.target-wrap.static svg.triple { height: 46vh; }
.fab {
  position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--text); display: grid; place-items: center; box-shadow: var(--shadow);
}
.loupe {
  position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); overflow: hidden; pointer-events: none; background: #fff; z-index: 2;
}
.loupe svg { position: absolute; inset: 0; }
.loupe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 2px solid #39ff14; box-shadow: 0 0 0 1px #000; }
.loupe-val { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 15px; color: #fff; text-shadow: 0 1px 3px #000; }
.loupe.cancel { border-color: var(--accent); opacity: .85; }

.end-bar { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0; min-height: 44px; }
.arrow-chip {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 800; font-size: 16px; border: 1px solid rgba(0, 0, 0, .15); padding: 0; flex: none;
}
.arrow-chip sup { position: absolute; top: -4px; right: -4px; font-size: 10px; background: var(--surface); color: var(--muted); border-radius: 99px; padding: 0 4px; line-height: 15px; box-shadow: var(--shadow); }
.arrow-chip.slot { background: transparent; border: 2px dashed var(--line); color: var(--muted); font-size: 12px; font-weight: 600; }
.arrow-chip.inline { width: 34px; height: 34px; font-size: 14px; vertical-align: middle; }
.v-gold { background: var(--gold); color: #222; }
.v-red { background: var(--red); color: #fff; }
.v-blue { background: var(--blue); color: #fff; }
.v-black { background: var(--black); color: #fff; }
.v-white { background: var(--white); color: #222; }
.v-miss { background: #8a949e; color: #fff; }

.keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.keypad button { border: 0; border-radius: 12px; padding: 15px 0; font-weight: 800; font-size: 19px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.keypad button:active { transform: scale(.94); }
.keypad .v-white { box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 rgba(0, 0, 0, .1); }

.end-done { background: var(--accent-soft); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.end-done span { font-size: 13px; color: var(--muted); }
.end-done .btn { margin-top: 8px; }

.score-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.score-table th, .score-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.score-table th { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.score-table td.l { color: var(--muted); width: 38px; }
.score-table td.l small { display: block; font-size: 10px; }
.score-table td.arrows { text-align: left; }
.score-table tr.sel { background: var(--accent-soft); }
.score-table tr.series-row td { text-align: left; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); }
.score-table tr.sub td { font-size: 12.5px; color: var(--muted); text-align: left; background: var(--surface-2); }
.score-table tr.sub td b { color: var(--text); }
.mini { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-size: 12px; font-weight: 800; margin: 1px; border: 1px solid rgba(0, 0, 0, .12); }

.counter { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 10px 0 14px; }
.big-num { font-size: 56px; font-weight: 800; letter-spacing: -.03em; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.round-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--surface-2); font-size: 28px; font-weight: 600; }
.quick-add { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }

/* ---------- Calendario ---------- */
.cal-nav { margin-bottom: var(--s3); }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
  aspect-ratio: 1; border-radius: 12px; border: 0; background: none; padding: 0; font-size: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-variant-numeric: tabular-nums;
}
.cal-day.out { opacity: .3; }
.cal-day.today { color: var(--accent); font-weight: 800; }
.cal-day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.cal-dots { display: flex; gap: 2px; height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-day.sel .cal-dots i { box-shadow: 0 0 0 1px #fff; }

/* ---------- Gráficas ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-size: 10px; }
.chart .grid { stroke: var(--line); }
.chart .hit { fill: transparent; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.dash { height: 2px; border-radius: 0; }

/* ---------- Vacíos, hojas y avisos ---------- */
.empty { text-align: center; padding: 26px 16px; color: var(--muted); }
.empty p { margin: 6px 0 0; }
.empty-ic { width: 42px; height: 42px; stroke-width: 1.3; opacity: .55; }

.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .42); display: flex; align-items: flex-end; justify-content: center; animation: in-fade .15s; }
.sheet-body {
  background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px var(--s4) calc(20px + var(--safe-b));
  animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheet-up { from { transform: translateY(60px); opacity: .4; } }
.sheet-grab { width: 38px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto 10px; }
.sheet-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.sheet-title h3 { margin: 0; font-size: 19px; }

.toast {
  position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  background: #1d2733; color: #fff; padding: 10px 16px; border-radius: 99px; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); animation: in-fade .15s;
}
.toast-btn { background: none; border: 0; color: #ffb3a8; font-weight: 700; padding: 0; }

.mark-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.mark-table td { padding: 4px 3px; }
.mark-table input { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 16px; }

/* ---------- Impresión (tablilla) ---------- */
/* =====================================================================
   v3 — aspecto vivo: colores de la diana, letras redondeadas
   ===================================================================== */
h1, .large-title, .hero-title, .big-num, .stat b, .scoreboard b, .keypad button, .sheet-title h3, .right-num b, .tile b { font-family: var(--font-round); }
/* (Los botones, la barra inferior y los elegidos se definen en el bloque «v4 — identidad», al final) */

/* Vistas sin cabecera (portada) o a pantalla completa (bienvenida) */
body.no-topbar .topbar { display: none; }
body.bare .topbar, body.bare .tabbar { display: none; }
body.bare main { padding: 0; max-width: none; }

/* ---------- Pantalla de carga ---------- */
#splash {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 38%, #1f5a96, #0e2a47 68%); color: #fff; transition: opacity .4s, visibility .4s;
}
#splash.hide { opacity: 0; visibility: hidden; }
#splash { animation: splash-failsafe .4s 5s forwards; } /* por si el código fallase, no se queda tapando */
@keyframes splash-failsafe { to { opacity: 0; visibility: hidden; } }
#splash .logo { width: 120px; height: 120px; margin-bottom: 10px; animation: pop .7s cubic-bezier(.2, 1.5, .4, 1); }
#splash .logo .arrow { animation: fly .55s .35s cubic-bezier(.2, .9, .3, 1) both; }
.splash-name { font: 800 44px/1 var(--font-round); color: var(--yellow); letter-spacing: -.02em; }
.splash-sub { color: #a9c1dc; font-size: 15px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
@keyframes fly { from { transform: translate(-40px, 40px); opacity: 0; } }

/* ---------- Portada ---------- */
.home-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(var(--safe-t) + 10px) 2px 14px; }
.home-date { font-size: 13px; color: var(--muted); }
.home-date::first-letter { text-transform: uppercase; }
.home-hello { font: 800 26px/1.15 var(--font-round); letter-spacing: -.02em; }
.lic-link { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; color: inherit; position: relative; }
.lic-link .lic-card { margin-bottom: 4px; }
.lic-link:active { transform: scale(.985); }
.lic-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent); margin: 6px 0 2px; }
.lic-hint .i { width: 16px; height: 16px; }
.home-hero {
  position: relative; overflow: hidden; margin: calc(-1 * var(--s2)) calc(-1 * var(--s4)) var(--s4);
  padding: calc(var(--safe-t) + 12px) var(--s4) 22px; border-radius: 0 0 32px 32px;
  background: linear-gradient(165deg, #cfe3fa, #e8f2fd 70%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-hero { background: linear-gradient(165deg, #173d66, #0e2a47 75%); } }
:root[data-theme="dark"] .home-hero { background: linear-gradient(165deg, #173d66, #0e2a47 75%); }
.hero-deco { position: absolute; right: -105px; top: 34px; width: 225px; height: 225px; pointer-events: none; }
.hero-top { position: relative; display: flex; justify-content: space-between; margin-bottom: 18px; }
.sq-btn {
  position: relative; width: 50px; height: 50px; border-radius: 16px; border: 0; background: var(--surface); color: var(--navy);
  display: grid; place-items: center; box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sq-btn { color: var(--text); } }
:root[data-theme="dark"] .sq-btn { color: var(--text); }
.sq-btn .i { width: 25px; height: 25px; }
.sq-btn .dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); }
.hero-user { position: relative; display: flex; align-items: center; gap: 14px; }
.hero-user .name { font: 800 30px/1.1 var(--font-round); letter-spacing: -.02em; }
.hero-user .sub { font-size: 16px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.hero-user .club { font-size: 13px; color: var(--muted); }

.avatar {
  width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex: none;
  font-size: calc(var(--s) * .5); line-height: 1; background: var(--navy); color: #fff; font-weight: 800; font-family: var(--font-round);
  box-shadow: 0 0 0 3px var(--surface), 0 4px 12px rgba(14, 42, 71, .2); border: 0; padding: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit { position: relative; display: inline-block; }
.avatar-edit .pen { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.avatar-edit .pen .i { width: 16px; height: 16px; stroke-width: 2.4; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; justify-items: center; margin-bottom: 16px; }
.avatar-grid .avatar.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--yellow); }

.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border-radius: 18px; padding: 6px; box-shadow: var(--shadow); margin-bottom: var(--s3); }
.week-nav .mid { text-align: center; line-height: 1.2; }
.week-nav .mid b { font: 800 17px var(--font-round); display: block; }
.week-nav .mid span { font-size: 12.5px; color: var(--muted); }
.week-nav .icon-round:disabled { opacity: .3; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--s3); }
.tile { position: relative; border-radius: 20px; padding: 14px 14px 12px; background: var(--surface); overflow: hidden; }
.tile b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { font-size: 13px; font-weight: 600; color: var(--muted); }
.tile .i { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; opacity: .7; }
.tile small { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }
.t-yellow { background: var(--tint-yellow); } .t-yellow .i { color: #c99400; }
.t-blue { background: var(--tint-blue); } .t-blue .i { color: var(--accent); }
.t-red { background: var(--tint-red); } .t-red .i { color: var(--danger); }
.t-green { background: var(--tint-green); } .t-green .i { color: var(--good); }
.up { color: var(--good); } .down { color: var(--danger); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--s3); }
.quick button { border: 0; background: var(--surface); border-radius: 18px; padding: 12px 2px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); box-shadow: var(--shadow); }
.quick .qi { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.quick button:active { transform: scale(.96); }

/* ---------- Recortador de fotos ---------- */
.crop-frame { position: relative; margin: 0 auto 14px; overflow: hidden; background: #000; touch-action: none; border-radius: 18px; }
.crop-frame img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.crop-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 2px solid rgba(255, 255, 255, .9); border-radius: 18px; }
.crop-frame.circle::after { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); }
.range { width: 100%; accent-color: var(--accent); margin: 4px 0 8px; }

/* ---------- Licencia ---------- */
.lic-card {
  position: relative; overflow: hidden; border-radius: 24px; padding: 18px; color: #fff; aspect-ratio: 1.586;
  background: linear-gradient(135deg, #0e2a47 0%, #1a4677 55%, #1f6fd1 100%);
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 12px 30px rgba(14, 42, 71, .35); margin-bottom: var(--s4);
}
.lic-deco { position: absolute; right: -50px; bottom: -60px; width: 200px; height: 200px; opacity: .9; pointer-events: none; }
.lic-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lic-org { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #a9c1dc; font-weight: 700; }
.lic-num { font: 600 19px ui-monospace, Menlo, monospace; letter-spacing: .1em; margin-top: 4px; }
.lic-mid { position: relative; display: flex; align-items: center; gap: 12px; }
.lic-name { font: 800 21px/1.15 var(--font-round); }
.lic-club { font-size: 13px; color: #cfe0f3; }
.lic-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lic-chips span { background: rgba(255, 255, 255, .16); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 800; color: #fff; }
.status.ok { background: var(--good); } .status.warn { background: var(--trend); } .status.bad { background: var(--danger); }
/* Diseños de la tarjeta: el color del texto lo da --ink */
.lic-card { color: var(--ink, #fff); isolation: isolate; }
.lic-card > * { position: relative; z-index: 2; }
.lic-card .lic-deco { position: absolute; z-index: 0; }
.lic-card .lic-org, .lic-card .lic-club { color: inherit; opacity: .78; }
.lic-card .lic-chips span { background: color-mix(in srgb, currentColor 16%, transparent); }
.lic-card::before, .lic-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit; }
.lic-code { font: 600 13px ui-monospace, Menlo, monospace; letter-spacing: .08em; opacity: .85; }
/* Carbono */
.fx-carbon { border: 2px solid #3a4049; }
.fx-carbon::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); }
/* Mi federación: logo en mosaico, gris y muy transparente */
.fx-pattern::before { inset: -40%; background-image: var(--pattern); background-size: 74px; background-repeat: space;
  transform: rotate(-14deg); filter: grayscale(1) brightness(2.2); opacity: .16; border-radius: 0; }
/* Cristal */
.fx-glass { background: radial-gradient(circle at 15% 20%, #7fb6ff 0 30%, transparent 55%), radial-gradient(circle at 85% 30%, #c58bff 0 25%, transparent 55%),
  radial-gradient(circle at 60% 95%, #ffb38a 0 30%, transparent 60%), #6a88c9 !important; border: 1.5px solid rgba(255, 255, 255, .6); text-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.fx-glass::before { background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fx-glass::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 42%, transparent 55%); }
/* Metálicos (plata y oro): cepillado + brillo que sigue al dedo */
.fx-metal::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px); }
.fx-metal::after { background: radial-gradient(circle at var(--mx, 25%) var(--my, 15%), rgba(255, 255, 255, .75), transparent 45%); mix-blend-mode: soft-light; }
.fx-metal { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 12px 30px rgba(14, 42, 71, .35); }
/* Holográfico: arcoíris que se mueve */
.fx-holo { background-size: 300% 300% !important; animation: holo 6s ease-in-out infinite; }
.fx-holo { background-image: linear-gradient(120deg, #ff9ad5, #9ae6ff, #c3ffa1, #ffe29a, #d0a8ff, #ff9ad5) !important; }
.fx-holo::after { background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .6) 45%, transparent 60%); background-size: 250% 250%; animation: holo 3.5s linear infinite; mix-blend-mode: overlay; }
@keyframes holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Neón */
.fx-neon { box-shadow: 0 0 0 2px #39ff14, 0 0 22px rgba(57, 255, 20, .7), inset 0 0 26px rgba(57, 255, 20, .25); }
.fx-neon .lic-name, .fx-neon .lic-num { text-shadow: 0 0 8px rgba(57, 255, 20, .9); }
/* Diana: anillos de colores */
.fx-target { background: repeating-radial-gradient(circle at 92% 110%, #ffc928 0 22px, #e5483b 22px 44px, #1f6fd1 44px 66px, #0e2a47 66px 88px, #f7f7f2 88px 110px) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.fx-target::before { background: linear-gradient(90deg, rgba(14, 42, 71, .82) 0 55%, rgba(14, 42, 71, .1)); }
/* Leyenda: negro con borde dorado que brilla */
.fx-legend { border: 3px solid transparent; background-clip: padding-box !important; box-shadow: 0 0 0 3px #d4a83a, 0 12px 30px rgba(0, 0, 0, .5); }
.fx-legend::after { background: linear-gradient(115deg, transparent 35%, rgba(255, 220, 120, .35) 48%, transparent 60%); background-size: 250% 250%; animation: holo 5s linear infinite; }
.fx-legend .lic-name { color: #ffd76a; }

/* ---------- Licencia digital v2: fondo de seguridad, chip, sello, microtexto y brillo ---------- */
.lic-card.v2 { padding: 14px 16px 18px; gap: 6px; }
.lic-card.v2 .lic-deco { width: 170px; height: 170px; right: -62px; bottom: -72px; opacity: .55; }
.lic-card .lic-guil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .17; color: var(--ink, #fff); pointer-events: none; }
.lic-head { display: flex; align-items: flex-start; gap: 10px; }
.lic-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .82; }
.lic-fed { font: 700 12.5px/1.2 var(--font-round); margin-top: 2px; }
.lic-fedlogo { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .94); display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.lic-fedlogo img { max-width: 84%; max-height: 84%; object-fit: contain; }
.lic-body { display: flex; align-items: center; gap: 12px; }
.lic-photo .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 14px rgba(0, 0, 0, .3); }
.lic-card.v2 .lic-name { font: 800 19px/1.1 var(--font-round); }
.lic-clubline { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; margin-top: 3px; }
.lic-clubline img { width: 18px; height: 18px; border-radius: 5px; background: #fff; object-fit: contain; flex: none; }
.lic-numrow { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.lic-numrow small { font-size: 9px; font-weight: 800; opacity: .7; }
.lic-card.v2 .lic-num { font: 700 17px ui-monospace, Menlo, monospace; letter-spacing: .12em; margin: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 0 rgba(0, 0, 0, .35); }
.lic-side { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.lic-chip { width: 38px; height: 29px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.lic-seal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(from var(--hue, 0deg), #ff9ad5, #9ae6ff, #c3ffa1, #ffe29a, #d0a8ff, #ff9ad5);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75), 0 2px 6px rgba(0, 0, 0, .25); }
.lic-seal svg { width: 26px; height: 26px; }
.lic-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lic-card .lic-micro { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; padding: 0 14px; font: 700 5.5px/1 ui-monospace, monospace;
  letter-spacing: .14em; white-space: nowrap; overflow: hidden; opacity: .45; }
.lic-card .lic-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 22%) var(--gy, 12%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 52%); opacity: var(--glare, .55); }
.lic-card.mini { padding: 10px 12px; }
.lic-card.mini .lic-name { font-size: 14px; }
.lic-mini-foot { display: flex; align-items: center; justify-content: space-between; }
.lic-card.mini .lic-seal { width: 22px; height: 22px; }
.lic-card.mini .lic-seal svg { width: 16px; height: 16px; }
.lic-card.back { justify-content: center; }
.lic-back { display: flex; align-items: center; gap: 16px; height: 100%; }
.lic-back-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.lic-back-logo .logo { width: 78px; height: 78px; }
.lic-back-logo b { font: 800 14px var(--font-round); letter-spacing: .12em; }
/* Galaxia: estrellas y nebulosa morada */
.fx-galaxy::before { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 70px 90px, #fff, transparent),
  radial-gradient(1.6px 1.6px at 130px 50px, #fff, transparent), radial-gradient(1px 1px at 160px 120px, #fff, transparent), radial-gradient(1.2px 1.2px at 100px 140px, #e6d6ff, transparent);
  background-size: 180px 160px; opacity: .9; }
.fx-galaxy::after { background: radial-gradient(circle at 78% 28%, rgba(170, 90, 255, .55), transparent 45%), radial-gradient(circle at 18% 85%, rgba(80, 140, 255, .4), transparent 50%);
  animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .65; } }

/* ---------- Visor 3D ---------- */
.tilt-ov { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(circle at 50% 40%, #1f3a5c, #050b14 75%); opacity: 0; transition: opacity .25s; touch-action: none; }
.tilt-ov.in { opacity: 1; }
.tilt-stage { perspective: 1100px; width: min(90vw, 440px); }
.tilt-card { position: relative; transform-style: preserve-3d; transition: transform .06s linear; }
.tilt-card.settle { transition: transform .6s cubic-bezier(.2, 1.5, .4, 1); }
.tilt-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tilt-face.back { position: absolute; inset: 0; transform: rotateY(180deg); }
.tilt-face .lic-card { margin: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.tilt-hint { color: #a9c1dc; font-size: 13px; text-align: center; margin: 0; padding: 0 20px; }
.tilt-close { position: absolute; top: calc(var(--safe-t) + 14px); right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .tilt-card, .tilt-card.settle { transition: none; } }

.skin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skin-pick { position: relative; border: 0; padding: 0; background: none; text-align: left; }
.skin-pick .lic-card { padding: 10px; border-radius: 16px; margin: 0; box-shadow: var(--shadow); }
.skin-pick .lic-card .lic-name { font-size: 13px; }
.skin-pick .lic-deco, .cel-skin .lic-deco { width: 110px; height: 110px; right: -34px; bottom: -40px; }
.skin-pick b { display: block; font-size: 13px; margin-top: 6px; }
.skin-pick small { display: block; font-size: 11px; color: var(--muted); line-height: 1.25; }
.skin-pick.on .lic-card { outline: 3px solid var(--yellow); outline-offset: 2px; }
.skin-pick.locked .lic-card { filter: grayscale(.85) brightness(.7); }
.skin-pick .lock { position: absolute; top: 8px; right: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.skin-pick .lock .i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .fx-holo, .fx-holo::after, .fx-legend::after { animation: none; } }

.lic-doc { display: block; width: 100%; border: 0; padding: 0; background: none; border-radius: 18px; overflow: hidden; }
.lic-doc img { width: 100%; display: block; }
.doc-full img { width: 100%; border-radius: 12px; display: block; }

/* ---------- Contador − / + ---------- */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 8px; }
.stepper button { width: 54px; height: 54px; border-radius: 16px; border: 0; background: var(--surface); color: var(--text); font: 800 28px var(--font-round); box-shadow: var(--shadow); }
.stepper button:active { transform: scale(.94); }
.stepper button:disabled { opacity: .35; }
.stepper-val { text-align: center; line-height: 1; }
.stepper-val b { display: block; font: 800 38px var(--font-round); }
.stepper-val span { font-size: 12px; color: var(--muted); font-weight: 700; }
.type-grid.three-cols { grid-template-columns: repeat(3, 1fr); }
.type-grid.three-cols .type-card { align-items: center; text-align: center; padding: 14px 6px; }
.fixed-round { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.tech-hero { display: flex; gap: 12px; align-items: center; background: var(--tint-blue); box-shadow: none; }
.more-rounds { margin-top: 18px; }
.more-rounds summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 14px 16px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow); font-weight: 800; }
.more-rounds summary::-webkit-details-marker { display: none; }
.more-rounds summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.more-rounds[open] summary::after { transform: rotate(180deg); }

/* ---------- Menú de Entrenar ---------- */
.hub-resume { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 20px; padding: 14px; margin-bottom: 14px;
  background: var(--tint-yellow); color: var(--text); text-align: left; }
.hub-resume .small { display: block; color: var(--muted); }
.hub-resume .chev { width: 18px; height: 18px; color: var(--muted); }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow); }
.hub-card:active { transform: scale(.97); }
.hub-card b { font: 800 17px var(--font-round); }
.hub-card small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.hub-card.big { grid-column: 1 / -1; background: linear-gradient(135deg, #0e2a47, #1f6fd1); color: #fff; padding: 20px; }
.hub-card.big b { font-size: 21px; }
.hub-card.big small { color: #cfe0f3; }
.hub-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--yellow); color: var(--navy); margin-bottom: 4px; }
.hub-ic .i { width: 26px; height: 26px; stroke-width: 2.2; }
.hub-ic.blue { background: var(--tint-blue); color: var(--accent); }
.hub-ic.red { background: var(--tint-red); color: var(--danger); }
.hub-sub { display: flex; align-items: center; gap: 6px; font: 800 15px var(--font-round); margin: 14px 4px 8px; }
.hub-sub .i { width: 18px; height: 18px; color: var(--accent); }
.tpl-row { padding: 6px 10px 6px 0; }
.tpl-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border: 0; background: none; padding: 8px 4px 8px 16px; text-align: left; color: var(--text); }
.tpl-main .small { display: block; }
.list-item .grow .small { display: block; }

/* ---------- Selección de federación y club (cuadrícula) ---------- */
.pick-title { text-transform: none; letter-spacing: -.01em; font: 800 24px var(--font-round); color: var(--text); margin: 4px 2px 10px; }
.pick-search { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0 -4px 12px; padding: 10px 14px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
body:not(.bare) .pick-search { top: var(--topbar-h); }
.pick-search .i { width: 20px; height: 20px; color: var(--muted); }
.pick-search input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; color: var(--text); }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 12px; }
.pick-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center;
  padding: 16px 10px 14px; border: 2px solid transparent; border-radius: 22px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); transition: transform .12s; min-height: 168px;
}
.pick-card:active { transform: scale(.97); }
.pick-card.on { border-color: var(--yellow); box-shadow: 0 0 0 4px var(--tint-yellow), var(--shadow); }
.pick-card b { font-size: 14px; line-height: 1.2; }
.pick-card small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.pick-img { position: relative; width: 78px; height: 78px; border-radius: 22px; background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); flex: none; color: var(--accent); }
.pick-img img { position: relative; z-index: 1; max-width: 86%; max-height: 86%; object-fit: contain; }
.pick-img .i { width: 34px; height: 34px; }
.pick-badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 24px var(--font-round); letter-spacing: .02em; }
.pick-badge.club { background: var(--surface-2); color: var(--muted); }
.pick-sug { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: var(--yellow); color: var(--navy); border-radius: 99px; padding: 2px 8px; }
.pick-card.manual { border: 2px dashed var(--line); background: transparent; box-shadow: none; }
.pick-none { grid-column: 1 / -1; }
.sticky-foot { position: sticky; bottom: 0; padding: 12px 0 calc(var(--safe-b) + 4px); background: linear-gradient(transparent, var(--bg) 30%); }
.birth-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.birth-row select { width: 100%; padding: 11px 28px 11px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background-color: var(--bg); font-size: 16px; }
.club-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); text-align: left; color: var(--text); }
.club-pick b { display: block; font-size: 15px; }
.club-pick small { display: block; font-size: 12.5px; color: var(--muted); }
.club-pick .chev { width: 18px; height: 18px; color: var(--muted); }
.club-logo.sm { width: 40px; height: 40px; border-style: solid; }
.club-list { max-height: 52vh; overflow: auto; margin-bottom: 12px; }
.final-club { display: flex; align-items: center; gap: 12px; text-align: left; }
.final-club .club-logo { width: 64px; height: 64px; border-style: solid; }
.dorsal-row { display: flex; gap: 10px; align-items: center; }
.dorsal-row input[name="dorsalN"] { width: 92px; flex: none; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); font-size: 16px; }
.dorsal-seg { flex: 1; margin: 0; }
.dorsal-seg span { padding: 11px 0; font-size: 16px; }
.club-row { display: flex; gap: 10px; align-items: center; }
.club-row input[name="club"] { flex: 1; }
.club-logo { width: 48px; height: 48px; flex: none; border-radius: 12px; border: 2px dashed var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; color: #9fb2c8; cursor: pointer; }
.club-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.club-logo:has(img) { border-style: solid; }
.club-hint { display: block; margin: 5px 2px 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; font-size: inherit; text-decoration: underline; }
.age-out { display: block; margin: 5px 2px 0; font-weight: 700; color: var(--accent); }
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.logo-tile { background: var(--surface); border-radius: 18px; padding: 10px 8px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo-tile b { font-size: 12.5px; line-height: 1.2; }
.logo-tile small { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.logo-box { width: 64px; height: 64px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; color: #b8c6d6; border: 1px solid var(--line); }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: flex; gap: 4px; margin-top: 4px; }
.logo-actions .btn { padding: 6px 10px; font-size: 13px; }

/* ---------- Novedades ---------- */
.news-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; }
.news-card:active { transform: scale(.99); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--surface-2); }
.news-body { padding: 12px 16px 16px; }
.news-date { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.news-title { font: 800 18px/1.25 var(--font-round); margin: 4px 0 6px; }
.news-sum { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.small { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; }
.news-card.small img { width: 92px; height: 70px; aspect-ratio: auto; border-radius: 12px; flex: none; }
.news-card.small .news-body { padding: 0; }
.news-card.small .news-title { font-size: 15px; margin: 2px 0 0; }
.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; font-size: 13.5px; line-height: 1.2; box-shadow: var(--shadow); }
.link-tile .qi { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }

/* ---------- Bienvenida ---------- */
.ob { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 20px) 24px calc(var(--safe-b) + 24px); max-width: 520px; margin: 0 auto; }
.ob.navy { max-width: none; background: radial-gradient(circle at 50% 30%, #1f5a96, #0e2a47 70%); color: #fff; }
.ob.navy > * { width: 100%; max-width: 472px; margin-left: auto; margin-right: auto; }
.ob-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; }
.ob-hero .logo { width: 130px; height: 130px; margin-bottom: 10px; animation: pop .7s cubic-bezier(.2, 1.5, .4, 1); }
.ob h1 { font: 800 34px/1.1 var(--font-round); margin: 0; letter-spacing: -.02em; }
.ob.navy h1 { color: var(--yellow); }
.ob .sub { color: var(--muted); font-size: 16px; max-width: 320px; margin: 6px auto 0; }
.ob.navy .sub { color: #a9c1dc; }
.ob-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ob-steps { display: flex; gap: 6px; justify-content: center; margin: 4px 0 20px; }
.ob-steps i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .2s; }
.ob-steps i.on { width: 26px; background: var(--yellow); }
.ob-title { font: 800 28px/1.15 var(--font-round); margin: 0 0 6px; text-transform: none; letter-spacing: -.01em; color: var(--text); }
.ob-body { flex: 1; }
.ob-foot { display: flex; gap: 10px; margin-top: 20px; }
.ob-foot .btn { flex: 1; }
.feature { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; text-align: left; }
.feature .qi { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.radio-item .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.radio-item.on .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.radio-item .tick .i { width: 15px; height: 15px; stroke-width: 3; }
.radio-item.off { opacity: .55; }
.soon { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 2px 8px; }
.sex-seg { display: flex; gap: 8px; margin-bottom: 12px; }
.sex-seg label { flex: 1; }
.sex-seg input { display: none; }
.sex-seg span { display: block; text-align: center; padding: 11px 4px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.sex-seg input:checked + span { background: var(--sel-bg); color: var(--sel-ink); }

/* Vista previa de la tablilla (imagen generada) */
.sc-preview img { display: block; width: 100%; border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 12px; background: #fff; }
.btn:disabled { opacity: .5; }

/* ---------- Registro de flechas ---------- */
.entry { padding-top: 14px; }
.entry-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.entry-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.entry-title { font: 700 22px/1.1 var(--font-round); }
.entry-title b { font-size: 34px; font-weight: 800; }
.entry-title small { font-size: 16px; color: var(--muted); font-weight: 700; }
.entry-total { text-align: right; line-height: 1; }
.entry-total b { display: block; font: 800 34px var(--font-round); }
.entry-total span { font-size: 12px; color: var(--muted); font-weight: 600; }
.entry-progress { display: flex; gap: 3px; margin: 12px 0 4px; }
.entry-progress i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); }
.entry-progress i.done { background: var(--accent); }
.entry-progress i.part { background: var(--accent-soft); }
.entry-progress i.cur { background: var(--yellow); }
.slots { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.slot-big {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0;
  font: 800 24px var(--font-round); border: 1px solid rgba(0, 0, 0, .15); animation: pop .25s cubic-bezier(.2, 1.6, .4, 1);
}
.slot-big.empty { background: transparent; border: 2.5px dashed var(--line); color: var(--muted); font-size: 16px; animation: none; }
.slot-big.next { border-color: var(--yellow); border-style: solid; color: var(--text); box-shadow: 0 0 0 4px var(--tint-yellow); }
.arrow-chip, .slot-big { cursor: pointer; }
@media (max-width: 360px) { .slot-big { width: 54px; height: 54px; font-size: 20px; } }
.prev-strip {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 14px; padding: 8px 12px; margin-bottom: 10px;
  background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600;
}
.prev-strip .prev-arrows { flex: 1; display: flex; gap: 2px; justify-content: center; }
.prev-strip b { font: 800 18px var(--font-round); }
.prev-strip .ok { width: 18px; height: 18px; color: var(--good); stroke-width: 2.6; }
.prev-strip.pop { animation: slide-in .35s cubic-bezier(.2, 1.2, .4, 1); background: var(--tint-green); }
@keyframes slide-in { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
.undo-btn { margin-top: 12px; background: var(--surface) !important; color: var(--text); border: 2px solid var(--line) !important; box-shadow: none !important; }
.undo-btn .i { width: 22px; height: 22px; }

.friend-code { font: 800 26px ui-monospace, Menlo, monospace; letter-spacing: .08em; margin: 4px 0 2px; }

/* ---------- Verificación de competiciones ---------- */
.badge.v-ok { background: var(--tint-green); color: var(--good); }
.badge.v-warn { background: var(--tint-yellow); color: #9a6a00; }
.badge.v-bad { background: var(--tint-red); color: var(--danger); }
.verify-card { border-left: 5px solid var(--line); }
.verify-card.v-ok { border-left-color: var(--good); } .verify-card.v-ok .ic-bubble { color: var(--good); }
.verify-card.v-warn { border-left-color: var(--yellow); } .verify-card.v-warn .ic-bubble { color: #c99400; }
.verify-card.v-bad { border-left-color: var(--danger); } .verify-card.v-bad .ic-bubble { color: var(--danger); }
.verify-card .linkish { display: inline-block; margin-top: 8px; }
.spinner { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Logros ---------- */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ach { background: var(--surface); border-radius: 18px; padding: 14px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ach b { font-size: 14px; line-height: 1.2; }
.ach small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.ach .progress { width: 100%; margin-top: 6px; }
.ach-num { font-size: 11px; font-weight: 700; color: var(--muted); }
.ach-ok { font-size: 12px; font-weight: 800; color: var(--good); }
.ach-skin { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.ach-skin .i { width: 14px; height: 14px; }
.medal { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); margin-bottom: 4px; }
.medal .i { width: 28px; height: 28px; }
.ach.done .medal, .medal.big { background: radial-gradient(circle at 35% 30%, #fff1b0, #ffc928 55%, #d99a00); color: var(--navy); box-shadow: 0 4px 12px rgba(255, 201, 40, .45); }
.ach.soon { opacity: .6; }
.medal.big { width: 64px; height: 64px; flex: none; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.celebrate { display: flex; flex-direction: column; gap: 12px; }
.cel-item { display: flex; gap: 14px; align-items: center; }
.cel-skin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.cel-skin .lic-card { padding: 10px; border-radius: 16px; margin: 0; }
.cel-skin > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ---------- Social ---------- */
.soon-hero { text-align: center; padding: 22px 16px; border-radius: 24px; background: linear-gradient(150deg, #ffe08a, #ffc928); color: var(--navy); margin-bottom: var(--s4); }
.soon-hero h3 { font: 800 24px var(--font-round); margin: 6px 0 4px; }
.soon-hero p { margin: 0; font-size: 14.5px; }
.soon-hero .i { width: 46px; height: 46px; stroke-width: 1.6; }

/* ---------- Mi equipamiento ---------- */
.kit-list { display: grid; gap: 12px; margin-bottom: 14px; }
.kit-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 12px; border: 0; border-radius: var(--r); background: var(--surface);
  box-shadow: var(--shadow); color: var(--text); text-align: left; }
.kit-card:active { transform: scale(.98); }
.kit-card-art { width: 86px; height: 112px; flex: none; border-radius: 16px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.kit-card-art img { width: 100%; height: 100%; object-fit: cover; }
.kit-card-art .bp { width: 100%; height: 100%; padding: 4px; }
.kit-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kit-card-body b { font: 800 18px var(--font-round); }
.kit-card-body small { font-size: 12.5px; line-height: 1.3; }
.kit-card-count { color: var(--accent); font-weight: 700; }
.kit-card .chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.kit-name { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--text);
  font: 800 26px var(--font-round); letter-spacing: -.01em; margin: 2px 0 8px; }
.kit-name .i { width: 20px; height: 20px; color: var(--muted); }
.seg button .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }

.kit-photo { position: relative; display: block; border-radius: var(--r); overflow: hidden; margin-bottom: 6px; }
.kit-photo img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.kit-photo-btns { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.kit-photo.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 170px; padding: 20px;
  border: 2.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--accent); cursor: pointer; text-align: center; }
.kit-photo.add .i { width: 38px; height: 38px; margin-bottom: 4px; }
.kit-photo.add b { font: 800 17px var(--font-round); }
.kit-photo.add small { color: var(--muted); }

.part-row { gap: 12px; }
.part-thumb { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2);
  color: var(--muted); border: 1.5px dashed var(--line); cursor: pointer; }
.part-thumb.on { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.part-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Fotos de producto: PNG sin fondo, sin recortar; el icono de la categoría solo se ve si no hay foto */
.part-thumb img ~ .i, .bp-chip-img img ~ .i, .pick-img.prod img ~ .pick-badge { display: none; }
.part-thumb .i { width: 20px; height: 20px; }
.gear-row { gap: 12px; }
.gear-row .plain { border: 0; background: none; text-align: left; color: var(--text); padding: 0; }
.measure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.measure-grid .field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-card.prod { min-height: 200px; }
.pick-card .prod-brand { font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; margin-bottom: -6px; }
.pick-img.prod { width: 104px; height: 104px; background: transparent; box-shadow: none; border-radius: 0; }
.pick-img.prod img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.part-thumb, .bp-chip-img { position: relative; }
.part-thumb img, .bp-chip-img img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
/* Sin fondo: en modo oscuro, un halo fino para que se vean las piezas negras */
:root[data-theme="dark"] :is(.pick-img.prod, .part-thumb, .bp-chip-img) img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.pick-img.prod, .part-thumb, .bp-chip-img) img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)); } }
.pick-img.prod .pick-badge.club { border-radius: 22px; }
.pick-card .prod-color { font-weight: 700; color: var(--text); }
.tag-desc { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  background: var(--tint-red); color: var(--danger); border-radius: 99px; padding: 2px 7px; }
.tag-desc.inline { vertical-align: 1px; }
.pick-grid.colors { max-height: 60vh; overflow-y: auto; padding: 4px; }
.pick-grid.colors .pick-card { min-height: 0; box-shadow: none; border-color: var(--line); }

/* Arco montado (SVG): en color lo elegido; en gris discontinuo lo que falta */
.bp-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bp { width: 100%; display: grid; place-items: center; }
.bp-card .bp { max-width: 300px; aspect-ratio: 300 / 420; }
.bp-svg { width: 100%; height: 100%; overflow: visible; }
.bp-p { cursor: pointer; transition: opacity .2s; }
.bp-p * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-p .body { stroke-width: 2; }
.bp-p .limb { stroke-width: 7; }
.bp-p .cord { stroke-width: 1.6; }
.bp-p .serv { stroke-width: 3.2; }
.bp-p .bar { stroke-width: 5; }
.bp-p .bar.thin { stroke-width: 3; }
.bp-p .blade { stroke-width: 2.4; }
.bp-p .shaft { stroke-width: 3.2; }
.bp-p .ring { stroke-width: 3; }
.bp-p.off * { stroke: var(--muted); stroke-dasharray: 4 4; opacity: .55; }
.bp-p.off .limb { stroke-width: 3; }
.bp-p.off .bar { stroke-width: 2.5; }
.bp-p.off .body, .bp-p.off .wt, .bp-p.off .blk, .bp-p.off .knob { fill: var(--surface-2); }
.bp-riser.on .body { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 70%, #000); }
.bp-limbs.on .limb { stroke: #e5483b; }
.bp-string.on .cord, .bp-string.on .serv { stroke: var(--text); }
.bp-button.on .knob { fill: var(--trend); stroke: color-mix(in srgb, var(--trend) 70%, #000); stroke-width: 1.5; }
.bp-rest.on .bar { stroke: var(--trend); }
.bp-clicker.on * { stroke: var(--good); }
.bp-sight.on .bar, .bp-sight.on .ring { stroke: #7c4ddb; }
.bp-sight.on .blk, .bp-sight.on .pin { fill: #7c4ddb; stroke: none; }
.bp-stabLong.on .bar, .bp-stabSide.on .bar { stroke: var(--text); }
.bp-stabLong.on .wt, .bp-stabSide.on .wt, .bp-vbar.on .blk { fill: var(--yellow); stroke: color-mix(in srgb, var(--yellow) 60%, #000); stroke-width: 1.5; }
.bp-arrow.on .shaft { stroke: var(--text); }
.bp-arrow.on .tip, .bp-arrow.on .nockp { fill: var(--muted); stroke: none; }
.bp-arrow.on .vane { fill: var(--yellow); stroke: none; }
.bp-p.on { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.bp-3d-btn { margin-top: -4px; }
.bp-strip { display: flex; gap: 10px; overflow-x: auto; width: calc(100% + 32px); margin: 4px -16px 0; padding: 4px 16px 6px; scroll-snap-type: x mandatory; }
.bp-chip { flex: none; width: 112px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; }
.bp-chip-img { width: 112px; height: 84px; border-radius: 14px; background: transparent; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.bp-chip-img img { width: 100%; height: 100%; object-fit: contain; }
.bp-chip-img .i { width: 28px; height: 28px; }
.bp-chip small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.bp-chip b { font-size: 12.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Flecha por partes */
.ap-card { padding-top: 18px; }
.ap-svg { width: 100%; height: auto; overflow: visible; }
.ap { cursor: pointer; }
.ap.off * { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ap-tube.on * { fill: var(--text); }
.ap-wrap.on * { fill: var(--accent); }
.ap-fletch.on * { fill: var(--yellow); }
.ap-point.on * { fill: #9aa7b6; }
.ap-pin.on * { fill: var(--trend); }
.ap-nock.on * { fill: #e5483b; }

/* Visor 3D del arco: capas a distinta profundidad */
.tilt-ov.bow .tilt-stage { width: min(80vw, 340px); }
.tilt-ov.bow .tilt-face.front { transform-style: preserve-3d; }
.bp-3d { position: relative; aspect-ratio: 300 / 420; transform-style: preserve-3d; border-radius: 26px;
  background: radial-gradient(circle at 50% 40%, #1a3b63, #0b1d33 70%); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.bp-layer { position: absolute; inset: 6%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp-3d { --text: #eaf2fc; --muted: #8ea6c2; --surface-2: #1a3050; --accent: #5aa2ff; }
.bp-3d .bp-p { cursor: default; }
.bp-back { background: var(--surface); color: var(--text); border-radius: 26px; padding: 18px; height: 100%; overflow: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.bp-back h3 { margin: 4px 0 10px; font: 800 20px var(--font-round); }
.bp-back-photo { width: 100%; height: 120px; object-fit: cover; border-radius: 14px; }
.bp-back ul { list-style: none; margin: 0; padding: 0; }
.bp-back li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.bp-back li small { color: var(--muted); }
.bp-back li b { text-align: right; }

/* =====================================================================
   v4 — identidad «índigo y naranja»
   Minimalista y sobria: lo tocable flota (relieve), al pulsar se hunde y lo elegido lleva el sello naranja.
   ===================================================================== */
:root { --sel-bg: var(--charcoal); --sel-ink: var(--ivory); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sel-bg: var(--ivory); --sel-ink: var(--charcoal); } }
:root[data-theme="dark"] { --sel-bg: var(--ivory); --sel-ink: var(--charcoal); }

body { font-feature-settings: "tnum" 0; letter-spacing: -.005em; }
h2 { letter-spacing: .08em; font-size: 12px; font-weight: 700; }
.large-title, .hero-title, .home-hello, .hero-user .name, .ob h1, .ob-title, .pick-title, .kit-name, .news-title, .soon-hero h3 { font-weight: 700; letter-spacing: -.02em; }
.hub-card b, .kit-card-body b, .week-nav .mid b, .entry-title b, .entry-total b, .stepper-val b, .tile b, .stat b, .scoreboard b, .big-num { font-weight: 700; }
a, .linkish, .top-link, .icon-btn, .lic-hint, .list-item.add, .kit-card-count, .news-date, .age-out { color: var(--link); }

/* ---------- Relieve: recetas ---------- */
.btn, .icon-round, .sq-btn, .quick button, .stepper button, .fab, .round-btn, .tog, .pick-card, .hub-card, .kit-card, .type-card,
.more-rounds summary, .link-tile, .news-card, .skin-pick .lic-card, .seg button.on, .sex-seg span, .logo-tile, .hub-resume, .prev-strip, .ach {
  background: var(--face); box-shadow: var(--raise); border: 0;
  transition: transform .08s ease, box-shadow .12s ease;
}
:is(.btn, .icon-round, .sq-btn, .quick button, .stepper button, .fab, .round-btn, .tog, .pick-card, .hub-card, .kit-card, .type-card,
  .more-rounds summary, .link-tile, .news-card, .sex-seg span, .logo-tile, .hub-resume, .prev-strip):active {
  transform: translateY(1px); box-shadow: var(--press);
}
@media (hover: hover) {
  :is(.btn, .pick-card, .hub-card, .kit-card, .type-card, .link-tile, .news-card, .quick button):hover { box-shadow: var(--raise-hover); }
}
.card { background: var(--surface); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.card.notice { background: var(--tint-yellow); border-color: transparent; box-shadow: none; }
.card .list-item:active:not(.static) { background: var(--surface-2); box-shadow: var(--press); }
/* Zonas hundidas: pista de pestañas, campos, contador */
.seg, .stepper, .field input, .field select, .field textarea, .pick-search, .inline-field input, .mark-table input {
  background-color: var(--surface-2); border: 0; box-shadow: var(--well);
}
.pick-search { background-color: var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: var(--well), 0 0 0 2px var(--brand); }

/* ---------- Botones ---------- */
.btn { border-radius: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.card .btn:not(.primary):not(.danger-solid), .sheet .btn:not(.primary):not(.danger-solid) { background: var(--face); box-shadow: var(--raise); }
.btn.primary, .btn.blue, .btn.danger-solid {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand) 55%, var(--brand-lo)); color: var(--ivory);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 2px rgba(90, 30, 0, .3), 0 10px 20px -10px color-mix(in srgb, var(--pal-brand) 70%, transparent);
}
.btn.primary:active, .btn.blue:active, .btn.danger-solid:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
.btn.white { background: linear-gradient(180deg, #ffffff, #eceaf3); color: var(--charcoal); }
.btn.ghost { background: transparent !important; color: inherit; box-shadow: none !important; }
.btn.danger { color: var(--danger); }
.icon-round { background: var(--face); color: var(--text); }
.undo-btn { background: var(--face) !important; border: 0 !important; box-shadow: var(--raise) !important; }

/* ---------- Selección: el sello naranja ---------- */
.seg { padding: 4px; border-radius: 13px; }
.seg button { border-radius: 10px; color: var(--muted); }
.seg button.on { color: var(--text); font-weight: 700; }
.tog { color: var(--text); font-weight: 600; }
.tog.on, .tog:has(input:checked), .sex-seg input:checked + span, .cal-day.sel {
  background: var(--sel-bg); color: var(--sel-ink); box-shadow: var(--raise), 0 0 0 1.5px var(--brand);
}
.pick-card.on, .type-card.on, .skin-pick.on .lic-card, .kit-card.on { box-shadow: var(--raise), 0 0 0 2px var(--brand); outline: 0; }
.radio-item.on .tick { background: var(--brand); border-color: var(--brand); color: var(--ivory); }
.avatar-grid .avatar.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand); }
.pick-sug { background: var(--brand); color: var(--ivory); letter-spacing: .06em; }
.ob-steps i.on { background: var(--brand); }
.entry-progress i.done { background: var(--charcoal); }
.entry-progress i.cur { background: var(--brand); }
.slot-big.next { border-color: var(--brand); box-shadow: 0 0 0 4px var(--accent-soft); }
.score-table tr.sel, .end-done { background: var(--accent-soft); }
.badge.comp { background: var(--tint-red); color: var(--brand); }
.verify-card.v-warn { border-left-color: var(--trend); } .verify-card.v-warn .ic-bubble, .badge.v-warn { color: var(--trend); }
.spinner { border-top-color: var(--brand); }

/* Burbujas de icono: tinta sobria, sin colores vivos */
.ic-bubble { background: var(--surface-2); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.ic-bubble.good { color: var(--good); }
.hub-ic { background: linear-gradient(180deg, var(--brand-hi), var(--brand-lo)); color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px -4px color-mix(in srgb, var(--pal-brand) 60%, transparent); }
.hub-ic.blue, .hub-ic.red { background: var(--surface-2); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.quick .qi, .link-tile .qi, .feature .qi { background: var(--surface-2) !important; color: var(--text); }

/* ---------- Teclado de puntuación: colores de la diana con relieve ---------- */
.keypad button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 2px 4px -1px rgba(0, 0, 0, .25); transition: transform .06s; }
.keypad button:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.keypad .v-white { box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); }

/* ---------- Barra inferior: píldora índigo flotante ---------- */
.tabbar {
  left: 12px; right: 12px; bottom: calc(8px + var(--safe-b)); padding: 7px 4px 6px; border: 0; border-radius: 26px;
  background: linear-gradient(180deg, var(--pal-ink2), var(--tab-bg)); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .2), 0 16px 32px -12px rgba(0, 0, 0, .5);
  max-width: 616px; margin: 0 auto;
}
.tabbar button { color: rgba(245, 243, 250, .55); font-weight: 600; letter-spacing: .01em; position: relative; }
.tabbar button.active { color: var(--ivory); }
.tabbar button.active:not(.tab-main)::after { content: ''; position: absolute; bottom: -3px; width: 4px; height: 4px; border-radius: 50%; background: var(--pal-vivid); }
.tabbar .tab-main { color: rgba(245, 243, 250, .55); }
.tabbar .tab-main .ti {
  width: 56px; height: 56px; margin-top: -30px; color: var(--ivory);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand) 55%, var(--brand-lo));
  box-shadow: 0 0 0 5px var(--bg), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 10px 20px -6px color-mix(in srgb, var(--pal-brand) 70%, transparent);
}
.tabbar .tab-main .ti .i { width: 28px; height: 28px; stroke-width: 2.4; }
.tabbar .tab-main:active .ti { transform: translateY(1px); }
main { padding-bottom: calc(120px + var(--safe-b)); }
.toast { bottom: calc(100px + var(--safe-b)); background: var(--charcoal); color: var(--ivory); }
.toast-btn { color: var(--pal-dlink); }

/* ---------- Bloques índigo: portada, menú, bienvenida, carga ---------- */
.hero, .hub-card.big { background: linear-gradient(160deg, var(--pal-ink3), var(--charcoal) 70%); color: var(--ivory); box-shadow: var(--raise-dark); }
.hero-date, .hero .stat span, .hub-card.big small { color: rgba(245, 243, 250, .65); }
.hero .stat { background: rgba(245, 243, 250, .07); }
.hub-card.big .hub-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(255, 255, 255, .06); }
.home-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, var(--bg)), var(--bg)); }
:root[data-theme="dark"] .home-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--pal-ink) 55%, var(--pal-deep)), var(--bg)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--pal-ink) 55%, var(--pal-deep)), var(--bg)); } }
.hero-deco { opacity: .14; filter: grayscale(1); }
.sq-btn { background: var(--face); box-shadow: var(--raise); color: var(--text); }
.avatar { background: var(--charcoal); color: var(--ivory); }
.avatar-edit .pen { background: var(--brand); color: var(--ivory); }
.week-nav { background: var(--surface); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
/* Casillas de la semana: superficie neutra; el color va solo en el icono */
.tile { background: var(--surface) !important; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.tile .i { opacity: 1; width: 20px; height: 20px; }
.t-yellow .i, .t-blue .i, .t-green .i { color: var(--muted); }
.t-red .i { color: var(--brand); }
.hub-resume { background: var(--face); }
.tech-hero { background: var(--surface-2); }
.prev-strip.pop { background: var(--tint-green); }

#splash { background: radial-gradient(circle at 50% 38%, var(--pal-ink3), var(--charcoal) 70%); }
.splash-name { color: var(--ivory); font-weight: 700; letter-spacing: .02em; }
.splash-sub { color: rgba(245, 243, 250, .6); }
.ob.navy { background: radial-gradient(circle at 50% 30%, var(--pal-ink3), var(--charcoal) 72%); color: var(--ivory); }
.ob.navy h1 { color: var(--ivory); }
.ob.navy .sub { color: rgba(245, 243, 250, .65); }
.ob.navy .btn:not(.primary) { background: rgba(245, 243, 250, .08); color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(245, 243, 250, .14); }
.soon-hero { background: linear-gradient(160deg, var(--pal-ink3), var(--charcoal) 70%); color: var(--ivory); box-shadow: var(--raise-dark); }
.soon-hero p { color: rgba(245, 243, 250, .75); }
.lic-org, .tilt-hint { color: rgba(245, 243, 250, .65); }
.lic-club { color: rgba(245, 243, 250, .8); }
.tilt-ov { background: radial-gradient(circle at 50% 40%, var(--pal-ink3), var(--pal-deeper) 75%); }
.bp-3d { background: radial-gradient(circle at 50% 40%, var(--pal-ink3), var(--pal-deeper) 70%); }

/* Hojas emergentes: claras sobre índigo */
.sheet { background: rgba(26, 21, 41, .5); }
.sheet-body { box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
.sheet-title h3 { font-weight: 700; letter-spacing: -.01em; }

/* El código de amigo en el anverso: siempre en una línea */
.lic-card.v2 .lic-numrow .lic-num { font-size: 15px; letter-spacing: .08em; white-space: nowrap; }
.lic-numrow { min-width: 0; }

/* ---------- Mi licencia: carrusel digital ⇄ real ---------- */
.lic-carousel { position: relative; }
.lic-carousel .lic-link .lic-card, .lic-carousel .lic-real { margin-bottom: 0; }
.lic-carousel.from-right .lic-link { animation: lic-in-r .32s cubic-bezier(.2, .8, .2, 1); }
.lic-carousel.from-left .lic-link { animation: lic-in-l .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes lic-in-r { from { transform: translateX(40px) rotateY(-14deg); opacity: 0; } }
@keyframes lic-in-l { from { transform: translateX(-40px) rotateY(14deg); opacity: 0; } }
.lic-arrow {
  position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: var(--text); background: var(--face); box-shadow: var(--raise);
}
.lic-arrow.right { right: -10px; }
.lic-arrow.left { left: -10px; }
.lic-arrow:active { transform: translateY(1px); box-shadow: var(--press); }
.lic-arrow .i { width: 22px; height: 22px; stroke-width: 2.4; }
.lic-switch { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lic-dots { display: inline-flex; gap: 5px; }
.lic-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: width .2s; }
.lic-dots i.on { width: 20px; background: var(--brand); }
/* La licencia de verdad, como tarjeta */
.lic-real { position: relative; display: block; aspect-ratio: 1.586; border-radius: 18px; overflow: hidden; background: #fff; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 30px -10px rgba(37, 29, 58, .45); margin-bottom: var(--s4); }
.lic-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lic-real .lic-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 22%) var(--gy, 12%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%); opacity: var(--glare, .4); }
.lic-real.gen { background: linear-gradient(160deg, #ffffff, #eceaf3); color: #251d3a; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.lic-real.gen .lic-kicker { color: #6b6680; }
.lic-real-pdf { display: flex; align-items: center; gap: 8px; color: #251d3a; }
.lic-real-pdf .i { width: 22px; height: 22px; color: var(--pal-brand); }
.lic-real-pdf small { margin-left: auto; font: 700 13px ui-monospace, Menlo, monospace; }
/* Dorso: los datos de la licencia, tal cual */
.lic-back2 { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.lic-back-head { display: flex; align-items: center; justify-content: space-between; }
.lic-back-mark .logo { width: 30px; height: 30px; }
.lic-back-empty { margin: auto 0; font-size: 13px; opacity: .8; }
.lic-data { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 0; font-size: 11.5px; line-height: 1.2; }
.lic-data div { min-width: 0; }
.lic-data dt { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.lic-data dd { margin: 1px 0 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lic-data div:first-child { grid-column: 1 / -1; }
.lic-data div:first-child dd { font-size: 14px; }
/* En el dorso de la digital hay que dejar sitio al microtexto de abajo */
.lic-back2 { gap: 4px; padding-bottom: 6px; }
.lic-back2 .lic-data { gap: 3px 12px; font-size: 10.5px; }
.lic-back2 .lic-data dt { font-size: 7.5px; }
.lic-back2 .lic-data div:first-child dd { font-size: 12.5px; }
.lic-back2 .lic-back-mark .logo { width: 24px; height: 24px; }
/* Visor 3D con canto: anverso y reverso separados y capas entre medias */
.tilt-ov.thick .tilt-face.front { transform: translateZ(2.4px); }
.tilt-ov.thick .tilt-face.back { transform: rotateY(180deg) translateZ(2.4px); }
.tilt-edge { position: absolute; inset: 0; border-radius: 22px; background: #cfcadf; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tilt-ov.real .tilt-edge { border-radius: 18px; background: #e6e3ee; }
.tilt-face .lic-real { margin: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }

/* ---------- Réplica digital de la licencia física (estilo de cada federación) ---------- */
.lic-rep {
  --r-text: #14161c;
  position: relative; display: flex; flex-direction: column; aspect-ratio: 1.586; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: var(--r3); color: var(--r-text); text-align: left; margin-bottom: var(--s4);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 10px 28px -12px rgba(0, 0, 0, .45);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
.lic-rep .lic-guil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--r1); opacity: .13; }
.rep-target { position: absolute; z-index: -1; right: -14%; top: 8%; width: 62%; color: var(--r1); opacity: .09; }
.rep-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px 7px; border-bottom: 2px solid var(--r1); }
.rep-head.thin { padding: 7px 11px; justify-content: space-between; font-size: 11px; color: var(--r1); }
.rep-logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.rep-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rep-org { flex: 1; min-width: 0; line-height: 1.12; }
.rep-org small { display: block; font-size: 7px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--r1); }
.rep-org b { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-season { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--r1); border-radius: 99px; padding: 2px 8px; }
.rep-body { flex: 1; display: flex; gap: 11px; padding: 8px 11px 4px; min-height: 0; }
/* La foto ocupa el alto del cuerpo (nunca se sale sobre la banda ni tapa los datos) */
.rep-photos { position: relative; height: 100%; aspect-ratio: 3 / 4; flex: none; }
.rep-photo { display: block; height: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #e9ecf1;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .22); }
.rep-body { overflow: hidden; padding-bottom: 7px; }
.rep-fields.three { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Logo de la RFETA abajo a la derecha, sobre la banda */
.rep-rfeta-badge { position: absolute; right: 9px; bottom: 7px; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--r1), 0 2px 6px rgba(0, 0, 0, .25); }
.rep-rfeta-badge img { width: 76%; height: 76%; object-fit: contain; }
.rep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-photo svg, .rep-ghost svg, .id-guide-ph svg { width: 100%; height: 100%; fill: #b9c0cc; }
.rep-ghost { position: absolute; right: -16%; bottom: -6%; width: 38%; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; opacity: .28; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.rep-ghost img { width: 100%; height: 100%; object-fit: cover; }
.rep-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0; align-content: start; }
.rep-fields.three { grid-template-columns: repeat(3, 1fr); padding: 8px 11px 2px; flex: none; }
.rep-fields div { min-width: 0; }
.rep-fields .wide { grid-column: 1 / -1; }
.rep-fields dt { font-size: 6.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--r1); }
.rep-fields dd { margin: 0; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .01em; }
.rep-fields .name dd { font-size: 12.5px; font-weight: 800; white-space: normal; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rep-fields .pills { display: flex; gap: 5px; margin-top: 1px; }
.rep-fields .pills span { font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
  color: var(--r1); background: color-mix(in srgb, var(--r1) 12%, transparent); }
.rep-foot { display: flex; align-items: center; gap: 14px; padding: 6px 11px; padding-right: 64px; background: var(--r1); color: #fff; }
.rep-foot span { line-height: 1.1; }
.rep-foot small { display: block; font-size: 6.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.rep-foot b { font-size: 10.5px; font-weight: 700; }
.rep-rfeta { height: 18px; margin-left: auto; filter: brightness(0) invert(1); opacity: .9; }
.rep-seal { position: absolute; right: 8px; bottom: 6px; width: 54px; height: 54px; color: var(--r1); background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(0, 0, 0, .25); }
/* Reverso */
.rep-extra { padding: 2px 11px; font-size: 7.5px; line-height: 1.35; color: #4a4f5c; overflow: hidden; flex: 1; min-height: 0; }
.rep-extra p { margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-backfoot { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: end; padding: 2px 11px 4px; }
.rep-contact { grid-column: 1 / -1; font-size: 7px; color: #4a4f5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-sign { height: 28px; border-bottom: 1px solid color-mix(in srgb, var(--r1) 50%, #999); position: relative; }
.rep-sign span { position: absolute; left: 0; top: 0; font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--r1); }
.rep-sign i { position: absolute; left: 10px; bottom: 1px; font: italic 600 15px/1 "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; color: #1c2a5c; white-space: nowrap; transform: rotate(-4deg); }
.rep-logos { display: flex; gap: 6px; }
.rep-logos img { height: 24px; object-fit: contain; }
.rep-mrz { padding: 5px 11px 7px; background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); font: 600 9.5px/1.35 "OCR B", "OCR-B", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .18em; color: #1b1d22; white-space: nowrap; overflow: hidden; }
.tilt-face .lic-rep { margin: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.tilt-ov.real .tilt-edge { border-radius: 14px; background: #d9dde4; }
/* Guía de la foto de carné */
.id-guide { display: flex; justify-content: center; margin: 4px 0 10px; }
.id-guide-ph { width: 96px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.id-guide-ph img { width: 100%; height: 100%; object-fit: cover; }
.crop-guide { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: .35; pointer-events: none; }
/* Reverso de la digital (tarjeta de arquero, compartible) */
.lic-back3 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 6px; }
.lic-back-code small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.lic-back-code b { font: 700 22px ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.lic-back-rows { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.lic-back-rows span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-back-rows img { width: 20px; height: 20px; border-radius: 5px; background: #fff; object-fit: contain; flex: none; }
.lic-back-rows .i { width: 16px; height: 16px; flex: none; }
.status .i { width: 12px; height: 12px; stroke-width: 3; }
.up-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; }
.up-card .up-ic { width: 40px; height: 40px; color: var(--accent); stroke-width: 1.5; }
.up-card p { margin: 0 0 10px; }

/* ---------- Leyendo la licencia (OCR) ---------- */
.ocr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
.ocr-scan { position: relative; width: 190px; aspect-ratio: 1.586; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface), var(--surface-2)); box-shadow: var(--raise); }
.ocr-scan::before { content: ''; position: absolute; inset: 14px 16px; background: repeating-linear-gradient(180deg, var(--line) 0 5px, transparent 5px 13px); opacity: .9; }
.ocr-scan i { position: absolute; left: 0; right: 0; height: 26%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 45%, transparent), transparent);
  animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: -26%; } to { top: 100%; } }
.ocr-bar { width: 100%; height: 8px; border-radius: 99px; background: var(--surface-2); box-shadow: var(--well); overflow: hidden; }
.ocr-bar i { display: block; height: 100%; width: 3%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-hi), var(--brand)); transition: width .3s; }
.ocr p { margin: 0; font-size: 14px; }
/* Marcas del formulario de revisión */
.rd { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; border-radius: 99px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.rd.ok { background: var(--tint-green); color: var(--good); }
.rd.chk { background: var(--tint-yellow); color: var(--trend); }
.rd.no { background: var(--surface-2); color: var(--muted); }
.orig-link { display: block; margin: 10px auto 0; font-size: 13px; }

/* ---------- Tema «Mi licencia»: muestras de color y pasos de subida ---------- */
.pal-swatches { display: inline-flex; flex: none; }
.pal-swatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 2px 4px rgba(0, 0, 0, .2); }
.pal-swatches i + i { margin-left: -6px; }
.pal-swatches.big i { width: 40px; height: 40px; }
.pal-swatches.big i + i { margin-left: -10px; }
.pal-card { display: flex; align-items: center; gap: 12px; }
.pal-preview { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 18px; background: var(--c); margin-bottom: 10px; }
.pal-mock { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--b); }
.pal-mock i { width: 60%; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .7); }
.pal-mock b { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .25); }
.pal-mock span { align-self: flex-end; width: 34px; height: 34px; border-radius: 50%; background: var(--a); margin-top: -2px; }
.up-steps { display: flex; gap: 6px; margin-bottom: 12px; }
.up-steps span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 6px 4px; border-radius: 99px; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.up-steps span .i { width: 14px; height: 14px; stroke-width: 2.6; }
.up-steps .done { color: var(--good); }
.up-steps .cur { background: var(--brand); color: #fff; }

/* ---------- Registro: dos apartados ---------- */
.seg-main { padding: 5px; margin-bottom: 16px; }
.seg-main button { padding: 10px 4px; font-size: 15px; }
.top-icons { display: flex; justify-content: flex-end; }
.top-icons .icon-btn { padding: 6px; }
.top-icons .icon-btn .i { width: 24px; height: 24px; }

/* =====================================================================
   Modo tiro: pantalla completa en índigo, sin barras. Solo la diana, los botones para puntuar y «atrás».
   Al terminar la tirada aparece la tablilla.
   ===================================================================== */
body.focus { background: radial-gradient(120% 70% at 50% 0%, var(--pal-ink3) 0%, var(--pal-ink) 48%, var(--pal-deep) 100%) fixed; color: #f5f3fa; }
body.focus .topbar, body.focus .tabbar { display: none; }
body.focus .sheet-body { color: var(--text); }
body.focus main { padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 24px); }
body.focus .toast { bottom: calc(var(--safe-b) + 24px); background: #f5f3fa; color: var(--pal-ink); }
.shoot { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 40px); }
.shoot-top { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; }
.shoot-back {
  width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #f5f3fa;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.shoot-back:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.shoot-title { line-height: 1.05; }
.shoot-title span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(245, 243, 250, .6); }
.shoot-title b { font: 700 30px var(--font-round); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.shoot-title small { font-size: 17px; font-weight: 600; color: rgba(245, 243, 250, .55); }
.shoot-total { text-align: right; line-height: 1; }
.shoot-total b { display: block; font: 700 34px var(--font-round); color: var(--pal-vivid); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.shoot-total span { font-size: 12px; font-weight: 600; color: rgba(245, 243, 250, .6); }
.shoot .entry-progress { margin: 0; }
.shoot .entry-progress i { background: rgba(255, 255, 255, .12); }
.shoot .entry-progress i.done { background: rgba(245, 243, 250, .7); }
.shoot .entry-progress i.part { background: color-mix(in srgb, var(--pal-vivid) 45%, transparent); }
.shoot .entry-progress i.cur { background: var(--pal-vivid); }
.shoot-target { position: relative; margin: 0 -6px; }
.shoot-target .target-wrap { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.shoot .fab { background: rgba(255, 255, 255, .12); color: #f5f3fa; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); right: 6px; top: 6px; }
.shoot-dist { color: rgba(245, 243, 250, .75); justify-content: center; }
.shoot-end { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shoot-end .slots { margin: 0; justify-content: flex-start; flex-wrap: wrap; }
.shoot .slot-big { width: 58px; height: 58px; font-size: 22px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
.shoot .slot-big.empty { border-color: rgba(245, 243, 250, .22); color: rgba(245, 243, 250, .45); box-shadow: none; }
.shoot .slot-big.next { border-color: var(--pal-vivid); color: #f5f3fa; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pal-vivid) 22%, transparent); }
.shoot-endtotal { text-align: right; line-height: 1; flex: none; }
.shoot-endtotal b { display: block; font: 700 30px var(--font-round); font-variant-numeric: tabular-nums; }
.shoot-endtotal span { font-size: 11.5px; color: rgba(245, 243, 250, .6); }
.shoot .prev-strip { background: rgba(255, 255, 255, .07); color: #f5f3fa; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); margin: 0; }
.shoot .prev-strip .muted { color: rgba(245, 243, 250, .6); }
.shoot .prev-strip.pop { background: rgba(127, 180, 138, .22); }
.shoot .keypad { gap: 8px; }
.shoot .keypad button { padding: 17px 0; font-size: 21px; border-radius: 14px; }
.shoot-undo { align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: rgba(245, 243, 250, .7); font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 99px; }
.shoot-undo:active { background: rgba(255, 255, 255, .08); }
.shoot-undo .i { width: 18px; height: 18px; }
.shoot-review { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.shoot-review span { font-size: 13px; color: rgba(245, 243, 250, .65); }
/* Tirada completa: la tablilla, como papel sobre la mesa */
.shoot-done { text-align: center; padding: 18px 0 4px; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.shoot-kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pal-vivid); }
.shoot-score { font: 700 72px/1 var(--font-round); letter-spacing: -.03em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.shoot-score small { font-size: 22px; color: rgba(245, 243, 250, .55); font-weight: 600; }
.shoot-sub { font-size: 14px; color: rgba(245, 243, 250, .65); }
.shoot-sheet { background: var(--surface); color: var(--text); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); }
.shoot-hint { text-align: center; font-size: 13px; color: rgba(245, 243, 250, .55); margin: 0; }
.shoot > .btn.primary { margin-top: auto; }

/* Técnica: un número grande y un botón enorme para sumar la entrada */
.shoot.tech { justify-content: space-between; }
.tech-count { text-align: center; margin-top: 4vh; }
.tech-count b { display: block; font: 700 min(30vw, 120px)/1 var(--font-round); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tech-count span { font-size: 15px; font-weight: 600; color: rgba(245, 243, 250, .6); letter-spacing: .04em; }
.tech-count.bump b { animation: bump .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--pal-vivid); } }
.tech-plus {
  align-self: center; width: min(62vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 0; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 30%, var(--pal-hi2), var(--pal-vivid) 40%, var(--pal-brand) 75%, var(--pal-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -6px 12px rgba(0, 0, 0, .25), 0 0 0 10px color-mix(in srgb, var(--pal-vivid) 12%, transparent), 0 24px 40px -14px color-mix(in srgb, var(--pal-brand) 80%, transparent);
  transition: transform .08s, box-shadow .12s;
}
.tech-plus:active { transform: translateY(3px) scale(.98); box-shadow: inset 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 10px color-mix(in srgb, var(--pal-vivid) 12%, transparent); }
.tech-plus span { font: 700 64px/1 var(--font-round); letter-spacing: -.03em; }
.tech-plus small { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.tech-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.tech-small {
  border: 0; border-radius: 18px; padding: 16px 0; font: 700 22px var(--font-round); color: #f5f3fa;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px -8px rgba(0, 0, 0, .6);
}
.tech-small:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
.exit-actions { display: flex; flex-direction: column; gap: 10px; }

/* =====================================================================
   v5 — estética iOS: fondos agrupados, superficies planas, sin degradados en la interfaz.
   Lo tocable se reconoce por el color de acento (naranja) y por atenuarse al pulsar.
   ===================================================================== */
:root {
  --bg: #f2f2f7; --surface: #ffffff; --surface-hi: #ffffff; --surface-2: #e9e9ee; --face: var(--surface);
  --text: #000000; --muted: #8a8a8e; --line: rgba(60, 60, 67, .16);
  --bar-bg: rgba(249, 249, 251, .82);
  --shadow: 0 0 #0000; --raise: 0 0 #0000; --raise-hover: 0 0 #0000; --press: 0 0 #0000; --well: 0 0 #0000;
  --fill: rgba(118, 118, 128, .12);
  --ios-green: #34c759; --ios-blue: #007aff; --ios-orange: #ff9500; --ios-red: #ff3b30; --ios-purple: #af52de; --ios-teal: #30b0c7; --ios-indigo: #5856d6; --ios-gray: #8e8e93;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --surface-hi: #1c1c1e; --surface-2: #2c2c2e; --text: #ffffff; --muted: #8e8e93; --line: rgba(84, 84, 88, .55);
    --bar-bg: rgba(22, 22, 24, .82); --fill: rgba(118, 118, 128, .24);
    --shadow: 0 0 #0000; --raise: 0 0 #0000; --raise-hover: 0 0 #0000; --press: 0 0 #0000; --well: 0 0 #0000;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-hi: #1c1c1e; --surface-2: #2c2c2e; --text: #ffffff; --muted: #8e8e93; --line: rgba(84, 84, 88, .55);
  --bar-bg: rgba(22, 22, 24, .82); --fill: rgba(118, 118, 128, .24);
  --shadow: 0 0 #0000; --raise: 0 0 #0000; --raise-hover: 0 0 #0000; --press: 0 0 #0000; --well: 0 0 #0000;
}
body { font-size: 16px; letter-spacing: -.01em; }

/* Títulos y cabeceras de sección */
.large-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 2px 4px 12px; }
h2 { font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--muted); margin: 24px 16px 7px; }
.hint { font-size: 13px; color: var(--muted); margin: 7px 16px; }

/* Barra superior: material translúcido */
.topbar { background: var(--bar-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid transparent; }
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar h1 { font-size: 17px; font-weight: 600; }
.icon-btn, .top-link { color: var(--accent); }
.top-link { font-weight: 400; font-size: 17px; }

/* Tarjetas y listas agrupadas */
.card, .week-nav, .tile { background: var(--surface); border: 0; border-radius: 12px; box-shadow: none; }
.card.notice { background: var(--tint-yellow); }
.list-item { min-height: 46px; padding: 10px 16px; border-bottom: .5px solid var(--line); }
.list-item:active:not(.static), .card .list-item:active:not(.static) { background: var(--surface-2); box-shadow: none; }
.list-item .chev { color: #c4c4c7; opacity: 1; width: 16px; height: 16px; stroke-width: 2.4; }
.list-item.add { color: var(--accent); font-weight: 400; }
/* Iconos tipo Ajustes: cuadrito de color con el glifo en blanco */
.ic-bubble { width: 30px; height: 30px; border-radius: 7px; background: var(--ios-gray); color: #fff; box-shadow: none; }
.ic-bubble .i { width: 18px; height: 18px; stroke-width: 2; }
.card .list-item:nth-child(6n+1) .ic-bubble { background: var(--ios-orange); }
.card .list-item:nth-child(6n+2) .ic-bubble { background: var(--ios-blue); }
.card .list-item:nth-child(6n+3) .ic-bubble { background: var(--ios-green); }
.card .list-item:nth-child(6n+4) .ic-bubble { background: var(--ios-purple); }
.card .list-item:nth-child(6n+5) .ic-bubble { background: var(--ios-red); }
.card .list-item:nth-child(6n+6) .ic-bubble { background: var(--ios-teal); }
.ic-bubble.good { background: var(--ios-green) !important; color: #fff; }

/* Botones iOS: relleno (acento), gris o teñido. Al pulsar se atenúan */
.btn, .card .btn:not(.primary):not(.danger-solid), .sheet .btn:not(.primary):not(.danger-solid) {
  background: var(--fill); color: var(--accent); box-shadow: none; border: 0; border-radius: 12px; min-height: 44px; font-weight: 600; transition: opacity .12s;
}
.btn.primary, .btn.blue, .btn.danger-solid { background: var(--accent); color: #fff; box-shadow: none; }
.btn.danger-solid { background: var(--ios-red); }
.btn.tinted { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--accent) !important; }
.btn.white { background: #fff; color: #000; }
.btn.danger { color: var(--ios-red) !important; }
.btn.lg { min-height: 50px; font-size: 17px; }
.btn:active, .btn.primary:active, .btn.blue:active, .btn.danger-solid:active { transform: none; box-shadow: none; opacity: .55; }
.icon-round { background: var(--fill); color: var(--accent); box-shadow: none; }
.undo-btn { background: var(--fill) !important; box-shadow: none !important; }

/* Control segmentado */
.seg { background: var(--fill); border-radius: 9px; padding: 2px; box-shadow: none; }
.seg button { border-radius: 7px; color: var(--text); font-weight: 500; font-size: 13.5px; padding: 6px 2px; }
.seg button.on { background: #fff; color: #000; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
:root[data-theme="dark"] .seg button.on { background: #636366; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: #636366; color: #fff; } }
.seg-main button { padding: 8px 4px; font-size: 14px; }

/* Fichas y elegidos */
.tog, .sex-seg span { background: var(--fill); color: var(--text); box-shadow: none; border: 0; font-weight: 500; }
.tog.on, .tog:has(input:checked), .sex-seg input:checked + span, .cal-day.sel { background: var(--accent); color: #fff; box-shadow: none; }
.pick-card.on, .type-card.on, .kit-card.on { box-shadow: 0 0 0 2px var(--accent); }
.skin-pick.on .lic-card { outline: 2.5px solid var(--accent); }
.radio-item.on .tick { background: var(--accent); border-color: var(--accent); }

/* Tarjetas tocables: planas, se atenúan al pulsar */
.pick-card, .hub-card, .kit-card, .type-card, .quick button, .link-tile, .news-card, .logo-tile, .ach, .more-rounds summary, .hub-resume, .prev-strip, .stepper button, .sq-btn, .fab, .round-btn {
  background: var(--surface); box-shadow: none; border: 0; transition: opacity .12s;
}
:is(.pick-card, .hub-card, .kit-card, .type-card, .quick button, .link-tile, .news-card, .logo-tile, .more-rounds summary, .hub-resume, .stepper button, .sq-btn, .fab, .round-btn):active { transform: none; box-shadow: none; opacity: .55; }
.pick-card.manual { background: transparent; border: 1.5px dashed var(--line); }
.pick-card.on { box-shadow: 0 0 0 2px var(--accent); }
.pick-search, .field input, .field select, .field textarea, .inline-field input, .mark-table input { background-color: var(--surface); box-shadow: none; border: 0; border-radius: 10px; }
.card .field input, .card .field select, .card .field textarea, .card .inline-field input { background-color: var(--fill); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.stepper { background: var(--fill); border: 0; box-shadow: none; }
.stepper button { color: var(--accent); }

/* Centro de entrenamiento, portada y bloques: planos */
.hero, .soon-hero { background: var(--surface); color: var(--text); box-shadow: none; }
.hero-date, .hero .stat span { color: var(--muted); }
.hero .stat { background: var(--fill); }
.soon-hero p { color: var(--muted); }
.hub-card { border-radius: 14px; }
.hub-card.big { background: var(--accent); color: #fff; }
.hub-card.big small { color: rgba(255, 255, 255, .85); }
.hub-ic, .hub-card.big .hub-ic { background: var(--accent); color: #fff; box-shadow: none; border-radius: 10px; width: 40px; height: 40px; }
.hub-card.big .hub-ic { background: rgba(255, 255, 255, .22); }
.hub-ic.blue { background: var(--ios-blue); color: #fff; }
.hub-ic.red { background: var(--ios-indigo); color: #fff; }
.home-hero, :root[data-theme="dark"] .home-hero { background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-hero { background: transparent; } }
.sq-btn { color: var(--accent); width: 40px; height: 40px; border-radius: 50%; background: var(--surface); }
.sq-btn .i { width: 22px; height: 22px; }
.tile { border-radius: 14px; padding: 13px 14px 12px; }
.tile b { font-weight: 700; }
.t-yellow .i { color: var(--ios-orange); } .t-blue .i { color: var(--ios-blue); } .t-red .i { color: var(--accent); } .t-green .i { color: var(--ios-green); }
.quick .qi, .link-tile .qi, .feature .qi { background: var(--fill) !important; color: var(--accent); }
.avatar { box-shadow: none; }
.avatar-edit .pen { background: var(--accent); box-shadow: 0 0 0 2.5px var(--bg); }
.lic-hint, .lic-switch { color: var(--muted); font-weight: 500; }
.lic-arrow { background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); color: var(--text); width: 34px; height: 34px; margin-top: -17px; }
.lic-arrow.right { right: -6px; } .lic-arrow.left { left: -6px; }
.lic-dots i.on { background: var(--text); }
.kit-card-count { color: var(--muted); font-weight: 500; }

/* Listas de datos: la etiqueta no crece y el valor se ajusta a la derecha */
.list-item.static > .muted.grow { flex: none; }
.list-item.static > .right { flex: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* Interruptor iOS */
.ios-switch { position: relative; width: 51px; height: 31px; flex: none; border-radius: 99px; background: var(--fill); transition: background .2s; }
.ios-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .2s; }
.ios-switch.on { background: var(--ios-green); }
.ios-switch.on::after { transform: translateX(20px); }

/* Barra de pestañas: pegada abajo, translúcida; entra desde abajo y se esconde al bajar */
.tabbar {
  left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: 0; padding: 6px 0 calc(var(--safe-b) + 4px);
  background: var(--bar-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--line); box-shadow: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1); animation: tab-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.tabbar.hide { transform: translateY(110%); }
@keyframes tab-in { from { transform: translateY(110%); } }
.tabbar button { color: var(--ios-gray); font-weight: 500; font-size: 10px; gap: 2px; }
.tabbar button.active { color: var(--accent); }
.tabbar button.active:not(.tab-main)::after { display: none; }
.tabbar .ti .i { width: 26px; height: 26px; stroke-width: 1.9; }
.tabbar .tab-main { color: var(--ios-gray); }
.tabbar .tab-main .ti { width: 30px; height: 30px; margin: -2px 0 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: none; display: grid; place-items: center; }
.tabbar .tab-main .ti .i { width: 20px; height: 20px; stroke-width: 2.6; }
.tabbar .tab-main.active { color: var(--accent); }
main { padding-bottom: calc(96px + var(--safe-b)); }
.toast { bottom: calc(92px + var(--safe-b)); background: rgba(30, 30, 32, .92); color: #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Hojas */
.sheet { background: rgba(0, 0, 0, .35); }
.sheet-body { background: var(--bg); border-radius: 12px 12px 0 0; box-shadow: none; }
.sheet-grab { background: rgba(60, 60, 67, .3); width: 36px; }
.sheet-title h3 { font-size: 17px; font-weight: 600; }

/* Bienvenida y carga: planas */
#splash { background: var(--charcoal); }
.ob.navy { background: var(--charcoal); }
.ob.navy .btn:not(.primary) { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.ob-steps i.on { background: var(--accent); }

/* Modo tiro: fondo plano muy oscuro, todo plano */
body.focus { background: #0d0b14; }
.shoot-back, .tech-small { background: rgba(255, 255, 255, .1); box-shadow: none; }
.shoot-back:active, .tech-small:active { box-shadow: none; opacity: .6; transform: none; }
.shoot-target .target-wrap { filter: none; }
.shoot .slot-big { box-shadow: none; }
.shoot .fab { background: rgba(255, 255, 255, .12); box-shadow: none; }
.shoot .prev-strip { background: rgba(255, 255, 255, .07); box-shadow: none; }
.keypad button, .shoot .keypad button { box-shadow: none; border-radius: 12px; }
.keypad button:active { transform: none; box-shadow: none; opacity: .6; }
.keypad .v-white { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tech-plus { background: var(--pal-vivid); box-shadow: 0 0 0 6px #0d0b14, 0 0 0 8px rgba(255, 255, 255, .28); }
.tech-plus:active { transform: scale(.97); box-shadow: 0 0 0 6px #0d0b14, 0 0 0 8px rgba(255, 255, 255, .28); opacity: .85; }
.shoot-sheet { box-shadow: none; }

/* =====================================================================
   v6 — «Portal del federado»: oscuro, granate y relieve suave (luz arriba a la izquierda).
   Lo tocable flota (.raised); al pulsarlo o elegirlo se hunde (.pressable:active, .is-selected).
   Sustituye a los tokens de v5. El selector :root:not(#_) gana a los temas claro/oscuro anteriores;
   el tema «Mi federación» (palette.js) sigue pudiendo cambiar el acento porque escribe en línea.
   ===================================================================== */
:root:not(#_) {
  --pal-brand: #be1828; --pal-vivid: #d42a3a; --pal-hi2: #e04654; --pal-lo: #7a0e1a;
  --pal-link: #ef5363; --pal-dlink: #ef5363;
  --pal-ink: #18181b; --pal-ink2: #27272a; --pal-ink3: #3f3f46; --pal-deep: #09090b; --pal-deeper: #050506;
  --bg: #09090b; --surface: #18181b; --surface-hi: #1f1f23; --surface-2: #27272a; --sunk-bg: #111114;
  --text: #f4f4f5; --muted: #a1a1aa; --line: rgba(255, 255, 255, .07);
  --accent: var(--pal-brand); --accent-ink: #fff; --accent-soft: color-mix(in srgb, var(--pal-brand) 18%, transparent);
  --brand: var(--pal-brand); --brand-hi: var(--pal-hi2); --brand-lo: var(--pal-lo); --link: var(--pal-link);
  --ok: #22c55e; --good: #22c55e; --danger: #ef4444; --trend: #f59e0b;
  --fill: rgba(255, 255, 255, .06); --bar-bg: rgba(9, 9, 11, .84); --tab-bg: #18181b;
  --tint-yellow: #261f0e; --tint-blue: #1b1f29; --tint-red: #2a1116; --tint-green: #10241a; --tint-purple: #211b2c;
  --grad-accent: linear-gradient(160deg, var(--pal-brand), var(--pal-lo));
  --elev: 0 6px 14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06), -2px -2px 6px rgba(255, 255, 255, .03);
  --elev-soft: 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  --elev-accent: 0 8px 18px rgba(0, 0, 0, .6), 0 4px 16px color-mix(in srgb, var(--pal-brand) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .25);
  --sunk: inset 0 3px 8px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .05);
  --ease: 200ms cubic-bezier(.4, 0, .2, 1);
  --shadow: none; --raise: var(--elev); --raise-hover: var(--elev); --press: var(--sunk); --well: var(--sunk); --face: var(--surface-2);
  --font-round: Inter, -apple-system, "SF Pro Display", system-ui, sans-serif;
  --r: 16px; --r-sm: 12px;
  color-scheme: dark;
}
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -.011em; background: var(--bg); color: var(--text); }

/* Transición común */
button, .btn, .card, .tile, .kpi, .tog, .list-item, .slot-big, .progress > i, .slot > i, a {
  transition: color var(--ease), background-color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

/* ---------- Relieve: las dos clases y a quién se aplican ---------- */
.raised, .btn, .card .btn:not(.primary):not(.danger-solid), .sheet .btn:not(.primary):not(.danger-solid),
.quick button, .stepper button, .icon-round, .sq-btn, .round-btn, .fab, .hub-card, .type-card, .kit-card, .pick-card,
.link-tile, .news-card, .hub-resume, .more-rounds summary, .tog, .logo-tile, .tech-small, .shoot-back {
  background-color: var(--surface-2); color: var(--text); border: 0; box-shadow: var(--elev); opacity: 1;
}
.btn, .card .btn:not(.primary):not(.danger-solid), .sheet .btn:not(.primary):not(.danger-solid) { background-image: none; border-radius: 12px; }
:is(.pressable, .btn, .quick button, .stepper button, .icon-round, .sq-btn, .round-btn, .fab, .hub-card, .type-card, .kit-card, .pick-card,
  .link-tile, .news-card, .hub-resume, .more-rounds summary, .tog, .logo-tile, .tech-small, .shoot-back):active:not(:disabled),
.is-selected {
  transform: translateY(2px); box-shadow: var(--sunk); opacity: 1;
}
.btn.primary, .btn.blue, .btn.danger-solid, .hub-card.big, .tabbar .tab-main .ti, .tech-plus {
  background: var(--grad-accent); color: #fff; box-shadow: var(--elev-accent);
}
:is(.btn.primary, .btn.blue, .btn.danger-solid, .hub-card.big):active, .tabbar .tab-main:active .ti, .tech-plus:active {
  transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .06); opacity: 1;
}
.btn.tinted { background: var(--surface-2) !important; color: var(--link) !important; }
.btn.danger { color: var(--danger) !important; }
.btn.white { background: #f4f4f5; color: #09090b; }
.btn.ghost { box-shadow: none !important; }
.undo-btn { background: var(--surface-2) !important; border: 0 !important; box-shadow: var(--elev) !important; }
a, .linkish, .top-link, .icon-btn, .lic-hint, .list-item.add, .see-all { color: var(--link); }

/* ---------- Tipografía y encabezados ---------- */
.large-title { font: 700 30px/1.15 var(--font-round); letter-spacing: -.025em; margin: 4px 4px 2px; }
.page-sub { margin: 0 4px 16px; color: var(--muted); font-size: 15px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.large-title + :not(.page-sub) { margin-top: 12px; }
h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 24px 4px 8px; }
h2.day-title { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 4px 8px; }
.sec-head h2 { margin: 0; }
.see-all { border: 0; background: none; padding: 4px 0; font-size: 14px; font-weight: 600; box-shadow: none !important; }
.see-all:active { opacity: .6; }
.hint { margin: 7px 4px; }
.topbar { background: var(--bar-bg); }
.topbar h1 { font-weight: 600; }

/* ---------- Superficies ---------- */
.card, .week-nav { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.card.notice { background: var(--tint-red); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.tile, .stat, .kpi { background: var(--surface) !important; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev-soft); }
.stat { background: var(--surface-2) !important; }
.t-yellow .i { color: var(--gold); } .t-blue .i { color: var(--muted); } .t-red .i { color: var(--accent); } .t-green .i { color: var(--ok); }
.hero, .soon-hero { background: var(--grad-accent); color: #fff; box-shadow: var(--elev-accent); border: 0; }
.hero-date, .hero .stat span, .soon-hero p { color: rgba(255, 255, 255, .75); }
.hero .stat { background: rgba(0, 0, 0, .18) !important; border: 0; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }

/* Listas: sin sombras por fila (rinden mal en listas largas) */
.list-item { border-bottom: 1px solid var(--line); }
.list-item:active:not(.static), .card .list-item:active:not(.static) { background: var(--sunk-bg); box-shadow: none; }
.list-item .chev { color: var(--muted); opacity: .6; }
.ic-bubble, .card .list-item:nth-child(n) .ic-bubble { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--text); box-shadow: var(--elev-soft); }
.ic-bubble.good, .card .list-item:nth-child(n) .ic-bubble.good { background: color-mix(in srgb, var(--ok) 18%, var(--surface-2)) !important; color: var(--ok); }
.badge { background: var(--surface-2); color: var(--text); }
.badge.comp { background: var(--accent-soft); color: var(--link); }
.badge.ok { display: inline-flex; align-items: center; gap: 3px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.ok .i { width: 12px; height: 12px; stroke-width: 3; }

/* ---------- Campos y zonas hundidas ---------- */
.seg, .stepper, .field input, .field select, .field textarea, .pick-search, .inline-field input, .mark-table input,
.card .field input, .card .field select, .card .field textarea, .card .inline-field input {
  background-color: var(--sunk-bg); border: 0; box-shadow: var(--sunk); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: var(--sunk), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }

/* Control segmentado: pista hundida; la opción elegida, hundida un poco más y en granate */
.seg { border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { border-radius: 9px; color: var(--muted); font-weight: 600; background: transparent; box-shadow: none; }
.seg button:not(.on) { background: var(--surface-2); box-shadow: var(--elev-soft); color: var(--text); }
:root:not(#_) .seg button.on { background: #0b0b0d; color: var(--link); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .05); transform: translateY(1px); }
.seg button:not(.on):active { transform: translateY(2px); box-shadow: var(--sunk); }

/* Fichas y tarjetas elegidas: hundidas, con un aro granate fino */
.tog.on, .tog:has(input:checked), .sex-seg input:checked + span, .type-card.on, .pick-card.on, .kit-card.on {
  background: var(--sunk-bg); color: var(--text); transform: translateY(2px);
  box-shadow: var(--sunk), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent);
}
.tog.on, .tog:has(input:checked) { color: var(--link); }
.sex-seg span { background: var(--surface-2); box-shadow: var(--elev-soft); }
.cal-day.sel { background: var(--grad-accent); color: #fff; box-shadow: var(--elev-accent); }
.radio-item.on .tick { background: var(--accent); border-color: var(--accent); }
.ios-switch { background: var(--sunk-bg); box-shadow: var(--sunk); }
.ios-switch.on { background: var(--ok); }

/* Contador − / + */
.stepper { border-radius: 16px; padding: 8px; }
.stepper button { border-radius: 14px; color: var(--text); }
.stepper button:disabled { opacity: .35; box-shadow: none; }

/* Barra de progreso: ranura hundida con el relleno encima */
.progress, .slot { display: block; height: 10px; border-radius: 99px; background: var(--sunk-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .05); overflow: hidden; margin-top: 8px; }
.progress > i, .slot > i { display: block; height: 100%; border-radius: 99px; background: var(--grad-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.list-item .ic-bubble.good ~ .grow .progress > i, .min-row.done .slot > i { background: linear-gradient(180deg, #34d36b, #16a34a); }
.entry-progress i { background: var(--sunk-bg); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.entry-progress i.done { background: var(--muted); box-shadow: none; }
.entry-progress i.cur, .shoot .entry-progress i.cur { background: var(--accent); }

/* ---------- Portada ---------- */
.home-hero { background: transparent; }
.quick.six { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick button { border-radius: 16px; font-weight: 600; padding: 14px 4px 12px; }
.quick .qi, .link-tile .qi, .feature .qi { background: var(--sunk-bg) !important; color: var(--link); box-shadow: var(--sunk); border-radius: 12px; }
.week-nav .icon-round { width: 38px; height: 38px; }
.week-nav .icon-round:disabled { opacity: .3; box-shadow: none; }
.sq-btn { border-radius: 14px; }
.avatar { background: var(--surface-2); color: var(--text); box-shadow: 0 0 0 3px var(--bg), var(--elev-soft); }
.avatar-edit .pen { background: var(--accent); color: #fff; }

/* Estados vacíos: título + frase */
.empty { padding: 26px 18px; }
.empty-title { display: block; color: var(--text); font-size: 15px; font-weight: 600; margin-top: 8px; }
.empty p { font-size: 14px; color: var(--muted); margin: 4px auto 0; max-width: 300px; }

/* ---------- Centro de entrenamiento ---------- */
.hub-card { border-radius: 16px; }
.hub-card.big small { color: rgba(255, 255, 255, .8); }
.hub-ic, .hub-ic.blue, .hub-ic.red { background: var(--sunk-bg); color: var(--link); box-shadow: var(--sunk); border-radius: 12px; }
.hub-card.big .hub-ic { background: rgba(0, 0, 0, .22); color: #fff; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.type-card { border-radius: 16px; }
.type-card .ic-bubble { box-shadow: none; background: transparent; }

/* ---------- Barra inferior: pegada abajo; la pestaña activa, hundida ---------- */
.tabbar { background: var(--tab-bg); border-top: 1px solid var(--line); padding: 6px 6px calc(var(--safe-b) + 6px); gap: 4px; box-shadow: 0 -8px 20px rgba(0, 0, 0, .45); }
.tabbar button { color: var(--muted); border-radius: 12px; padding: 5px 0 4px; font-size: 10.5px; font-weight: 500; }
.tabbar button.active:not(.tab-main) { color: var(--text); background: var(--sunk-bg); box-shadow: var(--sunk); }
.tabbar button.active:not(.tab-main) .ti { color: var(--link); }
.tabbar .tab-main .ti { width: 40px; height: 40px; margin: -8px 0 0; border-radius: 13px; color: #fff; }
.tabbar .tab-main .ti .i { width: 22px; height: 22px; stroke-width: 2.6; }
.tabbar .tab-main.active { color: var(--text); }
.tabbar .tab-main.active .ti { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .06); }

/* ---------- Teclado de puntuación: teclas con borde inferior grueso (colores de la diana) ---------- */
.keypad button, .shoot .keypad button {
  border-radius: 12px; border: 0; border-bottom: 4px solid rgba(0, 0, 0, .38);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35); opacity: 1;
}
.keypad button:active, .shoot .keypad button:active {
  transform: translateY(3px); border-bottom-width: 1px; opacity: 1;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35);
}
.keypad .v-white { box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 #fff; border-bottom-color: #a1a1aa; }

/* Círculos de flecha: apuntada = elevada; la que toca = hundida con aro granate */
.slot-big:not(.empty) { border: 0; box-shadow: 0 6px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .2); }
.slot-big.empty { border: 2px dashed rgba(255, 255, 255, .14); }
.slot-big.next, .shoot .slot-big.next { background: var(--sunk-bg); border: 0; color: var(--text);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 2.5px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- Modo tiro ---------- */
body.focus { background: var(--bg); color: var(--text); }
.shoot-total b, .shoot-kicker { color: var(--link); }
.shoot .fab { background: var(--surface-2); box-shadow: var(--elev); }
.shoot .prev-strip { background: var(--surface); box-shadow: var(--elev-soft); }
.tech-plus { box-shadow: var(--elev-accent), 0 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- Hojas, avisos y carga ---------- */
.sheet { background: rgba(0, 0, 0, .6); }
.sheet-body { background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .6); }
.sheet-grab { background: rgba(255, 255, 255, .18); }
.toast { background: #27272a; color: var(--text); box-shadow: var(--elev); }
#splash, .ob.navy { background: radial-gradient(circle at 50% 30%, #2a0c12, var(--bg) 70%); }
.ob-steps i.on { background: var(--accent); }
.splash-name { color: #f4f4f5; }
.splash-sub { color: var(--muted); }

/* ---------- Licencia: mismo diseño, solo la sombra de objeto que flota ---------- */
.lic-card { box-shadow: 0 22px 40px -16px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .4); }
.lic-arrow { background: var(--surface-2); color: var(--text); box-shadow: var(--elev); }
.lic-dots i.on { background: var(--accent); }

/* ---------- Resultados y licencias ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { padding: 14px; }
.kpi b { display: block; font: 700 28px/1.1 var(--font-round); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-bottom: 4px; }
.filters .field { margin-bottom: 8px; }
.res-row { align-items: flex-start; }
.res-row .right-num, .res-row .chev { align-self: center; }
.res-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.min-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
.min-main { display: flex; flex-direction: column; gap: 3px; width: 100%; border: 0; padding: 0; background: none; color: inherit; text-align: left; box-shadow: none; }
.min-main:active { opacity: .7; }
.min-val { font-variant-numeric: tabular-nums; }
.min-row.done .min-val { color: var(--ok); }
.min-row .tog { align-self: flex-start; gap: 5px; font-size: 13px; padding: 6px 12px; }
.min-row .tog .i { width: 15px; height: 15px; }
.rank-cols { display: flex; gap: 14px; }
.table-wrap { overflow-x: auto; }
.season-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.seg-4 button { flex: 1 1 auto; min-width: 0; padding: 8px 4px; font-size: 12.5px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.season-table th, .season-table td { padding: 10px 5px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.season-table th:first-child, .season-table td:first-child { text-align: left; }
.season-table th { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.season-table tr:last-child td { border-bottom: 0; }
.season-card { display: block; width: 100%; text-align: left; padding: 16px; margin-bottom: 12px; border-radius: 16px; background: var(--surface) !important; color: var(--text); }
.season-card small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.season-name { font: 700 22px/1.2 var(--font-round); letter-spacing: -.02em; }
.season-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
.season-fields b { display: block; font-size: 14.5px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.season-card.ok { box-shadow: var(--elev), inset 3px 0 0 var(--accent); }
.badge.st-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.st-warn { background: color-mix(in srgb, var(--trend) 20%, transparent); color: var(--trend); }
.badge.st-bad { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.badge.st-past { background: var(--surface-2); color: var(--muted); }

/* Modo tiro: teclado en bandeja anclada abajo (sube al entrar) y triple vertical diana a diana */
.shoot.has-keys { padding-bottom: var(--tray-h, 200px); }
.shoot-keys {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px calc(6px + var(--safe-b));
  background: linear-gradient(180deg, #1c1c20, #141417); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.shoot-keys.enter { animation: tray-up .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes tray-up { from { transform: translateY(105%); } to { transform: none; } }
.shoot-keys .keypad { gap: 7px; }
.shoot-keys .keypad button { padding: 14px 0; font-size: 20px; }
.shoot-keys .shoot-undo { padding: 6px 14px; font-size: 14px; }
.shoot-keys .shoot-review { background: transparent; padding: 4px 2px; }
.shoot-target.zoomed { display: flex; justify-content: center; }
.shoot.has-keys .target-wrap svg:not(.triple) { width: auto; max-width: 100%; height: min(calc(100dvh - 480px - var(--safe-t) - var(--safe-b)), 100vw); min-height: 220px; aspect-ratio: 1; margin: 0 auto; }
.shoot.has-keys .shoot-end .slots { gap: 6px; }
.target-wrap svg.triple.spot { width: auto; height: min(calc(100dvh - 470px - var(--safe-t) - var(--safe-b)), 92vw); min-height: 220px; aspect-ratio: 1; max-width: 100%; }
.tri-mini { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(9, 9, 11, .72); box-shadow: var(--elev-soft); }
.tri-mini button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); padding: 0; font: 800 12px/1 var(--font-round); box-shadow: none; }
.tri-mini button:not(.hit) { background: radial-gradient(circle, #f6cd2b 0 34%, #e33b3b 35% 67%, #2a8bd8 68%); }
.tri-mini button.on { border: 3px solid #ef5363; transform: scale(1.15); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-brand) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .shoot-keys.enter { animation: none; } }

/* Arco 3D (Mi equipamiento): modelo real montado con las piezas elegidas */
.bow3d { position: relative; width: 100%; height: 420px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 30%, #2a2a31 0%, #141417 70%); box-shadow: var(--sunk); }
.bow3d > .bp { height: 100%; padding: 12px; }
.bow3d.bow3d-on > .bp { display: none; }
.bow3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.bow3d.loading::after { content: 'Montando tu arco…'; position: absolute; inset: auto 0 44%; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.bow3d-full { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(24, 24, 27, .8); color: var(--text); box-shadow: var(--elev-soft); }
.bow3d-full .i { width: 18px; height: 18px; }
.bow3d-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11.5px; color: var(--muted); pointer-events: none; }
.bow3d:not(.bow3d-on) .bow3d-hint { display: none; }
.bow3d.full { position: fixed; inset: 0; z-index: 200; height: 100dvh; border-radius: 0; }
.bow3d.full .bow3d-full { top: calc(10px + var(--safe-t)); }
body.bow3d-lock { overflow: hidden; }
/* Flecha 3D: arriba entera, abajo de cerca; solo rueda sobre sí misma */
.arrow3d { height: 300px; }
.arrow3d > .ap-svg { position: absolute; left: 12px; right: 12px; top: 40%; width: calc(100% - 24px); }
.arrow3d.bow3d-on > .ap-svg { display: none; }
.arrow3d.loading::after { content: 'Preparando tu flecha…'; }
.arrow3d.bow3d-on::before { content: ''; position: absolute; left: 12px; right: 12px; top: 30%; height: 1px; background: rgba(255, 255, 255, .08); pointer-events: none; z-index: 1; }

/* Portal de competiciones (datos de la RFETA) */
.kpis.six, .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis .kpi { padding: 12px 10px; }
.kpis .kpi b { font-size: 22px; }
.kpis .kpi span { font-size: 11.5px; line-height: 1.25; display: block; }
.fed-head { display: flex; align-items: center; gap: 12px; padding: 14px; }
.fed-head .avatar, .fed-head > :first-child { flex: none; }
.fed-name { font: 700 18px/1.2 var(--font-round); letter-spacing: -.01em; display: block; }
.fed-upd { margin-top: 3px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; }
.res-ev { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.res-ev .grow { min-width: 0; display: flex; align-items: center; gap: 5px; }
.res-ev .i { width: 14px; height: 14px; color: var(--muted); flex: none; }
.res-ev b { font-weight: 700; }
.res-ev .muted { white-space: nowrap; }
.rank-rounds { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rank-rounds small { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Sin movimiento: nada se desplaza al pulsar */
@media (prefers-reduced-motion: reduce) {
  .is-selected, .tog.on, .tog:has(input:checked), .type-card.on, .pick-card.on, .kit-card.on, .seg button.on, .tabbar .tab-main.active .ti,
  :is(.pressable, .btn, .quick button, .stepper button, .icon-round, .sq-btn, .hub-card, .type-card, .tog, .keypad button, .tech-plus, .tech-small, .shoot-back):active { transform: none !important; }
}

/* =====================================================================
   v7 — Como el portal del federado: degradado granate (150°) con cuadrícula blanca fina,
   halos de luz, textos en blanco (etiquetas en mayúsculas espaciadas) y movimientos cortos y suaves
   (aparecer, subir un poco, crecer). Va después de v6 y solo añade o afina.
   ===================================================================== */
:root:not(#_) {
  --portal: linear-gradient(150deg, #be1828, #780c1a); --portal-glow: #be1828;
  --portal-grid: linear-gradient(to right, rgba(255, 255, 255, .075) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .075) 1px, transparent 1px);
  --spring: cubic-bezier(.22, 1, .36, 1);
  --ease: 220ms cubic-bezier(.4, 0, .2, 1);
}
.ph-glow { position: absolute; z-index: -1; width: 260px; height: 260px; left: -90px; bottom: -150px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); filter: blur(48px); pointer-events: none; }
.ph-glow.b { left: auto; bottom: auto; right: -70px; top: -110px; width: 200px; height: 200px; background: rgba(255, 255, 255, .07); }

/* Cabecera de cada pantalla: banda granate con cuadrícula, a sangre, por debajo de la barra de arriba */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  margin: calc(-1 * var(--topbar-h) - var(--s2)) calc(-1 * var(--s4)) 18px;
  padding: calc(var(--topbar-h) + 6px) 20px 22px;
  background: var(--portal-grid), var(--portal); background-size: 42px 42px, 42px 42px, auto;
  border-radius: 0 0 26px 26px; box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--portal-glow) 75%, transparent);
}
.page-hero::after { content: ''; position: absolute; left: 20px; bottom: 0; width: 44px; height: 4px; border-radius: 4px 4px 0 0; background: #fff; opacity: .85; }
.ph-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: rgba(255, 255, 255, .58);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:not(#_) .page-hero .large-title { margin: 0; color: #fff; font: 700 30px/1.12 var(--font-round); letter-spacing: -.025em; }
:root:not(#_) .page-hero .page-sub { margin: 7px 0 0; color: rgba(255, 255, 255, .72); white-space: normal; font-size: 14.5px; }
/* La barra de arriba es transparente sobre la banda; al bajar, vuelve a ser oscura */
.topbar { transition: background-color .25s, border-color .25s, backdrop-filter .25s; }
body.has-hero .topbar.large:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.has-hero .topbar.large:not(.scrolled) :is(.icon-btn, .top-link, #topAction button) { color: #fff; }

/* ---------- Inicio ---------- */
:root:not(#_) .home-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  margin: calc(-1 * var(--s2)) calc(-1 * var(--s4)) 6px; padding: calc(var(--safe-t) + 16px) 18px 20px;
  background: var(--portal-grid), var(--portal); background-size: 42px 42px, 42px 42px, auto;
  border-radius: 0 0 28px 28px; box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--portal-glow) 80%, transparent);
}
.home-hero .home-top { padding: 0 0 16px; }
:root:not(#_) .home-hero .home-date { color: rgba(255, 255, 255, .6); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }
:root:not(#_) .home-hero .home-hello { color: #fff; font: 700 28px/1.15 var(--font-round); margin-top: 4px; }
.hero-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.hero-icon:active { transform: scale(.94); background: rgba(255, 255, 255, .2); }
.hero-week { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; padding: 12px 4px;
  background: rgba(0, 0, 0, .17); border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.hero-week > div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-week b { display: block; font: 700 24px/1.1 var(--font-round); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.hero-week span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .62); }
/* Lo principal en blanco: empezar o seguir entrenando */
.hero-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px 12px 12px; border: 0; border-radius: 16px;
  background: #fff; color: #18181b; text-align: left; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.hero-cta > .i:first-child { width: 42px; height: 42px; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--portal); color: #fff; stroke-width: 2.4;
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--portal-glow) 60%, transparent); }
.hero-cta span { flex: 1; min-width: 0; }
.hero-cta b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.hero-cta small { display: block; font-size: 12.5px; color: #71717a; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-cta .chev { color: var(--portal-glow); }
.hero-cta:active { transform: scale(.98); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7); }

/* Accesos: icono, nombre y para qué sirve */
:root:not(#_) .quick.six button { align-items: flex-start; text-align: left; gap: 1px; padding: 12px 12px 11px; min-height: 104px; }
:root:not(#_) .quick.six .qi { width: 36px; height: 36px; margin-bottom: 9px; }
.quick.six .qi .i { width: 19px; height: 19px; }
.quick.six b { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.quick.six small { font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.25; }
button.hero-week { width: 100%; color: #fff; font: inherit; cursor: pointer; }
button.hero-week:active { background: rgba(0, 0, 0, .26); }

/* Accesos personalizables: casilla «+», pista y menú al mantener pulsado (como en el iPhone) */
.qtile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
:root:not(#_) .quick.six .qtile-add { align-items: center; justify-content: center; gap: 6px; min-height: 104px; text-align: center;
  background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent); color: var(--muted); }
.qtile-add .i { width: 22px; height: 22px; padding: 7px; border-radius: 50%; background: color-mix(in srgb, var(--portal-glow) 12%, transparent); color: var(--portal-glow); stroke-width: 2.6; box-sizing: content-box; }
.qtile-add small { font-size: 12px; font-weight: 600; color: var(--muted); }
.qtile-add:active { opacity: .6; }
.q-hint { margin: -4px 4px 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.qctx { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 12, .38); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  animation: v-fade .18s ease both; }
.qctx.out { opacity: 0; transition: opacity .18s ease; }
.qctx-tile { position: fixed; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px; box-sizing: border-box; border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); animation: qctx-pop .32s var(--spring, cubic-bezier(.3, 1.4, .5, 1)) both; }
.qctx-tile .qi, .q-row .qi { display: grid; place-items: center; border-radius: 12px; background: var(--sunk-bg); color: var(--link); box-shadow: var(--sunk); }
.qctx-tile .qi .i, .q-row .qi .i { width: 18px; height: 18px; }
.qctx-tile .qi { width: 36px; height: 36px; margin-bottom: 9px; }
.qctx-tile b { font-size: 13.5px; } .qctx-tile small { font-size: 11.5px; color: var(--muted); }
.qctx-menu { position: fixed; width: 220px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .65); transform-origin: top left; animation: qctx-menu .26s var(--spring, cubic-bezier(.3, 1.4, .5, 1)) both; }
.qctx-menu.up { transform-origin: bottom left; }
.qctx-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; background: none;
  font: 500 15px/1.2 var(--font, inherit); color: var(--text); text-align: left; }
.qctx-menu button + button { border-top: 1px solid var(--line); }
.qctx-menu button .i { width: 18px; height: 18px; opacity: .8; }
.qctx-menu button.danger { color: var(--danger, #d0152f); }
.qctx-menu button:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
@keyframes qctx-pop { from { transform: scale(1); } 50% { transform: scale(1.07); } to { transform: scale(1.04); } }
@keyframes qctx-menu { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* Hoja de edición */
.q-head { margin: 12px 2px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.q-list { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.q-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.q-row + .q-row { border-top: 1px solid var(--line); }
.q-row .qi { width: 32px; height: 32px; flex: none; }
.q-row .grow b { display: block; font-size: 14.5px; } .q-row .grow small { display: block; font-size: 12px; color: var(--muted); }
.q-tog { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; padding: 0; color: #fff; background: #22a04b; }
.q-row.on .q-tog { background: var(--danger, #d0152f); }
.q-tog .i { width: 14px; height: 14px; stroke-width: 3; }
.q-mv { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 0; padding: 0; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.q-mv .i { width: 16px; height: 16px; }
.q-mv.up .i { transform: rotate(90deg); } .q-mv.down .i { transform: rotate(-90deg); }
.q-mv:disabled { opacity: .3; }

/* Títulos de sección: como las etiquetas del portal */
:root:not(#_) h2:not(.day-title) { font-size: 11.5px; letter-spacing: .14em; }

/* ---------- Barra inferior: la píldora de la pestaña activa se desliza ---------- */
.tab-ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 12px; pointer-events: none;
  background: var(--sunk-bg); box-shadow: var(--sunk);
  transition: transform .42s var(--spring), width .42s var(--spring), opacity .2s; }
.tabbar > button { position: relative; z-index: 1; }
:root:not(#_) .tabbar button.active:not(.tab-main) { background: transparent; box-shadow: none; }
.tabbar button.active:not(.tab-main) .ti { animation: tab-pop .45s var(--spring); }
@keyframes tab-pop { 40% { transform: translateY(-3px) scale(1.12); } }

/* ---------- Transiciones entre pantallas ---------- */
@keyframes v-in-fwd { from { transform: translateX(36px); opacity: 0; } }
@keyframes v-in-back { from { transform: translateX(-36px); opacity: 0; } }
@keyframes v-rise { from { transform: translateY(12px); opacity: 0; } }
@keyframes v-fade { from { opacity: 0; } }
:root:not(#_) #view.anim-fwd { animation: v-in-fwd .36s var(--spring) both; }
:root:not(#_) #view.anim-back { animation: v-in-back .36s var(--spring) both; }
:root:not(#_) #view.anim-fade { animation: v-fade .2s ease-out both; }
/* Al cambiar de pestaña, cada bloque sube un poco, uno detrás de otro */
#view.anim-fade > * { animation: v-rise .5s var(--spring) both; }
#view.anim-fade > :nth-child(2) { animation-delay: 35ms; }
#view.anim-fade > :nth-child(3) { animation-delay: 70ms; }
#view.anim-fade > :nth-child(4) { animation-delay: 105ms; }
#view.anim-fade > :nth-child(5) { animation-delay: 140ms; }
#view.anim-fade > :nth-child(6) { animation-delay: 175ms; }
#view.anim-fade > :nth-child(7) { animation-delay: 210ms; }
#view.anim-fade > :nth-child(n+8) { animation-delay: 245ms; }
/* El texto de la banda entra detrás del fondo */
#view[class*="anim-"] :is(.page-hero, .home-hero) > :not(.ph-glow) { animation: v-rise .55s .06s var(--spring) both; }
#view[class*="anim-"] :is(.page-hero, .home-hero) > :not(.ph-glow) + :not(.ph-glow) { animation-delay: .12s; }
#view[class*="anim-"] .ph-glow { animation: v-fade .9s ease-out both; }

/* ---------- Hojas: suben con muelle y bajan al cerrarse ---------- */
:root:not(#_) .sheet { animation: v-fade .2s ease-out; }
:root:not(#_) .sheet-body { animation: sheet-in .42s var(--spring); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet.closing { animation: sheet-bg-out .2s ease-in forwards !important; pointer-events: none; }
.sheet.closing .sheet-body { animation: sheet-out .2s cubic-bezier(.4, 0, 1, 1) forwards !important; }
@keyframes sheet-bg-out { to { background-color: transparent; } }
@keyframes sheet-out { to { transform: translateY(100%); } }

/* Avisos: aparecen creciendo desde abajo */
:root:not(#_) .toast { animation: toast-in .36s var(--spring); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); } }

/* ---------- Licencia federativa (datos de la RFETA) ----------
   Medidas en cqw: la tarjeta se ve igual de grande o de pequeña (inicio, Mi licencia, visor 3D). */
.lic-fed {
  --fa: #be1828; --fb: #780c1a;
  container-type: inline-size; position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; aspect-ratio: 1.586; border-radius: 18px; color: #fff; text-align: left; margin-bottom: 6px;
  background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--fa) 70%, #fff) 0%, transparent 52%), linear-gradient(150deg, var(--fa) 15%, var(--fb));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 38px -18px color-mix(in srgb, var(--fb) 85%, #000), 0 2px 6px rgba(0, 0, 0, .35);
  font-family: Inter, -apple-system, "SF Pro Text", system-ui, sans-serif;
}
.lf-grid { position: absolute; inset: 0; z-index: -2; background: var(--portal-grid); background-size: 7.5cqw 7.5cqw;
  -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 80%); mask-image: linear-gradient(135deg, #000 10%, transparent 80%); }
.lic-fed .lic-guil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: #fff; opacity: .07; }
.lic-fed .rep-target { position: absolute; z-index: -1; right: -16%; top: -14%; width: 66%; color: #fff; opacity: .1; }
/* Lámina holográfica: deriva sola y se mueve con el dedo; brillo blanco que cruza cada pocos segundos */
.lf-holo { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(115deg, transparent 22%, #ff3d9a 34%, #ffd84a 42%, #3dffc4 50%, #3da2ff 58%, #b45bff 66%, transparent 76%);
  background-size: 260% 260%; background-position: var(--mx, 30%) var(--my, 20%); animation: lf-holo 9s ease-in-out infinite alternate; }
@keyframes lf-holo { from { background-position: 10% 0%; } to { background-position: 90% 100%; } }
.lic-fed::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 18%) var(--my, 0%), rgba(255, 255, 255, .26), transparent 46%); }
.lf-sheen { position: absolute; inset: -30% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-100%); animation: lf-sheen 7s .5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes lf-sheen { 0% { transform: translateX(-100%); } 28%, 100% { transform: translateX(100%); } }
.lf-head { display: flex; align-items: center; gap: 3cqw; padding: 4.6cqw 5cqw 0; position: relative; z-index: 3; }
.lf-logo { width: 11cqw; height: 11cqw; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 1.3cqw;
  box-shadow: 0 1cqw 2.5cqw rgba(0, 0, 0, .3); }
.lf-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lf-org { flex: 1; min-width: 0; line-height: 1.15; }
.lf-org small { display: block; font-size: 2.5cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .24em; opacity: .7; }
.lf-org b { display: block; font-size: 4.2cqw; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .4cqw; }
.lf-rfeta { height: 10.5cqw; flex: none; filter: brightness(0) invert(1); opacity: .92; }
.lf-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: 4.6cqw; padding: 3cqw 5cqw 0; position: relative; z-index: 3; }
.lf-photo { width: 21cqw; aspect-ratio: 3 / 4; flex: none; border-radius: 2.4cqw; overflow: hidden; background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 .8cqw rgba(255, 255, 255, .92), 0 2.5cqw 5cqw rgba(0, 0, 0, .35); }
.lf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-photo svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .5); }
.lf-main { flex: 1; min-width: 0; }
.lf-name { font-size: 5.7cqw; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .25); }
.lf-club { font-size: 3.3cqw; opacity: .82; margin-top: 1.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-num { margin-top: 3.2cqw; }
.lf-num small { display: block; font-size: 2.3cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; opacity: .62; }
.lf-num b { display: block; font: 600 5.6cqw/1.1 "SF Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; margin-top: .6cqw;
  text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .25); }
.lf-foot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 3cqw 5cqw 4.4cqw; position: relative; z-index: 3; }
.lf-pills { display: flex; gap: 1.6cqw; min-width: 0; }
.lf-pills span, .lf-ok { font-size: 2.7cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .9cqw 2.6cqw; border-radius: 99px; white-space: nowrap; }
.lf-pills span { background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .26); }
.lf-ok { display: inline-flex; align-items: center; gap: 1cqw; background: #fff; color: var(--fb); }
.lf-ok .i { width: 3.2cqw; height: 3.2cqw; stroke-width: 3; }
.lic-fed.empty { filter: saturate(.55); }
.lic-fed.empty .lf-name, .lic-fed.empty .lf-num b { opacity: .55; }
/* Dorso */
.lic-fed.back .lf-head { padding-bottom: 1cqw; }
.lf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4cqw 5cqw 0; border-radius: 3cqw; background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .14); padding: 3cqw 0; text-align: center; position: relative; z-index: 3; }
.lf-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .16); }
.lf-stats b { display: block; font-size: 6.4cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.lf-stats small { font-size: 2.3cqw; text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.lf-check { padding: 3cqw 5cqw 0; font-size: 2.9cqw; opacity: .85; position: relative; z-index: 3; }
.lf-mrz { margin-top: auto; position: relative; z-index: 3; background: rgba(255, 255, 255, .93); color: #15161a; padding: 2cqw 5cqw 2.4cqw;
  font: 600 3.1cqw/1.35 "OCR B", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; white-space: nowrap; overflow: hidden; }
.tilt-face .lic-fed { margin: 0; }
.tilt-ov.fed .tilt-edge { border-radius: 18px; background: #2a070d; }
.lic-tip { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 6px; font-size: 12.5px; color: var(--muted); }
.lic-tip .i { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .lf-holo, .lf-sheen { animation: none; } }

/* Pulsar: se nota al instante y vuelve con suavidad */
.lic-link { transition: transform .3s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  #view.anim-fade > *, #view[class*="anim-"] :is(.page-hero, .home-hero) > *, .tabbar .ti { animation: none !important; }
  .tab-ind { transition: none; }
}

@media print {
  .topbar, .tabbar, .no-print, #sheet, #toast, .large-title, #splash { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  #view { animation: none !important; }
}

/* ===== Calendario (v7): volumen por día, resumen del mes y «Hoy» ===== */
.cal-card { padding: 14px 12px 12px; touch-action: pan-y; }
:root:not(#_) .cal-nav { display: flex; align-items: center; gap: 6px; margin: 0 2px 12px; }
.cal-title { flex: 1; display: flex; align-items: baseline; gap: 7px; }
.cal-title b { font: 700 22px/1.1 var(--font-round); letter-spacing: -.02em; }
.cal-title span { font-size: 15px; font-weight: 600; color: var(--muted); }
:root:not(#_) .cal-today { padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--portal-glow); }
.cal-nav .icon-round { width: 34px; height: 34px; }
.cal-sum { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 12px; padding: 9px 0; border-radius: 13px; background: var(--sunk-bg, var(--surface-2)); box-shadow: var(--sunk); text-align: center; }
.cal-sum > div + div { border-left: 1px solid var(--line); }
.cal-sum b { display: block; font: 700 19px/1.15 var(--font-round); font-variant-numeric: tabular-nums; }
.cal-sum span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cal-sum em { font-style: normal; letter-spacing: 0; }
.cal-sum em.up { color: #22a04b; } .cal-sum em.down { color: var(--danger, #d0152f); }
:root:not(#_) .cal-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
:root:not(#_) .cal-grid { gap: 4px; }
:root:not(#_) .cal-day { position: relative; aspect-ratio: auto; height: 50px; gap: 1px; justify-content: flex-start; padding-top: 7px; border-radius: 12px;
  background: transparent; box-shadow: none; color: var(--text); font-weight: 600; }
:root:not(#_) .cal-day.has { background: color-mix(in srgb, var(--portal-glow) calc(var(--h, 0) * 100%), transparent); }
:root:not(#_) .cal-day.has .cd-n { color: var(--text); }
.cd-n { font-size: 15px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd-a { font-size: 9.5px; font-weight: 700; line-height: 1; opacity: .85; font-variant-numeric: tabular-nums; }
:root:not(#_) .cal-day .cal-dots { position: absolute; bottom: 5px; gap: 2px; height: 4px; }
:root:not(#_) .cal-day .cal-dots i { width: 4px; height: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent); }
:root:not(#_) .cal-day.out { opacity: .28; }
:root:not(#_) .cal-day.today .cd-n { color: var(--portal-glow); font-weight: 800; }
:root:not(#_) .cal-day.today.has .cd-n { color: var(--text); }
:root:not(#_) .cal-day.today::after { content: ''; position: absolute; inset: 0; border-radius: 12px; border: 1.5px solid var(--portal-glow); pointer-events: none; }
:root:not(#_) .cal-day.sel { background: var(--portal); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--portal-glow) 70%, transparent); }
:root:not(#_) .cal-day.sel :is(.cd-n, .cd-a) { color: #fff; opacity: 1; }
:root:not(#_) .cal-day.sel::after { border-color: transparent; }
.cal-day:active { transform: scale(.94); }
:root:not(#_) .cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 2px 0; font-size: 11.5px; }
.cal-scale { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.cal-scale i { width: 10px; height: 10px; border-radius: 3px; background: var(--portal-glow); }
.cal-scale i:nth-child(1) { opacity: .25; } .cal-scale i:nth-child(2) { opacity: .55; }
.day-title b { color: var(--portal-glow); }
.cal-empty { display: flex; align-items: center; gap: 12px; }

/* ===== Estadísticas (v7): un número principal, comparación y gráficas explicadas ===== */
.st-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 4px; scrollbar-width: none; }
.st-filters::-webkit-scrollbar { display: none; }
.st-filters .tog { flex: none; white-space: nowrap; }
.st-sep { flex: none; width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.st-hero { position: relative; overflow: hidden; padding: 16px; color: #fff; background: var(--portal); border: 0;
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--portal-glow) 80%, #000); }
.st-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--portal-grid, none); background-size: 22px 22px; opacity: .5; pointer-events: none; }
.st-hero > * { position: relative; }
.st-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.st-main b { display: block; font: 800 48px/1 var(--font-round); letter-spacing: -.03em; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.st-delta { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .16); color: #fff; }
.st-delta small { font-weight: 500; opacity: .8; }
.st-delta.up { background: rgba(70, 210, 120, .25); } .st-delta.down { background: rgba(0, 0, 0, .25); }
.st-mini { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.st-mini b { display: block; font: 700 17px/1.15 var(--font-round); font-variant-numeric: tabular-nums; }
.st-mini span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin-top: 2px; }
.st-hint { margin: -2px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

/* ===== Mi equipamiento: miniatura del arco montado (3D) ===== */
.kit-card-art.is-3d { background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--portal-glow) 16%, var(--surface-2)), var(--surface-2) 70%); }
:root:not(#_) .kit-card-art.is-3d img { object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.kit-card-art img.fade-in { animation: kit-in .45s ease both; }
@keyframes kit-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ===== Competiciones: búsqueda en IANSEO y «¿Eres tú?» ===== */
.ian-prog { display: grid; gap: 6px; }
.ian-bar { position: relative; height: 22px; border-radius: 11px; overflow: hidden; background: var(--sunk-bg, var(--surface-2)); box-shadow: var(--sunk); margin-top: 4px; }
.ian-bar i { position: absolute; inset: 0 auto 0 0; background: var(--portal); border-radius: 11px; transition: width .4s ease; }
.ian-bar span { position: relative; display: block; text-align: center; font: 700 11.5px/22px var(--font-round, inherit); color: var(--text); font-variant-numeric: tabular-nums; }
.ian-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--portal-glow) 25%, transparent); border-top-color: var(--portal-glow); animation: ian-spin .8s linear infinite; }
@keyframes ian-spin { to { transform: rotate(360deg); } }
.ian-doubt { border: 1px solid color-mix(in srgb, var(--portal-glow) 40%, transparent); }
.ian-q { display: flex; align-items: center; gap: 8px; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line); }
.ian-q .tog { flex: none; padding: 7px 12px; }
.badge.src { opacity: .75; font-size: 10px; letter-spacing: .06em; }
.ian-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 16px; text-align: center; }
:root:not(#_) a.res-row, :root:not(#_) a.res-row:visited { color: var(--text); text-decoration: none; }
:root:not(#_) a.res-row .res-ev b { color: var(--text); }

/* v7 · Competiciones: ámbitos y tarjetas separadas */
.amb-nacional { --amb: #e5484d; } .amb-autonomico { --amb: #4c8dff; } .amb-internacional { --amb: #e8b339; } .amb-club { --amb: #8b8b94; }
.amb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amb, var(--muted)); flex: none; }
.amb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
:root:not(#_) .amb-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--surface); border-left: 4px solid var(--amb); }
.amb-card b { font: 800 26px/1.1 var(--font-round, inherit); color: var(--text); font-variant-numeric: tabular-nums; }
.amb-card span { font-weight: 700; font-size: 14px; color: var(--text); }
.amb-card small { font-size: 12px; color: var(--muted); }
.amb-card:active { transform: scale(.97); }
.amb-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.amb-chips::-webkit-scrollbar { display: none; }
.amb-chips .tog { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.amb-chips .tog small { opacity: .65; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-amb { display: block; font-size: 10px; color: var(--muted); }
.cc-season { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.cc-season b { font: 800 17px/1.2 var(--font-round, inherit); }
.cc-season span { font-size: 12px; color: var(--muted); }
.cc-list { display: flex; flex-direction: column; gap: 12px; }
:root:not(#_) a.cc, :root:not(#_) a.cc:visited { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 14px 14px 14px 12px; border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; border-left: 4px solid var(--amb, var(--line)); }
a.cc:active { transform: scale(.985); }
.cc-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; border-radius: 12px; background: var(--sunk-bg, var(--surface-2)); box-shadow: var(--sunk); }
.cc-date b { font: 800 19px/1 var(--font-round, inherit); }
.cc-date span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 3px; }
.cc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-name { font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tags { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--amb, var(--muted)); }
.cc-tags em { font-style: normal; font-weight: 600; color: var(--muted); opacity: .7; margin-left: auto; letter-spacing: .04em; font-size: 10px; }
.cc-rest { font-size: 11.5px; color: var(--muted); padding-top: 4px; border-top: 1px dashed var(--line); margin-top: 2px; }
.cc-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 52px; }
.cc-score b { font: 800 22px/1 var(--font-round, inherit); font-variant-numeric: tabular-nums; }
.cc-pos { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.cc-pos.pod1 { background: #e8b339; color: #1a1300; } .cc-pos.pod2 { background: #c7ccd4; color: #111; } .cc-pos.pod3 { background: #c98a55; color: #1a0d00; }
.cc-score small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cc-date b.mon { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }

/* v7 · Bienvenida: la barra de botones de abajo es igual en todos los pasos y queda siempre por encima */
:root:not(#_) .ob:not(.navy) :is(.ob-foot, .ob-actions) { position: sticky; bottom: 0; z-index: 20; margin: 20px -24px calc(-24px - var(--safe-b)); padding: 18px 24px calc(var(--safe-b) + 16px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 18px); }
:root:not(#_) .ob:not(.navy) .ob-actions { gap: 10px; }
.ob-body { position: relative; z-index: 0; }
/* El punto del paso actual crece al entrar, igual en todos los pasos */
.ob-steps i.on { animation: ob-dot .45s var(--spring) both; }
@keyframes ob-dot { from { width: 8px; } }
:root:not(#_) .ob .ob-title { font: 800 28px/1.15 var(--font-round, inherit); letter-spacing: -.015em; text-transform: none; color: var(--text); margin: 0 0 8px; }

/* v7 · Tarjeta de competicion como boton y ficha de la competicion (clasificacion, equipos, eliminatorias) */
:root:not(#_) button.cc { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; width: 100%;
  padding: 14px 14px 14px 12px; border-radius: 16px; background: var(--surface); color: var(--text); border-left: 4px solid var(--amb, var(--line)); text-align: left; }
button.cc:active { transform: scale(.985); }
.cd-head { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--amb, var(--line)); }
.cd-head .grow { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cd-head .cc-meta { white-space: normal; }
.cd-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 2px 8px; font-weight: 700; }
.cd-qual { display: flex; flex-direction: column; gap: 12px; }
.cd-qhead { display: flex; align-items: flex-end; justify-content: space-between; }
.cd-qhead > div:first-child { display: flex; align-items: baseline; gap: 6px; }
.cd-total { font: 800 38px/1 var(--font-round, inherit); font-variant-numeric: tabular-nums; }
.cd-qpos { display: flex; flex-direction: column; align-items: flex-end; }
.cd-qpos b { font: 800 22px/1 var(--font-round, inherit); color: var(--portal-glow, var(--accent)); }
.cd-qpos span { font-size: 12px; color: var(--muted); }
.cd-stats { display: flex; gap: 8px; }
.cd-stats span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--sunk-bg, var(--surface-2)); box-shadow: var(--sunk); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cd-stats b { font: 800 18px/1 var(--font-round, inherit); color: var(--text); letter-spacing: 0; }
.cd-dists { display: flex; flex-direction: column; gap: 8px; }
.cd-dist { display: grid; grid-template-columns: 1fr 80px 38px 34px; align-items: center; gap: 10px; font-size: 13.5px; }
.cd-dist b { text-align: right; font-variant-numeric: tabular-nums; }
.cd-dist .small { text-align: right; }
.cd-bar { height: 6px; border-radius: 3px; background: var(--sunk-bg, var(--surface-2)); overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: var(--portal, var(--accent)); border-radius: 3px; }
.cd-team { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sunk-bg, var(--surface-2)); }
.cd-team span { font-size: 12.5px; color: var(--muted); }
.cd-wait { display: flex; align-items: center; gap: 12px; }
.cd-links { display: flex; gap: 10px; margin-top: 20px; }
.cd-links .btn { flex: 1; justify-content: center; text-decoration: none; color: var(--text); }
.cd-ev { display: flex; align-items: center; gap: 10px; }
.cd-evs { font: 800 22px/1 var(--font-round, inherit); }
/* La rama: cada eliminatoria es un nodo unido al siguiente por una linea */
.br { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 18px; }
.br::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 2px; border-radius: 1px; background: linear-gradient(var(--portal-glow, var(--accent)), color-mix(in srgb, var(--portal-glow, var(--accent)) 25%, transparent)); }
.br-match { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--raise, none); }
.br-match::before { content: ''; position: absolute; left: -17px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--portal-glow, var(--accent)); }
.br-match.win::before { background: var(--portal-glow, var(--accent)); }
.br-round { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.br-row { display: grid; grid-template-columns: 22px 1fr auto 34px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; color: var(--muted); }
.br-row.w { color: var(--text); }
.br-row.me { background: color-mix(in srgb, var(--portal-glow, var(--accent)) 16%, transparent); color: var(--text); }
.br-row.me .br-name { font-weight: 800; }
.br-seed { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.br-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-sets { display: flex; gap: 3px; }
.br-sets i { font-style: normal; min-width: 22px; text-align: center; font-size: 12px; padding: 2px 0; border-radius: 6px; font-variant-numeric: tabular-nums; opacity: .7; }
.br-sets i.w { background: var(--sunk-bg, var(--surface-2)); opacity: 1; font-weight: 700; }
.br-pts { font: 800 18px/1 var(--font-round, inherit); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.br-pts small { font-size: 9.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.br-end { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--surface-2); }
.br-end .i { width: 16px; height: 16px; }
.br-end.gold { background: #e8b339; color: #1a1300; } .br-end.silver { background: #c7ccd4; color: #111; } .br-end.bronze { background: #c98a55; color: #1a0d00; }
@media (max-width: 380px) { .br-sets i { min-width: 19px; font-size: 11px; } .br-row { gap: 6px; padding: 6px; } }
.br-row { grid-template-columns: 22px 1fr 40px; grid-template-rows: auto auto; row-gap: 4px; }
.br-seed { grid-row: 1; } .br-name { grid-row: 1; grid-column: 2; }
.br-sets { grid-row: 2; grid-column: 2; }
.br-pts { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
@media (max-width: 380px) { .br-sets i { min-width: 22px; font-size: 12px; } }

/* v7 · Ficha: cada prueba en un bloque desplegable con flecha */
.cd-sec { margin-top: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--raise, none); overflow: hidden; }
:root:not(#_) .cd-sec-head { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr 28px; grid-template-areas: "kind chev" "title chev" "sum chev"; align-items: center; row-gap: 2px; padding: 14px 14px 14px 16px; }
.cd-sec-kind { grid-area: kind; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--portal-glow, var(--accent)); }
.cd-sec-title { grid-area: title; font-size: 16px; line-height: 1.25; }
.cd-sec-sum { grid-area: sum; font-size: 12.5px; color: var(--muted); }
.cd-chev { grid-area: chev; justify-self: end; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunk-bg, var(--surface-2)); box-shadow: var(--sunk); transition: transform .3s var(--spring, ease); }
.cd-chev .i { width: 16px; height: 16px; }
.cd-sec.open .cd-chev { transform: rotate(180deg); }
.cd-sec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--spring, ease); }
.cd-sec-body > div { overflow: hidden; min-height: 0; padding: 0 12px; }
.cd-sec.open .cd-sec-body { grid-template-rows: 1fr; }
.cd-sec.open .cd-sec-body > div { padding-bottom: 14px; }
.cd-sec .cd-qual { background: var(--sunk-bg, var(--surface-2)); box-shadow: none; margin: 0; }
.cd-sec .br-match { background: var(--bg); }

/* v7 · Tecnica: contador mecanico (aparato gris, ruedas negras con numeros blancos) */
.shoot.tech { justify-content: flex-start; gap: 22px; }
.shoot.tech > .btn.primary { margin-top: auto; }
.odo-dev { position: relative; width: min(100%, 340px); margin: 3vh auto 0; padding: 26px 20px 20px; border-radius: 30px; color: #2a2d31;
  background: linear-gradient(165deg, #e3e5e8 0%, #b4b8bd 42%, #8f9398 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 3px 0 #5b5f64, 0 28px 44px -20px rgba(0, 0, 0, .85); }
.odo-dev::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); }
.odo-screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6f7f8, #7d8186 72%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .6); }
.odo-screw::after { content: ''; position: absolute; left: 2px; right: 2px; top: 4.75px; height: 1.5px; border-radius: 1px; background: rgba(0, 0, 0, .45); transform: rotate(35deg); }
.odo-screw.tl { top: 11px; left: 11px; } .odo-screw.tr { top: 11px; right: 11px; } .odo-screw.bl { bottom: 11px; left: 11px; } .odo-screw.br { bottom: 11px; right: 11px; }
.odo-brand { position: relative; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: #4b4f54; margin-bottom: 10px; text-shadow: 0 1px 0 rgba(255, 255, 255, .65); }
.odo-win { position: relative; display: flex; justify-content: center; gap: 3px; padding: 8px; border-radius: 12px; background: #0a0a0b;
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .35); }
.odo-win::after { content: ''; position: absolute; inset: 8px; border-radius: 4px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .12), transparent 38%, transparent 62%, rgba(255, 255, 255, .04)); }
.odo-w { position: relative; width: 58px; height: 82px; overflow: hidden; border-radius: 4px; background: linear-gradient(#000 0%, #1b1b1d 22%, #2c2c2f 50%, #1b1b1d 78%, #000 100%); }
.odo-w::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .8), transparent 30%, transparent 70%, rgba(0, 0, 0, .8)), linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 25%, transparent 75%, rgba(255, 255, 255, .05)); }
.odo-strip { display: flex; flex-direction: column; will-change: transform; }
.odo-strip i { font-style: normal; height: 82px; flex: none; display: grid; place-items: center; font: 700 56px/1 var(--font-round, inherit); color: #f4f4f5; font-variant-numeric: tabular-nums; }
:root:not(#_) .odo-k, :root:not(#_) .odo-main { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 16px; -webkit-tap-highlight-color: transparent; transition: transform .08s ease, box-shadow .08s ease; }
:root:not(#_) .odo-k { padding: 13px 0; font: 700 24px/1 var(--font-round, inherit); color: #26292d; background: linear-gradient(#f1f2f4, #b7bbc0);
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #6c7075, 0 9px 14px -7px rgba(0, 0, 0, .6); }
:root:not(#_) .odo-k:active { transform: translateY(4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #6c7075, 0 2px 4px -2px rgba(0, 0, 0, .6); }
.odo-keys { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
:root:not(#_) .odo-main { width: 100%; margin-top: 14px; padding: 15px 0 13px; gap: 3px; color: #fff; background: linear-gradient(#3b3e42, #1b1d20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 0 #0c0d0f, 0 11px 16px -7px rgba(0, 0, 0, .75); }
:root:not(#_) .odo-main:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 #0c0d0f, 0 2px 4px -2px rgba(0, 0, 0, .7); }
.odo-main b { font: 700 34px/1 var(--font-round, inherit); letter-spacing: -.02em; }
.odo-main small { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
@media (max-width: 360px) { .odo-w { width: 50px; } .odo-strip i { font-size: 48px; } }

/* v7 · Crear entrenamiento: iconos de modalidad, con/sin diana y ejercicios a medida */
:root:not(#_) .type-card .type-ic { width: 48px; height: 48px; border-radius: 15px; color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent); }
:root:not(#_) .type-card .type-ic .i { width: 28px; height: 28px; stroke-width: 1.7; }
:root:not(#_) .type-card.on .type-ic { background: var(--tc); color: #fff; box-shadow: 0 6px 16px -6px var(--tc); }
.aim-seg { margin-bottom: 0; }
.aim-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ex-chips { gap: 8px; }
.ex-chips .tog { font-size: 13.5px; }
.ex-chips .ex-new { gap: 4px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.ex-chips .ex-new .i { width: 15px; height: 15px; }
.ex-preview { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--sunk-bg, var(--surface-2)); box-shadow: var(--sunk); }
.ex-preview-head { display: flex; flex-direction: column; gap: 2px; }
.ex-preview ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.ex-preview .btn-row { margin-top: 10px; }
.ex-row { display: grid; grid-template-columns: 1fr 52px 52px 36px; gap: 6px; align-items: center; margin-bottom: 8px; }
.ex-row input { min-width: 0; padding: 10px 8px; font-size: 15px; }
.ex-row input[type=number] { text-align: center; }
.ex-row-head { margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ex-row-head span:not(:first-child) { text-align: center; }
/* Ejercicio guiado en el modo tiro */
.shoot.tech.has-ex { gap: 16px; }
.shoot.tech.has-ex .odo-dev { margin-top: 0; padding-top: 22px; }
.ex-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ex-steps { display: flex; flex-direction: column; gap: 6px; }
.ex-step { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; color: rgba(245, 243, 250, .5); transition: background .25s, color .25s; }
.ex-step i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 13px var(--font-round, inherit); font-style: normal; background: rgba(255, 255, 255, .08); }
.ex-step i .i { width: 15px; height: 15px; }
.ex-step.done { color: rgba(245, 243, 250, .45); }
.ex-step.done i { background: rgba(127, 200, 140, .25); color: #9fe0ad; }
.ex-step.cur { background: rgba(255, 255, 255, .09); color: #f5f3fa; font-weight: 600; }
.ex-step.cur i { background: var(--portal, #be1828); color: #fff; }
.ex-step em { font-style: normal; font: 700 13px var(--font-round, inherit); padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
:root:not(#_) .ex-go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: 16px;
  background: #f5f3fa; color: #141416; font-weight: 800; font-size: 17px; transition: transform .1s; -webkit-tap-highlight-color: transparent; }
:root:not(#_) .ex-go:active { transform: scale(.97); }
.ex-go .i { width: 20px; height: 20px; }
.ex-go.timing { background: var(--portal, #be1828); color: #fff; }
.ex-go.timing b { font: 800 26px/1 var(--font-round, inherit); font-variant-numeric: tabular-nums; }

/* v7 · Inicio: papelera junto a la sesion en curso */
.hero-cta-row { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.hero-cta-row .hero-cta { margin-top: 0; flex: 1; min-width: 0; }
:root:not(#_) .hero-del { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 54px; display: grid; place-items: center; border-radius: 16px;
  background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
:root:not(#_) .hero-del:active { transform: scale(.94); background: rgba(255, 255, 255, .24); }
.hero-del .i { width: 21px; height: 21px; }
.del-open { margin-left: 6px; color: var(--muted); }

/* v7 · Terminar sesion: «En que he trabajado» editable */
.focus-chips { align-items: center; }
.focus-tog { position: relative; }
.focus-x { display: none; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: #e5484d; color: #fff; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.focus-x .i { width: 12px; height: 12px; stroke-width: 3; }
.focus-chips.editing .focus-x { display: grid; }
.focus-chips.editing .focus-tog { animation: focus-wiggle .32s ease-in-out infinite alternate; }
@keyframes focus-wiggle { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
:root:not(#_) .tog-add { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text) 35%, transparent); color: var(--muted); padding: 6px 14px; box-shadow: none; }
.tog-add .i { width: 16px; height: 16px; }
:root:not(#_) .tog-input { width: 170px; border: 1.5px dashed var(--portal-glow, var(--accent)); background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: 0; }
.focus-hint { display: block; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .focus-chips.editing .focus-tog { animation: none; } }

/* v7 · Licencia como en el portal del federado */
.lic-rows .list-item { padding-top: 10px; padding-bottom: 10px; }
.lic-rows .list-item small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lic-rows .list-item b { display: block; font-size: 15.5px; margin-top: 2px; }
.lic-hist-row { display: grid; grid-template-columns: 1.15fr 1.2fr .9fr auto; gap: 8px; align-items: center; padding: 11px 14px; font-size: 13.5px; border-top: 1px solid var(--line); }
.lic-hist-row:first-child { border-top: 0; }
.lic-hist-row.head { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 12px; padding-bottom: 8px; }
.lic-hist-row b { font-variant-numeric: tabular-nums; }
.lic-hist-row .badge { font-size: 11px; }
.card.notice.bad { border: 1px solid color-mix(in srgb, #e5484d 55%, transparent); }
.card.notice.bad b { display: flex; align-items: center; gap: 6px; color: #ff7b7f; }
.card.notice.bad b .i { width: 16px; height: 16px; }
:root:not(#_) .lic-cur { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 18px; background: var(--surface); }
.lic-cur .grow { display: flex; flex-direction: column; gap: 4px; }
.lic-cur-top { display: flex; align-items: center; gap: 8px; }
.lic-cur-top b { font-size: 18px; }
.lic-cur-meta { font-size: 12.5px; color: var(--muted); }

/* v7 · Iconos de modalidad, mas sobrios */
:root:not(#_) .type-card .type-ic { background: color-mix(in srgb, var(--tc) 10%, transparent); box-shadow: none; color: color-mix(in srgb, var(--tc) 85%, var(--text)); }
:root:not(#_) .type-card .type-ic .i { stroke-width: 1.5; }
:root:not(#_) .type-card.on .type-ic { background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--tc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); }
:root:not(#_) a.list-item, :root:not(#_) a.list-item:visited { color: var(--text); text-decoration: none; }