:root{
  --bg:#0b1020; --bg2:#121935; --card:#151d3d; --card2:#1a2348; --text:#eef1fb; --muted:#a8b1d1; --dim:#6f7aa3;
  --accent:#22c55e; --accent-d:#16a34a; --accent2:#3b82f6; --warn:#f59e0b; --bad:#ef4444;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;font-size:15px;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--accent2)}
.hidden{display:none!important}

/* ---------- Marca ---------- */
.marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.marca .hex svg{width:20px;height:20px}
.marca .hex{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:rgba(34,197,94,.12);color:var(--accent)}
.marca b{color:var(--accent);font-weight:700}

/* ---------- Login ---------- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(34,197,94,.10),transparent 60%),var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 28px}
.login-card .marca{justify-content:center;margin-bottom:4px}
.login-card p.sub{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:24px}

/* ---------- Estructura ---------- */
#app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
aside{background:var(--bg2);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow:auto}
aside .marca{padding:0 8px}
.selector-rest select{width:100%}
nav{display:flex;flex-direction:column;gap:2px}
nav .grupo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);padding:14px 10px 6px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:.94rem}
nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
nav a.activo{background:rgba(34,197,94,.12);color:var(--accent)}
nav a svg{width:18px;height:18px;flex:none}
nav a .pronto{margin-left:auto;font-size:.68rem;padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--dim)}
.usuario-box{margin-top:auto;padding:12px 10px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.usuario-box b{display:block;color:var(--text)}
.usuario-box .acc{display:flex;gap:8px;margin-top:10px}

main{padding:28px 32px 80px;max-width:1150px;width:100%}
.topbar{display:none}
.cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.cab h1{font-size:1.45rem;font-weight:700;letter-spacing:-.02em}
.cab p{color:var(--muted);font-size:.92rem;margin-top:2px}
.cab .acciones{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Componentes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card + .card{margin-top:16px}
.card h2{font-size:1.02rem;font-weight:600;margin-bottom:4px}
.card .ayuda{color:var(--muted);font-size:.86rem;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2);background:var(--card2);padding:9px 15px;border-radius:10px;cursor:pointer;font-size:.92rem;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{border-color:rgba(255,255,255,.25)}
.btn.primario{background:var(--accent);border-color:var(--accent);color:#052e14;font-weight:600}
.btn.primario:hover{background:#2fd56a}
.btn.peligro{color:#fca5a5;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.btn.chico{padding:6px 11px;font-size:.84rem;border-radius:8px}
.btn.icono{padding:7px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:default}
.btn svg{width:17px;height:17px}

label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],input[type=date],input[type=tel],select,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:80px}
input[type=time]::-webkit-calendar-picker-indicator,input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8)}
.campo{margin-bottom:14px}
.campo small{display:block;color:var(--dim);font-size:.8rem;margin-top:5px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.precio-input{position:relative}
.precio-input span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.precio-input input{padding-left:26px}

/* Interruptor */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:.92rem;color:var(--text)}
.switch input{display:none}
.switch i{width:40px;height:23px;border-radius:20px;background:#2a3460;position:relative;transition:background .2s;flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::after{transform:translateX(17px)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;padding:2px 9px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--muted);font-weight:500}
.chip.verde{background:rgba(34,197,94,.13);color:#86efac}
.chip.rojo{background:rgba(239,68,68,.13);color:#fca5a5}
.chip.azul{background:rgba(59,130,246,.15);color:#93c5fd}
.chip.amarillo{background:rgba(245,158,11,.14);color:#fcd34d}

.error{color:#fca5a5;font-size:.88rem;margin-top:10px;min-height:1.2em}
.vacio{text-align:center;padding:36px 16px;color:var(--muted)}
.vacio svg{width:40px;height:40px;color:var(--dim);margin-bottom:8px}

/* ---------- Menú ---------- */
.filtros{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.filtros input{max-width:280px}
.cat-bloque{margin-bottom:26px}
.cat-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cat-cab h3{font-size:1.02rem;font-weight:600}
.cat-cab .n{color:var(--dim);font-size:.85rem}
.cat-cab .acc{margin-left:auto;display:flex;gap:6px}
.grid-prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.prod{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.prod:hover{border-color:var(--line2)}
.prod.agotado .foto{filter:grayscale(1) brightness(.6)}
.prod .foto{aspect-ratio:16/10;background:var(--bg2) center/cover no-repeat;display:grid;place-items:center;color:var(--dim);position:relative}
.prod .foto svg{width:34px;height:34px}
.prod .foto .chip{position:absolute;top:10px;left:10px;backdrop-filter:blur(4px);background:rgba(11,16,32,.72)}
.prod .cuerpo{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.prod .nom{font-weight:600;line-height:1.3}
.prod .desc{color:var(--muted);font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .pie{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px}
.prod .precio{font-weight:700;font-size:1.05rem}
.prod .precio s{color:var(--dim);font-weight:400;font-size:.85rem;margin-left:6px}
.prod .pie .switch{margin-left:auto;font-size:.8rem;color:var(--muted)}

/* ---------- Listas / tablas ---------- */
.lista{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .info{flex:1;min-width:0}
.item .t{font-weight:600}
.item .s{color:var(--muted);font-size:.85rem}
.item .acc{display:flex;gap:6px;align-items:center}

/* Horarios */
.dia{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.dia:last-child{border-bottom:0}
.dia .nom{font-weight:600;padding-top:9px}
.tramos{display:flex;flex-direction:column;gap:8px}
.tramo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tramo input{width:130px}
.tramo .a{color:var(--dim)}

/* Tipo de envío */
.opciones-tipo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px}
.opcion-tipo{border:1px solid var(--line2);border-radius:12px;padding:14px;cursor:pointer;background:var(--bg2);transition:border-color .15s,background .15s}
.opcion-tipo:hover{border-color:rgba(255,255,255,.25)}
.opcion-tipo.sel{border-color:var(--accent);background:rgba(34,197,94,.08)}
.opcion-tipo b{display:block;margin-bottom:2px}
.opcion-tipo span{font-size:.82rem;color:var(--muted)}
.ejemplo{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:10px;padding:12px 14px;font-size:.88rem;color:#bfdbfe;margin-top:6px}

/* Pagos */
.pagos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.pago{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.pago.on{border-color:rgba(34,197,94,.35)}
.pago .cab-p{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pago .cab-p b{font-size:1rem}
.pago .cab-p svg{width:22px;height:22px;color:var(--accent)}
.pago .cab-p .switch{margin-left:auto}

/* Subir foto */
.subir{display:flex;gap:14px;align-items:center}
.subir .prev{width:110px;height:80px;border-radius:10px;background:var(--bg2) center/cover no-repeat;border:1px dashed var(--line2);display:grid;place-items:center;color:var(--dim);flex:none;overflow:hidden}
.subir .prev.grande{width:160px;height:200px}
.subir .prev svg{width:26px;height:26px}
.subir .btns{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* Opciones de producto (chips seleccionables) */
.selec{display:flex;flex-wrap:wrap;gap:8px}
.selec label{margin:0;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px;border:1px solid var(--line2);cursor:pointer;color:var(--text);font-size:.86rem;background:var(--bg2)}
.selec label:has(input:checked){border-color:var(--accent);background:rgba(34,197,94,.1);color:#bbf7d0}
.selec input{accent-color:var(--accent)}
.opc-fila{display:grid;grid-template-columns:1fr 130px auto auto;gap:8px;align-items:center;margin-bottom:8px}
.dias-sel{display:flex;gap:6px;flex-wrap:wrap}
.dias-sel label{margin:0;width:44px;text-align:center;padding:7px 0;border-radius:9px;border:1px solid var(--line2);cursor:pointer;font-size:.84rem;color:var(--text);background:var(--bg2)}
.dias-sel label:has(input:checked){border-color:var(--accent);background:rgba(34,197,94,.12);color:#bbf7d0}
.dias-sel input{display:none}

/* ---------- Modal ---------- */
.fondo{position:fixed;inset:0;background:rgba(3,6,16,.72);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto;backdrop-filter:blur(3px)}
.modal{width:100%;max-width:620px;background:var(--card);border:1px solid var(--line2);border-radius:16px;animation:entra .18s ease-out}
.modal .mcab{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal .mcab h3{font-size:1.1rem}
.modal .mcuerpo{padding:20px 22px}
.modal .mpie{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line)}
.modal .mpie .izq{margin-right:auto}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Avisos ---------- */
#avisos{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:100}
.aviso{background:var(--card2);border:1px solid var(--line2);border-left:3px solid var(--accent);padding:11px 16px;border-radius:10px;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:entra .2s ease-out;max-width:360px}
.aviso.mal{border-left-color:var(--bad)}

/* ---------- Celular / tablet ---------- */
@media (max-width: 900px){
  #app{grid-template-columns:1fr}
  aside{position:fixed;inset:0 auto 0 0;width:270px;z-index:40;transform:translateX(-100%);transition:transform .2s;box-shadow:20px 0 40px rgba(0,0,0,.4)}
  aside.abierto{transform:none}
  .topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:30}
  main{padding:20px 16px 80px}
  .velo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
  .dia{grid-template-columns:1fr}
  .dia .nom{padding-top:0}
  .opc-fila{grid-template-columns:1fr 100px auto}
  .opc-fila .switch span{display:none}
  .fondo{padding:0}
  .modal{border-radius:0;min-height:100%;max-width:none}
}