:root { --bg:#0f1420; --card:#1a2133; --line:#2a3350; --txt:#e8ecf5;
          --mut:#8b93ad; --down:#34d399; --up:#f87171; --info:#60a5fa; --warn:#fbbf24; }
  * { box-sizing:border-box; margin:0 }
  body { background:var(--bg); color:var(--txt); font:14px/1.45 system-ui,sans-serif; }
  button { font:inherit }
  :focus-visible { outline:2px solid var(--info); outline-offset:2px }
  .wrap { max-width:1150px; margin:0 auto; padding:16px; }
  header h1 { font-size:20px } header p { color:var(--mut); font-size:12px }
  .header-actions { float:right; margin-top:6px; margin-left:8px;
                    display:flex; gap:6px; flex-wrap:wrap;
                    justify-content:flex-end; max-width:62% }
  /* email largo de la cuenta: recorta, nunca desborda la pagina */
  #acct { min-width:0; overflow:hidden; white-space:nowrap;
          text-overflow:ellipsis }
  .demo { background:#7c2d12; color:#fed7aa; padding:6px 10px; border-radius:6px;
          font-size:12px; margin:10px 0; display:inline-block }
  .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
          gap:10px; margin:14px 0 }
  .kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px }
  .kpi[data-tab] { cursor:pointer; transition:border-color .15s }
  .kpi[data-tab]:hover { border-color:var(--info) }
  .kpi b { font-size:22px; display:block }
  .kpi span { color:var(--mut); font-size:11px }
  .chip { cursor:pointer; font-size:12px; padding:4px 12px; border-radius:99px;
          border:1px solid var(--line); color:var(--mut); background:transparent }
  .chip.on { color:var(--txt); border-color:var(--info); background:var(--card);
             font-weight:600 }
  .tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:16px 0 12px;
          overflow-x:auto; position:sticky; top:0; z-index:40;
          background:var(--bg); padding-top:6px }
  .tab { padding:8px 14px; cursor:pointer; color:var(--mut); font-size:13px;
         background:none; border:0; border-bottom:2px solid transparent;
         white-space:nowrap }
  .tab.on { color:var(--txt); border-color:var(--info); font-weight:600 }
  .tab .n { font-size:11px; background:var(--line); border-radius:99px; padding:1px 7px; margin-left:4px }
  .filters { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap }
  input { background:var(--card); border:1px solid var(--line); color:var(--txt);
          border-radius:8px; padding:8px 10px; font-size:13px; width:280px }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:10px }
  /* auditoria de fantasmas: los ajustes ocultos se muestran apagados,
     en su propia zona al pie del feed — nunca se leen como accionables */
  .deadzone { grid-column:1/-1; display:grid; gap:10px; opacity:.5;
              grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)) }
  .deadzone .card:hover { border-color:var(--line) }
  .dead-toggle:hover { color:var(--txt) }
  .card { background:var(--card); border:1px solid var(--line); border-radius:10px;
          padding:10px 12px; cursor:pointer; display:flex; gap:10px;
          transition:border-color .15s }
  .card:hover { border-color:var(--info) }
  .card img { width:64px; height:64px; object-fit:contain; border-radius:8px;
              background:#fff; flex-shrink:0 }
  .card .t { font-size:13px; margin-bottom:4px; line-height:1.3;
             overflow-wrap:break-word; padding-right:20px }
  .card .meta { color:var(--mut); font-size:11px; margin-top:2px }
  .tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; }
  .tag.bajo { background:#064e3b; color:var(--down) }
  .tag.subio { background:#4c0519; color:var(--up) }
  .tag.oferta { background:#1e3a8a; color:#93c5fd }
  .tag.agotado { background:#3f3f46; color:#d4d4d8 }
  .tag.reaparecio { background:#422006; color:var(--warn) }
  .tag.regreso { background:#3b0764; color:#c4b5fd }
  .tag.nuevo { background:#14532d; color:#86efac }
  .tag.salio_del_catalogo { background:#374151; color:#9ca3af }
  .tag.oferta_termino { background:#374151; color:#9ca3af }
  .tag.rebaja { background:#052e16; color:#4ade80 }
  .tag.club_volvio { background:#422006; color:var(--warn) }
  .tag.club_agotado { background:#3f3f46; color:#d4d4d8 }
  .tag.se_agota { background:#7c2d12; color:#fdba74 }
  .pr { font-weight:700 } .old { color:var(--mut); text-decoration:line-through; font-weight:400 }
  .spark { height:30px; margin-top:4px; min-width:120px }
  perspective-viewer { display:block; width:100%; height:70vh }
  .pane { display:none } .pane.on { display:block }
  dialog { background:var(--card); color:var(--txt); border:1px solid var(--line);
           border-radius:12px; padding:20px; width:min(720px,94vw);
           max-height:92vh; overflow-y:auto }
  dialog::backdrop { background:#000a }
  #chart { width:100%; height:300px; margin-top:10px }
  #dcal { width:100%; height:150px; margin-top:6px }
  .acc .accbody { padding:4px 8px; background:var(--card);
                  border:1px solid var(--line); border-top:0;
                  border-radius:0 0 10px 10px }
  #ch-cambios, #ch-ofertas { width:100%; height:280px }
  .close { float:right; cursor:pointer; color:var(--mut); font-size:18px;
           background:none; border:0; padding:0 2px }
  table { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px }
  td,th { padding:4px 6px; border-bottom:1px solid var(--line); text-align:left }
  th { color:var(--mut); font-weight:500 }
  .bigprice { font-size:30px; font-weight:700; margin:10px 0 }
  .star { position:absolute; top:8px; right:10px; font-size:18px; cursor:pointer;
          color:var(--mut) } .star.on { color:var(--warn) }
  .card { position:relative }
  .plink { display:inline-block; margin-top:10px; color:var(--info);
           font-size:13px }
  .tag.real { background:#064e3b; color:#86efac }
  #alerts { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 }
  .alert { background:var(--card); border:1px solid var(--warn); color:var(--txt);
           border-radius:10px; padding:8px 12px; font-size:12px; cursor:pointer }
  .alert.new { border-color:var(--info) }
  .fab { display:none; position:fixed; right:16px; bottom:18px; z-index:60;
         height:46px; padding:0 16px; border-radius:99px; background:var(--info);
         color:#fff; border:0; font-size:13px; font-weight:600;
         box-shadow:0 4px 14px #0008; cursor:pointer;
         align-items:center; gap:8px }
  .fab svg { flex:none }
  dialog.sheet { position:fixed; bottom:0; left:0; right:0; top:auto; margin:0;
                 width:100%; max-width:100%; border-radius:16px 16px 0 0 }
  .navitem { display:flex; justify-content:space-between; padding:13px 4px;
             background:none; border:0; border-bottom:1px solid var(--line);
             width:100%; text-align:left; color:inherit; cursor:pointer;
             font-size:14px }
  .navitem.on { color:var(--info); font-weight:600 }
  #shopbar { position:fixed; left:0; right:0; bottom:0; z-index:55;
             background:var(--card); border-top:1px solid var(--line);
             padding:10px 16px; display:none; align-items:center;
             justify-content:space-between; font-size:14px }
  .cartcheck { width:22px; height:22px; position:absolute; top:8px; right:10px;
               accent-color:var(--info); cursor:pointer }
  .card.incart { opacity:.55 }
  body.shop .fab { bottom:70px }
  body.shop .wrap { padding-bottom:70px }
  @media (max-width:700px) {
    .tabs { display:none } .fab { display:flex }
    /* el FAB fijo no debe tapar el final del feed */
    .wrap { padding-bottom:84px }
    /* va DESPUES del base body.shop 70px: misma especificidad,
       si queda antes gana la regla de escritorio */
    body.shop .wrap { padding-bottom:130px }
    #q { width:100% }
    .header-actions { float:none; margin:10px 0 0; max-width:100%;
                      justify-content:flex-start }
    #shopbar { flex-wrap:wrap; row-gap:6px }
  }
  .navsec { color:var(--mut); font-size:11px; text-transform:uppercase;
            letter-spacing:.6px; padding:14px 4px 6px }
  .navitem.res { border-left:3px solid var(--warn); padding-left:10px }
  #sw-sug { position:absolute; top:100%; left:0; right:0; z-index:30;
            background:var(--card); border:1px solid var(--line);
            border-radius:8px; display:none; max-height:260px;
            overflow:auto; box-shadow:0 8px 20px #0008 }
  #sw-sug .s { padding:8px 12px; font-size:13px; cursor:pointer;
               display:flex; justify-content:space-between; gap:8px }
  #sw-sug .s:hover { background:var(--line) }
  #sw-sug .s small { color:var(--mut) }
  .slink { position:absolute; top:8px; right:10px; color:var(--mut);
           font-size:14px }
  .sact { display:flex; justify-content:space-between; align-items:center;
          margin-top:8px }
  .sic { cursor:pointer; font-size:16px; color:var(--mut); padding:4px 6px;
         text-decoration:none }
  .sic:hover { color:var(--txt) }
  .sic.neg:hover { color:var(--up) }
  #upd { position:fixed; top:10px; left:50%; transform:translateX(-50%);
         z-index:70; display:none; background:var(--card);
         border:1px solid var(--info); border-radius:99px;
         padding:8px 16px; font-size:13px; cursor:pointer;
         box-shadow:0 4px 14px #0008 }
  .acc { margin-bottom:8px }
  .acc summary { cursor:pointer; padding:10px 12px; background:var(--card);
                 border:1px solid var(--line); border-radius:10px;
                 font-weight:600; font-size:13px; list-style:none;
                 display:flex; justify-content:space-between;
                 align-items:center; gap:8px }
  .acc summary::-webkit-details-marker { display:none }
  .acc summary::before { content:"▸"; color:var(--mut); margin-right:2px }
  .acc[open] summary::before { content:"▾" }
  .acc[open] summary { border-radius:10px 10px 0 0; border-bottom:0 }
  .acc .grid { padding:8px; background:var(--card);
               border:1px solid var(--line); border-top:0;
               border-radius:0 0 10px 10px; gap:8px }
  .sw { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
        font-size:12px; color:var(--mut); user-select:none; position:relative }
  .sw input { position:absolute; width:1px; height:1px; opacity:0;
              margin:0; padding:0 }
  .sw input:focus-visible + i { outline:2px solid var(--info);
                                outline-offset:2px }
  .sw i { width:34px; height:19px; border-radius:99px; background:#3f3f46;
          position:relative; transition:.2s; flex:none }
  .sw i::after { content:""; position:absolute; width:15px; height:15px;
                 border-radius:50%; background:#d4d4d8; top:2px; left:2px; transition:.2s }
  .sw input:checked + i { background:#064e3b }
  .sw input:checked + i::after { left:17px; background:#4ade80 }
  @media (min-width:900px) {
    dialog#dlg { position:fixed; top:0; right:0; bottom:0; left:auto;
                 margin:0; height:100%; max-height:none; width:440px;
                 max-width:94vw; border:0; border-left:1px solid var(--line);
                 border-radius:0; overflow-y:auto; overscroll-behavior:contain }
    body.detail .wrap { padding-right:460px }
  }