/* ───────────────────────── Nido · estilos ───────────────────────── */

@layer base, layout, components, motion;

:root {
  /* Siempre en claro. Para seguir el modo oscuro del móvil: color-scheme: light dark */
  color-scheme: light;

  --bg:        light-dark(#fbf7f0, #1d1b18);
  --surface:   light-dark(#ffffff, #27241f);
  --surface-2: light-dark(#f4eee4, #322e28);
  --surface-3: light-dark(#ebe3d6, #3d3831);
  --ink:       light-dark(#2a2520, #f3eee6);
  --ink-2:     light-dark(#6b6258, #c0b7ab);
  --ink-3:     light-dark(#8f8579, #8c8378);
  --line:      light-dark(rgb(42 37 32 / .09), rgb(243 238 230 / .1));

  --accent:      light-dark(#2f7d5b, #6cc79a);
  --accent-ink:  light-dark(#ffffff, #10261b);
  --accent-soft: light-dark(#e2f1e8, #22382c);

  --danger: light-dark(#b8432f, #f0826d);

  /* Categorías: orden fijo, validado para daltonismo en claro y oscuro */
  --c1: light-dark(#1f9480, #26a28c);
  --c2: light-dark(#d0643c, #e0703f);
  --c3: light-dark(#3b78c4, #5a92e0);
  --c4: light-dark(#d99a1e, #b9860f);
  --c5: light-dark(#c75b8a, #d36190);
  --c6: light-dark(#6a55b8, #9483e6);

  /* Personas */
  --p-jorge: light-dark(#3b78c4, #5a92e0);
  --p-emi:   light-dark(#c75b8a, #d36190);

  /* "De cada 100 €" */
  --w-casa: light-dark(#a99c8b, #7d7366);
  --w-pers: light-dark(#d9cfbf, #514a41);
  --w-ahorro: var(--accent);

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --shadow: 0 1px 2px rgb(60 40 20 / .05), 0 8px 28px -10px rgb(60 40 20 / .14);

  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "Fraunces", "Iowan Old Style", Georgia, serif;

  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
}

@supports not (color: light-dark(#000, #fff)) {
  /* Navegadores antiguos: modo claro */
  :root {
    --bg: #fbf7f0; --surface: #fff; --surface-2: #f4eee4; --surface-3: #ebe3d6;
    --ink: #2a2520; --ink-2: #6b6258; --ink-3: #8f8579; --line: rgb(42 37 32 / .09);
    --accent: #2f7d5b; --accent-ink: #fff; --accent-soft: #e2f1e8; --danger: #b8432f;
    --c1: #1f9480; --c2: #d0643c; --c3: #3b78c4; --c4: #d99a1e; --c5: #c75b8a; --c6: #6a55b8;
    --p-jorge: #3b78c4; --p-emi: #c75b8a; --w-casa: #a99c8b; --w-pers: #d9cfbf;
  }
}

/* ───────── base ───────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.5 var(--f-texto);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { text-wrap: balance; font-weight: 650; }
  p { text-wrap: pretty; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
  [hidden] { display: none !important; }
  .num { font-family: var(--f-num); font-optical-sizing: auto; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
  .tnum { font-variant-numeric: tabular-nums; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ───────── layout ───────── */
@layer layout {
  /* Manchas de color suaves del fondo. Son degradados radiales y no círculos con
     blur(): en Chrome para Android el blur se recorta y deja ver los bordes. */
  .aurora {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60vmax 60vmax at 5% -5%, color-mix(in srgb, light-dark(#f6dcc8, #3a2a20) 70%, transparent), transparent 70%),
      radial-gradient(60vmax 60vmax at 100% 0%, color-mix(in srgb, light-dark(#dcebdc, #1f3328) 70%, transparent), transparent 70%),
      radial-gradient(70vmax 60vmax at 50% 110%, color-mix(in srgb, light-dark(#f1e3ee, #2c2333) 45%, transparent), transparent 70%);
  }

  .app {
    max-width: 560px;
    margin-inline: auto;
    padding: max(18px, env(safe-area-inset-top)) var(--gutter) calc(110px + var(--safe-b));
  }

  .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 6px 18px; }
  .top-fecha { color: var(--ink-2); font-size: 14px; font-weight: 500; text-transform: capitalize; }
  .top-saludo { font-family: var(--f-num); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }

  .vista { display: grid; gap: 14px; }

  .tabs {
    position: fixed; z-index: 10;
    inset-inline: 0; bottom: 0;
    margin-inline: auto; max-width: 560px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 8px 10px calc(8px + var(--safe-b));
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid var(--line);
  }
  @media (min-width: 600px) {
    .tabs { bottom: 16px; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding-bottom: 8px; inset-inline: 16px; }
  }
}

/* ───────── componentes ───────── */
@layer components {

  /* Pestañas */
  .tab {
    display: grid; justify-items: center; gap: 2px;
    padding: 6px 4px; border-radius: 14px;
    color: var(--ink-3); font-size: 12px; font-weight: 600;
    transition: color .2s, background-color .2s;
  }
  .tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
  .tab[aria-current="page"] { color: var(--accent); }
  .tab[aria-current="page"] svg { fill: var(--accent-soft); }
  .tab:active { background: var(--surface-2); }

  /* Avatar */
  .avatar {
    --c: var(--p-jorge);
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font: 650 19px/1 var(--f-num); color: #fff;
    background: radial-gradient(circle at 30% 25%, color-mix(in oklch, var(--c) 70%, white), var(--c));
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px color-mix(in srgb, var(--c) 35%, transparent);
  }
  .avatar[data-p="emi"] { --c: var(--p-emi); }
  .avatar--s { width: 34px; height: 34px; font-size: 15px; box-shadow: none; }
  .avatar--l { width: 88px; height: 88px; font-size: 36px; }

  /* Tarjetas */
  .card {
    background: var(--surface);
    border-radius: var(--r-l);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
  }
  .card-titulo { font-size: 17px; font-weight: 650; }
  .card-sub { color: var(--ink-2); font-size: 14.5px; margin-top: 2px; }
  .card-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .card-cab .total { font-family: var(--f-num); font-size: 19px; font-weight: 600; white-space: nowrap; }
  .card-cab .total small { font-family: var(--f-texto); font-size: 13px; color: var(--ink-2); font-weight: 500; }

  /* Héroe */
  .heroe {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 32px;
    padding: 26px 22px 22px;
    color: light-dark(#2b1d14, #fbefe6);
    background:
      radial-gradient(120% 90% at 100% 0%, light-dark(#ffd9bf, #6b3a26) 0%, transparent 60%),
      radial-gradient(100% 80% at 0% 100%, light-dark(#ffe9d6, #4a2c22) 0%, transparent 65%),
      light-dark(#fff3e8, #3a261d);
    box-shadow: 0 1px 2px rgb(120 60 20 / .08), 0 18px 40px -18px rgb(160 80 30 / .45);
  }
  .heroe[data-rol="pagador"] {
    background:
      radial-gradient(120% 90% at 100% 0%, light-dark(#cfe8da, #24503a) 0%, transparent 60%),
      radial-gradient(100% 80% at 0% 100%, light-dark(#e6f2e3, #203a2c) 0%, transparent 65%),
      light-dark(#f2f8f1, #1b2e24);
    color: light-dark(#14281d, #e8f5ec);
    box-shadow: 0 1px 2px rgb(20 80 50 / .08), 0 18px 40px -18px rgb(30 110 70 / .4);
  }
  .heroe::after {
    content: ""; position: absolute; z-index: -1; inset: auto -30% -60% auto;
    width: 260px; aspect-ratio: 1; border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%;
    background: light-dark(rgb(255 255 255 / .55), rgb(255 255 255 / .05));
    animation: flotar 14s ease-in-out infinite alternate;
  }
  .heroe-kicker { font-size: 15.5px; font-weight: 600; opacity: .8; }
  .heroe-num {
    font-family: var(--f-num); font-weight: 600; font-size: clamp(64px, 21vw, 92px); line-height: 1;
    letter-spacing: -.035em; margin: 10px 0 12px; view-transition-name: heroe-num;
  }
  .heroe-num .eur { font-size: .5em; margin-left: .08em; letter-spacing: 0; opacity: .75; }
  .heroe-texto { font-size: 17px; line-height: 1.45; max-width: 30ch; }
  .heroe-texto b { font-weight: 650; }
  .heroe-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
  .heroe .enlace { color: inherit; opacity: .85; }

  .hecho {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px 10px 10px; border-radius: 999px;
    background: light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .1));
    font-weight: 600; font-size: 15px;
  }
  .hecho .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
  .hecho .tick svg { width: 15px; height: 15px; }
  .hecho button { font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; opacity: .7; margin-left: 4px; }

  /* Botones */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 12px 22px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 650; font-size: 16px;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: transform .25s var(--ease-spring), filter .2s;
  }
  .btn:active { transform: scale(.96); }
  .btn--suave { background: var(--surface-2); color: var(--ink); box-shadow: none; }
  .btn--peligro { background: transparent; color: var(--danger); box-shadow: none; }
  .btn--oscuro { background: light-dark(#2b1d14, #fbefe6); color: light-dark(#fff3e8, #2b1d14); box-shadow: none; }
  .heroe[data-rol="pagador"] .btn--oscuro { background: light-dark(#14281d, #e8f5ec); color: light-dark(#f2f8f1, #14281d); }
  .btn--bloque { width: 100%; }
  .enlace { color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

  .fab {
    position: fixed; z-index: 9;
    right: max(var(--gutter), calc((100vw - 560px) / 2 + var(--gutter)));
    bottom: calc(92px + var(--safe-b));
    padding-inline: 18px 22px;
    box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 90%, transparent);
  }
  .fab svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

  /* Ahorro */
  .ahorro-num { font-family: var(--f-num); font-size: 52px; line-height: 1.05; font-weight: 600; color: var(--accent); letter-spacing: -.03em; }
  .ahorro-num .eur { font-size: .55em; opacity: .8; margin-left: .06em; }
  .ahorro-anual { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
  .ahorro-anual b { color: var(--ink); font-weight: 650; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface-2);
    font-size: 14.5px; color: var(--ink-2);
  }
  .chip b { color: var(--ink); font-weight: 650; }
  .chip .avatar { width: 26px; height: 26px; font-size: 12px; box-shadow: none; }
  .tono-alerta .ahorro-num { color: var(--danger); }

  /* "De cada 100 €": gofre 10×10 */
  .gofre {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
    margin: 6px 0 16px;
  }
  .gofre i { aspect-ratio: 1; border-radius: 4px; background: var(--w-casa); }
  .gofre i[data-t="pers"] { background: var(--w-pers); }
  .gofre i[data-t="ahorro"] { background: var(--w-ahorro); }
  .leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .leyenda li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; font-size: 15.5px; }
  .leyenda .sw { width: 14px; height: 14px; border-radius: 4px; }
  .leyenda .v { font-family: var(--f-num); font-weight: 600; font-size: 18px; }
  .leyenda .v small { font-family: var(--f-texto); font-size: 13px; font-weight: 500; color: var(--ink-2); }

  /* Barra apilada */
  .barra {
    display: flex; gap: 2px; height: 18px; margin: 4px 0 18px;
    border-radius: 6px; overflow: hidden;
  }
  .barra > span {
    flex-grow: var(--v); flex-basis: 0; min-width: 3px;
    background: var(--c); cursor: pointer;
    transition: opacity .2s, flex-grow .6s var(--ease-out);
  }
  .barra:has(> span.foco) > span:not(.foco) { opacity: .3; }

  .lista-cat { list-style: none; margin: 0; padding: 0; }
  .lista-cat li + li { border-top: 1px solid var(--line); }
  .fila-cat {
    width: 100%; display: grid; grid-template-columns: 10px 30px 1fr auto 18px; align-items: center; gap: 10px;
    padding: 12px 0; text-align: left; border-radius: 10px;
    transition: background-color .2s;
  }
  .fila-cat.foco { background: var(--surface-2); }
  .fila-cat .sw { width: 10px; height: 26px; border-radius: 4px; background: var(--c); }
  .fila-cat .emo { font-size: 22px; text-align: center; }
  .fila-cat .nom { font-weight: 600; font-size: 16px; line-height: 1.25; }
  .fila-cat .pct { display: block; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
  .fila-cat .v { font-family: var(--f-num); font-weight: 600; font-size: 18px; white-space: nowrap; }
  .chev { width: 18px; height: 18px; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .tooltip {
    position: fixed; z-index: 30; pointer-events: none;
    padding: 8px 12px; border-radius: 12px;
    background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600;
    box-shadow: var(--shadow); white-space: nowrap;
    translate: -50% calc(-100% - 12px);
  }

  .sello { text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 8px 0 4px; }

  /* Segmentado */
  .segmentado {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    padding: 4px; border-radius: 18px; background: var(--surface-2);
  }
  .segmentado button {
    display: grid; justify-items: center; gap: 0; padding: 9px 6px; border-radius: 14px;
    font-weight: 650; font-size: 15px; color: var(--ink-2);
    transition: color .2s;
  }
  .segmentado button small { font-family: var(--f-num); font-weight: 500; font-size: 13.5px; color: var(--ink-3); }
  .segmentado button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px -4px rgb(60 40 20 / .25); view-transition-name: seg-activo; }

  /* Grupos de gastos */
  .grupo { padding: 0; overflow: hidden; }
  .grupo > summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 30px 1fr auto 20px; align-items: center; gap: 12px;
    padding: 16px 18px 16px 16px;
    border-left: 5px solid var(--c);
  }
  .grupo > summary::-webkit-details-marker { display: none; }
  .grupo > summary .emo { font-size: 24px; text-align: center; }
  .grupo > summary .nom { font-weight: 650; font-size: 16.5px; line-height: 1.25; }
  .grupo > summary .cuantas { display: block; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
  .grupo > summary .v { font-family: var(--f-num); font-weight: 600; font-size: 19px; white-space: nowrap; }
  .grupo > summary .chev { transition: rotate .3s var(--ease-out); }
  .grupo[open] > summary .chev { rotate: 90deg; }
  .grupo::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
  .grupo[open]::details-content { block-size: auto; }

  .items { list-style: none; margin: 0; padding: 0 8px 8px; }
  .items li + li { border-top: 1px solid var(--line); }
  .item {
    width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: 13px 10px; text-align: left; border-radius: 12px;
    transition: background-color .15s;
  }
  .item:active { background: var(--surface-2); }
  .item .con { font-size: 16px; font-weight: 550; line-height: 1.3; }
  .item .det { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 1px; }
  .item .v { font-family: var(--f-num); font-weight: 600; font-size: 17px; white-space: nowrap; text-align: right; }
  .item .v small { display: block; font-family: var(--f-texto); color: var(--ink-3); font-size: 12px; font-weight: 500; }
  .item .signo-sale { color: var(--ink-2); }
  .vacio { color: var(--ink-2); padding: 14px 10px; font-size: 15px; }

  .intro { color: var(--ink-2); font-size: 15.5px; padding-inline: 4px; }
  .intro b { color: var(--ink); }

  /* Reparto (dos personas) */
  .reparto { display: flex; gap: 2px; height: 46px; border-radius: 14px; overflow: hidden; margin: 6px 0 12px; }
  .reparto > span {
    flex: var(--v) 1 0; background: var(--c);
    display: flex; align-items: center; padding-inline: 12px;
    color: #fff; font-weight: 650; font-size: 15px; white-space: nowrap;
    transition: flex-grow .6s var(--ease-out);
  }
  .reparto > span:last-child { justify-content: flex-end; }
  .reparto-pie { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: 14px; }
  .reparto-pie b { color: var(--ink); font-family: var(--f-num); font-size: 17px; font-weight: 600; }

  .persona-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .persona-cab .nom { font-weight: 650; font-size: 18px; }
  .persona-cab .sub { color: var(--ink-2); font-size: 14px; }
  .persona-neto { margin-left: auto; text-align: right; }
  .persona-neto .v { font-family: var(--f-num); font-size: 24px; font-weight: 600; line-height: 1.1; }
  .persona-neto small { display: block; color: var(--ink-2); font-size: 12.5px; }
  .persona .items { padding: 0; margin-inline: -10px; }
  .anadir-linea { margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; color: var(--accent); font-weight: 650; font-size: 15px; padding: 8px 0; }

  /* Hoja inferior (dialog) */
  .hoja {
    width: 100%; max-width: 560px; max-height: 92dvh;
    margin: auto auto 0; padding: 0;
    border: 0; border-radius: 30px 30px 0 0;
    background: var(--surface); color: var(--ink);
    box-shadow: 0 -10px 50px -10px rgb(0 0 0 / .3);
    overflow: hidden auto; overscroll-behavior: contain;
  }
  @media (min-width: 600px) { .hoja { margin: auto; border-radius: 30px; } }
  .hoja::backdrop { background: rgb(30 20 10 / .38); backdrop-filter: blur(3px); }
  .hoja-asa { width: 44px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 10px auto 0; touch-action: none; }
  .hoja-asa::after { content: ""; display: block; height: 30px; margin-top: -15px; }
  .hoja-cuerpo { padding: 14px 22px calc(24px + var(--safe-b)); }
  .hoja h2 { font-family: var(--f-num); font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
  .hoja .lead { color: var(--ink-2); margin-top: 6px; font-size: 16px; }

  /* Formularios */
  .form { display: grid; gap: 18px; margin-top: 20px; }
  .campo { display: grid; gap: 7px; }
  .campo > span, .campo > legend { font-size: 14px; font-weight: 650; color: var(--ink-2); padding: 0; }
  fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
  .input {
    width: 100%; min-height: 52px; padding: 12px 16px;
    border-radius: 16px; border: 1.5px solid var(--line);
    background: var(--surface-2); font-size: 17px;
    transition: border-color .2s, background-color .2s;
  }
  .input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
  .importe-wrap { position: relative; }
  .importe-wrap .input { font-family: var(--f-num); font-size: 34px; font-weight: 600; padding-right: 48px; min-height: 70px; }
  .importe-wrap::after { content: "€"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; font: 600 24px var(--f-num); color: var(--ink-3); }

  .opciones { display: flex; flex-wrap: wrap; gap: 8px; }
  .opcion { position: relative; }
  .opcion input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
  .opcion span {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 9px 15px; border-radius: 999px;
    background: var(--surface-2); border: 1.5px solid transparent;
    font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease-spring);
  }
  .opcion input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
  .opcion input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }
  .opcion span:active { transform: scale(.95); }

  .impacto {
    border-radius: 18px; padding: 14px 16px;
    background: var(--accent-soft); color: var(--ink);
    font-size: 15px; line-height: 1.45;
  }
  .impacto b { font-weight: 700; }
  .impacto .flecha { color: var(--ink-2); }
  .acciones-hoja { display: grid; gap: 8px; margin-top: 6px; }

  /* Explicación paso a paso */
  .pasos { list-style: none; padding: 0; margin: 22px 0 8px; display: grid; gap: 22px; counter-reset: paso; }
  .pasos li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; counter-increment: paso; }
  .pasos li::before {
    content: counter(paso); width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
    font: 650 17px var(--f-num);
  }
  .pasos li > * { font-size: 16.5px; line-height: 1.5; min-width: 0; }
  .pasos .grande { font-family: var(--f-num); font-weight: 600; font-size: 22px; display: block; margin-top: 4px; }
  .pasos .reparto { height: 40px; margin-top: 10px; }

  /* Menú */
  .menu { display: grid; gap: 4px; margin-top: 18px; }
  .menu button, .menu a {
    display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 16px;
    font-size: 16.5px; font-weight: 600; text-align: left; color: inherit; text-decoration: none;
  }
  .menu button:active { background: var(--surface-2); }
  .menu .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; }

  /* Puerta (PIN y elegir persona) */
  .puerta {
    min-height: 100dvh; display: grid; place-content: center; justify-items: center;
    gap: 22px; padding: 32px var(--gutter) calc(32px + var(--safe-b)); text-align: center;
  }
  .logo { width: 84px; height: 84px; border-radius: 26px; box-shadow: 0 16px 40px -14px rgb(47 125 91 / .6); }
  .puerta h1 { font-family: var(--f-num); font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
  .puerta .lead { color: var(--ink-2); font-size: 17px; max-width: 30ch; margin-top: 4px; }
  .puntos { display: flex; gap: 16px; height: 20px; align-items: center; }
  .puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-3); transition: background-color .15s, border-color .15s, scale .25s var(--ease-spring); }
  .puntos i.lleno { background: var(--accent); border-color: var(--accent); scale: 1.15; }
  .puntos.error { animation: temblor .45s; }
  .puntos.error i { border-color: var(--danger); }
  .teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; }
  .teclado button {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line);
    font: 500 30px var(--f-num);
    transition: transform .2s var(--ease-spring), background-color .15s;
  }
  .teclado button:active { transform: scale(.9); background: var(--surface-2); }
  .teclado .sin-fondo { background: transparent; box-shadow: none; border-color: transparent; font: 600 15px var(--f-texto); color: var(--ink-2); }
  .msg-error { color: var(--danger); font-weight: 600; min-height: 1.5em; }

  .quien { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
  .quien button {
    display: grid; justify-items: center; gap: 12px;
    width: 150px; padding: 22px 12px; border-radius: 28px;
    background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line);
    font-weight: 650; font-size: 19px;
    transition: transform .25s var(--ease-spring);
  }
  .quien button:active { transform: scale(.95); }

  /* Avisos */
  .aviso {
    margin-bottom: 14px; padding: 12px 16px; border-radius: 16px;
    background: var(--surface-2); color: var(--ink-2); font-size: 14.5px;
  }
  .toast {
    position: fixed; z-index: 50; left: 50%; bottom: calc(100px + var(--safe-b));
    translate: -50% 20px; opacity: 0; pointer-events: none;
    padding: 12px 20px; border-radius: 999px;
    background: var(--ink); color: var(--bg); font-weight: 600; font-size: 15px;
    box-shadow: 0 10px 30px -8px rgb(0 0 0 / .35);
    transition: opacity .25s, translate .4s var(--ease-spring);
    max-width: calc(100vw - 32px); text-align: center;
  }
  .toast.ver { opacity: 1; translate: -50% 0; }
  .toast.error { background: var(--danger); color: #fff; }

  .confeti { position: fixed; z-index: 60; pointer-events: none; font-size: 22px; }
}

/* ───────── movimiento ───────── */
@layer motion {
  @keyframes flotar { to { transform: translate(-30px, -20px) rotate(25deg) scale(1.08); } }
  @keyframes temblor { 20%, 60% { translate: -8px; } 40%, 80% { translate: 8px; } }
  @keyframes entrar { from { opacity: 0; translate: 0 14px; } }
  @keyframes caer {
    to { translate: var(--dx) 70vh; rotate: var(--rot); opacity: 0; }
  }

  .vista > * { animation: entrar .5s var(--ease-out) both; }
  .vista > *:nth-child(2) { animation-delay: .05s; }
  .vista > *:nth-child(3) { animation-delay: .1s; }
  .vista > *:nth-child(4) { animation-delay: .15s; }
  .vista > *:nth-child(n+5) { animation-delay: .2s; }
  .vista.quieta > * { animation: none; }

  .gofre i { transition: background-color .5s var(--ease-out); transition-delay: calc(var(--i) * 6ms); }

  /* Hoja: entra desde abajo */
  .hoja {
    transition: translate .45s var(--ease-out), opacity .3s, overlay .45s allow-discrete, display .45s allow-discrete;
    translate: 0 100%;
  }
  .hoja[open] { translate: 0 0; }
  @starting-style { .hoja[open] { translate: 0 100%; } }
  .hoja::backdrop { transition: opacity .35s, overlay .45s allow-discrete, display .45s allow-discrete; opacity: 0; }
  .hoja[open]::backdrop { opacity: 1; }
  @starting-style { .hoja[open]::backdrop { opacity: 0; } }
  @media (min-width: 600px) {
    .hoja { translate: 0 30px; opacity: 0; }
    .hoja[open] { translate: 0 0; opacity: 1; }
    @starting-style { .hoja[open] { translate: 0 30px; opacity: 0; } }
  }

  /* Al hacer scroll, las tarjetas aparecen suavemente */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
    .aparece {
      animation: entrar linear both !important;
      animation-timeline: view() !important;
      animation-range: entry 0% entry 70% !important;
      animation-delay: 0s !important;
    }
    }
  }

  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

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

/* Avisos amables: mes sin marcar, revisión trimestral, cambio de cantidad */
@layer components {
  .pendiente { display: grid; gap: 8px; justify-items: start; border-color: light-dark(#ecd9c3, #4a3a2c); background: light-dark(#fffaf3, #2b2620); }
  .pendiente-tit { font-weight: 650; font-size: 16.5px; }
  .pendiente-txt { color: var(--ink-2); font-size: 15px; }
  .pendiente .btn { min-height: 44px; margin-top: 4px; padding-inline: 18px; font-size: 15px; background: var(--surface-3); }
  .pendiente--revision { border-color: var(--line); background: var(--surface); }
  .cambio {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin: -4px 0 12px; padding: 6px 12px; border-radius: 999px;
    background: light-dark(rgb(255 255 255 / .65), rgb(255 255 255 / .1));
    font-size: 14.5px; font-weight: 650;
  }
  .cambio .enlace { font-size: 13.5px; color: inherit; opacity: .75; }
}