/* MaraLink — componentes del design system. Cada clase replica un componente
   de src/components/ui/ con las reglas de docs/guia-de-estilo.md. */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--negro);
  background: var(--crema);
}
:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.sobre-negro :focus-visible { outline-color: #fff; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fuente-mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Ficha (marco de cada preview) ---------- */
.ficha { padding: 32px; display: grid; gap: 24px; }
.ficha > header { display: grid; gap: 4px; }
.ficha-titulo { margin: 0; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.ficha-nota { margin: 0; color: var(--gris-texto); font-size: .875rem; max-width: 65ch; }
.fila { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.pila { display: grid; gap: 16px; }
.rotulo { font-family: var(--fuente-mono); font-size: 12px; color: var(--gris-texto); }
.reglas { margin: 0; padding: 16px 16px 16px 36px; border: var(--borde); background: var(--blanco); font-size: .875rem; }
.reglas li + li { margin-top: 4px; }
.pendiente { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border: var(--borde); background: var(--gris-superficie); }

/* ---------- Tipografía ---------- */
.t-display { font-size: clamp(2.5rem, 9vw, 6.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.t-cifra   { font-size: clamp(3rem, 12vw, 9rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0; }
.t-h1      { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.t-h2      { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.t-h3      { font-size: 1.25rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; margin: 0; }
.t-entradilla { font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.2; margin: 0; }
.t-cuerpo  { font-size: 1rem; line-height: 1.5; margin: 0; max-width: 65ch; }
.t-pequeno { font-size: .875rem; line-height: 1.45; margin: 0; }
.t-etiqueta { font-size: .875rem; font-weight: 800; line-height: 1; text-transform: uppercase; margin: 0; }
.t-titulo-pantalla { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; margin: 0; }
.t-titulo-bloque { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; line-height: 1.1; margin: 0; }
.t-cifra-panel { font-size: 2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }

/* ---------- Botón ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border: var(--borde); border-radius: var(--pildora);
  font: 700 1rem/1 var(--fuente); color: var(--negro); background: var(--rosa);
  box-shadow: var(--sombra); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: translate .1s, box-shadow .1s, background-color .1s;
}
.btn.is-hover { translate: 2px 2px; box-shadow: var(--sombra-sm); background: var(--rosa-hover); }
@media (hover: hover) { .btn:hover { translate: 2px 2px; box-shadow: var(--sombra-sm); background: var(--rosa-hover); } }
.btn:active, .btn.is-active { translate: 4px 4px; box-shadow: none; }
.btn.is-focus { outline: 3px solid #000; outline-offset: 2px; }
.btn--blanco { background: var(--blanco); }
.btn--blanco.is-hover { background: var(--gris-superficie); }
@media (hover: hover) { .btn--blanco:hover { background: var(--gris-superficie); } }
.btn--amarillo { background: var(--amarillo); }
.btn--amarillo.is-hover { background: var(--amarillo); }
@media (hover: hover) { .btn--amarillo:hover { background: var(--amarillo); } }
.btn--error { background: var(--error); }
.btn--error.is-hover { background: var(--error); }
@media (hover: hover) { .btn--error:hover { background: var(--error); } }
.btn--fantasma { background: transparent; border-color: transparent; box-shadow: none; }
.btn--fantasma.is-hover { background: var(--gris-superficie); translate: none; box-shadow: none; }
@media (hover: hover) { .btn--fantasma:hover { background: var(--gris-superficie); translate: none; box-shadow: none; } }
.btn--enlace { height: auto; padding: 0; background: none; border: 0; box-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn--enlace.is-hover { background: none; translate: none; box-shadow: none; text-decoration-thickness: 4px; }
@media (hover: hover) { .btn--enlace:hover { background: none; translate: none; box-shadow: none; text-decoration-thickness: 4px; } }
.btn:disabled, .btn.is-disabled { background: var(--gris-superficie); color: var(--gris-texto); box-shadow: none; translate: none; cursor: not-allowed; }
.btn--sm { height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 1.125rem; }
.btn--icono { width: 48px; padding: 0; }
.sobre-negro .btn { box-shadow: var(--sombra-sobre-negro); }
.sobre-negro .btn:not(.btn--blanco):not(.btn--amarillo) { box-shadow: 4px 4px 0 var(--blanco); }
.sobre-negro .btn.is-hover { box-shadow: 2px 2px 0 var(--rosa); }
@media (hover: hover) { .sobre-negro .btn:hover { box-shadow: 2px 2px 0 var(--rosa); } }
.sobre-negro .btn:not(.btn--blanco):not(.btn--amarillo).is-hover { box-shadow: 2px 2px 0 var(--blanco); }
@media (hover: hover) { .sobre-negro .btn:not(.btn--blanco):not(.btn--amarillo):hover { box-shadow: 2px 2px 0 var(--blanco); } }

/* ---------- Insignia ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px;
  border: var(--borde); border-radius: var(--pildora); background: var(--rosa);
  font-size: .8125rem; font-weight: 800; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.badge svg.i { width: 14px; height: 14px; }
.badge--amarillo { background: var(--amarillo); }
.badge--azul { background: var(--azul); }
.badge--exito { background: var(--exito); }
.badge--error { background: var(--error); }
.badge--blanco { background: var(--blanco); }
.badge--gris { background: var(--gris-superficie); }

/* ---------- Tarjeta ---------- */
.card { background: var(--blanco); border: var(--borde); box-shadow: var(--sombra); padding: 24px; display: grid; gap: 16px; }
.card .card, .card--plana { box-shadow: none; }
.card--sm { padding: 16px; gap: 12px; }
.card-cabecera { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.card-desc { margin: 0; color: var(--gris-texto); font-size: .875rem; }
.card-pie { margin: 0 -24px -24px; padding: 16px 24px; border-top: var(--borde); background: var(--gris-superficie); display: flex; gap: 12px; justify-content: end; }
.sobre-negro .card { box-shadow: var(--sombra-sobre-negro); }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 8px; max-width: 360px; }
.campo label, .campo .lbl { font-size: .875rem; font-weight: 800; text-transform: uppercase; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: var(--borde); border-radius: 0;
  background: var(--blanco); font: 400 16px/1.4 var(--fuente); color: var(--negro);
}
.textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--gris-texto); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline-offset: 0; }
.input.is-focus { outline: 3px solid #000; outline-offset: 0; }
.input:disabled { background: var(--gris-superficie); color: var(--gris-texto); }
.campo.is-error .input { border: 3px solid var(--error); padding: 0 13px; }
.campo-ayuda { margin: 0; font-size: .875rem; color: var(--gris-texto); }
.campo-error { margin: 0; font-size: .875rem; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.campo-error svg.i { width: 16px; height: 16px; color: var(--negro); }
.select { appearance: none; padding-right: 44px; background-image: url("chevron.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }

/* Casilla, radio, interruptor */
.check { display: inline-flex; gap: 12px; align-items: center; min-height: 48px; cursor: pointer; font-weight: 500; }
.check input { appearance: none; margin: 0; width: 24px; height: 24px; border: var(--borde); background: var(--blanco); display: grid; place-content: center; cursor: pointer; }
.check input:checked { background: var(--rosa); }
.check input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 7px; border: solid #000; border-width: 0 0 3px 3px; rotate: -45deg; translate: 0 -2px; }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #000; }
.switch { appearance: none; margin: 0; width: 52px; height: 30px; border: var(--borde); border-radius: var(--pildora); background: var(--gris-superficie); position: relative; cursor: pointer; transition: background-color .1s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border: var(--borde); border-radius: 50%; background: var(--blanco); transition: translate .1s; }
.switch:checked { background: var(--rosa); }
.switch:checked::after { translate: 22px 0; }

/* ---------- Pestañas ---------- */
.tabs { display: inline-flex; border: var(--borde); background: var(--blanco); box-shadow: var(--sombra); }
.tab { min-height: 48px; padding: 0 20px; border: 0; background: none; font: 800 .875rem/1 var(--fuente); text-transform: uppercase; cursor: pointer; }
.tab + .tab { border-left: var(--borde); }
.tab[aria-selected="true"] { background: var(--rosa); }
@media (hover: hover) { .tab:not([aria-selected="true"]):hover { background: var(--gris-superficie); } }

/* ---------- Acordeón ---------- */
.acordeon { border-top: var(--borde); max-width: 720px; }
.acordeon details { border-bottom: var(--borde); }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 16px 0; cursor: pointer; font-size: 1.125rem; font-weight: 800; text-transform: uppercase; line-height: 1.15; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font-size: 2rem; font-weight: 500; line-height: 1; transition: rotate .15s; }
.acordeon details p { margin: 0 0 20px; max-width: 65ch; }

/* ---------- Tabla ---------- */
.tabla { width: 100%; border-collapse: collapse; background: var(--blanco); border: var(--borde); box-shadow: var(--sombra); }
.tabla th { background: var(--negro); color: var(--blanco); text-align: left; padding: 12px 16px; font-size: .8125rem; font-weight: 800; text-transform: uppercase; }
.tabla td { padding: 12px 16px; height: 56px; border-top: 1px solid var(--grafito); vertical-align: middle; }
.tabla td.num, .tabla th.num { text-align: right; }
@media (max-width: 640px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border-top: var(--borde); padding: 8px 0; }
  .tabla tr:first-child { border-top: 0; }
  .tabla td { border: 0; height: auto; padding: 6px 16px; display: flex; justify-content: space-between; gap: 12px; }
  .tabla td::before { content: attr(data-col); font-size: .75rem; font-weight: 800; text-transform: uppercase; color: var(--gris-texto); }
  .tabla td.num { text-align: left; }
}

/* ---------- Diálogo ---------- */
.velo { background: rgb(0 0 0 / .5); padding: 48px 20px; display: grid; place-items: center; }
.dialogo { background: var(--blanco); border: var(--borde); box-shadow: var(--sombra-lg); max-width: 440px; width: 100%; padding: 24px; display: grid; gap: 16px; }
.dialogo h3 { margin: 0; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; }
.dialogo p { margin: 0; }
.dialogo .acciones { display: flex; gap: 12px; justify-content: end; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Aviso (toast) ---------- */
.aviso { display: flex; gap: 12px; align-items: start; padding: 14px 16px; border: var(--borde); box-shadow: var(--sombra); background: var(--blanco); max-width: 380px; font-weight: 500; }
.aviso strong { display: block; font-weight: 800; text-transform: uppercase; font-size: .875rem; }
.aviso--exito { background: var(--exito); }
.aviso--error { background: var(--error); }
.aviso--info { background: var(--azul); }
.aviso--alerta { background: var(--amarillo); }

/* ---------- Barra de navegación ---------- */
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 20px; background: var(--blanco); border-bottom: var(--borde); }
.marca-hueco { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.25rem; }
.navbar nav { display: flex; gap: 4px; }
.navbar nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid transparent; border-radius: var(--pildora); font-weight: 700; color: var(--negro); text-decoration: none; }
@media (hover: hover) { .navbar nav a:hover { background: var(--gris-superficie); } }
.navbar nav a[aria-current="page"] { background: var(--rosa); border-color: var(--grafito); }

/* ---------- Barra lateral ---------- */
.lateral { width: 260px; max-width: 100%; background: var(--blanco); border-right: var(--borde); display: grid; grid-template-rows: 64px 1fr auto; min-height: 420px; }
.lateral-cab { display: flex; align-items: center; padding: 0 20px; border-bottom: var(--borde); }
.lateral ul { list-style: none; margin: 0; padding: 12px; display: grid; gap: 4px; align-content: start; }
.lateral a { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 0 12px; color: var(--negro); text-decoration: none; font-weight: 700; border: 2px solid transparent; }
@media (hover: hover) { .lateral a:hover { background: var(--gris-superficie); } }
.lateral a[aria-current="page"] { background: var(--rosa); border-color: var(--grafito); }
.lateral-pie { border-top: var(--borde); padding: 16px 20px; font-size: .875rem; }

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: var(--blanco); padding: 48px 20px; display: grid; gap: 24px; }
.pie a { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.pie .sec { color: var(--gris-sobre-negro); font-size: .875rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Cinta ---------- */
.cinta { overflow: hidden; background: var(--amarillo); border-block: var(--borde); }
.cinta-pista { display: flex; width: max-content; animation: cinta 36s linear infinite; }
.cinta:focus-within .cinta-pista { animation-play-state: paused; }
@media (hover: hover) { .cinta:hover .cinta-pista { animation-play-state: paused; } }
.cinta-grupo { display: flex; align-items: center; gap: 24px; padding: 14px 12px; font-size: 1.125rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; }
  .cinta-grupo[aria-hidden] { display: none; }
  .btn, .btn:hover, .btn:active { translate: none !important; }
}

/* ---------- Motivo sello ---------- */
.sello { width: 40px; height: 40px; border-radius: 50%; border: var(--borde); display: grid; place-items: center; background: var(--blanco); font-weight: 900; font-size: .875rem; }
.sello.is-lleno { background: var(--negro); color: var(--amarillo); }
.sello.is-premio { border-style: dashed; }
.sello svg.i { width: 20px; height: 20px; stroke-width: 3; }
.sello-sep { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--negro); background: var(--negro); box-shadow: inset 0 0 0 2px var(--amarillo); flex-shrink: 0; }

/* ---------- Contenedor de icono ---------- */
.icono-caja { width: 48px; height: 48px; display: grid; place-items: center; border: var(--borde); box-shadow: var(--sombra-sm); background: var(--rosa); }
.icono-caja svg.i { width: 24px; height: 24px; }

/* ---------- Métrica ---------- */
.metrica { background: var(--blanco); border: var(--borde); box-shadow: var(--sombra); padding: 20px; display: grid; gap: 8px; min-width: 200px; }
.metrica .lbl { font-size: .8125rem; font-weight: 800; text-transform: uppercase; }
.metrica .per { font-size: .875rem; color: var(--gris-texto); }

/* ---------- Racha de pago ---------- */
.racha { display: grid; grid-template-columns: repeat(6, 1fr); border: var(--borde); }
.racha > div { padding: 12px 8px; text-align: center; border-left: var(--borde); display: grid; gap: 2px; background: var(--gris-superficie); }
.racha > div:first-child { border-left: 0; }
.racha .esc { font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.racha .precio { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.racha .is-hecho { background: var(--exito); }
.racha .is-actual { background: var(--amarillo); outline: 3px solid #000; outline-offset: -5px; }
@media (max-width: 640px) {
  .racha { grid-template-columns: repeat(3, 1fr); }
  .racha > div:nth-child(4) { border-left: 0; }
  .racha > div:nth-child(n+4) { border-top: var(--borde); }
}

/* ---------- Estado vacío ---------- */
.vacio { border: 2px dashed var(--grafito); background: var(--blanco); padding: 40px 24px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.vacio p { margin: 0; max-width: 40ch; }

/* ---------- Escáner ---------- */
.escaner { width: 300px; max-width: 100%; min-height: 520px; border: var(--borde); display: grid; grid-template-rows: auto 1fr auto; text-align: center; }
.escaner-cab { padding: 10px 16px; border-bottom: var(--borde); font-size: .75rem; font-weight: 800; text-transform: uppercase; display: flex; justify-content: space-between; background: var(--blanco); }
.escaner-cuerpo { padding: 24px 20px; display: grid; gap: 16px; align-content: center; justify-items: center; }
.escaner-cuerpo svg.i { width: 64px; height: 64px; stroke-width: 2.5; }
.escaner-msg { font-size: 1.75rem; font-weight: 900; text-transform: uppercase; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.escaner-sub { font-size: 1rem; font-weight: 600; margin: 0; }
.escaner-acc { padding: 16px; display: grid; gap: 12px; border-top: var(--borde); background: var(--blanco); }
.escaner-acc .btn { width: 100%; height: 56px; font-size: 1.125rem; }

/* ---------- Teléfono ---------- */
.telefono { width: 260px; padding: 12px; background: var(--blanco); border: var(--borde); border-radius: var(--radio-telefono); box-shadow: var(--sombra); }
.telefono-pantalla { border: var(--borde); min-height: 440px; overflow: hidden; display: grid; }

/* Pase de Wallet (imita a Google: sin bordes brutalistas dentro) */
.pase { border-radius: 16px; overflow: hidden; color: #fff; font-family: "Roboto Flex", sans-serif; }
.pase-cab { display: flex; gap: 10px; align-items: center; padding: 14px 16px; }
.pase-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #7a2e12; display: grid; place-items: center; font-weight: 800; font-size: .8125rem; }
.pase-cuerpo { padding: 4px 16px 16px; display: grid; gap: 12px; }
.pase-sellos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pase-sellos span { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(255 255 255 / .7); }
.pase-sellos span.on { background: #fff; }
.pase-qr { background: #fff; border-radius: 12px; padding: 12px; justify-self: center; }

/* ---------- Comparativa ---------- */
.compara { background: var(--blanco); border: var(--borde); box-shadow: var(--sombra); max-width: 720px; }
.compara-cab, .compara-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
.compara-fila { border-top: var(--borde); }
.compara-fila s { text-decoration-thickness: 2px; }
.compara-fila b { font-weight: 700; }
@media (max-width: 560px) { .compara-cab, .compara-fila { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Gráfica ---------- */
.barras { display: flex; align-items: end; gap: 16px; height: 180px; padding: 0 8px 0 0; border-left: var(--borde); border-bottom: var(--borde); }
.barras div { width: 24px; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .875rem; }
.leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.leyenda i { width: 14px; height: 14px; border: 2px solid var(--grafito); display: inline-block; }

/* =========================================================
   Interacción (revisión 2): cursor, foco y movimiento
   ========================================================= */
:root { interpolate-size: allow-keywords; }

/* Todo lo que se puede pulsar lleva la mano */
a[href], button, summary, select, [role="tab"], [role="switch"],
input[type="checkbox"], input[type="radio"], label:has(input[type="checkbox"], input[type="radio"]) { cursor: pointer; }
button:disabled, input:disabled, select:disabled, .is-disabled { cursor: not-allowed; }
/* Las muestras congeladas de estados no son botones reales */
span.btn { cursor: default; }

/* Campos: el foco es una sombra dura, no un segundo marco */
.input, .select, .textarea { transition: box-shadow .12s, translate .12s; }
.input:focus, .select:focus, .textarea:focus, .input.is-focus { outline: none; box-shadow: var(--sombra); }
.campo.is-error .input:focus { box-shadow: 4px 4px 0 var(--error); }
@media (hover: hover) { .input:hover:not(:disabled):not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { box-shadow: var(--sombra-sm); } }

/* Navegación superior */
.navbar nav a { transition: background-color .12s, translate .1s; }
.navbar nav a:active { translate: 1px 1px; }
.navbar nav a:focus-visible { outline-offset: 2px; }
.menu-movil { display: none; border-top: var(--borde); background: var(--blanco); padding: 8px; }
.menu-movil.is-abierto { display: grid; gap: 4px; }
.menu-movil a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; font-weight: 700; color: #000; text-decoration: none; border: 2px solid transparent; }
@media (hover: hover) { .menu-movil a:hover { background: var(--gris-superficie); } }
.menu-movil a[aria-current="page"] { background: var(--rosa); border-color: var(--grafito); }

/* Barra lateral */
.lateral a { transition: background-color .12s, translate .1s, box-shadow .1s; }
@media (hover: hover) { .lateral a:hover:not([aria-current="page"]) { background: var(--gris-superficie); } }
.lateral a[aria-current="page"] { box-shadow: var(--sombra-sm); }
.lateral a:active { translate: 2px 2px; box-shadow: none; }
.lateral a:focus-visible { outline-offset: -5px; }

/* Pestañas */
.tab { transition: background-color .12s, translate .1s; }
.tab:active { translate: 1px 1px; }
.tab:focus-visible { outline-offset: -5px; }
.tab-panel { padding: 20px; border: var(--borde); margin-top: 12px !important; background: var(--blanco); max-width: 520px; }

/* Acordeón: botón + en caja, contenido que se despliega */
.acordeon summary { padding: 16px 8px; margin: 0 -8px; transition: background-color .12s; }
@media (hover: hover) { .acordeon summary:hover { background: var(--blanco); } }
.acordeon summary::after {
  content: "+"; flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--borde); background: var(--blanco); box-shadow: var(--sombra-sm);
  font-size: 1.75rem; font-weight: 700; transition: background-color .12s, translate .1s, box-shadow .1s;
}
@media (hover: hover) { .acordeon summary:hover::after { background: var(--rosa); } }
.acordeon summary:active::after { translate: 2px 2px; box-shadow: none; }
.acordeon details[open] summary::after { content: "−"; background: var(--rosa); }
.acordeon summary:focus-visible { outline-offset: -3px; }
.acordeon details::details-content { block-size: 0; overflow: hidden; transition: block-size .25s ease, content-visibility .25s allow-discrete; }
.acordeon details[open]::details-content { block-size: auto; }

/* Botón de prueba (vivo) */
.prueba { padding: 24px; border: 2px dashed var(--grafito); background: var(--blanco); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .acordeon details::details-content { transition: none; }
}

/* =========================================================
   Repaso de UI (revisión 2)
   ========================================================= */
/* Titulares sin viudas y párrafos sin palabras huérfanas */
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3, .escaner-msg, .ficha-titulo { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Selección de texto con la marca */
::selection { background: var(--rosa); color: #000; }
/* Móvil: sin destello gris al tocar y sin retraso de doble toque */
a, button, summary, label, select, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Las cifras no bailan al cambiar */
.t-cifra-panel, .precio, .escaner-sub, .tabla td { font-variant-numeric: tabular-nums; }

/* =========================================================
   Repaso con better-* (revisión 3)
   ========================================================= */
/* Móvil estrecho: menos relleno en la ficha para que quepa a 320 px */
.ficha { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) { .ficha { padding: 16px; } }
/* La barra de escritorio cede su sitio al menú bajo 768 px */
@media (max-width: 767px) { .navbar > nav, .navbar > .btn:not([data-menu]) { display: none; } }
/* Etiquetas pequeñas en mayúsculas: un poco de aire entre letras */
.t-etiqueta, .badge, .tabla th, .tabla td::before, .racha .esc, .campo label, .campo .lbl,
.escaner-cab, .metrica .lbl, .aviso strong, .tab, .pendiente { letter-spacing: .05em; }
/* Racha: lo pagado lleva marca, no solo color */
.racha .esc svg.i { width: 12px; height: 12px; stroke-width: 3; vertical-align: -1px; margin-right: 2px; }
/* Enlace dentro de un aviso */
.aviso a { color: inherit; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Aviso de premio: mismo amarillo, clase propia (pendiente de decisión de color) */
.aviso--premio { background: var(--amarillo); }
/* Lateral apilada en móvil: ocupa todo el ancho y cierra con línea abajo */
@media (max-width: 560px) { .lateral { width: 100%; min-height: 0; border-right: 0; border-bottom: var(--borde); } }