/* ============================================================
     Hogar CRM v2.42 — sistema visual "sobrio y elegante"
     Nombres de variable heredados (--ivory, --walnut, --gold…) para no
     romper el código existente. Significado actual:
       --ivory  = fondo de página      --white = superficie de tarjetas
       --walnut = texto principal      --walnut-soft = texto secundario
       --gold   = COLOR DE ACENTO (ya no es dorado; lo elige el usuario)
       --sage / --brick = éxito / alerta   --line = bordes
     El estilo (modo, radio, superficie, densidad, accesos rápidos, barra
     lateral y acento) se controla con atributos data-* en <body>.
     ============================================================ */
  :root{
    --ivory:#F4F5F8;
    --ivory-dim:#E8EBF1;
    --white:#FFFFFF;
    --walnut:#1C2230;
    --walnut-soft:#5A6376;
    --sage:#3E7C6B;
    --sage-dim:#DDECE7;
    --brick:#9A4256;
    --brick-dim:#F4E0E5;
    --gold:#4F5BC8;
    --gold-dim:#E5E8F9;
    --accent-ink:#333FA0;
    --on-accent:#FFFFFF;
    --ok-ink:#2F6254;
    --bad-ink:#8A3346;
    --slate:#7C8590;
    --line:#E0E4EB;
    --danger:#B03A48;
    --danger-dim:#F8E3E6;
    --info:#2E6E8E;
    --info-dim:#DCEAF2;
    --scroll-thumb:#CBD0DA;
    --overlay:rgba(10,13,20,.5);
  }
  body{
    --radius:12px;
    --radius-sm:calc(var(--radius) - 2px);
    --radius-lg:calc(var(--radius) + 4px);
    --pad:22px;
    --card-border:1px solid var(--line);
    --card-shadow:none;
    --shadow:none;
    /* Barra lateral: por defecto sigue el tema */
    --sidebar-bg:var(--white);
    --sb-text:var(--walnut-soft);
    --sb-strong:var(--walnut);
    --sb-muted:#8791A5;
    --sb-line:var(--line);
    --sb-hover:var(--ivory-dim);
    --sb-active:var(--gold-dim);
    --sb-active-text:var(--accent-ink);
    --sb-danger:#B03A48;
  }
  /* Modo oscuro (clase en <body>) */
  body.dark-mode{
    --ivory:#0E1117;
    --ivory-dim:#1A1F2A;
    --white:#161B24;
    --walnut:#E7EAF0;
    --walnut-soft:#A1A9B8;
    --line:#272D3A;
    --sage:#5FB39B;
    --sage-dim:#16302A;
    --brick:#E58A9E;
    --brick-dim:#3A1D26;
    --ok-ink:#7FD0B8;
    --bad-ink:#F0A3B3;
    --danger:#E58A9E;
    --danger-dim:#3A1D26;
    --info:#7EB8D6;
    --info-dim:#14303F;
    --gold:#8F9AF0;
    --gold-dim:#232845;
    --accent-ink:#AEB6F5;
    --on-accent:#0E1117;
    --scroll-thumb:#3A4252;
    --sb-muted:#8791A5;
    --sb-danger:#E58A9E;
  }
  /* Acentos predefinidos (claro / oscuro) */
  body[data-accent="grafito"]{--gold:#3B4A6B; --gold-dim:#E3E7F0; --accent-ink:#2A3550;}
  body[data-accent="petroleo"]{--gold:#1F7A8C; --gold-dim:#D9EEF2; --accent-ink:#16606F;}
  body[data-accent="violeta"]{--gold:#7A4FC0; --gold-dim:#EBE3F8; --accent-ink:#5B3A94;}
  body.dark-mode[data-accent="grafito"]{--gold:#9FB0D6; --gold-dim:#212A3E; --accent-ink:#C3D0EC;}
  body.dark-mode[data-accent="petroleo"]{--gold:#6CC4D6; --gold-dim:#12313A; --accent-ink:#A5E0EC;}
  body.dark-mode[data-accent="violeta"]{--gold:#B79BEA; --gold-dim:#2A2040; --accent-ink:#D3C2F3;}
  /* Acento libre: solo se fija --gold (y --on-accent) desde JS; el resto se deriva */
  body[data-accent="custom"]{
    --gold-dim:color-mix(in srgb, var(--gold) 14%, var(--white));
    --accent-ink:color-mix(in srgb, var(--gold) 65%, var(--walnut));
  }
  /* Radio de tarjetas */
  body[data-card="sharp"]{--radius:6px;}
  body[data-card="soft"]{--radius:12px;}
  body[data-card="round"]{--radius:20px;}
  /* Superficie */
  body[data-surface="line"]{--card-border:1px solid var(--line); --card-shadow:none;}
  body[data-surface="shadow"]{--card-border:1px solid transparent; --card-shadow:0 1px 2px rgba(20,28,45,.06), 0 8px 24px rgba(20,28,45,.07);}
  body.dark-mode[data-surface="shadow"]{--card-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);}
  body[data-surface="flat"]{--card-border:1px solid transparent; --card-shadow:none;}
  body[data-surface]{--shadow:var(--card-shadow);}
  /* Densidad */
  body[data-density="compact"]{--pad:15px;}
  body[data-density="comfy"]{--pad:22px;}
  /* Barra lateral siempre oscura */
  body[data-sidebar="dark"]{
    --sidebar-bg:#141925;
    --sb-text:#AEB6C6;
    --sb-strong:#F1F3F8;
    --sb-muted:#8791A5;
    --sb-line:rgba(255,255,255,.1);
    --sb-hover:rgba(255,255,255,.06);
    --sb-active:rgba(143,154,240,.18);
    --sb-active-text:#D5D9F8;
    --sb-danger:#F0A3B3;
  }
  body.dark-mode[data-sidebar="theme"]{--sidebar-bg:#12161E;}
  body.dark-mode ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);}
  *{box-sizing:border-box;}
  body{margin:0;}
  html,body{height:100%;}
  body{
    font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background:var(--ivory);
    color:var(--walnut);
    -webkit-font-smoothing:antialiased;
  }
  .app{display:flex;min-height:100vh;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:236px;
    flex-shrink:0;
    background:var(--sidebar-bg);
    color:var(--sb-text);
    border-right:1px solid var(--sb-line);
    display:flex;
    flex-direction:column;
    padding:28px 18px;
    position:sticky;
    top:0;
    height:100vh;
    transition:width .18s ease, padding .18s ease;
  }
  .sidebar-toggle{
    display:none; position:absolute; top:26px; right:-12px; width:24px; height:24px; border-radius:50%;
    background:var(--gold); color:var(--on-accent); border:2px solid var(--sidebar-bg); align-items:center; justify-content:center;
    cursor:pointer; font-size:10px; z-index:2; transition:transform .18s ease;
  }
  .brand{display:flex;align-items:center;gap:10px;padding:0 6px 26px 6px;}
  .brand-mark{
    width:34px;height:34px;border-radius:9px; flex-shrink:0;
    background:var(--gold);
    display:flex;align-items:center;justify-content:center;
    font-weight:700; color:var(--on-accent); font-size:16px;
  }
  .brand-text{font-size:17px; font-weight:700; letter-spacing:-.01em;}
  .brand-sub{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--sb-muted); margin-top:1px;}

  /* ---------- Modo "riel": minimizado por defecto en pantallas grandes ---------- */
  @media(min-width:821px){
    .sidebar-toggle{display:flex;}
    .sidebar:not(.expanded){ width:76px; padding-left:14px; padding-right:14px; }
    .sidebar:not(.expanded) .sidebar-toggle i{ transform:rotate(180deg); }
    .sidebar:not(.expanded) .brand{ justify-content:center; padding-left:0; padding-right:0; }
    .sidebar:not(.expanded) .sidebar-label{
      display:inline-block; width:0; opacity:0; overflow:hidden; white-space:nowrap;
    }
    .sidebar:not(.expanded) .nav-group-header{ padding-left:0; padding-right:0; justify-content:center; }
    .sidebar:not(.expanded) .nav-item{ justify-content:center; padding-left:0; padding-right:0; }
    .sidebar:not(.expanded) .nav-group.collapsed{ display:flex !important; flex-direction:column; }
    .sidebar:not(.expanded) #syncStatus{ justify-content:center; }
    .sidebar.expanded{ width:236px; }
  }
  .sidebar-label{ transition:opacity .12s ease; }

  nav{display:flex; flex-direction:column; gap:3px; margin-top:8px; flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:10px;}
  nav::-webkit-scrollbar{width:5px;}
  nav::-webkit-scrollbar-thumb{background:var(--sb-line); border-radius:3px;}
  .nav-item{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; border-radius:10px;
    color:var(--sb-text); text-decoration:none; cursor:pointer;
    font-size:14.5px; font-weight:500;
    border:1px solid transparent;
    transition:background .15s ease, color .15s ease;
  }
  .nav-item i{width:17px; text-align:center; font-size:14px; opacity:.85;}
  .nav-item:hover{background:var(--sb-hover); color:var(--sb-strong);}
  .estancia-nombre-link{cursor:pointer;}
  .estancia-nombre-link:hover{color:var(--sb-strong); text-decoration:underline;}
  .nav-item.active{background:var(--sb-active); color:var(--sb-active-text); font-weight:600;}
  .nav-item.active i{opacity:1;}

  /* Cada apartado tiene su propio color de identificación (configurable en
     "Colores por apartado"), aplicado al ícono del menú lateral y de los
     accesos rápidos del Panel — así se reconoce cada sección de un vistazo. */
  .nav-item[data-view="congelador"] i:first-child{color:var(--mc-congelador);}
  .nav-item[data-view="refrigerador"] i:first-child{color:var(--mc-refrigerador);}
  .nav-item[data-view="envases"] i:first-child{color:var(--mc-envases);}
  .nav-item[data-view="bebidas"] i:first-child{color:var(--mc-bebidas);}
  .nav-item[data-view="limpieza"] i:first-child{color:var(--mc-limpieza);}
  .nav-item[data-view="armarios"] i:first-child{color:var(--mc-armarios);}
  .nav-item[data-view="tickets"] i:first-child{color:var(--mc-tickets);}
  .nav-item[data-view="lista"] i:first-child{color:var(--mc-lista);}
  .nav-item[data-view="tareas"] i:first-child{color:var(--mc-tareas);}
  .nav-item[data-view="recetas"] i:first-child{color:var(--mc-recetas);}
  .nav-item[data-view="documentos"] i:first-child{color:var(--mc-documentos);}
  .nav-item[data-view="servicios"] i:first-child{color:var(--mc-servicios);}
  .nav-item[data-view="contactos"] i:first-child{color:var(--mc-contactos);}
  .nav-item[data-view="deudas"] i:first-child{color:var(--mc-deudas);}
  .nav-item[data-view="suministros"] i:first-child{color:var(--mc-suministros);}
  .nav-item[data-view="reportes"] i:first-child{color:var(--mc-reportes);}
  .nav-item[data-view="finanzas"] i:first-child{color:var(--mc-finanzas);}
  .nav-item[data-view="historial"] i:first-child{color:var(--mc-historial);}
  .nav-item[data-view="accesos"] i:first-child{color:var(--mc-accesos);}

  .sidebar-footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--sb-line);}
  .sidebar-footer .hint{font-size:11.5px; color:var(--sb-muted); line-height:1.5;}

  /* ---------- Main ---------- */
  /* min-width:0 es necesario porque main es un item flex (dentro de .app):
     sin esto, un contenido ancho dentro de main (p.ej. la tabla del menú
     semanal en Recetas, con min-width:760px) impide que main se encoja al
     ancho del viewport y desborda toda la página horizontalmente. Eso, en
     móvil, es lo que hacía que el menú inferior fijo (#mobileBottomNav) no
     se pintara al entrar en Recetas hasta el siguiente scroll/reflow. */
  main{flex:1; min-width:0; padding:34px 42px 60px; max-width:1180px;}
  .topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:12px;}
  .page-title{font-size:26px; font-weight:700; letter-spacing:-.015em;}
  .page-eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); font-weight:600; margin-bottom:4px;}
  .page-sub{color:var(--walnut-soft); font-size:14px; margin-top:5px;}
  .today{font-size:13px; color:var(--walnut-soft); font-family:'JetBrains Mono', monospace;}

  section.view{display:none;}
  section.view.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

  /* ---------- Cards / grid ---------- */
  .grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:30px;}
  .stat-card{
    background:var(--white); border:var(--card-border); border-radius:var(--radius);
    padding:calc(var(--pad) - 3px) var(--pad); box-shadow:var(--shadow);
  }
  .stat-card .label{font-size:12.5px; color:var(--walnut-soft); font-weight:500; display:flex; align-items:center; gap:7px;}
  .stat-card .value{font-size:28px; font-weight:700; letter-spacing:-.02em; margin-top:10px;}
  .stat-card .delta{font-size:12.5px; margin-top:6px; color:var(--sage); font-weight:500;}
  .stat-card .delta.neg{color:var(--danger);}
  .stat-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px;}

  .panel{background:var(--white); border:var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--pad) calc(var(--pad) + 2px); margin-bottom:22px;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap;}
  .sistema-tabs{display:flex; gap:4px; margin-bottom:22px; flex-wrap:wrap; border-bottom:1px solid var(--line);}
  .sistema-tab-btn{background:none; border:none; border-bottom:3px solid transparent; padding:10px 14px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--walnut-soft); cursor:pointer; display:flex; align-items:center; gap:7px;}
  .sistema-tab-btn:hover{color:var(--walnut);}
  .sistema-tab-btn.active{color:var(--accent-ink); border-bottom-color:var(--gold);}
  .sistema-tab-content{display:none;}
  .sistema-tab-content.active{display:block;}
  .voz-btn.escuchando{background:var(--brick-dim); color:var(--brick); border-color:var(--brick); animation:vozPulso 1.1s ease-in-out infinite;}
  @keyframes vozPulso{ 0%,100%{opacity:1;} 50%{opacity:.55;} }
  .panel-title{font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px;}
  .panel-title i{color:var(--sage); font-size:15px;}

  .two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:20px;}
  @media(max-width:980px){.two-col{grid-template-columns:1fr;}}

  /* ---------- Forms ---------- */
  .form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:12px;}
  label{font-size:12px; color:var(--walnut-soft); font-weight:600; display:block; margin-bottom:5px;}
  input, select, textarea{
    width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--ivory); font-family:inherit; font-size:13.5px; color:var(--walnut);
  }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; background:var(--white);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  button:focus-visible, .btn:focus-visible, .nav-item:focus-visible, .chip:focus-visible, .quick-tile:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; min-height:42px; border-radius:var(--radius-sm);
    border:none; cursor:pointer; font-weight:600; font-size:13.5px; font-family:inherit;
    transition:transform .1s ease, opacity .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--gold); color:var(--on-accent);}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-sage{background:var(--sage); color:#fff;}
  .btn-ghost{background:transparent; color:var(--walnut-soft); border:1px solid var(--line);}
  .btn-ghost:hover{background:var(--ivory-dim);}
  .btn-danger-ghost{background:transparent; border:1px solid var(--brick-dim); color:var(--brick);}
  .btn-danger-ghost:hover{background:var(--brick-dim);}
  .icon-btn{background:transparent; border:none; cursor:pointer; color:var(--walnut-soft); font-size:14px; padding:6px; min-width:36px; min-height:36px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center;}
  .icon-btn:hover{background:var(--ivory-dim); color:var(--walnut);}

  /* ---------- Table ---------- */
  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  thead th{
    text-align:left; font-size:12px;
    color:var(--walnut-soft); font-weight:600; padding:0 10px 10px; border-bottom:1px solid var(--line);
  }
  tbody td{padding:11px 10px; border-bottom:1px solid var(--ivory-dim); vertical-align:middle;}
  tbody tr:hover{background:var(--ivory-dim);}
  .item-name{font-weight:600;}
  .muted{color:var(--walnut-soft); font-size:12.5px;}
  .mono{font-family:'JetBrains Mono', monospace;}

  .tag{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:600;}
  .tag-sage{background:var(--sage-dim); color:var(--ok-ink);}
  .tag-gold{background:var(--gold-dim); color:var(--accent-ink);}
  .tag-brick{background:var(--brick-dim); color:var(--bad-ink);}
  .tag-slate{background:var(--ivory-dim); color:var(--walnut-soft);}
  .tag-danger{background:var(--danger-dim); color:var(--danger);}
  .compra-online-links{display:flex; gap:8px; margin-top:6px;}
  .compra-online-links a{font-size:11px; color:var(--walnut-soft); text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:2px 8px; white-space:nowrap;}
  .compra-online-links a:hover{color:var(--accent-ink); border-color:var(--gold);}

  .empty-state{text-align:center; padding:44px 20px; color:var(--walnut-soft);}
  .empty-state i{font-size:26px; color:var(--line); margin-bottom:10px; display:block;}
  .empty-state p{margin:4px 0 0; font-size:13.5px;}

  .badge-count{background:var(--gold); color:var(--on-accent); font-size:11px; font-weight:700; padding:1px 8px; border-radius:99px;}

  .filters{display:flex; gap:8px; flex-wrap:wrap;}
  .chip{padding:6px 13px; border-radius:99px; border:1px solid var(--line); background:var(--white); font-size:12.5px; font-weight:600; cursor:pointer; color:var(--walnut-soft);}
  .chip.active{background:var(--gold-dim); color:var(--accent-ink); border-color:var(--gold);}

  .divider-leaf{display:flex; align-items:center; gap:12px; margin:26px 0; color:var(--line);}
  .divider-leaf .line{flex:1; height:1px; background:var(--line);}

  .txn-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--ivory-dim);}
  .txn-row:last-child{border-bottom:none;}
  .txn-left{display:flex; align-items:center; gap:11px;}
  .txn-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px;}
  .txn-desc{font-weight:600; font-size:13.5px;}
  .txn-cat{font-size:11.5px; color:var(--walnut-soft);}
  .txn-amt{font-family:'JetBrains Mono', monospace; font-weight:600; font-size:14px;}
  .txn-amt.pos{color:var(--sage);}
  .txn-amt.neg{color:var(--brick);}

  .modal-overlay{
    position:fixed; inset:0; background:var(--overlay); display:none;
    align-items:center; justify-content:center; z-index:50; padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 26px 22px; width:100%; max-width:440px; box-shadow:0 20px 50px rgba(0,0,0,.25);}
  .modal h3{margin:0 0 16px; font-size:18px; font-weight:700; display:flex; align-items:center; gap:9px;}
  .modal h3 i{color:var(--gold);}
  .modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:18px;}

  .toast{
    position:fixed; bottom:24px; right:24px; background:var(--walnut); color:var(--ivory);
    padding:13px 20px; border-radius:11px; font-size:13.5px; font-weight:500;
    box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; align-items:center; gap:10px;
    z-index:60; opacity:0; transform:translateY(10px); transition:all .25s ease; pointer-events:none;
  }
  .toast.show{opacity:1; transform:translateY(0);}
  .toast i{color:var(--sage);}

  .expiry-pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px;}

  /* ---------- Botones rápidos de cantidad ---------- */
  .qty-stepper{display:flex; align-items:center; gap:6px;}
  .custom-cat-input{margin-top:6px;}
  .qty-btn{
    width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:var(--white);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--walnut-soft); font-size:10px;
    flex-shrink:0;
  }
  .qty-btn:hover{background:var(--ivory-dim); color:var(--walnut);}
  .qty-val{min-width:44px; text-align:center;}

  /* ---------- Menú lateral en apartados ---------- */
  .nav-group-header{
    display:flex; align-items:center; justify-content:space-between; padding:12px 12px 5px;
    font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--sb-muted); font-weight:700;
    cursor:pointer; user-select:none;
    background:var(--sidebar-bg);
  }
  .nav-group-header i{font-size:10px; transition:transform .15s ease;}
  .nav-group{background:var(--sidebar-bg);}
  .nav-group.collapsed{display:none;}

  /* ---------- Gestión de estancias ---------- */
  .estancia-gestion-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
  .estancia-gestion-row:last-child{border-bottom:none;}
  .estancia-color-dot{width:14px; height:14px; border-radius:50%; flex-shrink:0;}

  /* ---------- Elegir a qué estancia/apartado ir (desde el Acceso rápido del
     Panel general, o el botón "Estancia" de la barra inferior móvil, cuando
     hay 2 o más estancias) ---------- */
  .estancia-pick-row{
    display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--line); border-radius:12px;
    cursor:pointer; margin-bottom:8px; transition:border-color .12s ease, background .12s ease;
  }
  .estancia-pick-row:hover{border-color:var(--gold); background:var(--ivory-dim);}
  .estancia-pick-row:last-child{margin-bottom:0;}
  .quick-tile-badge{
    position:absolute; top:7px; right:7px; min-width:17px; height:17px; border-radius:9px; padding:0 4px;
    background:var(--gold); color:var(--on-accent); font-size:9.5px; display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-weight:600;
  }

  /* ---------- Accesos rápidos (cuadrícula visual en el Panel) ---------- */
  .quick-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:12px; margin-bottom:30px;}
  .quick-tile{
    background:var(--white); border:var(--card-border); border-radius:var(--radius-lg);
    padding:16px 8px 14px; display:flex; flex-direction:column; align-items:center; gap:9px;
    cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    text-align:center; box-shadow:var(--shadow); position:relative;
  }
  .quick-tile:hover, .quick-tile:active{transform:translateY(-2px); border-color:var(--gold);}
  body[data-surface="shadow"] .quick-tile:hover{box-shadow:0 10px 22px rgba(20,28,45,.14);}
  /* Estilo de accesos rápidos: tinte (por defecto) · color pleno · solo icono */
  body[data-quick="solid"] #quickAccessGrid .quick-tile{background:color-mix(in srgb, var(--tile-c, var(--gold)) 68%, #000); border-color:transparent;}
  body[data-quick="solid"] #quickAccessGrid .quick-tile .quick-tile-label{color:#fff; font-weight:700;}
  body[data-quick="solid"] #quickAccessGrid .quick-tile .quick-tile-icon{background:rgba(255,255,255,.22) !important; color:#fff !important;}
  body[data-quick="plain"] #quickAccessGrid .quick-tile{background:transparent; border-color:transparent; box-shadow:none;}
  body[data-quick="plain"] #quickAccessGrid .quick-tile:hover{background:var(--ivory-dim);}
  .quick-tile-icon{
    width:46px; height:46px; border-radius:calc(var(--radius) + 1px); display:flex; align-items:center; justify-content:center; font-size:18px;
  }
  .quick-tile-label{font-size:12px; font-weight:700; color:var(--walnut); line-height:1.25;}

  /* ---------- Menú móvil: overlay + botón de cerrar ---------- */
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:var(--overlay); z-index:39; backdrop-filter:blur(1px);}
  .sidebar-backdrop.show{display:block;}
  .sidebar-close{
    display:none; position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px;
    background:var(--sb-hover); border:none; color:var(--sb-strong); align-items:center; justify-content:center; cursor:pointer;
  }

  /* ---------- Menú inferior móvil: DOCK flotante ---------- */
  .mobile-bottom-nav{
    display:none; position:fixed; left:50%; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:35;
    transform:translateX(-50%); width:calc(100% - 20px); max-width:420px;
    background:color-mix(in srgb, var(--white) 88%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--line); border-radius:26px; padding:7px 8px;
    box-shadow:0 10px 30px rgba(10,14,25,.18);
  }
  .mobile-bottom-nav .row{display:flex; justify-content:space-around; align-items:flex-end; gap:2px;}
  .mobile-bottom-nav button{
    position:relative; flex:1; min-width:56px; min-height:52px;
    background:none; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--walnut-soft); font-family:inherit; font-size:11px; font-weight:600; padding:6px 4px; border-radius:18px; cursor:pointer;
    transform:scale(var(--dk-s,1)); transform-origin:bottom center;
    transition:transform .18s cubic-bezier(.2,.8,.2,1), background .15s ease, color .15s ease;
  }
  .mobile-bottom-nav button i{font-size:19px;}
  .mobile-bottom-nav button.active{color:var(--accent-ink); background:var(--gold-dim);}
  .mobile-bottom-nav button.active::after{content:""; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--gold);}
  .mobile-bottom-nav button:active{--dk-s:.92;}

  @media(max-width:820px){
    html{overscroll-behavior-y:contain;}
    .mobile-bottom-nav{display:block; touch-action:none;}
    .sidebar-close{display:flex;}
    main{padding-bottom:104px;}
  }
  .exp-ok{background:var(--sage-dim); color:var(--ok-ink);}
  .exp-soon{background:var(--gold-dim); color:var(--accent-ink);}
  .exp-late{background:var(--danger-dim); color:var(--danger);}

  @media(max-width:820px){
    .sidebar{position:fixed; left:-236px; z-index:40; transition:left .2s ease; box-shadow:0 0 0 2000px rgba(0,0,0,0);}
    .sidebar.open{left:0; box-shadow:10px 0 40px rgba(0,0,0,.25);}
    main{padding:22px 16px 104px;}
    .menu-toggle{display:flex !important;}
  }
  .menu-toggle{display:none; align-items:center; gap:8px; background:var(--gold); color:var(--on-accent); border:none; padding:10px 14px; min-height:42px; border-radius:var(--radius-sm); font-weight:600; margin-bottom:16px; cursor:pointer;}

  /* ---------- Barra superior de utilidades (solo en escritorio) ---------- */
  .top-utility-bar{
    display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:6px 4px;
  }
  .top-utility-bar button{
    display:flex; align-items:center; gap:7px; background:var(--white); border:1px solid var(--line);
    color:var(--walnut-soft); padding:9px 13px; min-height:40px; border-radius:var(--radius-sm); font-family:inherit; font-size:12.5px; font-weight:600;
    cursor:pointer; transition:background .12s ease, color .12s ease;
  }
  .top-utility-bar button:hover{background:var(--ivory-dim); color:var(--walnut);}
  .top-utility-bar button i{font-size:13px;}
  @media(max-width:820px){ .top-utility-bar{display:none;} }

  ::-webkit-scrollbar{width:9px; height:9px;}
  ::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:99px;}
  ::-webkit-scrollbar-track{background:transparent;}

  /* ---------- Ticket scanner ---------- */
  .drop-zone{
    border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:40px 20px; text-align:center;
    background:var(--white); transition:border-color .2s ease, background .2s ease; cursor:pointer;
  }
  .drop-zone:hover{border-color:var(--gold);}
  .drop-zone.drag{border-color:var(--gold); border-style:solid; background:var(--gold-dim);}
  .dz-icon{
    width:64px; height:64px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
    background:var(--gold-dim); color:var(--accent-ink); font-size:26px;
  }
  .drop-zone.drag .dz-icon{animation:dzBounce .9s cubic-bezier(.28,.84,.42,1) infinite;}
  /* "bounce 35": el icono sube ~35% de su recorrido máximo y rebota; solo mientras se arrastra */
  @keyframes dzBounce{0%,100%{transform:translateY(0);} 35%{transform:translateY(-14px);} 60%{transform:translateY(0);} 78%{transform:translateY(-4px);}}
  .drop-zone .dz-title{font-weight:700; font-size:16px;}
  .spinner{
    width:22px; height:22px; border-radius:50%; border:3px solid var(--ivory-dim);
    border-top-color:var(--gold); animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .ticket-hist-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--ivory-dim);}
  .ticket-hist-row:last-child{border-bottom:none;}

  /* ---------- Lista de compras ---------- */
  .store-group{margin-bottom:18px;}
  .store-group-head{
    display:flex; align-items:center; gap:8px; font-weight:600;
    font-size:14.5px; font-weight:600; color:var(--walnut-soft); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line);
  }
  .store-group-head i{color:var(--accent-ink);}
  .lista-row{display:flex; align-items:center; justify-content:space-between; padding:9px 4px; border-bottom:1px solid var(--ivory-dim); gap:10px;}
  .lista-row:last-child{border-bottom:none;}
  .lista-row.bought .lista-name{text-decoration:line-through; color:var(--walnut-soft);}
  .lista-left{display:flex; align-items:center; gap:12px; flex:1; min-width:0;}
  .lista-check{
    width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); flex-shrink:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center; background:var(--white);
  }
  .lista-check.on{background:var(--sage); border-color:var(--sage); color:#fff; font-size:11px;}
  .lista-name{font-weight:600; font-size:13.5px;}
  .lista-meta{font-size:11.5px; color:var(--walnut-soft);}

  /* ---------- Recetas / menú ---------- */
  .receta-card{background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
  .receta-card h4{margin:0 0 6px; font-size:15px;}
  .receta-card .ing{font-size:12px; color:var(--walnut-soft); line-height:1.5;}
  .receta-card .actions{margin-top:10px; display:flex; justify-content:flex-end; gap:4px;}
  .tag-tm{background:var(--info-dim); color:var(--info);}
  .link-add-cat{background:none; border:none; color:var(--accent-ink); cursor:pointer; padding:0; margin-left:4px; font-size:13px; vertical-align:middle;}
  .link-add-cat:hover{color:var(--gold);}
  .receta-source{font-size:11px; color:var(--walnut-soft); margin-top:8px;}
  .receta-source a{color:var(--sage); text-decoration:none; font-weight:600;}

  /* ---------- Pantalla de acceso ---------- */
  .auth-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--ivory); padding:20px;
  }
  .auth-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:30px 28px; width:100%; max-width:380px; box-shadow:var(--shadow);
  }
  .auth-error{
    color:var(--danger); font-size:12.5px; margin-top:10px; text-align:center; min-height:16px;
  }
  .sync-status i{font-size:10px;}
  .sync-status.saving #syncStatusIcon{color:var(--gold);}
  .sync-status.saved #syncStatusIcon{color:var(--sage);}
  .sync-status.error #syncStatusIcon{color:var(--danger);}
  .captcha-row{display:flex; align-items:center; gap:8px;}
  .captcha-img{border-radius:8px; border:1px solid var(--line); cursor:pointer; display:block;}
  table.menu-table{border-collapse:collapse; width:100%; min-width:760px;}
  table.menu-table th, table.menu-table td{border:1px solid var(--line); padding:8px; font-size:12.5px; text-align:left;}
  table.menu-table th{background:var(--ivory-dim); font-weight:600; font-size:12px; color:var(--walnut-soft);}
  table.menu-table select{font-size:12.5px; padding:6px 8px;}
  table.menu-table td:first-child{background:var(--ivory-dim); font-weight:600; white-space:nowrap;}

  /* ---------- Documentos ---------- */
  .doc-row{display:flex; align-items:center; justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--ivory-dim); gap:12px;}
  .doc-row:last-child{border-bottom:none;}
  .doc-icon{width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}

  /* ---------- Presupuestos ---------- */
  .budget-row{padding:12px 0; border-bottom:1px solid var(--ivory-dim);}
  .budget-row:last-child{border-bottom:none;}
  .budget-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px;}
  .budget-top .name{font-weight:600;}
  .budget-bar{height:8px; border-radius:99px; background:var(--ivory-dim); overflow:hidden;}
  .budget-bar-fill{height:100%; border-radius:99px; background:var(--sage); transition:width .3s ease;}
  .budget-bar-fill.over{background:var(--danger);}
  .budget-bar-fill.warn{background:var(--gold);}

  /* ---------- Tabs (Contactos) ---------- */
  .tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line);}
  .tab-btn{padding:9px 16px; background:none; border:none; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--walnut-soft); border-bottom:2px solid transparent; font-family:inherit;}
  .tab-btn.active{color:var(--accent-ink); border-color:var(--gold);}
  .tab-pane{display:none;}
  .tab-pane.active{display:block;}

  /* ---------- Deudas ---------- */
  .deuda-row{display:flex; align-items:center; justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--ivory-dim); gap:10px;}
  .deuda-row:last-child{border-bottom:none;}
  .deuda-row.pagado .txn-desc{text-decoration:line-through; color:var(--walnut-soft);}

  /* ---------- Servicios ---------- */
  .util-icon-agua{background:var(--info-dim); color:var(--info);}
  .util-icon-luz{background:var(--gold-dim); color:var(--accent-ink);}
  .util-icon-gas{background:var(--brick-dim); color:var(--bad-ink);}
  .util-icon-internet{background:var(--sage-dim); color:var(--ok-ink);}

  /* ---------- Reportes ---------- */
  .report-card{background:var(--white); border:var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; text-align:left;}
  .report-card i{font-size:22px; color:var(--gold); margin-bottom:10px; display:block;}
  .report-card h4{margin:0 0 6px; font-size:16px;}
  .report-card p{font-size:12.5px; color:var(--walnut-soft); margin:0 0 14px; line-height:1.5;}


  /* ---------- Estilo (Apariencia): selector de estilos y ajuste manual ---------- */
  .estilo-presets{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
  .estilo-card{
    border:2px solid var(--line); background:var(--white); border-radius:var(--radius); padding:10px; text-align:left;
    cursor:pointer; font-family:inherit; color:var(--walnut); transition:border-color .15s ease, transform .15s ease;
  }
  .estilo-card:hover{transform:translateY(-2px);}
  .estilo-card[aria-checked="true"]{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim);}
  .estilo-mini{height:62px; border-radius:8px; display:flex; overflow:hidden; border:1px solid rgba(128,128,128,.25); margin-bottom:8px;}
  .estilo-mini i{width:22%; display:block;}
  .estilo-mini b{flex:1; display:flex; flex-direction:column; gap:5px; padding:7px;}
  .estilo-mini u{display:block; height:9px; border-radius:3px; background:rgba(128,128,128,.28);}
  .estilo-mini u:first-child{width:55%; height:11px; background:var(--ea,#888);}
  .estilo-nombre{font-weight:700; font-size:13.5px;}
  .estilo-desc{font-size:12px; color:var(--walnut-soft); margin-top:2px;}
  .ajuste-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
  .ajuste-grid h4{font-size:12px; color:var(--walnut-soft); margin:0 0 8px; font-weight:600;}
  .seg{display:flex; background:var(--ivory-dim); border-radius:var(--radius-sm); padding:3px; gap:2px; flex-wrap:wrap;}
  .seg button{flex:1; border:0; background:none; padding:8px 10px; min-height:38px; border-radius:calc(var(--radius-sm) - 2px); font-family:inherit; font-weight:600; font-size:12.5px; color:var(--walnut-soft); cursor:pointer; white-space:nowrap;}
  .seg button[aria-pressed="true"]{background:var(--white); color:var(--walnut); box-shadow:0 1px 2px rgba(0,0,0,.14);}
  .acento-sw{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .acento-sw button{width:38px; height:38px; border-radius:50%; border:2px solid transparent; background:var(--c); cursor:pointer; outline-offset:2px;}
  .acento-sw button[aria-pressed="true"]{border-color:var(--walnut);}
  .acento-sw input[type=color]{width:38px; height:38px; padding:0; border:0; background:none; cursor:pointer;}

  /* ---------- Actualizar / pull-to-refresh ---------- */
  .ptr{
    position:fixed; left:0; right:0; top:0; height:0; z-index:70; display:flex; align-items:flex-end; justify-content:center;
    pointer-events:none; overflow:hidden;
  }
  .ptr span{
    width:42px; height:42px; margin-bottom:10px; border-radius:50%; background:var(--white); border:1px solid var(--line);
    box-shadow:0 4px 14px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; color:var(--gold);
  }
  .ptr.loading span i{animation:spin .8s linear infinite;}
  .btn.cargando i{animation:spin .8s linear infinite;}
  .solo-lectores{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

  /* Respeta a quien pide menos movimiento */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
    .mobile-bottom-nav button{transform:none !important;}
  }

  @media (pointer:coarse){
    .qty-btn{width:34px; height:34px; font-size:12px;}
    .chip{min-height:40px; display:inline-flex; align-items:center;}
    .icon-btn{min-width:40px; min-height:40px;}
  }

  @media(max-width:820px){
    .toast{left:16px; right:16px; bottom:calc(92px + env(safe-area-inset-bottom)); justify-content:center;}
  }

  /* ============================================================
     v2.43 — Variantes de diseño, efectos y Delight
     Todo cuelga de atributos/clases del <body> (ver applyEstilo).
     ============================================================ */

  /* ---- Tarjetas de estadísticas: extras (tendencia / medidor) ---- */
  .stat-card{position:relative; overflow:hidden;}
  .sc-extra{display:none; margin-top:10px;}
  .sc-spark{width:100%; height:34px; overflow:visible;}
  .sc-spark path.l{fill:none; stroke:var(--tile-c, var(--gold)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .sc-spark path.a{fill:color-mix(in srgb, var(--tile-c, var(--gold)) 11%, transparent); stroke:none;}
  .sc-meter{height:6px; border-radius:99px; background:var(--line); overflow:hidden;}
  .sc-meter i{display:block; height:100%; border-radius:99px; background:var(--tile-c, var(--gold));}
  .sc-meter.warn i{background:var(--warn, #B7791F);} .sc-meter.bad i{background:var(--danger);}
  .sc-chip{display:none; margin-top:10px; font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; width:fit-content;}
  .sc-chip.ok{color:var(--ok-ink); background:var(--sage-dim);}
  .sc-chip.warn{color:var(--accent-ink); background:var(--gold-dim);}
  .sc-chip.bad{color:var(--bad-ink); background:var(--danger-dim);}
  body[data-stats="trend"] .sc-spark-wrap, body[data-stats="trend"] .sc-chip{display:block;}
  body[data-stats="meter"] .sc-meter-wrap{display:block;} body[data-stats="meter"] .sc-chip{display:block;}
  body[data-stats="trend"] .sc-chip, body[data-stats="meter"] .sc-chip{display:inline-flex;}

  /* ---- Accesos rápidos: filas con dato / píldoras ---- */
  .quick-tile-n{display:none; font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--walnut-soft); margin-left:auto; white-space:nowrap;}
  body[data-qlayout="rows"] .quick-grid{grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:8px;}
  body[data-qlayout="rows"] .quick-tile, body[data-qlayout="pills"] .quick-tile{flex-direction:row; align-items:center; text-align:left;}
  body[data-qlayout="rows"] .quick-tile{padding:10px 12px; gap:12px; min-height:56px; border-radius:var(--radius);}
  body[data-qlayout="rows"] .quick-tile-icon{width:34px; height:34px; font-size:14px;}
  body[data-qlayout="rows"] .quick-tile-label{font-size:13px; flex:1;}
  body[data-qlayout="rows"] .quick-tile-n{display:inline;}
  body[data-qlayout="rows"] .quick-tile-badge{position:static; order:3;}
  body[data-qlayout="pills"] .quick-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px;}
  body[data-qlayout="pills"] .quick-tile{padding:9px 12px; gap:9px; min-height:44px; border-radius:var(--radius-sm); border-left:3px solid var(--tile-c, var(--gold));}
  body[data-qlayout="pills"] .quick-tile-icon{width:24px; height:24px; font-size:12px; background:transparent !important;}
  body[data-qlayout="pills"] .quick-tile-label{font-size:12.5px;}
  body[data-qlayout="pills"] .quick-tile-badge{position:static; margin-left:auto;}
  body[data-qlayout="pills"] .quick-tile:hover{background:color-mix(in srgb, var(--tile-c, var(--gold)) 10%, var(--white));}
  body[data-qlayout="pills"][data-quick="solid"] #quickAccessGrid .quick-tile .quick-tile-icon{background:transparent !important;}

  /* ---- Barra lateral: marcador del apartado activo ---- */
  .nav-item{position:relative;}
  body[data-mark="bar"] .nav-item.active{background:var(--sb-hover);}
  body[data-mark="bar"] .nav-item.active::before{content:""; position:absolute; left:2px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--gold);}
  @media(min-width:821px){ .sidebar.expanded{width:var(--sbw, 236px);} }

  /* ---- Menú inferior móvil: barra con etiquetas / píldora que se expande ---- */
  body[data-dock="bar"] .mobile-bottom-nav{left:0; right:0; bottom:0; transform:none; width:auto; max-width:none; border-radius:0; border-width:1px 0 0; padding:6px 6px calc(8px + env(safe-area-inset-bottom)); box-shadow:none; background:var(--white);}
  body[data-dock="bar"] .mobile-bottom-nav button{transform:none !important; border-radius:12px;}
  body[data-dock="bar"] .mobile-bottom-nav button.active{background:transparent;}
  body[data-dock="bar"] .mobile-bottom-nav button.active::after{display:none;}
  body[data-dock="bar"] .mobile-bottom-nav button.active::before{content:""; position:absolute; top:-7px; width:26px; height:3px; border-radius:3px; background:var(--gold);}
  body[data-dock="pill"] .mobile-bottom-nav{border-radius:99px; padding:5px;}
  body[data-dock="pill"] .mobile-bottom-nav .row{align-items:center;}
  body[data-dock="pill"] .mobile-bottom-nav button{transform:none !important; flex:0 0 auto; min-width:46px; flex-direction:row; border-radius:99px; padding:0 12px; gap:6px; min-height:46px; transition:background .2s ease, color .2s ease;}
  body[data-dock="pill"] .mobile-bottom-nav button span{display:none;}
  body[data-dock="pill"] .mobile-bottom-nav button.active{background:var(--gold); color:var(--on-accent);}
  body[data-dock="pill"] .mobile-bottom-nav button.active span{display:inline;}
  body[data-dock="pill"] .mobile-bottom-nav button.active::after{display:none;}
  body[data-dock="pill"] .mobile-bottom-nav .row{justify-content:center; gap:2px;}

  /* ---- Tipografía del sistema ---- */
  body[data-font="system"]{font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;}

  /* ---- Escáner: pasos y resumen ---- */
  .scan-steps, .scan-sum{display:none;}
  body[data-scan="steps"] .scan-steps{display:flex;}
  body[data-scan="result"] .scan-sum.on{display:flex;}
  .scan-steps{gap:10px; align-items:center; margin:0 0 14px; flex-wrap:wrap;}
  .scan-steps .st{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--walnut-soft);}
  .scan-steps .st b{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--line); color:var(--walnut-soft); font-size:12px;}
  .scan-steps .st.on{color:var(--walnut);} .scan-steps .st.on b{background:var(--gold); color:var(--on-accent);}
  .scan-steps .st.done b{background:var(--sage); color:#fff;}
  .scan-steps .sep{width:22px; height:1px; background:var(--line);}
  .scan-sum{align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; border-radius:var(--radius-sm); background:var(--sage-dim); color:var(--ok-ink); font-weight:600; font-size:13px; margin-bottom:14px;}
  .scan-sum.bad{background:var(--gold-dim); color:var(--accent-ink);}
  .scan-sum .mono{font-family:'JetBrains Mono', monospace;}
  .scan-wrap{position:relative; flex:none; overflow:hidden; border-radius:10px;}
  .scan-beam{display:none; position:absolute; left:0; right:0; top:0; height:34px; pointer-events:none; background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--gold) 28%, transparent) 70%, var(--gold)); border-bottom:2px solid var(--gold);}
  body.fx-scan .scanning .scan-beam{display:block; animation:scanBeam 1.9s linear infinite;}
  @keyframes scanBeam{from{transform:translateY(-34px);} to{transform:translateY(190px);}}
  @keyframes fxIn{from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:none;}}
  body.fx-scan .fx-stagger tbody tr{opacity:0; animation:fxIn .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--r,0) * 70ms);}

  /* ---- Delight: check animado, tachado y mensajes ---- */
  @keyframes fxHalo{0%{opacity:.7; transform:scale(.8);} 100%{opacity:0; transform:scale(1.7);}}
  @keyframes fxPop{0%{transform:scale(.6);} 60%{transform:scale(1.12);} 100%{transform:scale(1);}}
  @keyframes fxStrike{from{background-size:0 1.5px;} to{background-size:100% 1.5px;}}
  .lista-check{position:relative;}
  body.fx-check .lista-row.bought .lista-name{text-decoration:none; width:fit-content; background:linear-gradient(currentColor,currentColor) no-repeat 0 58% / 100% 1.5px;}
  body.fx-check .lista-row.fx-just.bought .lista-name{animation:fxStrike .45s cubic-bezier(.22,1,.36,1) .1s backwards;}
  body.fx-check .lista-row.fx-just .lista-check.on{animation:fxPop .4s cubic-bezier(.22,1,.36,1);}
  body.fx-check .lista-row.fx-just .lista-check.on::after{content:""; position:absolute; inset:-4px; border-radius:inherit; border:2px solid var(--sage); animation:fxHalo .55s ease-out forwards; pointer-events:none;}
  .fx-done-msg{display:none; align-items:center; gap:10px; margin:0 0 12px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--sage-dim); color:var(--ok-ink); font-weight:600; font-size:13px;}
  body.fx-check .fx-done-msg{display:flex; animation:fxIn .5s cubic-bezier(.22,1,.36,1);}

  /* Estados vacíos con ilustración */
  .empty-state .il{display:none; width:84px; height:84px; margin:0 auto 8px; fill:none; stroke:var(--walnut-soft); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  .empty-state .il .a{stroke:var(--gold);}
  body.fx-empty .empty-state .il{display:block;}
  body.fx-empty .empty-state .il .fl{animation:fxFloat 3.4s ease-in-out infinite;}
  body.fx-empty .empty-state > i{display:none;}
  @keyframes fxFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);}}

  /* Saludo contextual */
  .fx-greeting{display:none; padding:12px 16px; border-radius:var(--radius); background:var(--gold-dim); margin-bottom:18px;}
  body.fx-greet .fx-greeting{display:block;}
  .fx-greeting b{font-size:15px; display:block;}
  .fx-greeting span{font-size:13px; color:var(--walnut-soft);}

  /* Caducidad de hoy late */
  @keyframes fxPulse{0%,100%{opacity:1;} 50%{opacity:.55;}}
  body.fx-pulse .exp-late{animation:fxPulse 2.2s ease-in-out infinite;}

  /* ---- Overdrive: entrada, contadores, foco de luz, inclinación y onda ---- */
  @keyframes fxRise{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
  @keyframes fxDraw{to{stroke-dashoffset:0;}}
  @keyframes fxFade{to{opacity:1;}}
  body.fx-count .fx-play .stat-card, body.fx-count .fx-play .quick-tile{opacity:0; animation:fxRise .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--i,0) * 60ms);}
  body.fx-count .fx-play .sc-spark path.l{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:fxDraw 1.2s cubic-bezier(.22,1,.36,1) .3s forwards;}
  body.fx-count .fx-play .sc-spark path.a{opacity:0; animation:fxFade .7s ease 1s forwards;}
  body.fx-count .fx-play .sc-meter i{transform-origin:left; animation:fxMeter 1.1s cubic-bezier(.22,1,.36,1) .3s backwards;}
  @keyframes fxMeter{from{transform:scaleX(0);}}
  .stat-card::before, #quickAccessGrid .quick-tile::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; border-radius:inherit;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--gold) 13%, transparent), transparent 70%);}
  body.fx-spot .stat-card.hov::before, body.fx-spot #quickAccessGrid .quick-tile.hov::before{opacity:1;}
  body.fx-tilt .stat-card, body.fx-tilt #quickAccessGrid .quick-tile{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .12s ease, box-shadow .12s ease;}
  .fx-rip{position:absolute; border-radius:50%; background:var(--tile-c, var(--gold)); opacity:.22; transform:scale(0); animation:fxRipple .6s cubic-bezier(.22,1,.36,1) forwards; pointer-events:none;}
  @keyframes fxRipple{to{transform:scale(1); opacity:0;}}
  #quickAccessGrid .quick-tile{overflow:hidden;}

  /* Ajustes de Apariencia: interruptores y rejilla de diseño */
  .fx-list{display:grid; gap:2px;}
  .fx-opt{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; border-bottom:1px solid var(--line);}
  .fx-opt:last-child{border-bottom:0;}
  .fx-opt .t{font-size:13.5px; font-weight:600;} .fx-opt .d{font-size:12px; color:var(--walnut-soft); margin-top:1px;}
  .sw-tog{position:relative; width:42px; height:24px; flex:none; border-radius:99px; border:0; background:var(--line); cursor:pointer; transition:background .2s ease; padding:0;}
  .sw-tog::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s cubic-bezier(.22,1,.36,1);}
  .sw-tog[aria-checked="true"]{background:var(--gold);} .sw-tog[aria-checked="true"]::after{transform:translateX(18px);}
  .sw-tog:disabled{opacity:.45; cursor:not-allowed;}
  .lay-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:18px;}
  .lay-grid h4{margin:0 0 6px; font-size:12.5px; color:var(--walnut-soft); font-weight:600;}
  .lay-grid .hint{font-size:11.5px; color:var(--walnut-soft); margin-top:5px;}
  .rng{width:100%; accent-color:var(--gold);}
  .estilo-io{width:100%; min-height:84px; font-family:'JetBrains Mono', monospace; font-size:11.5px;}

  /* ============================================================
     v2.44 — Vista previa (miniaturas / en vivo), Ajuste manual siempre
     visible o plegable, y resumen de la configuración actual.
     ============================================================ */
  .ap-split{display:grid; gap:18px; align-items:start;}
  .ap-split[data-prev="thumbs"] .ap-live{display:none;}
  @media(min-width:1180px){
    .ap-split:not([data-prev="thumbs"]){grid-template-columns:minmax(0,1fr) 390px;}
    .ap-split:not([data-prev="thumbs"]) .ap-live{position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto;}
  }
  .ap-main{min-width:0;}
  .ap-live{margin-bottom:22px;}
  .ap-fold-hidden{display:none !important;}
  .ap-prefs{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px; margin:2px 0 16px; padding-bottom:16px; border-bottom:1px solid var(--line);}
  .ap-prefs h4{margin:0 0 6px; font-size:12.5px; color:var(--walnut-soft); font-weight:600;}
  .estilo-resumen{margin-top:16px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--ivory-dim); font-size:13px;}
  .estilo-resumen .rs-t{font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .estilo-resumen .rs-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .rs-chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:99px; background:var(--white); border:1px solid var(--line); color:var(--walnut);}
  .rs-chip.chg{border-color:var(--gold); color:var(--accent-ink); background:var(--gold-dim);}
  .rs-chip i.dot{width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--c, var(--gold)); border:1px solid rgba(0,0,0,.15);}
  .tag.tag-base{background:var(--ivory-dim); color:var(--walnut-soft);}

  /* Miniaturas dentro de los botones segmentados */
  .seg.has-th button{display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 6px 6px; min-height:0;}
  .th svg{width:56px; height:34px; display:block;}
  .th .f{fill:var(--white); stroke:var(--line);} .th .m{fill:var(--line);} .th .d{fill:var(--walnut);} .th .a{fill:var(--gold);}
  .th .l{fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .th .s{fill:none; stroke:var(--walnut-soft); stroke-width:1; stroke-dasharray:3 2;}
  .th .g{fill:var(--gold-dim); stroke:none;} .th .t{fill:var(--walnut); font:700 13px 'Plus Jakarta Sans', system-ui, sans-serif;}
  .seg.has-th button[aria-pressed="true"] .th .f{stroke:var(--gold);}
  .ap-split[data-prev="live"] .th{display:none;}
  .ap-split[data-prev="live"] .seg.has-th button{flex-direction:row; padding:8px 10px; min-height:38px;}

  /* Vista previa en vivo: reutiliza las clases reales (se ve afectada por los atributos del <body>) */
  .live-prev .lv-cards{grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
  .live-prev .stat-card .value{font-size:22px; margin-top:6px;}
  .live-prev .quick-grid{grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:8px; margin-bottom:12px;}
  body[data-qlayout="rows"] .live-prev .quick-grid{grid-template-columns:1fr 1fr;}
  body[data-qlayout="pills"] .live-prev .quick-grid{grid-template-columns:1fr 1fr;}
  .live-prev .quick-tile{padding:10px 6px;} .live-prev .quick-tile-icon{width:32px; height:32px; font-size:13px;}
  body[data-qlayout="rows"] .live-prev .quick-tile{padding:8px 10px;}
  body[data-quick="solid"] .lv-quick .quick-tile{background:color-mix(in srgb, var(--tile-c, var(--gold)) 68%, #000); border-color:transparent;}
  body[data-quick="solid"] .lv-quick .quick-tile .quick-tile-label{color:#fff;}
  body[data-quick="solid"] .lv-quick .quick-tile .quick-tile-icon{background:rgba(255,255,255,.22) !important; color:#fff !important;}
  body[data-quick="plain"] .lv-quick .quick-tile{background:transparent; border-color:transparent; box-shadow:none;}
  .lv-row{display:grid; grid-template-columns:130px 1fr; gap:10px; margin-bottom:12px;}
  .lv-sb{background:var(--sidebar-bg); border:1px solid var(--sb-line); border-radius:var(--radius); padding:8px 6px; display:grid; gap:2px; align-content:start;}
  .lv-sb .nav-item{padding:7px 9px; font-size:12px; border-radius:8px;}
  .lv-col{display:grid; gap:8px; align-content:start;}
  .lv-label{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--walnut-soft); font-weight:700; margin:12px 0 6px; display:flex; justify-content:space-between;}
  .lv-label em{font-style:normal; text-transform:none; letter-spacing:0; font-weight:600; color:var(--bad-ink); display:none;}
  body:not(.fx-count) .lv-need-count em, body:not(.fx-spot) .lv-need-spot em, body:not(.fx-ripple) .lv-need-ripple em, body:not(.fx-check) .lv-need-check em,
  body:not(.fx-empty) .lv-need-empty em, body:not(.fx-scan) .lv-need-scan em, body:not(.fx-greet) .lv-need-greet em, body:not(.fx-pulse) .lv-need-pulse em{display:inline;}
  .live-prev .lista-row{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px;}
  .live-prev .lista-check{cursor:pointer;}
  .lv-zone{display:none; border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:10px; text-align:center; font-size:12px; color:var(--walnut-soft);}
  body[data-scan="zone"] .lv-zone{display:block;}
  .lv-scan{display:flex; gap:10px; align-items:center;}
  .lv-scan .scan-wrap{width:44px; height:56px; background:var(--ivory-dim); border:1px solid var(--line); flex:none;}
  .lv-scan .scan-wrap::before{content:""; position:absolute; inset:8px 6px; background:repeating-linear-gradient(var(--line) 0 2px, transparent 2px 6px);}
  .live-prev .scan-steps{margin:0 0 6px;} .live-prev .scan-sum{margin:0;}
  .live-prev .empty-state{padding:14px 10px;} .live-prev .empty-state .il{width:56px; height:56px;}
  .lv-phone{position:relative; height:84px; border:1px solid var(--line); border-radius:18px; background:var(--ivory); overflow:hidden;}
  .mock-dock{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:4px; padding:5px 8px; background:var(--white); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);}
  .mock-dock span{display:flex; align-items:center; gap:5px; padding:0 9px; height:30px; border-radius:15px; color:var(--walnut-soft); font-size:11px; font-weight:600;}
  .mock-dock span b{font-weight:600; display:none;}
  .mock-dock span.on{color:var(--accent-ink); background:var(--gold-dim);}
  body[data-dock="bar"] .mock-dock{left:0; right:0; bottom:0; transform:none; border-radius:0; border-width:1px 0 0; box-shadow:none; justify-content:space-around; padding:6px 4px;}
  body[data-dock="bar"] .mock-dock span{flex-direction:column; height:auto; gap:1px; background:none; padding:0 6px;}
  body[data-dock="bar"] .mock-dock span b{display:block; font-size:9px;}
  body[data-dock="pill"] .mock-dock{border-radius:99px;}
  body[data-dock="pill"] .mock-dock span.on{background:var(--gold); color:var(--on-accent);}
  body[data-dock="pill"] .mock-dock span.on b{display:inline;}
  .live-prev .fx-greeting{margin-bottom:0;}
  .live-prev .exp-pill-mock{display:inline-block; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:600;}
  .lv-quick .quick-tile{overflow:hidden; position:relative;}
  .lv-quick .quick-tile::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; border-radius:inherit; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--gold) 13%, transparent), transparent 70%);}
  body.fx-spot .lv-quick .quick-tile.hov::before{opacity:1;}
  body.fx-tilt .lv-quick .quick-tile{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .12s ease;}
  body.fx-count .fx-play .lv-cards .stat-card{opacity:0; animation:fxRise .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--i,0) * 60ms);}

  /* ============================================================
     v2.45 — Pantalla de acceso: 4 fondos a elegir (Luz suave, Ventana,
     Mosaico, Luz de nevera) + modo claro/oscuro desde el propio login.
     Se pintan con los mismos tokens que la app (--ivory, --gold…).
     ============================================================ */
  .auth-screen{position:relative; overflow:hidden; min-height:100vh; min-height:100dvh; isolation:isolate;
    --lg-sky:#DCE6F5; --lg-wall:var(--ivory-dim); --lg-frame:#FFFFFF; --lg-stroke:#9AA6BF; --lg-sun:#F6C85F;}
  body.dark-mode .auth-screen{--lg-sky:#0B1020; --lg-wall:#111624; --lg-frame:#1D2438; --lg-stroke:#3A4668; --lg-sun:#E9EEFF;}
  .lg-wrap{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
  .auth-card{position:relative; z-index:2; max-width:392px; padding:30px 28px; border-radius:var(--radius-lg);}
  .auth-card .brand{padding-bottom:20px !important}
  .auth-card input{height:46px; border-radius:10px; font-size:14.5px}
  .auth-card label{font-size:12px; font-weight:600}
  .auth-card .btn-primary{height:48px; font-size:14.5px; font-weight:700; border-radius:11px}
  .auth-card input:focus{outline:0; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%,transparent)}
  .auth-theme{position:absolute; top:16px; right:16px; z-index:5; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--white); color:var(--walnut); cursor:pointer; display:grid; place-items:center}
  .auth-theme svg{width:19px; height:19px}
  .auth-theme:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
  .auth-theme .i-sun{display:none} body.dark-mode .auth-theme .i-sun{display:block} body.dark-mode .auth-theme .i-moon{display:none}

  /* ---- Luz suave ---- */
  .lg-luz .b{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:lgdrift 18s ease-in-out infinite alternate}
  .lg-luz .b1{width:420px; height:420px; background:#8E98F0; left:-80px; top:-100px}
  .lg-luz .b2{width:360px; height:360px; background:#6CC4D6; right:-60px; bottom:-80px; animation-delay:-6s}
  .lg-luz .b3{width:260px; height:260px; background:#B79BEA; right:22%; top:8%; animation-delay:-11s}
  body.dark-mode .lg-luz .b{opacity:.26}
  .lg-luz .noise{position:absolute; inset:0; opacity:.06; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
  @keyframes lgdrift{to{transform:translate(50px,40px) scale(1.12)}}
  .auth-screen[data-lg="luz"] .auth-card{background:color-mix(in srgb,var(--white) 82%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 30px 80px -30px rgba(20,25,60,.4)}

  /* ---- Ventana ---- */
  .lg-ventana{position:absolute; inset:0; background:var(--lg-wall)}
  .lg-ventana .light{position:absolute; right:6%; top:-10%; width:46%; height:130%; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--lg-sun) 22%,transparent) 40%,transparent 80%); transform:skewX(-14deg); filter:blur(10px)}
  .lg-ventana svg{position:absolute; right:12%; top:50%; transform:translateY(-50%); width:min(26vw,340px); height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))}
  .lg-ventana .skyr{fill:var(--lg-sky)} .lg-ventana .frame{fill:none; stroke:var(--lg-frame); stroke-width:12} .lg-ventana .frame2{fill:none; stroke:var(--lg-stroke); stroke-width:1.5} .lg-ventana .mull{stroke:var(--lg-frame); stroke-width:7}
  .lg-ventana .sm{fill:var(--lg-sun)} .lg-ventana .cloud{fill:#fff; opacity:.9} body.dark-mode .lg-ventana .cloud{display:none}
  .lg-ventana .star{fill:#fff; opacity:0} body.dark-mode .lg-ventana .star{opacity:.9; animation:lgtw 3.4s infinite} .lg-ventana .star:nth-child(2n){animation-delay:-1.2s}
  .lg-ventana .plant{fill:var(--lg-stroke); opacity:.55} .lg-ventana .sill{fill:var(--lg-frame); stroke:var(--lg-stroke)}
  @keyframes lgtw{50%{opacity:.25}}
  .auth-screen[data-lg="ventana"]{justify-content:flex-start; padding-left:max(20px,9vw)}

  /* ---- Mosaico ---- */
  .lg-mosaico .grid{position:absolute; inset:-10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); grid-auto-rows:110px; gap:12px; padding:12px;
    -webkit-mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#000 0,rgba(0,0,0,.3) 100%); mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#000 0,rgba(0,0,0,.3) 100%)}
  .lg-mosaico .t{border:1px solid var(--line); border-radius:14px; background:var(--white); display:flex; flex-direction:column; justify-content:space-between; padding:14px; font-size:12px; font-weight:600; color:var(--walnut-soft)}
  .lg-mosaico .t svg{width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
  .auth-screen[data-lg="mosaico"] .auth-card{box-shadow:0 30px 70px -30px rgba(10,15,30,.45)}

  /* ---- Luz de nevera ---- */
  .lg-nevera{position:absolute; inset:0; background:#E4ECF2}
  body.dark-mode .lg-nevera{background:#05080D}
  .lg-nevera .cone{position:absolute; top:0; left:50%; width:130%; height:100%; transform:translateX(-50%); background:linear-gradient(#EAF6FF,rgba(214,238,255,.5) 28%,transparent 78%); clip-path:polygon(36% 0,64% 0,100% 100%,0 100%); opacity:.75; animation:lgfridge 11s infinite}
  body.dark-mode .lg-nevera .cone{background:linear-gradient(#D8EEFF,rgba(150,205,240,.34) 30%,transparent 80%); opacity:.9}
  .lg-nevera .led{position:absolute; top:0; left:50%; width:34%; height:7px; transform:translateX(-50%); border-radius:0 0 8px 8px; background:#F4FBFF; box-shadow:0 0 40px 10px rgba(190,228,255,.9),0 0 120px 40px rgba(150,205,240,.55); animation:lgfridge 11s infinite}
  .lg-nevera svg{position:absolute; inset:0; width:100%; height:100%; animation:lgfridge 11s infinite}
  .lg-nevera .sh{stroke:rgba(255,255,255,.9); stroke-width:2} body:not(.dark-mode) .lg-nevera .sh{stroke:rgba(120,150,175,.55)}
  .lg-nevera .it{fill:rgba(150,200,235,.16); stroke:rgba(190,225,250,.35); stroke-width:1.2} body:not(.dark-mode) .lg-nevera .it{fill:rgba(90,130,165,.1); stroke:rgba(90,130,165,.3)}
  .lg-nevera .vig{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%,transparent 35%,rgba(2,4,8,.62) 100%)} body:not(.dark-mode) .lg-nevera .vig{background:radial-gradient(ellipse at 50% 30%,transparent 50%,rgba(120,150,175,.28) 100%)}
  /* Parpadeo irregular de fluorescente + “ping” de encendido al cargar */
  @keyframes lgfridge{0%,17%,24%,58%,66%,100%{opacity:1} 18%{opacity:.35} 19%{opacity:.95} 20.5%{opacity:.2} 22%{opacity:.9} 60%{opacity:.55} 61.5%{opacity:1} 63%{opacity:.7}}
  .auth-screen[data-lg="nevera"] .auth-card{box-shadow:0 0 0 1px rgba(190,225,250,.25),0 30px 80px -30px rgba(0,0,0,.6)}

  /* ---- Selector en Sistema > Apariencia ---- */
  .login-opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
  .login-opt{position:relative; text-align:left; border:1.5px solid var(--line); border-radius:var(--radius-lg); background:var(--white); padding:8px; cursor:pointer; color:var(--walnut); font:inherit}
  .login-opt[aria-checked="true"]{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
  .login-opt:disabled{opacity:.6; cursor:not-allowed}
  .login-opt:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
  .login-opt b{display:block; font-size:13.5px; margin:8px 4px 2px}
  .login-opt span{display:block; font-size:12px; color:var(--walnut-soft); margin:0 4px 4px}
  .lp{position:relative; height:132px; border-radius:calc(var(--radius-lg) - 4px); overflow:hidden; background:var(--ivory); border:1px solid var(--line)}
  .lp .lp-in{position:absolute; left:0; top:0; width:1000px; height:620px; transform:scale(.3); transform-origin:0 0; pointer-events:none}
  .lp .lp-in{--lg-sky:#DCE6F5; --lg-wall:var(--ivory-dim); --lg-frame:#FFFFFF; --lg-stroke:#9AA6BF; --lg-sun:#F6C85F}
  body.dark-mode .lp .lp-in{--lg-sky:#0B1020; --lg-wall:#111624; --lg-frame:#1D2438; --lg-stroke:#3A4668; --lg-sun:#E9EEFF}
  .lp .lp-card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:330px; height:360px; border-radius:18px; background:var(--white); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:14px; z-index:2}
  .lp[data-lg="ventana"] .lp-card{left:34%}
  .lp .lp-card i{display:block; height:34px; border-radius:9px; background:var(--ivory-dim)} .lp .lp-card i.h{height:16px; width:60%; background:var(--line)} .lp .lp-card i.g{background:var(--gold); margin-top:auto}
  .lp .lg-ventana svg{width:300px}
  @media (max-width:760px){
    .auth-screen{padding:16px; align-items:flex-start; padding-top:max(16px,5vh)}
    .auth-card{padding:22px 20px}
    .auth-screen[data-lg="ventana"]{padding-left:16px; padding-top:150px}
    .lg-ventana svg{right:50%; transform:translate(50%,0); top:14px; width:96px}
    .lg-ventana .light{display:none}
    .lg-mosaico .grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); grid-auto-rows:92px}
  }
  @media (prefers-reduced-motion:reduce){
    .lg-luz .b,.lg-nevera .cone,.lg-nevera .led,.lg-nevera svg,.lg-ventana .star{animation:none !important}
  }
  .lp .lg-ventana svg{right:12%; top:50%; transform:translateY(-50%)}
  .lp .lg-ventana .light{display:block}
  .lp .lg-mosaico .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); grid-auto-rows:110px}
  .lp{height:140px}
  .lp .lp-in{width:830px; height:467px}
  .lp .lp-card{height:330px; width:300px}
  .lp[data-lg="ventana"] .lp-card{left:30%}

  /* ===== Escáner de tickets: motor OCR local (ajustes, progreso, revisión, historial) ===== */
  .tk-ajustes{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 18px; margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--ivory-dim);}
  .tk-field{margin:0; min-width:200px; flex:1 1 200px;}
  .tk-field span{display:block; margin-bottom:4px;}
  .tk-check{display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; cursor:pointer; flex:1 1 240px;}
  .tk-check input{width:auto;}
  .tk-cat{flex:1 1 100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--walnut-soft);}
  .tk-wrap{margin-top:16px; display:flex; gap:16px; align-items:flex-start;}
  .tk-prevcol{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
  .tk-prev{width:150px; display:block; border:1px solid var(--line); object-fit:cover; border-radius:6px; background:var(--ivory-dim); min-height:60px;}
  .tk-rot{display:flex; gap:6px;}
  .tk-rot .btn{padding:6px 10px;}
  .tk-state{flex:1; min-width:0;}
  .tk-prog-top{display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; margin-bottom:6px;}
  .tk-bar{height:8px; border-radius:99px; background:var(--ivory-dim); overflow:hidden;}
  .tk-bar i{display:block; height:100%; width:0; background:var(--gold); border-radius:99px; transition:width .25s ease;}
  .tk-bar i.ind{width:35%; animation:tkInd 1.1s ease-in-out infinite;}
  @keyframes tkInd{0%{margin-left:-35%;}100%{margin-left:100%;}}
  .tk-valid{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 10px;}
  .tk-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; font-size:12px; font-weight:700;}
  .tk-badge.ok{background:var(--sage-dim); color:var(--ok-ink);}
  .tk-badge.mal{background:var(--brick-dim); color:var(--bad-ink);}
  .tk-ok{color:var(--ok-ink); font-weight:600;}
  .tk-info{display:flex; align-items:flex-start; gap:9px; background:var(--info-dim); color:var(--info); border-radius:10px; padding:9px 13px; margin-bottom:14px; font-size:12.5px;}
  .tk-det{margin:2px 0 12px;}
  .tk-det summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--walnut-soft); padding:6px 0;}
  .tk-pre{max-height:260px; overflow:auto; white-space:pre-wrap; font-size:11.5px; background:var(--ivory-dim); padding:10px; border-radius:8px; margin:8px 0 0;}
  .tk-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .tk-table{min-width:760px;}
  .tk-table td{padding:7px 6px;}
  .tk-in{padding:7px 9px; font-size:13px;}
  .tk-n{width:76px; text-align:right;}
  .tk-desc{min-width:190px;}
  .tk-table tr.tk-corr .tk-desc{border-color:var(--sage); background:var(--sage-dim);}
  .tk-table tr.tk-dudosa .tk-in.tk-n{border-color:var(--gold); background:var(--gold-dim);}
  .tk-table tr.tk-off{opacity:.5;}
  .tk-table td.num, .tk-table th.num{text-align:right; font-variant-numeric:tabular-nums;}
  .tk-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 16px; margin-bottom:14px;}
  .tk-meta div{display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--walnut-soft);}
  .tk-meta strong{color:var(--walnut); font-size:13.5px;}
  .tk-hist .txn-desc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  @media (max-width:640px){
    .tk-wrap{flex-direction:column;}
    .tk-prev{width:120px;}
    .tk-field{flex:1 1 100%;}
  }
  @media (prefers-reduced-motion:reduce){ .tk-bar i.ind{animation:none; width:100%; opacity:.5;} .tk-bar i{transition:none;} }
  .tk-table .tk-ud{display:block; font-size:10.5px; color:var(--muted); margin-top:2px; text-align:right;}