/* Colores del logo Rayvan: rojo, azul marino, celeste */
:root{
  --red:#e1251b; --navy:#1d2a7a; --sky:#4fb6e6; --sky-soft:#e8f5fc;
  --bg:#f2f8fd; --panel:#ffffff; --ink:#16205c; --muted:#5f6b94; --line:#cfe3f2;
  --cash:#1f9d55; --mp:#009ee3; --transf:#1d2a7a; --danger:#e1251b;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:system-ui,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
input,select{font:inherit;color:inherit}

/* Login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-box{background:var(--panel);border-radius:22px;padding:28px;width:min(420px,100%);display:flex;flex-direction:column;gap:14px;border:2px solid var(--line)}
.login-box img{width:220px;max-width:100%;align-self:center}
.login-box h1{margin:0;text-align:center;color:var(--navy);font-size:24px}
.login-box label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--navy)}
.login-box input{padding:14px;border-radius:12px;border:2px solid var(--line);font-size:17px}
.error{color:var(--red);margin:0;min-height:1.2em;text-align:center;font-weight:600}

/* Cabecera */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:8px 16px;background:#fff;color:var(--navy);border-bottom:5px solid var(--red);box-shadow:0 3px 0 var(--sky);position:sticky;top:0;z-index:5}
.top img{height:58px;display:block;justify-self:center}
.top-izq{display:flex;align-items:center;justify-self:start}
.top-der{display:flex;align-items:center;gap:6px;justify-self:end}
.chip{background:#fff;color:var(--navy);border:2px solid var(--navy);padding:9px 16px;border-radius:12px;font-weight:800;font-size:17px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.chip small{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.chip .car{font-size:13px;color:var(--muted)}
.chip.vacio{background:var(--navy);color:#fff}
.chip.vacio .car{color:#cfd6f5}
.icon-btn{font-size:26px;font-weight:900;padding:6px 12px;border-radius:12px;color:var(--navy)}
.clock{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}
.sync{font-size:14px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--sky-soft);white-space:nowrap}
.sync.pend{background:#fff4d6;color:#7a5600}
.sync.off{background:#fde4e2;color:var(--red)}
@media (max-width:600px){
  .top{grid-template-columns:1fr 1fr;grid-template-areas:"logo logo" "izq der";padding:8px 10px;gap:6px}
  .top img{grid-area:logo;height:44px}
  .top-izq{grid-area:izq} .top-der{grid-area:der}
  .chip{padding:8px 10px;font-size:14px} .sync{font-size:12px;padding:4px 8px}
}

.tabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);overflow-x:auto}
.tabs button{padding:12px 18px;border-radius:12px;font-weight:700;font-size:17px;color:var(--muted);white-space:nowrap}
.tabs button.on{background:var(--navy);color:#fff}

.aviso{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff4d6;color:#6b4e00;padding:12px 16px;font-weight:700;border-bottom:2px solid #f3d27a}
.aviso span{flex:1;min-width:200px}

/* Vender */
.view{padding:16px}
.vender{display:grid;grid-template-columns:1fr 380px;gap:16px}
@media (max-width:900px){.vender{grid-template-columns:1fr}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px;align-content:start}
.prod{background:var(--panel);border:2px solid var(--line);border-top:6px solid var(--sky);border-radius:var(--radius);padding:22px 12px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:transform .06s}
.prod:active{transform:scale(.96);background:var(--sky-soft);border-color:var(--sky)}
.prod .n{font-size:26px;font-weight:800;text-align:center;line-height:1.1;color:var(--navy)}
.prod .p{font-size:20px;color:var(--red);font-weight:800}
.prod.otro{border-style:dashed}
.ticket{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:96px}
.ticket h2{margin:0;font-size:20px;color:var(--navy)}
.items{display:flex;flex-direction:column;gap:8px;min-height:60px}
.empty{color:var(--muted);text-align:center;padding:18px 0;font-size:16px}
.it{display:flex;align-items:center;gap:8px;font-size:18px}
.it .nm{flex:1;font-weight:600}
.qb{width:42px;height:42px;border-radius:10px;background:var(--bg);font-size:22px;font-weight:800}
.q{min-width:24px;text-align:center;font-weight:800}
.it .st{min-width:90px;text-align:right;font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed var(--line);padding-top:12px}
.total span:first-child{font-size:18px;color:var(--muted);font-weight:700}
.total span:last-child{font-size:38px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}
.pagos{display:grid;gap:10px}
.pay{padding:20px;border-radius:14px;color:#fff;font-size:21px;font-weight:800}
.pay:disabled{opacity:.35}
.pay.cash{background:var(--cash)} .pay.mp{background:var(--mp)} .pay.tr{background:var(--transf)}
.link{font-weight:700;padding:8px;font-size:16px}
.link.danger{color:var(--danger)}

/* Pantallas de datos */
.wrap{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.wrap h2{margin:10px 0 0;color:var(--navy)}
.wrap h3{margin:8px 0 0;color:var(--navy);font-size:19px}
.hint{color:var(--muted);margin:0}
.apagar{vertical-align:middle}
.tacho{margin-left:8px;vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:#9aa3c2;border:2px solid transparent}
.tacho:hover{color:var(--red);background:#fde4e2;border-color:#f6c3bf}
.vacio-turno{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:36px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.vacio-turno p{margin:0;font-size:19px;font-weight:700;color:var(--muted)}
.small{font-size:15px;color:var(--muted);font-weight:600;display:flex;gap:8px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:16px}
.card .l{color:var(--muted);font-weight:700;font-size:15px}
.card .v{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:4px;color:var(--navy)}
.card.neg .v{color:var(--red)} .card.pos .v{color:var(--cash)}
table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:var(--radius);overflow:hidden;border:2px solid var(--line)}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:16px;vertical-align:middle}
th{background:var(--sky-soft);font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.num{text-align:right!important;font-variant-numeric:tabular-nums}
td.num{font-weight:700}
tr.anulada td{text-decoration:line-through;color:#9aa3c2}
tr.click{cursor:pointer} tr.click:hover td{background:var(--sky-soft)}
.tag{padding:4px 10px;border-radius:999px;color:#fff;font-size:13px;font-weight:700;white-space:nowrap}
.tag.Efectivo{background:var(--cash)} .tag.MP{background:var(--mp)} .tag.Transferencia{background:var(--transf)}
.tag.si{background:var(--cash)} .tag.no{background:#c2c9de} .tag.abierto{background:var(--sky)}
/* Grilla de 6 columnas compartida (Ventas del día): todas las columnas caen una debajo de la otra */
table.g6{table-layout:fixed}
table.g6 col:first-child{width:18%}
table.g6 th,table.g6 td{text-align:left;overflow:hidden;text-overflow:ellipsis}
table.g6 th.num,table.g6 td.num{text-align:right!important}
table.g6 td{white-space:normal}
/* Mensaje de tabla vacía: centrado, con aire, gris suave (en todas las tablas) */
table td.empty{text-align:center!important;padding:22px 16px!important;color:var(--muted);font-size:15px;font-style:italic}
@media (max-width:700px){ table{display:block;overflow-x:auto;white-space:nowrap} table.g6{min-width:720px} }
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.inp{padding:10px 12px;border-radius:10px;border:2px solid var(--line);background:#fff;font-size:16px}
.inp.wide{width:100%;margin-top:10px}
/* Selector de fecha/mes con flechas */
.fnav{display:flex;align-items:stretch;border:2px solid var(--navy);border-radius:12px;overflow:hidden;background:#fff}
.fnav .fn{padding:0 14px;font-size:22px;font-weight:800;color:var(--navy);background:#fff}
.fnav .fn:hover{background:var(--sky-soft)}
.fnav .fn.hoy{font-size:14px;border-left:2px solid var(--line);color:var(--muted)}
.fnav .inp.fecha{border:0;border-radius:0;border-left:2px solid var(--line);border-right:2px solid var(--line)}
.inp.fecha{font-weight:800;color:var(--navy);font-size:16px;padding:10px 12px;min-width:150px;cursor:pointer}
.inp.fecha::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75}
.inp.fecha:focus{outline:none;background:var(--sky-soft)}

.btn{padding:12px 18px;border-radius:12px;background:var(--panel);border:2px solid var(--line);font-weight:800;font-size:16px;color:var(--navy)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.big{padding:18px 24px;font-size:18px}
.btn.mini{padding:6px 12px;font-size:14px}
.btn:disabled{opacity:.5}

/* Modales */
.ov{position:fixed;inset:0;background:rgba(22,32,92,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal{background:var(--panel);border-radius:22px;padding:24px;width:min(560px,100%);max-height:92vh;overflow:auto}
.modal h2{margin:0 0 6px;font-size:26px;color:var(--navy)}
.modal p{margin:0 0 16px;color:var(--muted);font-size:17px}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.person{padding:26px 10px;border-radius:16px;background:var(--bg);border:2px solid var(--line);font-size:24px;font-weight:800;color:var(--navy);display:flex;flex-direction:column;gap:4px;align-items:center}
.person small{font-size:13px;color:var(--cash);font-weight:700}
.person:active{background:var(--sky-soft);border-color:var(--sky)}
.qlabel{font-weight:800;color:var(--navy);margin:14px 0 8px;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:12px 16px;border-radius:999px;background:var(--bg);border:2px solid var(--line);font-weight:700;font-size:17px;color:var(--navy)}
.chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.pad button{padding:18px;border-radius:14px;background:var(--bg);font-size:26px;font-weight:800}
.disp{font-size:44px;font-weight:900;text-align:right;padding:12px 16px;background:var(--bg);border-radius:14px;font-variant-numeric:tabular-nums}
.mrow{display:flex;gap:10px;margin-top:16px}
.mrow .btn{flex:1;padding:16px}
.mcol{display:flex;flex-direction:column;gap:10px}
.resumen div{display:flex;justify-content:space-between;gap:12px;font-size:19px;padding:8px 0;border-bottom:1px solid var(--line)}
.resumen div b{font-variant-numeric:tabular-nums;text-align:right}
#fmBody label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--navy);margin-bottom:12px}
#fmBody .chk{flex-direction:row;align-items:center;gap:10px}
#fmBody .chk input{width:22px;height:22px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:16px 26px;border-radius:14px;font-size:18px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;max-width:90vw;text-align:center}
.toast.show{opacity:1}