/* Efectos y animaciones (v2). Se carga después de styles.css. */
body::before { content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:radial-gradient(30% 30% at 20% 30%, rgba(255,230,0,.22), transparent 70%), radial-gradient(35% 35% at 80% 60%, rgba(29,99,216,.20), transparent 70%);
  animation:float-bg 18s ease-in-out infinite alternate; }
@keyframes float-bg { to { transform:translate3d(4%,-3%,0) scale(1.08); } }
.logo i { background:linear-gradient(135deg,var(--btn),var(--yellow),var(--btn)); background-size:200% 200%; animation:logo-spin 8s linear infinite; }
@keyframes logo-spin { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.demo { background:linear-gradient(90deg,#14181F,#1D3E7A,#14181F); background-size:200% 100%; animation:slide-bg 10s linear infinite; color:#fff; }
@keyframes slide-bg { to { background-position:-200% 0; } }

/* Header que se compacta + barra de progreso */
.header { transition:box-shadow .3s var(--ease), background .3s; } .header .wrap { transition:min-height .3s var(--ease); }
.header.scrolled { box-shadow:0 6px 24px rgba(20,24,31,.12); } .header.scrolled .wrap { min-height:54px; }
.progress { position:fixed; top:0; left:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); z-index:300; background:linear-gradient(90deg,var(--yellow),var(--btn)); }

/* Botones: degradado, brillo y resorte */
.btn { background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 70%, #6AA3FF)); color:var(--on-btn); position:relative; overflow:hidden; transition:transform .25s var(--spring), box-shadow .25s var(--ease); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--glow); background:linear-gradient(135deg,var(--btn-hover),var(--btn)); }
.btn::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%); pointer-events:none; }
.btn:hover::after { transform:translateX(120%); transition:transform .7s var(--ease); }
.btn.ghost { background:transparent; } .btn.ghost:hover { background:rgba(29,99,216,.1); box-shadow:none; } .btn.ghost::after { display:none; }
.btn.wa { background:linear-gradient(135deg,#17a85a,#0e7a40); color:#fff; }
.ripple { position:absolute; border-radius:50%; width:40px; height:40px; margin:-20px 0 0 -20px; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none; }
@keyframes ripple { to { transform:scale(6); opacity:0; } }
.bump { animation:bump .5s var(--spring); } @keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.35) rotate(-8deg)} 100%{transform:scale(1)} }
.badge { background:var(--yellow); color:var(--on-yellow); }

/* Chips y búsqueda */
.chip { transition:transform .2s var(--spring), background .2s, color .2s, box-shadow .2s; } .chip:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.chip[aria-pressed="true"] { background:linear-gradient(135deg,var(--btn),#6AA3FF); color:var(--on-btn); border-color:transparent; }
.search input, .field input { transition:box-shadow .2s, border-color .2s; }
.search input:focus, .field input:focus { box-shadow:0 0 0 4px rgba(29,99,216,.2); outline:none; border-color:var(--btn); }

/* Tarjetas */
.card, .step, .stat, .ai-card, .trust { box-shadow:var(--shadow); border:1px solid color-mix(in srgb,var(--line) 60%, transparent); }
.card { position:relative; will-change:transform; transition:transform .25s var(--ease), box-shadow .3s; }
.card:hover { box-shadow:0 18px 40px rgba(20,24,31,.18); }
.card .price { color:var(--accent); font-size:18px; }
.tag { background:var(--yellow); color:var(--on-yellow); }
.card::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.28), transparent 60%); opacity:0; transition:opacity .3s; }
.card:hover::after { opacity:1; }
.step { transition:transform .3s var(--spring); } .step:hover { transform:translateY(-6px) rotate(-.6deg); }
.step em { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--yellow); color:var(--on-yellow); }

/* Hero */
.hero .in { position:relative; z-index:1; max-width:860px; }
.hero h1 .hl { background:linear-gradient(90deg,var(--yellow),#fff 60%,#8DB8FF); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
@keyframes shine { to { background-position:200% center; } }
.hero h1, .hero p, .hero .cta { animation:rise .9s var(--ease) both; } .hero p { animation-delay:.12s; } .hero .cta { animation-delay:.24s; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
.hero .btn { background:var(--yellow); color:var(--on-yellow); } .hero .btn:hover { box-shadow:0 8px 28px rgba(255,230,0,.5); }
.hero .btn.ghost { background:transparent; color:#fff; border-color:#fff; }
.float-card { position:absolute; z-index:2; background:rgba(255,255,255,.92); color:#14181F; border-radius:18px; padding:12px 16px; font-size:14px; font-weight:600; box-shadow:0 12px 32px rgba(0,0,0,.25); backdrop-filter:blur(10px); animation:bob 5s ease-in-out infinite; }
.float-card b { display:block; font-size:20px; } .float-card.y { background:var(--yellow); }
.float-card.a { left:6%; bottom:14%; } .float-card.b { right:6%; top:18%; animation-delay:-2s; } .float-card.c { right:12%; bottom:12%; animation-delay:-3.5s; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-12px) rotate(1.5deg)} }
.slide.on { animation:kenburns 9s ease-out forwards; } @keyframes kenburns { from{transform:scale(1)} to{transform:scale(1.08)} }

/* Categorías en mosaico */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; }
.tile { border-radius:var(--r-card); min-height:150px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; position:relative; overflow:hidden; border:0; cursor:pointer; text-align:left; font:inherit; color:#fff; transition:transform .3s var(--spring), box-shadow .3s; box-shadow:var(--shadow); touch-action:manipulation; }
.tile:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 18px 40px rgba(20,24,31,.22); }
.tile svg { position:absolute; right:-10px; top:-10px; width:110px; height:110px; opacity:.28; transition:transform .5s var(--spring); } .tile:hover svg { transform:rotate(12deg) scale(1.15); }
.tile b { font-size:20px; position:relative; } .tile span { font-size:13px; opacity:.92; position:relative; }
.tile.t0 { background:linear-gradient(135deg,#FFE600,#FFB800); color:#14181F; } .tile.t1 { background:linear-gradient(135deg,#1851B8,#4B8DF0); }
.tile.t2 { background:linear-gradient(135deg,#14181F,#2B3550); } .tile.t3 { background:linear-gradient(135deg,#0B6B60,#1FA38F); } .tile.t4 { background:linear-gradient(135deg,#B8401C,#E8743C); }

/* Cajones, chat y panel */
.drawer { box-shadow:-20px 0 60px rgba(0,0,0,.25); transition:transform .4s var(--spring), visibility .4s; }
.scrim { backdrop-filter:blur(4px); }
.bubble { animation:pop .3s var(--spring); } @keyframes pop { from{opacity:0; transform:scale(.85) translateY(8px)} to{opacity:1; transform:none} }
.bubble.me { background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 70%, #6AA3FF)); color:var(--on-btn); }
.side button { transition:background .2s, color .2s, transform .2s var(--spring); } .side button:hover { transform:translateX(4px); }
.side button[aria-current="true"] { background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 70%, #6AA3FF)); color:var(--on-btn); }
.stat b { color:var(--accent); }
.reveal { transition-duration:.7s; transform:translateY(28px) scale(.98); } .reveal.in { transform:none; }
.page-in { animation:rise .5s var(--ease) backwards; }   /* sin "both": el transform final no deja un bloque contenedor que rompa los elementos fijos (barras del fondo) */
.footer { background:linear-gradient(180deg,transparent,rgba(29,99,216,.08)); }

@media (max-width:800px) { .float-card { display:none; } }
@media (prefers-reduced-motion: reduce) {
  body::before, .logo i, .demo, .hero h1 .hl, .float-card, .slide.on, .hero h1, .hero p, .hero .cta, .page-in { animation:none !important; }
  .card, .tile, .btn, .step { transform:none !important; } .progress { display:none; }
}

/* ===== Cuentas, diálogos, avisos, paneles v2 ===== */
.toasts { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:8px; width:min(92vw,420px); }
.toast { background:var(--fg); color:var(--bg); padding:12px 16px; border-radius:14px; box-shadow:var(--shadow); animation:pop .3s var(--spring); font-size:14px; }
.toast.err { background:#B3261E; color:#fff; }
dialog.dlg { border:0; border-radius:var(--r-card); padding:24px; background:var(--card); color:var(--fg); box-shadow:0 30px 80px rgba(0,0,0,.35); width:min(92vw,420px); }
dialog.dlg::backdrop { background:rgba(10,16,32,.55); backdrop-filter:blur(4px); }
.dlg-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.avatar { border-radius:50%; object-fit:cover; background:#fff; border:3px solid var(--card); box-shadow:var(--shadow); flex:none; }
.biz-card .avatar { position:absolute; left:16px; top:16px; width:56px; height:56px; z-index:2; }
.shop-head { display:flex; gap:16px; align-items:center; } .shop-head .avatar { width:88px; height:88px; }
.pill { display:inline-block; padding:2px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:600; background:rgba(128,128,140,.18); }
.pill.warn { background:var(--yellow); color:var(--on-yellow); } .pill.ok { background:#d8f3e3; color:#14532d; } .pill.bad { background:#fde2e0; color:#8a1c14; }
.userbtn { display:inline-flex; align-items:center; gap:8px; }
.menu { position:absolute; right:0; top:52px; background:var(--card); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.25); padding:8px; min-width:230px; z-index:80; }
.menu a, .menu button { display:flex; width:100%; min-height:44px; align-items:center; padding:8px 12px; border:0; background:transparent; border-radius:10px; text-decoration:none; color:var(--fg); font:inherit; cursor:pointer; text-align:left; }
.menu a:hover, .menu button:hover { background:rgba(29,99,216,.1); } .menu hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.header .wrap { position:relative; }
.seg { display:inline-flex; background:rgba(128,128,140,.15); border-radius:var(--r-pill); padding:4px; gap:4px; }
.seg button { min-height:40px; padding:6px 16px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--fg); font:600 14px inherit; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--card); box-shadow:var(--shadow); }
.opt { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:14px; margin-bottom:8px; cursor:pointer; background:var(--card); }
.opt input { margin-top:4px; width:20px; height:20px; } .opt:has(input:checked) { border-color:var(--btn); box-shadow:0 0 0 3px rgba(29,99,216,.18); }
.order { background:var(--card); border-radius:var(--r-card); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
.order header { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center; }
.code { font:700 28px/1 ui-monospace,Menlo,monospace; letter-spacing:.2em; background:var(--yellow); color:var(--on-yellow); padding:10px 16px; border-radius:12px; display:inline-block; }
.timeline { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; } .timeline span { font-size:12px; padding:3px 10px; border-radius:var(--r-pill); background:rgba(128,128,140,.15); }
.timeline span.on { background:var(--btn); color:var(--on-btn); }
.promo-banner { position:relative; border-radius:var(--r-card); overflow:hidden; min-height:200px; display:flex; padding:28px; color:#fff; isolation:isolate; text-decoration:none; box-shadow:var(--shadow); margin:32px 0 0; }
.promo-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; } .promo-banner::before { content:""; position:absolute; inset:0; z-index:-1; background:#000; opacity:var(--ov,.35); }
.hero .slide-text { position:absolute; inset:0; display:flex; padding:64px var(--gutter); }
.bn-in { max-width:720px; display:flex; flex-direction:column; gap:12px; } .bn-in p { margin:0; font-size:18px; }
.hero-pause { z-index:3; }
/* Paneles */
.p-card { background:var(--card); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow); margin-bottom:16px; }
.p-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.field select, .field textarea { width:100%; }
.field textarea { padding:10px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--fg); font:inherit; min-height:90px; }
.field .hint { font-size:13px; color:var(--muted); margin-top:4px; } .field .bad { color:#B3261E; font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px; }
.preview { border-radius:16px; overflow:hidden; position:relative; background:#222; color:#fff; isolation:isolate; display:flex; }
.preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; } .preview::before { content:""; position:absolute; inset:0; background:#000; z-index:-1; opacity:var(--ov,.35); }
.prev-desktop { aspect-ratio:16/7; } .prev-mobile { aspect-ratio:4/5; max-width:260px; }
.focus-pick { position:relative; cursor:crosshair; display:inline-block; max-width:100%; } .focus-pick img { max-height:220px; width:auto; border-radius:12px; }
.focus-pick i { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:3px solid #fff; background:var(--yellow); box-shadow:0 0 0 2px #000; pointer-events:none; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.media-item { background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); font-size:12px; display:flex; flex-direction:column; } .media-item img, .media-item video { width:100%; aspect-ratio:4/3; object-fit:cover; }
.media-item button.pick { padding:0; border:0; background:none; cursor:pointer; } .media-item .meta { padding:8px; }
.media-item.sel { outline:3px solid var(--btn); }
.driver-app { max-width:520px; margin:0 auto; }
.big-toggle { width:100%; min-height:64px; font-size:18px; }
.del-card .step-btn { width:100%; margin-top:8px; }
.bottom-pad { height:40px; }
@media (max-width:800px) { .menu { right:-8px; } }
/* Hero con banners administrables */
.hero { display:block; min-height:min(78vh,640px); } .hero::after { display:none; }
.slides { position:absolute; inset:0; z-index:0; }
.hslide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; pointer-events:none; isolation:isolate; background:#14181F; }
.hslide.on { opacity:1; pointer-events:auto; }
.hslide picture, .hslide .slide-img, .hslide .slide-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hslide .slide-video { z-index:-1; }
.hslide .ov { position:absolute; inset:0; z-index:-1; background:#000; opacity:var(--ov,.35); }
.hslide.on .slide-img { animation:kenburns 9s ease-out forwards; }
.hslide .slide-text { position:absolute; inset:0; z-index:2; }
.bn-title { font-size:clamp(34px,6vw,56px); } .hero .float-card { z-index:3; }
@media (max-width:700px) { .hero { min-height:78vh; } .hslide .slide-text { padding:32px var(--gutter); } }
.art.cover img.avatar { position:absolute; inset:auto; left:16px; top:16px; width:56px; height:56px; z-index:2; border-radius:50%; object-fit:cover; transition:transform .4s var(--spring); }
.card:hover .art.cover img.avatar { transform:scale(1.08) rotate(-4deg); }
.shop-head img.avatar { position:static; width:88px; height:88px; }
/* Casillas y opciones dentro de formularios */
.field input[type=checkbox], .field input[type=radio], input[type=checkbox].inl { width:22px; height:22px; min-height:0; padding:0; display:inline-block; vertical-align:middle; margin-right:6px; accent-color:var(--btn); }
.field label:has(input[type=checkbox]) { display:flex; align-items:center; gap:6px; font-weight:500; min-height:44px; cursor:pointer; }
.field input[type=range] { padding:0; min-height:36px; accent-color:var(--btn); border:0; background:transparent; }
.field input[type=color] { width:64px; }
@media (max-width:800px) { #who { display:none; } .header .logo { white-space:nowrap; } }
@media not all { :root:not([data-theme="light"]) .err, :root:not([data-theme="light"]) .field .bad { color:#FF8A80; } :root:not([data-theme="light"]) .okmsg { color:#7EE2A8; } :root:not([data-theme="light"]) .pill.ok { background:#14532d; color:#d8f3e3; } :root:not([data-theme="light"]) .pill.bad { background:#6b1d17; color:#fde2e0; } }
.notif { display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:12px; background:transparent; color:var(--fg); font:inherit; cursor:pointer; margin-bottom:2px; }
.notif:hover { background:rgba(29,99,216,.1); } .notif.unread { background:rgba(255,230,0,.2); border-left:4px solid var(--yellow); }
.drag-handle { cursor:grab; user-select:none; font-size:20px; padding:0 6px; color:var(--muted); } .dragging { opacity:.45; } .drop-target { outline:3px dashed var(--btn); outline-offset:2px; }
.link-line { word-break:break-all; background:var(--bg); padding:10px; border-radius:10px; font-size:13px; margin:8px 0; user-select:all; }
.menu .notif { display:block; align-items:initial; }
@media (max-width:800px) { #bellMenu { position:fixed; left:8px; right:8px; top:68px; min-width:0 !important; width:auto; } }

/* Paneles: sin desbordes horizontales en móvil */
.panel-shell > * { min-width:0; } #view { min-width:0; }
@media (max-width:800px) {
  .panel-shell { grid-template-columns:minmax(0,1fr); gap:14px; padding-top:14px; }
  .side { max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px; } .side::-webkit-scrollbar { display:none; } .side button { flex:none; }
  .p-grid, .form-grid, .stats { grid-template-columns:minmax(0,1fr); }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .panel-chat { grid-template-columns:minmax(0,1fr); }
  .scroll-x { max-width:100%; } table { font-size:13px; } th, td { padding:10px; }
  .header .wrap { gap:8px; } #roleSel { max-width:150px; }
}
@media (max-width:700px) { body:not(.store) .header .wrap { flex-wrap:wrap; row-gap:6px; padding-block:6px; min-height:0; } body:not(.store) .header .spacer { flex:1 1 0; min-width:0; } body:not(.store) .header .btn.small { padding:8px 14px; } body:not(.store) .header { overflow-x:clip; } }