/* Kobaltica · Invitaciones digitales — marco de demostración (v1.1, 03-11-2026).
   Solo viste la barra, el panel y el escenario. La invitación conserva sus estilos aprobados:
   el modo oscuro de Kobaltica nunca entra dentro de .inv-screen. */
:root{
  --sh-blue:#0047AA;--sh-blue-deep:#17355d;--sh-orange:#F28901;
  --sh-bg:#f4f7fb;--sh-surface:#ffffff;--sh-surface-2:#edf4fc;--sh-ink:#163252;--sh-muted:#5e7088;--sh-line:#dfe8f2;
  --sh-stage:linear-gradient(135deg,#f7faff 0%,#edf4fc 100%);--sh-focus:#F28901;
  --sh-display:Poppins,system-ui,sans-serif;--sh-text:Barlow,system-ui,sans-serif;
  --sh-bar-h:56px;--inv-w:390px;
  color-scheme:light
}
html[data-theme="dark"]{
  --sh-bg:#07111f;--sh-surface:#0c1928;--sh-surface-2:#112337;--sh-ink:#f5f8fc;--sh-muted:#a9b8cb;--sh-line:rgba(191,213,237,.16);
  --sh-stage:linear-gradient(135deg,#081522,#0d2134);--sh-blue:#6aa7ff;
  color-scheme:dark
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.inv-demo{margin:0;min-height:100%;display:grid;grid-template-rows:var(--sh-bar-h) minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden;background:var(--sh-bg);color:var(--sh-ink);font:400 15px/1.5 var(--sh-text);-webkit-font-smoothing:antialiased}
.inv-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:999px;background:var(--sh-blue-deep);color:#fff;font:600 14px var(--sh-display);text-decoration:none}
.inv-skip:focus{top:8px}
.inv-demo :focus-visible{outline:3px solid var(--sh-focus);outline-offset:2px}
.inv-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Barra superior */
.inv-bar{position:relative;z-index:20;display:flex;align-items:center;gap:14px;min-width:0;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--sh-line);background:var(--sh-surface)}
.inv-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border:1px solid var(--sh-line);border-radius:999px;color:var(--sh-ink);font:600 13px var(--sh-display);text-decoration:none;white-space:nowrap;transition:background .18s ease,border-color .18s ease}
.inv-back svg{width:16px;height:16px;flex:none}
.inv-back:hover{background:var(--sh-surface-2);border-color:#cfe0f3}
.inv-brand{display:block;flex:none;width:112px;aspect-ratio:2886/808;position:relative;line-height:0}
.inv-brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center}
.inv-brand .is-dark{opacity:0}
html[data-theme="dark"] .inv-brand .is-light{opacity:0}
html[data-theme="dark"] .inv-brand .is-dark{opacity:1}
.inv-bar__title{display:flex;align-items:baseline;gap:10px;min-width:0;margin:0 0 0 4px;padding-left:14px;border-left:1px solid var(--sh-line);font:600 15px/1.2 var(--sh-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-bar__title small{font:500 13px var(--sh-text);color:var(--sh-muted)}
.inv-chip{flex:none;margin-left:auto;padding:5px 10px;border:1px solid #cfe0f3;border-radius:999px;background:var(--sh-surface-2);color:var(--sh-blue);font:600 11px/1.2 var(--sh-display);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
html[data-theme="dark"] .inv-chip{border-color:rgba(155,197,255,.3);background:rgba(106,167,255,.12);color:#9bc5ff}
.inv-options-btn{display:none}

/* Distribución */
.inv-layout{display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);min-height:0}
.inv-panel{min-height:0;overflow:auto;padding:22px 20px 28px;border-right:1px solid var(--sh-line);background:var(--sh-surface)}
.inv-panel__close{display:none}
.inv-panel h1{margin:0;font:600 22px/1.15 var(--sh-display);letter-spacing:-.02em}
.inv-panel__lead{margin:8px 0 0;color:var(--sh-muted);font-size:14px}
.inv-group{margin-top:20px;padding-top:18px;border-top:1px solid var(--sh-line)}
.inv-label[data-gap]{margin-top:14px}
.inv-label{display:block;margin:0 0 8px;color:var(--sh-ink);font:600 12px/1.2 var(--sh-display);letter-spacing:.06em;text-transform:uppercase}
.inv-select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--sh-line);border-radius:10px;background:var(--sh-surface);color:var(--sh-ink);font:500 14px var(--sh-text)}
.inv-styles{display:grid;gap:8px}
.inv-style{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;border:1px solid var(--sh-line);border-radius:12px;background:var(--sh-surface);color:var(--sh-ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.inv-style:hover{border-color:#b9cfe8}
.inv-style[aria-pressed="true"]{border-color:var(--sh-blue);background:var(--sh-surface-2);box-shadow:inset 0 0 0 1px var(--sh-blue)}
.inv-style__sw{display:flex;flex:none;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.inv-style__sw i{display:block;width:12px;height:24px}
.inv-style strong{display:block;font:600 14px/1.2 var(--sh-display)}
.inv-style span span{display:block;color:var(--sh-muted);font-size:12.5px}
.inv-seg{display:flex;flex-wrap:wrap;gap:6px}
.inv-seg button{flex:1 1 auto;min-height:40px;padding:0 10px;border:1px solid var(--sh-line);border-radius:999px;background:var(--sh-surface);color:var(--sh-ink);font:500 13px var(--sh-display);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.inv-seg button:hover{border-color:#b9cfe8}
.inv-seg button[aria-pressed="true"]{border-color:var(--sh-blue);background:var(--sh-blue);color:#fff}
html[data-theme="dark"] .inv-seg button[aria-pressed="true"]{background:#1f5fbf;border-color:#6aa7ff}
.inv-actions{display:grid;gap:8px}
.inv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:999px;background:#0047AA;color:#fff;font:600 14px var(--sh-display);cursor:pointer;text-decoration:none;transition:background .18s ease,transform .18s ease}
.inv-btn:hover{background:var(--sh-blue-deep)}
.inv-btn--ghost{background:transparent;border-color:var(--sh-line);color:var(--sh-ink)}
.inv-btn--ghost:hover{background:var(--sh-surface-2)}
.inv-status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;margin:0;font-size:14px}
.inv-status dt{color:var(--sh-muted)}
.inv-status dd{margin:0;font:600 14px var(--sh-display);font-variant-numeric:tabular-nums;text-align:right}
.inv-note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--sh-surface-2);color:var(--sh-ink);font-size:13.5px;line-height:1.5}
.inv-note strong{font-family:var(--sh-display);font-weight:600}
.inv-small{margin:10px 0 0;color:var(--sh-muted);font-size:13px}
.inv-panel a{color:var(--sh-blue)}

/* Escenario y teléfono */
.inv-stage{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;background:var(--sh-stage)}
.inv-phone{flex:none;width:calc(var(--inv-w) + 22px);height:min(866px,max(560px,calc(100dvh - var(--sh-bar-h) - 48px)));padding:11px;border-radius:50px;background:#1c1a1a;box-shadow:0 24px 60px rgba(7,39,79,.24)}
.inv-screen{position:relative;width:100%;height:100%;border-radius:39px;overflow:hidden;background:#FDFBF8;isolation:isolate;color-scheme:light}
.inv-mount{position:absolute;inset:0}
body[data-view="amplia"] .inv-stage{padding:0;align-items:stretch}
body[data-view="amplia"] .inv-phone{width:100%;max-width:480px;height:auto;padding:0;border-radius:0;background:none;box-shadow:0 0 0 1px var(--sh-line),0 20px 50px rgba(7,39,79,.16)}
body[data-view="amplia"] .inv-screen{border-radius:0}
.inv-noscript{position:absolute;inset:24px;display:grid;place-items:center;padding:24px;text-align:center;color:var(--sh-ink)}

/* Aviso de simulación */
.inv-toast{position:fixed;left:50%;top:calc(var(--sh-bar-h) + 14px);z-index:40;width:min(92vw,440px);padding:12px 16px;border-radius:14px;background:#0b2a55;color:#fff;font:500 14px/1.45 var(--sh-text);box-shadow:0 14px 34px rgba(7,39,79,.28);transform:translate(-50%,-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.inv-toast strong{font-family:var(--sh-display);font-weight:600}
.inv-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Diálogo de reinicio */
.inv-dialog{width:min(92vw,420px);padding:24px;border:1px solid var(--sh-line);border-radius:18px;background:var(--sh-surface);color:var(--sh-ink);box-shadow:0 24px 60px rgba(7,39,79,.3)}
.inv-dialog::backdrop{background:rgba(7,17,31,.45)}
.inv-dialog h2{margin:0;font:600 19px/1.25 var(--sh-display)}
.inv-dialog p{margin:10px 0 0;color:var(--sh-muted)}
.inv-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Teléfono real: la invitación ocupa la pantalla; los controles pasan a una hoja inferior. */
@media (max-width:760px){
  :root{--sh-bar-h:52px}
  .inv-bar{gap:10px}
  .inv-brand,.inv-bar__title small{display:none}
  .inv-bar__title{padding-left:10px;font-size:14px}
  .inv-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .inv-back{padding:0 12px}
  .inv-chip{display:none}
  .inv-options-btn{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;min-height:40px;padding:0 14px;border:1px solid var(--sh-line);border-radius:999px;background:var(--sh-surface);color:var(--sh-ink);font:600 13px var(--sh-display);cursor:pointer}
  .inv-layout{grid-template-columns:minmax(0,1fr)}
  .inv-stage{padding:0;align-items:stretch}
  .inv-phone,body[data-view="amplia"] .inv-phone{width:100%;max-width:none;height:auto;padding:0;border-radius:0;background:none;box-shadow:none}
  .inv-screen,body[data-view="amplia"] .inv-screen{border-radius:0}
  .inv-panel{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:min(82dvh,640px);padding:18px 18px calc(24px + env(safe-area-inset-bottom));border:1px solid var(--sh-line);border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(7,17,31,.28);transform:translateY(105%);visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s}
  body.inv-panel-open .inv-panel{transform:none;visibility:visible;transition:transform .24s ease}
  body.inv-panel-open::after{content:"";position:fixed;inset:0;z-index:45;background:rgba(7,17,31,.42)}
  .inv-panel__close{display:inline-flex;float:right;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px -6px 0 8px;border:0;border-radius:999px;background:var(--sh-surface-2);color:var(--sh-ink);font:600 20px/1 var(--sh-display);cursor:pointer}
  .inv-desktop-only{display:none}
}
@media (prefers-reduced-motion:reduce){
  .inv-panel,.inv-toast,.inv-back,.inv-btn,.inv-seg button,.inv-style{transition:none!important}
}