/* Apariencia del Captive Portal (compartida por el portal real y la vista previa del admin).
   Mobile-first, pocos pasos, botones grandes, estados inequívocos. */
.cp { --p: #0b5fff; --s: #00c389; --pi: #fff; position: relative; min-height: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; color: #0f1b33; font-family: var(--font, system-ui); overflow-x: hidden; }
.cp * { box-sizing: border-box; }
.cp-net { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; font-size: 12px; font-weight: 650; background: #fff; border-bottom: 1px solid #eef1f6; }
.cp-net .ssid { color: #56627a; display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-inet { flex: none; }
.cp-inet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.cp-inet.blocked { background: #fde4e4; color: #b4232a; }
.cp-inet.allowed { background: #dcf5e7; color: #0b7a3b; }
.cp-inet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Hero de bienvenida a sangre completa */
.cp-hero { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 28px 22px 26px; color: #fff; background-size: cover; background-position: center; min-height: 340px; }
.cp-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 12, 28, .15) 0%, rgba(5, 12, 28, .55) 45%, rgba(5, 12, 28, .88) 100%); }
.cp-hero > * { position: relative; }
.cp-logo { width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, .12); font-weight: 800; font-size: 24px; color: #fff; margin-bottom: 10px; }
.cp-logo img { width: 100%; height: 100%; object-fit: cover; }
.cp-org { font-weight: 700; font-size: 15px; opacity: .95; }
.cp-title { font-size: 30px; line-height: 1.1; font-weight: 800; margin: 16px 0 8px; letter-spacing: -.02em; }
.cp-sub { margin: 0 0 20px; font-size: 15px; line-height: 1.45; opacity: .9; max-width: 280px; }
.cp-hero .cp-btn { max-width: 320px; }
.cp-app-q { margin: 16px 0 8px; font-size: 13.5px; opacity: .9; }
.cp-legal { margin-top: 16px; font-size: 12px; opacity: .85; }
.cp-legal button { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; font: inherit; cursor: pointer; }

/* Pantallas de paso (blancas) */
.cp-step { flex: 1; display: flex; flex-direction: column; padding: 26px 22px 22px; text-align: center; }
.cp-step h2 { font-size: 22px; line-height: 1.2; margin: 14px 0 8px; letter-spacing: -.01em; }
.cp-step p { margin: 0 0 18px; color: #56627a; font-size: 14.5px; line-height: 1.5; }
.cp-icon { width: 72px; height: 72px; margin: 8px auto 0; border-radius: 50%; display: grid; place-items: center; background: #e8f0ff; color: var(--p); }
.cp-icon svg { width: 36px; height: 36px; }
.cp-icon.ok { background: #dcf5e7; color: #12a150; }
.cp-icon.bad { background: #fde4e4; color: #e0383e; }
.cp-icon.warn { background: #fff1d6; color: #d98a04; }
.cp-icon.small-logo { width: 56px; height: 56px; background: #f3f5f9; color: #0f1b33; font-weight: 800; overflow: hidden; }
.cp-icon.small-logo img { width: 100%; height: 100%; object-fit: cover; }
.cp-spacer { flex: 1; }
.cp-back { background: none; border: 0; color: var(--p); font-weight: 600; margin-top: 14px; font: inherit; cursor: pointer; }

.cp-btn { display: block; width: 100%; padding: 15px 16px; border-radius: 12px; border: 0; background: var(--p); color: var(--pi); font-weight: 750; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; margin-top: 10px; }
.cp-btn:disabled { opacity: .5; cursor: default; }
.cp-btn.outline { background: transparent; border: 2px solid var(--p); color: var(--p); }
.cp-hero .cp-btn.outline { border-color: rgba(255, 255, 255, .85); color: #fff; }
.cp-btn.soft { background: #f1f4f9; color: #0f1b33; }
.cp-btn.second { background: var(--s); }
.cp-link { background: none; border: 0; color: var(--p); font-weight: 650; margin-top: 12px; cursor: pointer; font: inherit; }

.cp-phone { display: flex; border: 1.5px solid #dfe4ee; border-radius: 12px; overflow: hidden; }
.cp-phone:focus-within { border-color: var(--p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 18%, transparent); }
.cp-phone .cc { padding: 14px 12px; background: #f6f8fb; font-weight: 700; color: #33415c; border-right: 1.5px solid #dfe4ee; }
.cp-phone input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 12px; font-size: 18px; letter-spacing: .04em; }
.cp-otp { display: flex; gap: 6px; justify-content: center; margin: 4px 0 6px; }
.cp-otp input { flex: 1 1 0; min-width: 0; max-width: 48px; height: 54px; text-align: center; font-size: 22px; font-weight: 750; border: 1.5px solid #dfe4ee; border-radius: 10px; outline: 0; }
.cp-otp input:focus { border-color: var(--p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 18%, transparent); }
.cp-err { color: #b4232a; background: #fde4e4; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; margin: 6px 0 4px; }
.cp-debug { border: 1.5px dashed #9b86ff; background: #f3f0ff; color: #4a2fc9; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 650; margin-bottom: 10px; }
.cp-debug b { font-family: var(--mono, monospace); font-size: 15px; letter-spacing: .12em; }
.cp-kv { text-align: left; border: 1px solid #eef1f6; border-radius: 12px; padding: 4px 14px; margin: 4px 0 8px; }
.cp-kv div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eef1f6; font-size: 13.5px; }
.cp-kv div:last-child { border-bottom: 0; }
.cp-kv span { color: #6b7689; }
.cp-kv b { font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.cp-spin { width: 54px; height: 54px; margin: 22px auto 6px; border-radius: 50%; border: 5px solid #e6ecf7; border-top-color: var(--p); animation: cpspin .9s linear infinite; }
@keyframes cpspin { to { transform: rotate(360deg); } }
.cp-sheet-back { position: absolute; inset: 0; background: rgba(5, 12, 28, .5); display: flex; align-items: flex-end; z-index: 5; }
.cp-sheet { background: #fff; width: 100%; border-radius: 18px 18px 0 0; padding: 20px 20px 22px; max-height: 80%; overflow: auto; text-align: left; }
.cp-sheet h3 { margin: 0 0 10px; }
.cp-sheet p { color: #33415c; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }

/* Fondos predefinidos (sin recursos externos: el walled garden no permite CDNs de terceros) */
.bg-restaurant { background-color: #2a180e; background-image: radial-gradient(circle at 20% 18%, rgba(255, 196, 120, .55) 0 3px, transparent 4px), radial-gradient(circle at 70% 12%, rgba(255, 196, 120, .5) 0 3px, transparent 4px), radial-gradient(circle at 45% 25%, rgba(255, 210, 150, .45) 0 2px, transparent 3px), radial-gradient(ellipse at 30% 30%, #8a5530 0, transparent 55%), radial-gradient(ellipse at 85% 60%, #5b3520 0, transparent 60%), linear-gradient(165deg, #6b4127, #1b0f08); }
.bg-office { background-color: #0a1a3a; background-image: linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), radial-gradient(ellipse at 20% 20%, #1f4fb8 0, transparent 60%), linear-gradient(160deg, #173a86, #0a1a3a); background-size: 28px 28px, 28px 28px, auto, auto; }
.bg-beach { background-color: #0e7490; background-image: radial-gradient(circle at 75% 18%, rgba(255, 230, 160, .9) 0 22px, transparent 24px), linear-gradient(180deg, #38bdf8 0%, #0e7490 48%, #e9c98f 49%, #d6ad6a 100%); }
.bg-plain { background-image: linear-gradient(160deg, var(--p), #0a1a3a); }