/* NexoPOS Online public pages (registro, planes, renovar, pago, avisos) with the NexoPOS app look, like the home page
   (site.css): light surface, white cards, NexoPOS blue, and its dark mode. Loaded after styles/funnel/online.css and
   scoped to body.app-skin, so the owner panel (/dueno) keeps its own look. */
body.app-skin {
  --s-bg: #f5f7f8; --s-surface: #ffffff; --s-surface-2: #eef3fb; --s-text: #011e41; --s-muted: #546985; --s-border: #d6e1ee; --s-border-strong: #cbd8e8;
  --s-accent: #0047ba; --s-accent-hover: #003a99; --s-accent-soft: #e6eefb; --s-success: #08784c; --s-shadow: 0 8px 24px #233f6812; --s-shadow-lift: 0 22px 50px -18px #011e4133;
  --text: var(--s-text); --muted: var(--s-muted); --blue-deep: var(--s-accent); --paper: var(--s-surface-2); --white: var(--s-surface);
  color-scheme: light;
}
:root[data-theme="dark"] body.app-skin {
  --s-bg: #07121f; --s-surface: #0d1c2f; --s-surface-2: #12253d; --s-text: #eaf1fb; --s-muted: #9db0c8; --s-border: #1f3756; --s-border-strong: #29466b;
  --s-accent: #4b8dff; --s-accent-hover: #6aa0ff; --s-accent-soft: #14294a; --s-success: #3ad49a; --s-shadow: 0 8px 24px #00000040; --s-shadow-lift: 0 22px 50px -18px #000000a0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.app-skin {
    --s-bg: #07121f; --s-surface: #0d1c2f; --s-surface-2: #12253d; --s-text: #eaf1fb; --s-muted: #9db0c8; --s-border: #1f3756; --s-border-strong: #29466b;
    --s-accent: #4b8dff; --s-accent-hover: #6aa0ff; --s-accent-soft: #14294a; --s-success: #3ad49a; --s-shadow: 0 8px 24px #00000040; --s-shadow-lift: 0 22px 50px -18px #000000a0;
    color-scheme: dark;
  }
}
body.app-skin.funnel-page { background: radial-gradient(50% 32% at 85% 0%, #2a7de11c, transparent 70%), radial-gradient(40% 26% at 5% 10%, #00ce7c14, transparent 70%), var(--s-bg); color: var(--s-text); }
.app-skin .logo-dark { display: none; }
:root[data-theme="dark"] .app-skin .logo-dark { display: block; } :root[data-theme="dark"] .app-skin .logo-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-skin .logo-dark { display: block; } :root:not([data-theme="light"]) .app-skin .logo-light { display: none; } }

/* Top bar like the app's */
.app-skin .fnav { background: color-mix(in srgb, var(--s-surface) 88%, transparent); border-bottom: 1px solid var(--s-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.app-skin .fnav-in { height: 68px; }
.app-skin .fnav-help { background: var(--s-surface-2); color: var(--s-text); border: 1px solid var(--s-border); }
.app-skin .fnav-help:hover { background: var(--s-accent-soft); }

/* Copy beside the form */
.app-skin .kicker { color: var(--s-accent); }
.app-skin .funnel-title, .app-skin .funnel-aside h1 { color: var(--s-text); }
.app-skin .funnel-promises li { color: var(--s-muted); }

/* Cards */
.app-skin :is(.fcard, .on-card, .pl-card) { background: var(--s-surface); color: var(--s-text); border: 1px solid var(--s-border); box-shadow: var(--s-shadow-lift); }
.app-skin .fcard { min-height: 0; }
.app-skin .pl-card.best { border: 2px solid var(--s-accent); box-shadow: var(--s-shadow-lift); }
.app-skin .pl-tag { background: var(--s-accent); color: #fff; }
.app-skin .pl-head p, .app-skin .pl-note { color: var(--s-muted); }
.app-skin .pl-note :is(a, b) { color: var(--s-accent); }
.app-skin :is(.on-card, .fcard) :is(h1, h2) { color: var(--s-text); }
.app-skin .on-card p, .app-skin .fhint, .app-skin .on-dl dt { color: var(--s-muted); }
.app-skin .on-card p b, .app-skin .on-dl dd { color: var(--s-text); }

/* Buttons: the app's primary and secondary */
.app-skin .btn-green { background: var(--s-accent); color: #fff; box-shadow: 0 10px 26px -12px #0047bab3; }
.app-skin .btn-green:hover { background: var(--s-accent-hover); box-shadow: 0 12px 28px -12px #0047bacc; }
.app-skin .btn-dark { background: var(--s-surface); color: var(--s-text); box-shadow: inset 0 0 0 1px var(--s-border-strong); }
.app-skin .btn-dark:hover { background: var(--s-surface-2); }

/* Form fields */
.app-skin .field input, .app-skin .field select { background: var(--s-surface); color: var(--s-text); box-shadow: inset 0 0 0 1.5px var(--s-border-strong); }
.app-skin .field input:focus, .app-skin .field select:focus { box-shadow: inset 0 0 0 2px var(--s-accent), 0 0 0 4px #2a7de12e; }
.app-skin .field label, .app-skin .pl-choice legend, .app-skin .pl-opt b { color: var(--s-text); }
.app-skin .pl-opt, .app-skin .pl-mod { box-shadow: inset 0 0 0 1.5px var(--s-border-strong); background: var(--s-surface); color: var(--s-text); }
.app-skin .pl-opt:has(input:checked), .app-skin label.pl-mod:has(input:checked) { background: var(--s-accent-soft); box-shadow: inset 0 0 0 2px var(--s-accent); }
.app-skin .pl-opt em { color: var(--s-accent); }
.app-skin .pl-opt small, .app-skin .pl-choice legend span, .app-skin .pl-price { color: var(--s-muted); }
.app-skin .pl-price b, .app-skin .pl-list { color: var(--s-text); }
.app-skin .pl-addr { box-shadow: inset 0 0 0 1.5px var(--s-border-strong); background: var(--s-surface); }
.app-skin .pl-addr span { color: var(--s-muted); }
.app-skin .pl-pays { color: var(--s-text); }
.app-skin .pl-mod.on { background: #e3f6ec; color: var(--s-success); box-shadow: none; }
:root[data-theme="dark"] .app-skin .pl-mod.on { background: #0f3a2a; }
.app-skin .pw-eye { background: var(--s-surface-2); color: var(--s-accent); }
.app-skin .pl-tier { box-shadow: inset 0 0 0 1.5px var(--s-border-strong); background: var(--s-surface); }
.app-skin .pl-tier:has(input:checked) { background: var(--s-accent-soft); box-shadow: inset 0 0 0 2px var(--s-accent); }
.app-skin .pl-tier b { color: var(--s-text); } .app-skin .pl-tier small { color: var(--s-muted); }
.app-skin .pl-per { background: var(--s-surface); color: var(--s-text); box-shadow: inset 0 0 0 1.5px var(--s-border-strong); }
.app-skin .pl-per:has(input:checked) { box-shadow: inset 0 0 0 2px var(--s-accent); color: var(--s-accent); }
/* 1.6.7: a wrong field stays red while it has the focus (same specificity as the focus rule above, later wins). */
.app-skin .field input[aria-invalid="true"], .app-skin .field input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px #c2283d, 0 0 0 4px rgba(194, 40, 61, .15); }

/* 1.6.7: a wrong field stays red while it has the focus (the error is under it). Kept here too: funnel.css is the landing's. */
.field input[aria-invalid="true"], .field input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px #c2283d, 0 0 0 4px rgba(194, 40, 61, .15); }

/* 1.6.8 sign-up by steps (online/gateway/signup.mjs, assets/js/online.js): bar of steps, plan cards like the home
   page's (the free trial first), module cards, the link of the business on the «listo» page. */
.app-skin .rwrap { max-width: 1200px; }
.app-skin .rhead { max-width: 760px; }
.app-skin .rhead p { margin: 10px 0 0; color: var(--s-muted); }
.app-skin .rbar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 18px; padding: 0; list-style: none; counter-reset: none; }
.app-skin .rbar li { display: inline-flex; align-items: center; gap: 10px; color: var(--s-muted); font-weight: 650; font-size: 15px; }
.app-skin .rbar li span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--s-border-strong); font-weight: 800; font-size: 14px; }
.app-skin .rbar li[aria-current="step"] { color: var(--s-text); }
.app-skin .rbar li[aria-current="step"] span { background: var(--s-accent); color: #fff; box-shadow: none; }
.app-skin .rbar li.done span { background: var(--s-accent-soft); color: var(--s-accent); box-shadow: none; }
.app-skin .rsteps .rstep { margin-top: 0; }
.app-skin .rsteps .rstep + .rstep { margin-top: 22px; }
.app-skin .rsteps.rsteps-on .rstep + .rstep { margin-top: 0; }
.app-skin .rstep[hidden] { display: none !important; }
.app-skin .rstep h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.03em; color: var(--s-text); }
.app-skin .rstep-narrow, .app-skin .rstep[data-step="3"] { max-width: 860px; }
.app-skin .ractions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 22px; }
.app-skin .ractions .fnext, .app-skin .ractions .rsubmit { margin-left: auto; }
.app-skin .rplans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.app-skin .rplan h3 { margin: 0; font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -0.03em; color: var(--s-text); }
.app-skin .rplan .pl-price b { font-size: clamp(30px, 3vw, 38px); }
.app-skin .rplan .pl-list { margin: 6px 0 16px; }
.app-skin .rplan .pl-pers { margin-top: auto; }
.app-skin .rplan:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--s-accent), var(--s-shadow-lift); background: var(--s-accent-soft); }
.app-skin .rplan:has(input:focus-visible) { outline: 3px solid var(--s-accent); outline-offset: 3px; }
.app-skin label.rplan { cursor: pointer; }
.app-skin .rplan-pick { position: absolute; opacity: 0; pointer-events: none; }
.app-skin .rplan-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--s-accent); color: #fff; font-weight: 750; }
.app-skin .rplan-free:not(:has(input:checked)) .rplan-cta { background: var(--s-surface); color: var(--s-accent); box-shadow: inset 0 0 0 1.5px var(--s-accent); }
.app-skin .rper { cursor: pointer; }
.app-skin .rmods { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.app-skin .rmod { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--s-surface); box-shadow: inset 0 0 0 1.5px var(--s-border-strong); cursor: pointer; }
.app-skin .rmod:has(input:checked) { background: var(--s-accent-soft); box-shadow: inset 0 0 0 2px var(--s-accent); }
.app-skin .rmod input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--s-accent); }
.app-skin .rmod b { display: block; color: var(--s-text); }
.app-skin .rmod small { display: block; margin-top: 2px; color: var(--s-muted); font-size: 14px; line-height: 1.35; }
.app-skin .rtotal { margin: 18px 0 0; font-size: 18px; font-weight: 800; color: var(--s-text); }
.app-skin .rlink-label { margin: 22px 0 6px; font-weight: 700; color: var(--s-text); }
.app-skin .rlink { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--s-surface-2); }
.app-skin .rlink code { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-size: 16px; font-weight: 700; color: var(--s-accent); }
.app-skin .on-narrow > .rbar { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) { .app-skin .rplans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .app-skin .rplans { grid-template-columns: 1fr; }
  .app-skin .rbar { gap: 6px 12px; }
  .app-skin .rbar li:not([aria-current="step"]) { font-size: 0; gap: 0; }
  .app-skin .rbar li span { font-size: 14px; }
}
/* On a phone the step buttons stay at the bottom (funnel.css makes .factions sticky): one row, solid background, so
   «Atrás» never sits over the plan cards. */
@media (max-width: 720px) {
  .app-skin .ractions { flex-wrap: nowrap; gap: 10px; margin: 24px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--s-surface); box-shadow: 0 -10px 18px -14px #011e4155; }
  .app-skin .rstep:not(.fcard) .ractions { background: var(--s-bg); }
  .app-skin .rstep.fcard .ractions { margin: 24px -16px -24px; padding-left: 16px; padding-right: 16px; }
  .app-skin .ractions .fnext, .app-skin .ractions .rsubmit { flex: 1; width: auto; min-width: 0; }
}
/* Module icons (online/gateway/module-icons.mjs, Lucide): a soft tile that turns blue when the module is chosen. */
.app-skin .rmod { align-items: center; }
.app-skin .rmod-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--s-surface-2); color: var(--s-accent); transition: background .2s, color .2s; }
.app-skin .rmod:has(input:checked) .rmod-tile { background: var(--s-accent); color: #fff; }
.app-skin .rmod-icon { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .app-skin .rmod-tile { transition: none; } }
/* 1.6.8 «Iniciar sesión» (online/gateway/entrar-pages.mjs): several businesses for one e-mail. */
.app-skin .rchoose { display: grid; gap: 10px; margin-top: 18px; }
.app-skin .rchoose .btn { flex-direction: column; align-items: flex-start; height: auto; min-height: 64px; padding: 12px 18px; text-align: left; }
.app-skin .rchoose small { color: var(--s-muted); font-weight: 600; }