:root {
  --ink: #233845; --muted: #556476; --accent: #a77a3b; --accent-deep: #8a6530; --warm: #c7a678;
  --paper: #ffffff; --hair: rgba(35, 56, 69, .16); --hair-soft: rgba(35, 56, 69, .08);
  --display: "Jost", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Papel cálido, no gris-blanco plano — y una capa de tarjeta distinta del fondo,
     para que la app tenga profundidad en vez de un único tono repetido. */
  --page-bg: #EAE2D2; --card: #FFFFFF; --panel: #FBF6EC; --panel-border: rgba(35, 56, 69, .12);
  --badge-bg: rgba(167, 122, 59, .14);
  --topbar-bg: #233845; --topbar-text: #F4EFE4; --topbar-dot: rgba(244, 239, 228, .32);
  --text: #233845; --text2: #556476; --border: rgba(35, 56, 69, .14);
  --err: #B23A3A;
  --shadow-card: 0 3px 12px rgba(35, 56, 69, .09), 0 1px 3px rgba(35, 56, 69, .06);
  --shadow-btn: 0 10px 22px rgba(167, 122, 59, .32);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #12181F; --card: #1E2530; --panel: #202B37; --panel-border: rgba(239, 238, 236, .10);
    --badge-bg: rgba(207, 157, 94, .16); --accent: #cf9d5e; --accent-deep: #e3b378;
    --topbar-bg: #233845; --topbar-text: #EFEEEC; --topbar-dot: rgba(239, 238, 236, .28);
    --text: #EFEEEC; --text2: #9BA9B4; --border: rgba(239, 238, 236, .14);
    --err: #E08A8A;
    --shadow-card: 0 6px 18px rgba(0, 0, 0, .38); --shadow-btn: 0 10px 26px rgba(207, 157, 94, .28);
  }
}
:root[data-theme="dark"] {
  --page-bg: #12181F; --card: #1E2530; --panel: #202B37; --panel-border: rgba(239, 238, 236, .10);
  --badge-bg: rgba(207, 157, 94, .16); --accent: #cf9d5e; --accent-deep: #e3b378;
  --topbar-bg: #233845; --topbar-text: #EFEEEC; --topbar-dot: rgba(239, 238, 236, .28);
  --text: #EFEEEC; --text2: #9BA9B4; --border: rgba(239, 238, 236, .14);
  --err: #E08A8A;
  --shadow-card: 0 6px 18px rgba(0, 0, 0, .38); --shadow-btn: 0 10px 26px rgba(207, 157, 94, .28);
}
:root[data-theme="light"] {
  --page-bg: #EAE2D2; --card: #FFFFFF; --panel: #FBF6EC; --panel-border: rgba(35, 56, 69, .12);
  --badge-bg: rgba(167, 122, 59, .14);
  --topbar-bg: #233845; --topbar-text: #F4EFE4; --topbar-dot: rgba(244, 239, 228, .32);
  --text: #233845; --text2: #556476; --border: rgba(35, 56, 69, .14);
  --err: #B23A3A;
  --shadow-card: 0 3px 12px rgba(35, 56, 69, .09), 0 1px 3px rgba(35, 56, 69, .06);
  --shadow-btn: 0 10px 22px rgba(167, 122, 59, .32);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg); font-family: var(--body); color: var(--text); }
a { color: inherit; }

/* El conmutador claro/oscuro del padre vive arriba a la derecha y en movil
   tapaba el chip de Planes: aqui baja a la esquina inferior derecha. */
.theme-toggle { top: auto; bottom: calc(1.15rem + env(safe-area-inset-bottom)); right: 1.15rem; z-index: 30; }

.exit-link { position: fixed; top: 1.3rem; left: 1.3rem; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text2); text-decoration: none; z-index: 6; }
.exit-link svg { width: 16px; height: 16px; }

.intro-screen { position: fixed; inset: 0; background: #0e1520; z-index: 100; display: flex; align-items: center; justify-content: center; }
.intro-screen video { width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; bottom: 2.2rem; right: 1.4rem; background: rgba(255, 255, 255, .14); color: #efeeec; border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px; padding: .55rem 1.15rem; font-size: 13px; font-weight: 600; font-family: var(--body); cursor: pointer; }
.intro-skip:active { background: rgba(255, 255, 255, .24); }
.intro-sound { position: absolute; bottom: 2.2rem; left: 1.4rem; display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .14); color: #efeeec; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 20px; padding: .55rem 1.05rem; font-size: 13px; font-weight: 600; font-family: var(--body);
  cursor: pointer; }
.intro-sound:active { background: rgba(255, 255, 255, .24); }
.intro-sound svg { stroke: #efeeec; }
.intro-sound .son-off { display: none; }
.intro-sound.silenciado .son-on { display: none; }
.intro-sound.silenciado .son-off { display: block; }
.intro-play { display: none; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; cursor: pointer; backdrop-filter: blur(3px); }
.intro-play svg { margin-left: 4px; }
.intro-play:active { background: rgba(255, 255, 255, .26); }

.app { max-width: 460px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; background: var(--topbar-bg); color: var(--topbar-text); border: 1px solid rgba(244, 239, 228, .14); border-radius: 14px; padding: .65rem .85rem; margin-bottom: 1.3rem; position: sticky; top: .8rem; z-index: 5; box-shadow: 0 10px 26px rgba(0, 0, 0, .32); }
.back-btn { width: 44px; height: 44px; margin: -7px 0; display: none; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--topbar-text); }
.back-btn:active { background: rgba(255, 255, 255, .12); }
.topbar-mid { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.topbar-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--topbar-text); }
.dots { display: flex; gap: 5px; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--topbar-dot); }
.dot.on { background: var(--accent); }

.screen { display: none; }
.screen.active { display: block; animation: fadein .25s var(--ease-salida); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } }

.ic { width: 24px; height: 24px; stroke: var(--text); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-lg { width: 30px; height: 30px; stroke: var(--text); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ic-accent { stroke: var(--accent) !important; }
.ic-muted { stroke: var(--text2) !important; }
.dot2 { fill: currentColor; stroke: none; }

.brand-lockup { display: flex; align-items: center; gap: 13px; margin-bottom: 1.5rem; }
.brand-mark { width: 54px; height: 54px; border-radius: 13px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .01em; flex: none; overflow: hidden; box-shadow: 0 8px 18px rgba(35, 56, 69, .3); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-lockup-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.brand-lockup-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text2); letter-spacing: .02em; }

.hero-title { font-family: var(--display); font-weight: 600; font-size: 27px; line-height: 1.16; letter-spacing: -.01em; color: var(--text); margin: 0 0 .6rem; text-wrap: balance; }
.hero-sub { font-size: 15px; color: var(--text2); line-height: 1.55; margin: 0 0 1.3rem; max-width: 40ch; }

.feature-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text2); line-height: 1.4; }
.feature-list li svg { flex: none; margin-top: 1px; stroke: var(--text); }

.hero-stage { background: var(--ink); border-radius: 20px; padding: 1.5rem 1.3rem; margin-bottom: 1.3rem; box-shadow: 0 24px 50px rgba(0, 0, 0, .28); }
.hero-stage .poster-frame { max-width: 250px; margin: 0 auto; }
.hero-stage .poster { box-shadow: 0 20px 44px rgba(0, 0, 0, .4); }

.hero-note { text-align: center; font-size: 12.5px; color: var(--text2); margin: .85rem 0 0; }

.poster-frame { position: relative; width: 100%; overflow: hidden; }

.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 60%); color: #fff; text-align: center; font-weight: 600; font-size: 15px; padding: .95rem; border-radius: 12px; cursor: pointer; user-select: none; border: none; box-shadow: var(--shadow-btn); transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary:active { transform: scale(.97) translateY(1px); box-shadow: 0 4px 10px rgba(167, 122, 59, .28); }
.btn-ghost { border: 1.4px solid var(--border); color: var(--text); text-align: center; font-weight: 600; font-size: 15px; padding: .9rem; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; user-select: none; background: var(--card); box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.btn-ghost:active { background: var(--panel); transform: scale(.97) translateY(1px); box-shadow: 0 2px 6px rgba(35, 56, 69, .08); }

.scr-q-big { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; color: var(--text); margin: .2rem 0 1.2rem; text-wrap: balance; }

.icon-badge { width: 42px; height: 42px; border-radius: 50%; background: var(--badge-bg); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 3px 8px rgba(167, 122, 59, .16); }
.icon-badge .ic, .icon-badge .ic-lg { stroke: var(--accent-deep); width: 22px; height: 22px; }
:root[data-theme="dark"] .icon-badge .ic, :root[data-theme="dark"] .icon-badge .ic-lg { stroke: var(--accent); }
@media (prefers-color-scheme: dark) { .icon-badge .ic, .icon-badge .ic-lg { stroke: var(--accent); } }

@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.area-tile, .area-tile-wide, .proc-card { animation: riseIn .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.area-grid .area-tile:nth-child(1) { animation-delay: .02s; }
.area-grid .area-tile:nth-child(2) { animation-delay: .07s; }
.area-grid .area-tile:nth-child(3) { animation-delay: .12s; }
.area-grid .area-tile:nth-child(4) { animation-delay: .17s; }
#area-wide { animation-delay: .22s; }
.proceso-grid .proc-card:nth-child(1) { animation-delay: .02s; }
.proceso-grid .proc-card:nth-child(2) { animation-delay: .06s; }
.proceso-grid .proc-card:nth-child(3) { animation-delay: .10s; }
.proceso-grid .proc-card:nth-child(4) { animation-delay: .14s; }
.proceso-grid .proc-card:nth-child(5) { animation-delay: .18s; }
.proceso-grid .proc-card:nth-child(n+6) { animation-delay: .22s; }
@media (prefers-reduced-motion: reduce) { .area-tile, .area-tile-wide, .proc-card { animation: none; } }

.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.area-tile { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; padding: 1.3rem .8rem; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.area-tile:active { transform: scale(.97) translateY(1px); box-shadow: 0 1px 4px rgba(35, 56, 69, .08); }
.area-tile span { font-size: 14px; font-weight: 600; color: var(--text); }
.area-tile-wide { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; padding: 1rem 1.1rem; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.area-tile-wide:active { transform: scale(.98) translateY(1px); box-shadow: 0 1px 4px rgba(35, 56, 69, .08); }
.area-tile-wide span { font-size: 14px; font-weight: 600; color: var(--text); display: block; }
.area-tile-wide p { font-size: 12px; color: var(--text2); margin: 2px 0 0; }
.area-tile-wide.crear { background: transparent; border: 1.5px dashed var(--accent); box-shadow: none; }
.area-tile-wide.crear .icon-badge { background: none; border: 1.5px solid var(--accent); box-shadow: none; }
.area-tile-wide.crear span { color: var(--accent-deep); }
:root[data-theme="dark"] .area-tile-wide.crear span { color: var(--accent); }
@media (prefers-color-scheme: dark) { .area-tile-wide.crear span { color: var(--accent); } }

.proceso-grid { display: flex; flex-direction: column; gap: 8px; }
.proc-card { display: flex; align-items: center; gap: .8rem; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: .85rem .95rem; cursor: pointer; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.proc-card:active { transform: scale(.98) translateY(1px); box-shadow: 0 1px 4px rgba(35, 56, 69, .08); }
.proc-card h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.proc-card p { margin: 2px 0 0; font-size: 12px; color: var(--text2); }
.proc-card.soon { opacity: .5; cursor: default; box-shadow: none; }
.proc-card.soon:active { transform: none; }
.proc-card.crear { background: transparent; border: 1.5px dashed var(--accent); box-shadow: none; }
.proc-card.crear .icon-badge { background: none; border: 1.5px solid var(--accent); box-shadow: none; }
.proc-card.crear h3 { color: var(--accent-deep); }
:root[data-theme="dark"] .proc-card.crear h3 { color: var(--accent); }
@media (prefers-color-scheme: dark) { .proc-card.crear h3 { color: var(--accent); } }

.result-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 1.2rem; }

/* póster impreso — se mantiene igual en claro y oscuro, es papel */
/* Ancho fijo siempre — el cartel nunca reajusta su tipografía. script.js lo escala
   como una unidad (como hacer zoom a una foto) según el hueco disponible, así el
   texto jamás se solapa por encoger el contenedor. */
.poster { position: absolute; top: 0; left: 0; width: 380px; background: var(--paper); color: var(--ink); aspect-ratio: 210 / 297; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; transform-origin: top left; }
.band { height: 6px; background: var(--accent); flex: none; }
.inner { padding: .9rem 1rem .85rem; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nameplate { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.nameplate span { font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tag { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--accent); color: var(--accent); padding: 2px 6px; border-radius: 2px; }
.title { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.1; margin: 0 0 .2rem; }
.objective { font-size: 9.5px; color: var(--muted); margin: 0 0 .55rem; line-height: 1.3; }
.hr { border: none; border-top: 1px solid var(--hair); margin: 0 0 .55rem; }
.body-area { flex: 1; min-height: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; height: 100%; }
/* Lista compacta — cuando hay demasiados pasos para la rejilla de tarjetas
   (índices de emergencia, onboarding largo...), una fila por paso. */
.clist { display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 1px; }
.crow { display: flex; align-items: center; gap: 5px; padding: 2px 3px; border-bottom: 1px solid var(--hair-soft); flex: 1; min-height: 0; }
.crow.control { border-left: 2px solid var(--accent); padding-left: 4px; }
.crow .ic-sm { width: 12px; height: 12px; flex: none; stroke: var(--ink); }
.cn { font-size: 6.3px; color: var(--muted); width: 9px; flex: none; text-align: center; }
.ctext { font-size: 7.1px; line-height: 1.25; color: var(--ink); flex: 1; min-width: 0; }
.ctext b { font-weight: 700; }
.tile { border: 1px solid var(--hair); border-radius: 3px; padding: .35rem .4rem; display: flex; flex-direction: column; gap: .15rem; position: relative; }
.tile.control { border: 1.4px solid var(--accent); }
.tile .n { position: absolute; top: 4px; right: 5px; width: 14px; height: 14px; border-radius: 50%; border: 1.1px solid var(--hair); font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.tile.control .n { border-color: var(--accent); color: var(--accent); }
.tile h3 { margin: .1rem 0 0; font-size: 10px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.tile p { margin: 0; font-size: 7.5px; color: var(--muted); line-height: 1.2; }
.kicker { font-size: 7px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.flow { display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%; justify-content: center; }
.q { width: 100%; border: 1px solid var(--hair); border-radius: 4px; padding: .4rem .55rem; text-align: center; }
.q b { font-family: var(--display); font-weight: 600; font-size: 10.5px; color: var(--ink); }
.arrow { width: 1px; height: 7px; background: var(--hair); }
.branches { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; width: 100%; }
.branch { border-radius: 4px; padding: .35rem .4rem; display: flex; gap: .3rem; align-items: flex-start; border: 1px solid var(--hair-soft); }
.branch.yes { border-color: var(--accent); }
.branch p { margin: 0; font-size: 8.3px; line-height: 1.22; color: var(--ink); }
.always { width: 100%; margin-top: 7px; border: 1.4px solid var(--accent); border-radius: 4px; padding: .4rem .55rem; display: flex; gap: .4rem; align-items: center; }
.always p { margin: 0; font-size: 8.7px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.footer { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--hair); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .7rem; margin-bottom: .4rem; }
.flabel { display: block; font-size: 6.8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.fval { font-size: 9px; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chips span { font-size: 7.5px; border: 1px solid var(--hair); border-radius: 8px; padding: 1px 5px; color: var(--muted); }
.sign { display: flex; gap: .8rem; font-size: 7.5px; color: var(--muted); }
.sign div { flex: 1; border-top: 1px solid var(--hair); padding-top: 2px; }
.coach { font-size: 7.5px; color: var(--muted); font-style: italic; margin: .4rem 0 0; line-height: 1.25; }

.backdrop-dim { position: fixed; inset: 0; background: rgba(15, 20, 25, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40; }
.backdrop-dim.show { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 115%); width: 100%; max-width: 460px; background: var(--card); border-radius: 20px 20px 0 0; padding: .7rem 1.4rem 1.7rem; box-shadow: 0 -12px 30px rgba(0, 0, 0, .28); transition: transform .32s cubic-bezier(.2, .8, .2, 1); z-index: 41; max-height: 82vh; overflow-y: auto; }
.sheet.open { transform: translate(-50%, 0); }
/* La salida es más rápida que la entrada: el sistema responde, no se despide. */
.sheet:not(.open) { transition-duration: .24s; }
#sheet-personalizar { max-height: 58vh; }
.sheet-handle { width: 34px; height: 4px; background: var(--border); border-radius: 3px; margin: 0 auto 1rem; }
.sheet-title { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--text); margin: 0 0 .8rem; }
.f-label { font-size: 13px; font-weight: 600; color: var(--text); display: block; margin: .8rem 0 .4rem; }
.f-label:first-child { margin-top: 0; }
.f-input { width: 100%; border: 1.4px solid var(--border); border-radius: 10px; padding: .7rem .8rem; font-size: 16px; color: var(--text); background: var(--panel); font-family: var(--body); transition: border-color .15s ease, box-shadow .15s ease; }
.f-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--badge-bg); }
.f-input.err { border-color: var(--err); }
textarea.f-input { resize: vertical; min-height: 88px; line-height: 1.4; }
.f-hint { font-size: 11.5px; color: var(--text2); margin: .3rem 0 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-opt { font-size: 13px; border: 1.4px solid var(--border); border-radius: 18px; padding: .45rem .9rem; color: var(--text2); cursor: pointer; user-select: none; }
.chip-opt.sel { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.step-list { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel); border-radius: 8px; padding: .5rem .7rem; font-size: 12.5px; color: var(--text); cursor: pointer; }
.step-row svg { stroke: var(--text2); flex: none; }
.step-row.off { opacity: .45; }
.step-row.off span { text-decoration: line-through; }

.ai-add { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.extra-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.extra-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel); border-radius: 10px; padding: .55rem .8rem; font-size: 12.5px; color: var(--text); }
.extra-chip svg { stroke: var(--text2); cursor: pointer; flex: none; }

/* Editor del documento de control (dentro de la hoja "Personalizar") */
.proc-card .chev { margin-left: auto; flex: none; transform: rotate(180deg); stroke: var(--text2); }
.chip-opt .del { margin: -8px -8px -8px 6px; padding: 8px; box-sizing: content-box; vertical-align: -3px; stroke: var(--text2); cursor: pointer; }
.ctrl-edit { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper span { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1.4px solid var(--border); border-radius: 50%; font-size: 18px; color: var(--text);
  cursor: pointer; user-select: none; background: var(--card); }
.stepper span:active { background: var(--panel); }
.stepper b { font-size: 16px; font-weight: 600; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }

/* Huecos para rellenar a boli en el pie del cartel (dirección, punto de encuentro...) */
.blanks { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .7rem; margin-bottom: .4rem; }
.bline { display: block; border-bottom: 1px solid var(--hair); height: 11px; }
.legalnote { font-size: 8px; color: var(--accent); margin: 0 0 .4rem; line-height: 1.25; }

/* Tabla del documento de control (segunda hoja) */
.ctrl-wrap { border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; }
.ctrl-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 7px; color: var(--ink); }
.ctrl-tbl th { background: var(--hair-soft); padding: 3px; text-align: left; font-weight: 700;
  font-size: 6.8px; line-height: 1.1; border-bottom: 1px solid var(--hair); }
.ctrl-tbl td { padding: 0 3px; border-top: 1px solid var(--hair-soft);
  border-right: 1px solid var(--hair-soft); vertical-align: middle; }
.ctrl-tbl td:last-child, .ctrl-tbl th:last-child { border-right: none; }
.ctrl-nota { font-size: 6.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.25; }
.inner.compact .title { font-size: 15px; }
.inner.compact .objective { font-size: 8.5px; }



/* ---- Marca e identidad ---- */

/* Firma de la casa en el pie de cada cartel (pantalla e impreso) */
.brandline { display: flex; align-items: center; justify-content: space-between;
  margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--hair-soft); }
.brandline img { height: 13px; width: auto; display: block; }
.brandline span { font-size: 6.8px; letter-spacing: .05em; color: var(--muted); }

/* Logo blanco sobre el escaparate oscuro de la portada */
.stage-logo { display: block; height: 24px; width: auto; margin: 0 auto 16px; opacity: .96; }

/* Pie de marca persistente en todas las pantallas de la app */
.app-brand { display: flex; justify-content: center; margin-top: 2.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--panel-border); }
.app-brand img { height: 22px; width: auto; opacity: .82; }
.app-brand .solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  .app-brand .solo-claro { display: none; }
  .app-brand .solo-oscuro { display: block; }
}
:root[data-theme="dark"] .app-brand .solo-claro { display: none; }
:root[data-theme="dark"] .app-brand .solo-oscuro { display: block; }
:root[data-theme="light"] .app-brand .solo-claro { display: block; }
:root[data-theme="light"] .app-brand .solo-oscuro { display: none; }

/* Acento dorado bajo los titulos de las hojas */
.sheet-title { position: relative; padding-bottom: .55rem; }
.sheet-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px;
  border-radius: 2px; background: var(--accent); }

/* Estados hover para escritorio: la app tambien debe sentirse viva con raton */
@media (hover: hover) and (pointer: fine) {
  .proc-card:hover, .area-tile:hover, .area-tile-wide:hover {
    transform: translateY(-2px); box-shadow: 0 8px 22px rgba(35, 56, 69, .16); }
  .proc-card.soon:hover { transform: none; box-shadow: none; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(167, 122, 59, .38); }
  .btn-ghost:hover, .share-row:hover { background: var(--panel); }
  .view-toggle span:not(.on):hover { color: var(--text); }
  .stepper span:hover { border-color: var(--accent); color: var(--accent); }
}

/* ---- Responsividad y accesibilidad transversales ---- */

/* Toques rapidos sin que el navegador los convierta en zoom de pagina */
.btn-primary, .btn-ghost, .stepper span, .chip-opt, .proc-card, .area-tile,
.area-tile-wide, .step-row, .back-btn, .view-toggle span, .share-row { touch-action: manipulation; }

/* La app es operable con teclado: el foco tiene que verse */
[tabindex]:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* iPhone sin marco: que nada quede pegado al home indicator */
.app { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
.sheet { padding-bottom: calc(1.7rem + env(safe-area-inset-bottom)); }

/* dvh donde exista: la barra dinamica de iOS ya no tapa el borde de las hojas */
@supports (height: 1dvh) {
  .sheet { max-height: 82dvh; }
  #sheet-personalizar { max-height: 58dvh; }
  .app { min-height: 100dvh; }
}

/* Conmutador Cartel | Hoja de control */
.view-toggle { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 4px; margin-bottom: 10px; }
.view-toggle span { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--text2);
  padding: .55rem 0; border-radius: 9px; cursor: pointer; user-select: none; }
.view-toggle span.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-card); }
#resultado-frame2 { display: none; }
.result-frames.show-control #resultado-frame { display: none; }
.result-frames.show-control #resultado-frame2 { display: block; }

/* Compartir por WhatsApp */
.share-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  padding: .7rem; border: 1.4px solid var(--border); border-radius: 12px; color: var(--text2);
  font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--card); }
.share-row:active { background: var(--panel); }
.share-row svg { stroke: var(--text2); }




/* ---- Apartado de planes ---- */
.ver-planes { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px;
  padding: .6rem; color: var(--accent-deep); font-size: 13.5px; font-weight: 600; cursor: pointer;
  border-radius: 10px; user-select: none; }
.ver-planes svg { transform: rotate(180deg); stroke: var(--accent-deep); }
.ver-planes:active { background: var(--panel); }
@media (prefers-color-scheme: dark) { .ver-planes, .ver-planes svg { color: var(--accent); stroke: var(--accent); } }
:root[data-theme="dark"] .ver-planes { color: var(--accent); }
:root[data-theme="dark"] .ver-planes svg { stroke: var(--accent); }

.planes-sub { font-size: 14px; color: var(--text2); line-height: 1.5; margin: -0.6rem 0 1.2rem; }
.planes-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.plan-card { position: relative; background: var(--card); border: 1px solid var(--panel-border);
  border-radius: 18px; padding: 1.4rem 1.3rem 1.3rem; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; animation: riseIn .45s cubic-bezier(.2, .8, .2, 1) backwards;
  transition: transform .18s ease, box-shadow .18s ease; }
.planes-grid .plan-card:nth-child(1) { animation-delay: .05s; }
.planes-grid .plan-card:nth-child(2) { animation-delay: .12s; }
.planes-grid .plan-card:nth-child(3) { animation-delay: .19s; }
.planes-grid .plan-card:nth-child(4) { animation-delay: .26s; }

/* Plan Anual: tratamiento sobrio en tinta, para diferenciarse del dorado del Pack Local */
.plan-card.anual { border: 1.5px solid var(--ink, #233845); }
.badge-anual { background: var(--ink, #233845); color: #EFEEEC; animation: none; }
:root[data-theme="dark"] .plan-card.anual { border-color: var(--accent); }
:root[data-theme="dark"] .badge-anual { background: var(--accent); color: #1B2B36; }
.plan-card h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--text); }
.plan-precio { margin: 0; font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.plan-antes { margin: 0 0 2px; font-size: 13px; color: var(--text2); text-decoration: line-through; }
.plan-nota { margin: .35rem 0 .9rem; font-size: 12.5px; color: var(--text2); }
.plan-lista { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.plan-lista li { position: relative; padding-left: 22px; font-size: 13px; color: var(--text); line-height: 1.35; }
.plan-lista li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 11px;
  border-right: 2.2px solid var(--accent); border-bottom: 2.2px solid var(--accent); transform: rotate(40deg); }
.plan-card .btn-ghost, .plan-card .btn-primary { margin-top: auto; }

/* La destacada: borde dorado degradado, insignia y presencia — que no haya duda de cual elegir */
.plan-card.destacado { order: -1; border: none; background:
  linear-gradient(var(--card), var(--card)) padding-box,
  linear-gradient(150deg, var(--accent), var(--warm) 55%, var(--accent-deep)) border-box;
  border: 2.5px solid transparent; box-shadow: 0 18px 40px rgba(167, 122, 59, .26); }
.plan-card.destacado .plan-precio { font-size: 46px; color: var(--accent-deep); }
:root[data-theme="dark"] .plan-card.destacado .plan-precio { color: var(--accent); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--accent-deep), var(--accent) 45%, var(--warm) 75%, var(--accent-deep));
  background-size: 220% 100%; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(167, 122, 59, .4); animation: brillo 3.2s ease-in-out infinite; }
@keyframes brillo { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .plan-badge { animation: none; } .plan-card { animation: none; } }
@media (hover: hover) and (pointer: fine) {
  .plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(35, 56, 69, .18); }
  .plan-card.destacado:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 24px 50px rgba(167, 122, 59, .32); }
}
.planes-pie { text-align: center; font-size: 11.5px; color: var(--text2); margin-top: 1.1rem; line-height: 1.5; }

/* Escritorio: tres columnas con la destacada en el centro, un poco mayor */
@media (min-width: 1000px) {
  .app:has(#scr-planes.active) { max-width: 980px; }
  .app:has(#scr-planes.active) .planes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
  .app:has(#scr-planes.active) .plan-card.destacado { order: 0; transform: scale(1.02); }
  .app:has(#scr-planes.active) .planes-sub { max-width: 60ch; }
}


/* Velo sobre la vista previa bloqueada cuando la ventana pierde el foco
   (herramienta de recorte, cambio de app): lo que se capture sale difuminado. */
.result-frames.velado .poster { filter: blur(14px); transition: filter .12s ease; }

/* Chip de Planes en la barra de navegacion, visible en todas las pantallas */
.topbar-planes { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 60%);
  color: #fff; border: none; border-radius: 16px; padding: .42rem .85rem; font-size: 12px;
  font-weight: 700; letter-spacing: .02em; cursor: pointer; user-select: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.topbar-planes:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .topbar-planes:hover { transform: translateY(-1px); } }

/* Franja de planes bajo el contenido: presencia en todas las pantallas de listado */
.banner-planes { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: .8rem 1rem; background: var(--badge-bg); border: 1.4px solid var(--accent);
  border-radius: 14px; cursor: pointer; user-select: none; transition: transform .15s ease, box-shadow .15s ease; }
.banner-planes b { display: block; font-size: 13.5px; color: var(--text); }
.banner-planes span { display: block; font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.banner-planes svg { flex: none; transform: rotate(180deg); stroke: var(--accent-deep); }
:root[data-theme="dark"] .banner-planes svg { stroke: var(--accent); }
.banner-planes:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .banner-planes:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } }

/* Modal recordatorio cuando se agotan los carteles gratis */
.modal-velo { position: fixed; inset: 0; background: rgba(15, 20, 25, .55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1.4rem;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.modal-velo.show { opacity: 1; pointer-events: auto; }
.modal-caja { background: var(--card); border-radius: 20px; padding: 1.6rem 1.4rem 1.2rem;
  max-width: 340px; width: 100%; box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
  transform: scale(.94) translateY(8px); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.modal-velo.show .modal-caja { transform: scale(1) translateY(0); }
.modal-titulo { margin: 0 0 .45rem; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.modal-texto { margin: 0 0 1.1rem; font-size: 13.5px; line-height: 1.5; color: var(--text2); }
.modal-luego { text-align: center; margin-top: .7rem; padding: .5rem; font-size: 13px;
  font-weight: 600; color: var(--text2); cursor: pointer; user-select: none; border-radius: 8px; }
.modal-luego:active { background: var(--panel); }

/* Opciones del muro de pago */
.pago-op { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1.4px solid var(--border); border-radius: 12px; padding: .8rem .9rem; margin-bottom: 8px;
  cursor: pointer; background: var(--card); transition: transform .15s ease, box-shadow .15s ease; }
.pago-op:active { transform: scale(.98); }
.pago-op b { display: block; font-size: 14px; color: var(--text); }
.pago-op span { display: block; font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.pago-op em { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 17px;
  color: var(--text); white-space: nowrap; }
.pago-op.destacada { border: 2px solid var(--accent); background: var(--badge-bg); }
.pago-op.destacada em { color: var(--accent-deep); }
@media (hover: hover) and (pointer: fine) { .pago-op:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } }

/* Marca de agua VISTA PREVIA hasta desbloquear (no sale en el PDF impreso) */
.poster { user-select: none; -webkit-user-select: none; }
/* Mosaico que cubre TODO el cartel: una captura de pantalla queda marcada en cada
   zona, no solo en el centro. El PDF desbloqueado sale limpio. */
.result-frames.con-marca .poster-frame::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 2;
  transform: rotate(-24deg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='120'%3E%3Ctext x='125' y='64' font-family='Arial, sans-serif' font-size='13' font-weight='600' fill='%23233845' fill-opacity='0.13' text-anchor='middle'%3EVISTA PREVIA %C2%B7 symhostelgestion.com%3C/text%3E%3C/svg%3E");
  background-size: 250px 120px; background-repeat: repeat;
}

/* Aviso de borrador propuesto por IA */
.borrador-hint { display: none; font-size: 12.5px; line-height: 1.5; color: var(--text2);
  background: var(--badge-bg); border: 1px solid var(--accent); border-radius: 10px;
  padding: .65rem .85rem; margin-top: 10px; }

/* Aviso de navegador integrado (Instagram, TikTok...) */
.aviso-webview { display: flex; gap: 10px; align-items: flex-start; background: var(--badge-bg);
  border: 1px solid var(--accent); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .9rem; }
.aviso-webview svg { stroke: var(--accent-deep); flex: none; margin-top: 2px; }
.aviso-webview p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text); }

/* Escritorio: cartel y hoja de control lado a lado, sin conmutador */
@media (min-width: 1000px) {
  .app:has(#scr-resultado.active) { max-width: 980px; }
  .app:has(#scr-resultado.active) .result-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .app:has(#scr-resultado.active) #resultado-frame2 { display: block; }
  .app:has(#scr-resultado.active) .view-toggle { display: none; }
  .app:has(#scr-resultado.active) .result-actions, .app:has(#scr-resultado.active) .share-row {
    max-width: 460px; margin-left: auto; margin-right: auto; }
  .app:has(#scr-resultado.active) .result-actions { margin-top: 1.2rem; }
}

#print-root { display: none; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }

  .theme-toggle, .exit-link, .intro-screen, .app,
  .sheet, .backdrop-dim, .topbar { display: none !important; }

  #print-root { display: block !important; }

  /* 190mm útiles = 718px a 96dpi. El cartel se maqueta a 380px fijos → 718/380 = 1,889.
     Escalar, nunca reflowar: si se cambia el ancho de .poster hay que rehacer esta cuenta. */
  /* 180mm en vez de 190: el cartel cabe entero tambien en papel Carta (Latam). */
  .print-page { position: relative; width: 180mm; height: 255mm; overflow: hidden;
    break-after: page; page-break-after: always; break-inside: avoid; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }

  #print-root .poster {
    position: absolute; top: 0; left: 0;
    width: 380px;
    transform: scale(1.7903);   /* 180mm = 680.3px a 96dpi / 380px de diseno */
    transform-origin: top left;
    box-shadow: none; border-radius: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    /* El cartel es papel: paleta clara fija aunque la app esté en modo oscuro. */
    --accent: #a77a3b; --accent-deep: #8a6530; --ink: #233845; --muted: #556476;
    --paper: #fff; --hair: rgba(35, 56, 69, .16); --hair-soft: rgba(35, 56, 69, .08);
  }
}

/* ---- Plan Anual: logo del local en el cartel ---- */
.nameplate-local { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.local-logo { height: 16px; width: auto; max-width: 84px; object-fit: contain; display: block; }

/* ---- Mi cuenta ---- */
#cuenta-body { max-width: 480px; }
.cuenta-cab { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--panel-border); border-radius: 14px; padding: 14px; margin-bottom: 1.1rem; }
.cuenta-cab b { font-size: 14px; color: var(--text); word-break: break-all; }
.cuenta-cab p { margin: .15rem 0 0; font-size: 12px; color: var(--muted); }
.cuenta-logo-prev { display: block; max-height: 56px; max-width: 160px; object-fit: contain; background: #fff; border: 1px solid var(--panel-border); border-radius: 10px; padding: 6px; margin-top: 4px; }
.cuenta-cartel { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--panel-border); border-radius: 12px; padding: 11px 13px; margin-top: 8px; }
.cuenta-cartel > span { font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-cartel .ic-sm { flex: none; stroke: var(--muted); cursor: pointer; width: 18px; height: 18px; }
.cuenta-cartel .ic-sm:hover { stroke: var(--err); }

/* ---- Textos a medida (personalizar, solo anual) ---- */
.tx-edit { border-top: 1px dashed var(--panel-border); margin-top: 1.1rem; padding-top: 1rem; }

/* ---- Análisis de protocolo por foto (Pack Local y Anual) ---- */
.corona { stroke: var(--accent-deep); }
.foto-opcion { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px;
  background: var(--panel); border: 1.5px solid var(--accent); border-radius: 14px; cursor: pointer; }
.foto-opcion .corona { flex: none; width: 26px; height: 26px; }
.foto-opcion b { display: block; font-size: 13.5px; color: var(--text); }
.foto-opcion span { display: block; font-size: 11.5px; color: var(--text2); line-height: 1.4; margin-top: 2px; }
.foto-opcion:active { transform: scale(.99); }
.foto-prev { display: block; max-width: 100%; max-height: 220px; object-fit: contain;
  border: 1px solid var(--panel-border); border-radius: 12px; margin-top: 10px; background: #fff; }
.li-corona { padding-left: 0 !important; display: flex; gap: 6px; align-items: flex-start; font-weight: 600; }
.li-corona::before { display: none !important; }
.li-corona .corona { flex: none; width: 15px; height: 15px; margin-top: 1px; }

.revision-panel { background: var(--card); border: 1.5px solid var(--accent); border-radius: 16px;
  padding: 1rem 1.1rem; margin-top: 1rem; }
.rev-cab { display: flex; align-items: center; gap: 8px; margin-bottom: .5rem; }
.rev-cab b { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text); }
.rev-cab .corona { flex: none; width: 20px; height: 20px; }
.rev-usos { margin-left: auto; font-size: 11px; color: var(--text2); background: var(--badge-bg);
  border-radius: 20px; padding: .15rem .6rem; white-space: nowrap; }
.rev-veredicto { margin: 0 0 .6rem; font-size: 13px; color: var(--text); line-height: 1.5; }
.rev-tit { margin: .8rem 0 .3rem; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-deep); }
.rev-lista { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.rev-lista li { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.rev-lista li b { color: var(--text); }

/* ---- Campo de clave con ojo ---- */
.campo-clave { position: relative; }
.campo-clave .f-input { padding-right: 48px; }
.ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.ojo:active { background: var(--badge-bg); }
.ojo .ic-sm { width: 19px; height: 19px; stroke: var(--text2); }

/* ---- Revisión interactiva: aplicar cambios de la IA ---- */
.rev-checks { display: flex; flex-direction: column; gap: 2px; }
.rev-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text);
  line-height: 1.45; padding: 5px 0; cursor: pointer; }
.rev-check input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; margin: 1px 0 0; }
.rev-preg { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin: 10px 0 5px; }
.rev-otros { min-height: 64px; resize: vertical; font-family: inherit; }
.rev-deshacer { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
  color: var(--accent-deep); text-decoration: underline; cursor: pointer; }

/* ---- Mis facturas ---- */
.factura-pdf { flex: none; font-size: 12px; font-weight: 700; color: var(--accent-deep);
  border: 1px solid var(--accent); border-radius: 8px; padding: .25rem .6rem; text-decoration: none; }
.factura-pdf:active { background: var(--badge-bg); }

/* ---- Mi cuenta en la barra superior (todas las pantallas) ---- */
.topbar-derecha { display: flex; align-items: center; gap: 8px; }
.topbar-cuenta { width: 38px; height: 38px; margin: -4px 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(244, 239, 228, .5);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.topbar-cuenta .ic-sm { stroke: var(--topbar-text); width: 18px; height: 18px; }
.topbar-cuenta:active { background: rgba(255, 255, 255, .22); }

/* ---- Test de protocolos ---- */
.quiz-card { display: flex; align-items: center; gap: 13px; background: var(--card);
  border: 1.5px solid var(--accent); border-radius: 16px; padding: 15px; margin-bottom: .9rem;
  cursor: pointer; box-shadow: var(--shadow-card); }
.quiz-card b { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text); }
.quiz-card span:not(.icon-badge) { display: block; font-size: 12.5px; color: var(--text2); line-height: 1.45; margin-top: 2px; }
.quiz-card .icon-badge { flex: none; }
.quiz-card-flecha { flex: none; transform: rotate(180deg); stroke: var(--accent-deep); }
.quiz-card:active { transform: scale(.99); }

.quiz-progreso { height: 6px; background: var(--panel-border); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
/* Sin transición de width: el nodo se recrea en cada pregunta (nunca llegaba a
   correr) y animar layout es justo lo que evita el resto de la app. */
.quiz-progreso-relleno { height: 100%; background: linear-gradient(90deg, var(--warm), var(--accent)); border-radius: 3px; }
.quiz-num { margin: 0 0 .3rem; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.quiz-preg { margin: 0 0 1.1rem; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.quiz-ops { display: flex; flex-direction: column; gap: 9px; }
.quiz-op { background: var(--card); border: 1.5px solid var(--panel-border); border-radius: 14px;
  padding: 15px 16px; font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.4;
  cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.quiz-op:active { border-color: var(--accent); background: var(--panel); transform: scale(.99); }
.quiz-op-otra { color: var(--text2); font-style: italic; font-weight: 500; }
.quiz-atras { display: inline-block; margin-top: 1.2rem; font-size: 12.5px; font-weight: 600;
  color: var(--text2); text-decoration: underline; cursor: pointer; }

.quiz-res-cab { text-align: center; background: var(--card); border-radius: 18px; padding: 1.4rem 1.2rem 1.2rem;
  border: 1.5px solid var(--panel-border); margin-bottom: 1rem; box-shadow: var(--shadow-card); }
.quiz-res-num { margin: 0; font-family: var(--display); font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.quiz-res-num span { font-size: 20px; color: var(--text2); }
.quiz-res-barra { height: 10px; background: var(--panel-border); border-radius: 5px; overflow: hidden; margin: .8rem 0 .6rem; }
.quiz-res-relleno { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--warm), var(--accent)); }
.quiz-bajo .quiz-res-relleno { background: linear-gradient(90deg, #c98a3a, var(--err)); }
.quiz-bien .quiz-res-relleno { background: linear-gradient(90deg, var(--accent), #2E7D4F); }
.quiz-res-etiqueta { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.quiz-res-veredicto { margin: 0 0 .6rem; font-size: 14px; color: var(--text); line-height: 1.6; }
.quiz-plan { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.quiz-plan li { font-size: 13.5px; color: var(--text); line-height: 1.5; font-weight: 600; }
.quiz-res-reco { margin: 1rem 0 0; font-size: 13px; color: var(--accent-deep); font-weight: 600;
  background: var(--badge-bg); border-radius: 12px; padding: .8rem 1rem; line-height: 1.5; }

/* ---- Salto del test al creador ---- */
.quiz-saltar { margin-top: 1.4rem; }

/* ---- Bienvenida del test ---- */
.quiz-intro-texto { margin: 0 0 1rem; font-size: 14.5px; color: var(--text2); line-height: 1.65; }
.quiz-intro-bloque { background: var(--card); border: 1.5px solid var(--accent); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: 1.2rem; box-shadow: var(--shadow-card); }
.quiz-intro-por { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.6; }
.quiz-intro-por b { color: var(--accent-deep); }

/* ============================================================
   Pasada de pulido de interacción (principios impeccable /
   apple-design / animation-vocabulary):
   - Un solo vocabulario de movimiento: mismas curvas y duraciones
     en toda la app, nada de transiciones sueltas e inconsistentes.
   - Solo transform/opacity/sombra (fluido en móviles baratos).
   - Feedback físico al tocar (se hunde), elevación al pasar el
     ratón (se levanta) — la misma metáfora en todos los controles.
   - Foco de teclado visible en todo, y todo apagado si el usuario
     pide menos movimiento.
   ============================================================ */
:root { --dur-tap: .12s; --dur-hover: .2s; --ease-salida: cubic-bezier(.2, .8, .2, 1); }

.btn-primary, .btn-ghost, .quiz-op, .pago-op, .plan-card, .area-tile, .area-tile-wide,
.proc-card, .share-row, .foto-opcion, .quiz-card, .ver-planes, .cuenta-cartel,
.topbar-planes, .topbar-cuenta, .rev-check, .banner-planes, .view-toggle span, .ojo,
.chip-opt, .step-row {
  transition: transform var(--dur-hover) var(--ease-salida),
              box-shadow var(--dur-hover) var(--ease-salida),
              border-color var(--dur-hover) var(--ease-salida),
              background-color var(--dur-hover) var(--ease-salida),
              color var(--dur-hover) var(--ease-salida),
              opacity var(--dur-hover) var(--ease-salida);
}

/* Al tocar: se hunde un punto, rápido y seco. */
.btn-primary:active, .btn-ghost:active, .quiz-op:active, .pago-op:active,
.area-tile:active, .area-tile-wide:active, .proc-card:active, .share-row:active,
.foto-opcion:active, .quiz-card:active, .ver-planes:active, .cuenta-cartel:active,
.banner-planes:active, .chip-opt:active, .step-row:active {
  transform: scale(.98);
  transition-duration: var(--dur-tap);
}

/* Con ratón: se levanta un pelo y gana sombra — invitación, no fuegos artificiales. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .quiz-op:hover, .pago-op:hover, .area-tile:hover,
  .area-tile-wide:hover, .proc-card:hover, .foto-opcion:hover, .quiz-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(35, 56, 69, .16);
  }
  .quiz-op:hover, .pago-op:hover { border-color: var(--accent); }
  .btn-ghost:hover, .share-row:hover, .ver-planes:hover, .cuenta-cartel:hover { background: var(--panel); }
  .topbar-cuenta:hover { background: rgba(255, 255, 255, .26); }
}

/* Foco de teclado: visible siempre, con el dorado de la marca. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.f-input:focus-visible { outline-offset: 0; }
.f-input:focus { border-color: var(--accent); }

/* Los resultados del test y la revisión entran con la misma cadencia que las pantallas. */
.quiz-res-cab, .revision-panel { animation: fadein .3s var(--ease-salida); }

/* Cada pregunta del test entra con un puente breve en vez de un corte seco:
   el innerHTML se reemplaza, así que la animación corre sola en cada render. */
#quiz-body .quiz-num { animation: fadein .25s var(--ease-salida) backwards; }
#quiz-body .quiz-preg { animation: fadein .25s var(--ease-salida) .04s backwards; }
#quiz-body .quiz-ops { animation: fadein .25s var(--ease-salida) .08s backwards; }

/* El diagnóstico es el momento de la verdad: la barra crece hasta la nota
   (solo transform, la anchura ya viene pintada del render). */
.quiz-res-relleno { transform-origin: left; animation: crecerX .7s var(--ease-salida) .15s backwards; }
@keyframes crecerX { from { transform: scaleX(0); } }

/* Éxito de descarga: el check llega con un pelín de rebote — momento raro,
   aquí sí hay presupuesto para celebrar. */
.exito-pop { animation: exitoPop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; }
@keyframes exitoPop { from { transform: scale(.8); opacity: 0; } }

/* Menos movimiento pedido = menos movimiento dado. Sin excepciones. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .quiz-op, .pago-op, .plan-card, .area-tile, .area-tile-wide,
  .proc-card, .share-row, .foto-opcion, .quiz-card, .ver-planes, .cuenta-cartel,
  .topbar-planes, .topbar-cuenta, .rev-check, .banner-planes, .view-toggle span, .ojo,
  .chip-opt, .step-row,
  .quiz-progreso-relleno, .quiz-res-cab, .revision-panel,
  #quiz-body .quiz-num, #quiz-body .quiz-preg, #quiz-body .quiz-ops,
  .quiz-res-relleno, .exito-pop {
    transition: none; animation: none;
  }
  .btn-primary:hover, .quiz-op:hover, .pago-op:hover, .area-tile:hover,
  .area-tile-wide:hover, .proc-card:hover, .foto-opcion:hover, .quiz-card:hover { transform: none; }
  /* Las hojas y el modal aparecen sin desplazamiento ni escala: el velo de fondo
     conserva su fundido suave (la opacidad sí ayuda a entender el cambio). */
  .sheet { transition: none; }
  .modal-caja { transition: none; transform: none; }
}