/* styles-extra.css — componentes de pantallas (login, chips, alerts, resumen, recepción) */

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--slate);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.chip.sm{ font-size:11px; padding:3px 9px; }
.chip svg{ color:var(--teal); }
.chip.toggle{ cursor:pointer; transition:all .12s ease; }
.chip.toggle:hover{ border-color:var(--teal); }
.chip.toggle.on{ background:var(--clean-bg); border-color:var(--teal); color:var(--teal); }
.chip.toggle.on svg{ color:var(--teal); }

/* Filtro chips */
.fchip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--slate);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px; transition:all .12s ease; }
.fchip:hover{ border-color:var(--teal); }
.fchip.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.fchip b{ color:inherit; opacity:.7; }
.fchip .dot{ width:8px; height:8px; border-radius:50%; }

/* ---------- Alerts ---------- */
.alert{ display:flex; gap:11px; align-items:flex-start; border-radius:var(--r-sm); padding:13px 15px; font-size:13.5px; line-height:1.45; }
.alert svg{ flex-shrink:0; margin-top:1px; }
.alert.ok{ background:var(--ok-bg); color:#1d6f49; } .alert.ok svg{ color:var(--ok); }
.alert.err{ background:var(--busy-bg); color:#9a3625; } .alert.err svg{ color:var(--busy); }
.alert.warn{ background:var(--warn-bg); color:#8a5e15; } .alert.warn svg{ color:var(--warn); }
.form-err{ display:flex; align-items:center; gap:6px; color:var(--busy); font-size:12.5px; font-weight:600; margin:-8px 0 12px; }

/* ---------- Resumen de reserva ---------- */
.resumen .res-hab{ padding:14px 0 16px; border-bottom:1px solid var(--line-2); margin-top:12px; }
.res-line{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:13.5px; color:var(--slate); border-bottom:1px solid var(--line-2); }
.res-line b{ color:var(--ink); font-weight:600; }
.res-total{ display:flex; justify-content:space-between; align-items:center; padding:16px 0 18px; }
.res-total > span:first-child{ font-size:14px; color:var(--slate); font-weight:600; }

/* ---------- Foto de habitación ---------- */
.room-photo{ height:172px; position:relative; overflow:hidden; background:var(--surface-2); }
.room-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-stripes{ position:absolute; inset:0; background:repeating-linear-gradient(45deg, #e9f1f4 0 10px, #f3f8fa 10px 20px); }
.ph-tag{ position:relative; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; color:var(--muted); background:rgba(255,255,255,.75); padding:3px 9px; border-radius:5px; letter-spacing:.02em; }

/* ---------- Recepción ---------- */
.recep-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin:16px 0 4px; }
.rg-lbl{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.rg-val{ font-size:14px; color:var(--ink); font-weight:600; margin-top:2px; }
.tcount{ display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--gold); color:#3a2a07; font-size:11px; font-weight:700; }
.seg button.on .tcount{ background:var(--navy); color:#fff; }
.detail-list{ }
.dl-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; color:var(--slate); }
.dl-row:last-child{ border-bottom:none; }
.dl-row b{ color:var(--ink); font-weight:600; }

/* ================= LOGIN (centrado sobre fondo nevado) ================= */
.login-stage{ position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; padding:24px; }
.login-bg-photo{ position:absolute; inset:0; z-index:0; background:url('assets/huaraz-login.jpg') center 38%/cover no-repeat; }
.login-bg{ position:absolute !important; inset:0; width:100% !important; height:100% !important; z-index:0; }
.login-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,38,52,.46) 0%, rgba(8,38,52,.30) 40%, rgba(8,38,52,.52) 100%); }
.login-card{ position:relative; z-index:2; width:100%; max-width:404px;
  background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-lg); box-shadow:0 30px 70px rgba(8,30,40,.34), 0 2px 8px rgba(8,30,40,.2);
  padding:36px 36px 30px; backdrop-filter:saturate(1.3) blur(10px); }
.login-mark{ display:flex; justify-content:center; }
.login-stage-foot{ position:absolute; z-index:2; bottom:18px; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  color:rgba(255,255,255,.82); font-size:12px; text-shadow:0 1px 3px rgba(0,0,0,.35); pointer-events:none; }

@media (max-width: 540px){
  .login-card{ padding:28px 22px 24px; }
  .login-stage-foot{ font-size:11px; gap:12px; }
}

/* ================= TOP NAV (barra superior, una sola fila) ================= */
.app-col{ min-height:100vh; display:flex; flex-direction:column; }
.appbar{ background:var(--navy); position:sticky; top:0; z-index:30; box-shadow:0 1px 0 rgba(0,0,0,.15); }
.appbar-top{ display:flex; align-items:center; gap:14px; padding:10px 24px; }
.appbar-brand{ display:flex; align-items:center; flex-shrink:0; }
.appbar-brand img{ height:32px; width:auto; }
.appbar-logo-btn{ background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; flex-shrink:0; border-radius:6px; }
.appbar-logo-btn img{ height:52px; width:auto; display:block; }
.appbar-logo-btn:hover{ opacity:.85; }
.appbar-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* Variantes oscuras de los controles */
.icon-btn.dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#cfe0e6; }
.icon-btn.dark:hover{ background:rgba(255,255,255,.16); color:#fff; }
.role-pick.dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
.role-pick.dark:hover{ background:rgba(255,255,255,.16); }

/* Navegación horizontal en línea (donde estaba el buscador) */
.appbar-nav{ display:flex; align-items:center; justify-content:center; gap:3px; margin-left:10px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.appbar-nav::-webkit-scrollbar{ display:none; }
.topnav-item{ display:flex; align-items:center; gap:8px; padding:9px 13px; background:transparent; border:none; border-radius:9px;
  color:#ffffff; font-size:14px; font-weight:500; white-space:nowrap; transition:background .12s ease, color .12s ease; }
.topnav-item:hover{ color:#fff; background:rgba(255,255,255,.07); }
.topnav-item .ic{ opacity:.9; }
.topnav-item.active{ color:#fff; background:rgba(255,255,255,.13); font-weight:600; }
.topnav-item.active .ic{ color:var(--gold); opacity:1; }
.tn-pill{ background:var(--gold); color:#3a2a07; font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px; line-height:1.4; }

.app-col .content{ margin:0 auto; }

/* ---------- Detalle de método de pago ---------- */
.pay-detail{ margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); }
.cash-check{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; font-size:14px; font-weight:600;
  color:var(--slate); transition:border-color .12s ease, color .12s ease, background .12s ease; }
.cash-check:hover{ border-color:var(--teal); }
.cash-check.on{ border-color:var(--ok); background:var(--ok-bg); color:#1d6f49; }
.cash-box{ width:22px; height:22px; flex-shrink:0; border-radius:6px; border:1.5px solid var(--muted);
  display:grid; place-items:center; background:#fff; color:#fff; }
.cash-check.on .cash-box{ background:var(--ok); border-color:var(--ok); }

/* ---------- Ticket / comprobante imprimible ---------- */
.ticket-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.ticket{ width:320px; background:#fff; color:#1a1a1a; padding:24px 22px; border-radius:6px; box-shadow:var(--sh-lg);
  font-family:ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace; font-size:12.5px; line-height:1.5; }
.tk-logo{ text-align:center; font-family:var(--serif); font-weight:800; font-size:19px; letter-spacing:1px; }
.tk-sub{ text-align:center; font-size:11px; color:#555; }
.tk-title{ text-align:center; font-weight:700; letter-spacing:1px; margin:4px 0 8px; }
.tk-sep{ border-top:1.5px solid #222; margin:10px 0; }
.tk-sep.dashed{ border-top:1px dashed #999; }
.tk-row{ display:flex; justify-content:space-between; gap:12px; }
.tk-row span:first-child{ color:#555; }
.tk-row.big{ font-weight:700; font-size:14px; margin:2px 0; }
.tk-line{ display:flex; justify-content:space-between; gap:12px; font-weight:600; }
.tk-foot{ text-align:center; margin-top:6px; font-weight:600; }
.tk-foot.small{ font-weight:400; font-size:11px; color:#666; margin-top:2px; }
.ticket-actions{ display:flex; gap:10px; }

@media print{
  body{ background:#fff !important; }
  body * { visibility:hidden !important; }
  .overlay{ position:static !important; background:none !important; display:block !important; }
  .ticket, .ticket *{ visibility:visible !important; }
  .ticket{ position:absolute; left:0; top:0; box-shadow:none; width:80mm; border-radius:0; padding:6mm; }
  .ticket-actions, .no-print{ display:none !important; }
}

/* ---------- Código 2FA (OTP) ---------- */
.otp-row{ display:flex; gap:10px; justify-content:center; margin:6px 0 4px; }
.otp-box{ width:48px; height:58px; text-align:center; font-family:var(--serif); font-size:26px; font-weight:600;
  color:var(--navy); border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff;
  transition:border-color .12s ease, box-shadow .12s ease; -moz-appearance:textfield; }
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.otp-box:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(28,114,147,.14); }
.otp-box.filled{ border-color:var(--teal); }
.otp-box.invalid{ border-color:var(--busy); box-shadow:0 0 0 3px rgba(210,83,62,.12); }
.otp-resend{ background:none; border:none; color:var(--teal); font-weight:600; font-size:13px; padding:0; cursor:pointer; }
.otp-resend:disabled{ color:var(--muted); cursor:default; }

@media (max-width: 1040px){
  .appbar-top{ padding:10px 16px; gap:10px; }
  .appbar-menu{ display:flex !important; order:-1; }
  .appbar-nav{ position:absolute; top:100%; left:0; right:0; background:var(--navy); flex-direction:column; align-items:stretch;
    gap:2px; padding:8px; margin:0; display:none; box-shadow:var(--sh-lg); border-top:1px solid rgba(255,255,255,.1); flex:none; }
  .appbar-nav.open{ display:flex; }
  .appbar-nav .topnav-item{ padding:11px 13px; }
  .appbar-nav .topnav-item .tn-pill{ margin-left:auto; }
}