@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#15181A;
  --paper-raised:#1D2225;
  --ink:#EDE8DD;
  --ink-soft:#B0AA9C;
  --ink-faint:#726C60;
  --line:#2B3134;
  --line-strong:#3C4448;
  --accent:#E0A458;
  --accent-dark:#C98A3C;
  --kraft:#242A2D;
  --ok:#6FBF8B;
  --warn:#E0A458;
  --radius:10px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.25);
  --shadow-md:0 8px 24px rgba(0,0,0,0.28);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  background-image:radial-gradient(circle at 15% 0%, rgba(224,164,88,0.05), transparent 45%);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  padding:32px 20px 80px;
  -webkit-font-smoothing:antialiased;
}
*{transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .1s ease;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-pill);}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);}

.wrap{max-width:1180px;margin:0 auto;}

.masthead{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:18px;margin-bottom:24px;flex-wrap:wrap;gap:10px;
}
.masthead h1{font-family:'Lora',serif;font-weight:700;font-size:30px;margin:0;letter-spacing:-0.01em;}
.masthead .folio{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);font-size:13px;}
.masthead-user a{color:var(--accent);text-decoration:none;}
.masthead-user a:hover{color:var(--ink);}

.tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;width:fit-content;}
.tab-btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
  background:transparent;border:none;color:var(--ink-soft);
  padding:8px 20px;border-radius:var(--radius-pill);cursor:pointer;
}
.tab-btn:hover{color:var(--ink);}
.tab-btn.active{background:var(--accent);color:#1B1508;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.layout{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start;}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;}
  .sheet{order:1;}
  .ledger{order:2;}
}

.ledger{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.ledger-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.ledger-head span{font-family:'Lora',serif;font-weight:600;font-size:15px;}
.new-btn{background:var(--accent);color:#1B1508;border:none;border-radius:var(--radius-pill);width:28px;height:28px;font-size:17px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);}
.new-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.ledger-list{max-height:560px;overflow-y:auto;}
.ledger-item{padding:12px 18px;border-bottom:1px solid var(--line);cursor:pointer;display:block;}
.ledger-item:hover{background:var(--kraft);}
.ledger-item.active{background:var(--kraft);border-left:3px solid var(--accent);padding-left:15px;box-shadow:inset 0 0 0 1px rgba(224,164,88,0.08);}
.ledger-item.anulada{opacity:0.5;}
.ledger-item .num{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--accent);font-weight:600;}
.ledger-item .who{font-size:13px;margin-top:2px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ledger-item .meta{font-size:11px;color:var(--ink-faint);margin-top:2px;display:flex;justify-content:space-between;}
.ledger-empty{padding:24px 18px;font-size:13px;color:var(--ink-faint);line-height:1.5;}

.sheet{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px 36px 36px;}

.row{display:grid;gap:18px;margin-bottom:22px;}
.row.two{grid-template-columns:1fr 1fr;}
.row.three{grid-template-columns:1fr 1fr 1fr;}
.row.four{grid-template-columns:2fr 1fr 1fr 1fr;}
@media (max-width:640px){.row.two,.row.three,.row.four{grid-template-columns:1fr;}}

/* Celulares: menos relleno/espacio desperdiciado, texto un poco más compacto */
@media (max-width:480px){
  body{padding:16px 10px 60px;}
  .sheet{padding:18px 16px 22px;}
  .masthead h1{font-size:24px;}
  .masthead{margin-bottom:16px;padding-bottom:14px;}
  .scan-box{padding:12px;gap:8px;}
  .ledger-list{max-height:320px;}
  .btn{padding:10px 14px;font-size:13px;}
  .totals{max-width:100%;}
  .mesas-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
  .pago-fila{grid-template-columns:1fr 100px 28px;gap:6px;}
}

.block-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.04em;color:var(--ink-faint);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);text-transform:uppercase;}

label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;}
input,select,textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:9px 12px;outline:none;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-faint);}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,164,88,0.15);}
textarea{resize:vertical;min-height:48px;font-family:'Inter',sans-serif;}
.field{margin-bottom:14px;}
.field.tight{margin-bottom:0;}
.section-gap{margin-top:32px;}

.scan-box{
  display:flex;gap:12px;align-items:flex-end;background:var(--kraft);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;
}
.scan-box .field{margin-bottom:0;flex:1;}
.scan-box input{background:var(--paper-raised);}
.scan-hint{font-size:12px;color:var(--ink-soft);margin-top:8px;}

.tipo-venta-toggle{display:flex;align-items:center;gap:8px;margin-top:12px;}
.tipo-venta-label{font-size:12.5px;color:var(--ink-soft);}
.tipo-btn{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;background:var(--paper-raised);border:1px solid var(--line-strong);color:var(--ink-soft);padding:7px 16px;border-radius:var(--radius-pill);cursor:pointer;}
.tipo-btn:hover{border-color:var(--accent);color:var(--ink);}
.tipo-btn.active{background:var(--accent);border-color:var(--accent);color:#1B1508;box-shadow:var(--shadow-sm);}
.tipo-mini-select{background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:12px;padding:5px 8px;color:var(--ink);}

.suggestions-box{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
  background:var(--paper-raised);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-md);
  max-height:260px;overflow-y:auto;margin-top:6px;
}
.suggestion-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;}
.suggestion-item:last-child{border-bottom:none;}
.suggestion-item:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);}
.suggestion-item:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);}
.suggestion-item:hover{background:var(--kraft);}
.suggestion-item .s-nombre{font-size:13.5px;color:var(--ink);font-weight:600;}
.suggestion-item .s-meta{font-size:11.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}

table.items{width:100%;border-collapse:collapse;}
table.items thead th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);letter-spacing:0.04em;text-transform:uppercase;padding:0 8px 10px;border-bottom:1px solid var(--line);font-weight:500;}
table.items td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.items td input{border:1px solid transparent;background:transparent;padding:5px 6px;border-radius:var(--radius-sm);}
table.items td input:hover{border-color:var(--line-strong);background:var(--paper);}
table.items td input:focus{background:var(--paper);}
table.items input.num{font-family:'IBM Plex Mono',monospace;text-align:right;}
.col-desc{width:34%;}
.col-num{width:11%;}
.col-amt{width:14%;}
.line-total{font-family:'IBM Plex Mono',monospace;text-align:right;color:var(--ink);font-weight:600;white-space:nowrap;}
.rm-row{background:none;border:none;cursor:pointer;color:var(--ink-faint);font-size:16px;line-height:1;padding:4px 8px;border-radius:var(--radius-sm);}
.rm-row:hover{color:var(--accent);background:var(--kraft);}
.cart-empty{padding:28px 8px;text-align:center;color:var(--ink-faint);font-size:13.5px;}

.cant-stepper{display:flex;align-items:center;gap:4px;}
.cant-stepper input.rCant{width:46px;text-align:center;flex:none;}
.cant-btn{background:var(--kraft);border:1px solid var(--line-strong);color:var(--ink);font-size:16px;font-weight:600;line-height:1;cursor:pointer;width:28px;height:28px;border-radius:var(--radius-sm);flex:none;display:flex;align-items:center;justify-content:center;padding:0;}
.cant-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.cant-btn:active{transform:scale(0.94);}

.link-btn{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;margin-top:-6px;margin-bottom:6px;}
.link-btn:hover{color:var(--ink);}

.pago-mixto-box{background:var(--kraft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:22px;}
.pago-fila{display:grid;grid-template-columns:1fr 140px 34px;gap:10px;align-items:center;margin-bottom:8px;}
.pago-fila select,.pago-fila input{background:var(--paper-raised);}
.pago-fila input.num{font-family:'IBM Plex Mono',monospace;text-align:right;}
.pago-fila .rm-row{justify-self:center;}
.pago-mixto-resumen{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-strong);font-size:13px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;}
.pago-mixto-resumen.ok{color:var(--ok);}
.pago-mixto-resumen.falta{color:var(--accent-dark);}

.totals{margin-top:24px;margin-left:auto;width:100%;max-width:320px;}
.totals .line{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.totals .line input.num{width:60px;text-align:right;font-family:'IBM Plex Mono',monospace;padding:3px 6px;}
.totals .line .amt{font-family:'IBM Plex Mono',monospace;color:var(--ink);}
.totals .grand{display:flex;justify-content:space-between;padding-top:14px;margin-top:8px;border-top:1px solid var(--line-strong);}
.totals .grand .label{font-family:'Lora',serif;font-weight:600;font-size:15px;}
.totals .grand .amt{font-family:'IBM Plex Mono',monospace;font-size:21px;font-weight:600;color:var(--accent);}

.storage-banner{display:flex;gap:8px;background:var(--kraft);border:1px solid var(--accent-dark);color:var(--ink);font-size:13px;line-height:1.5;padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;}

.actions{display:flex;gap:10px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;}
.btn{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--accent);color:#1B1508;box-shadow:var(--shadow-sm);}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-ghost{background:var(--paper);border:1px solid var(--line-strong);color:var(--ink-soft);}
.btn-ghost:hover{border-color:var(--ink-soft);color:var(--ink);}
.btn-danger{background:transparent;color:var(--accent-dark);border:1px solid transparent;}
.btn-danger:hover{background:rgba(201,138,60,0.12);}
.save-status{font-size:12px;color:var(--ok);margin-left:auto;opacity:0;transition:opacity .25s;}
.save-status.show{opacity:1;}

/* Inventario */
.inv-toolbar{display:flex;gap:10px;margin-bottom:16px;align-items:flex-end;flex-wrap:wrap;}
.inv-toolbar .field{margin-bottom:0;flex:1;}
.table-wrap{overflow-x:auto;}

@keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.login-error{background:var(--kraft);border:1px solid var(--accent-dark);color:var(--ink);font-size:13px;padding:9px 12px;border-radius:var(--radius);margin-bottom:16px;display:none;}
.login-error::before{content:'⚠ ';}

table.inv{width:100%;border-collapse:collapse;}
table.inv thead th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);letter-spacing:0.04em;text-transform:uppercase;padding:0 10px 10px;border-bottom:1px solid var(--line);}
table.inv td{padding:10px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
table.inv tr:hover{background:var(--kraft);}
.stock-low{color:var(--accent-dark);font-weight:700;background:rgba(201,138,60,0.12);padding:3px 10px;border-radius:var(--radius-pill);display:inline-block;}
.stock-ok{color:var(--ok);font-weight:600;}
.inv-actions{display:flex;gap:6px;}
.inv-actions button{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:5px 11px;font-size:12px;cursor:pointer;color:var(--ink-soft);}
.inv-actions button:hover{border-color:var(--ink-soft);color:var(--ink);}
.inv-actions button.danger:hover{border-color:var(--accent-dark);color:var(--accent-dark);}
.badge{font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--kraft);padding:3px 9px;border-radius:var(--radius-pill);color:var(--ink-soft);}

@media (max-width:640px){
  .table-wrap table{min-width:560px;}
}

/* Mesa activa dentro de Vender */
.mesa-activa-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--kraft);border:1px solid var(--accent-dark);border-radius:var(--radius);
  padding:10px 16px;margin-bottom:16px;font-size:13.5px;
}

/* Grilla de mesas */
.mesas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:16px;}
.mesa-card{
  background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:16px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);
  transition:transform 0.15s ease, box-shadow 0.15s ease;position:relative;
}
.mesa-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.mesa-card.ocupada{border-color:var(--accent-dark);}
.mesa-card h3{font-family:'Lora',serif;font-size:16px;margin:0 0 8px;color:var(--ink);}
.mesa-card .mesa-estado{font-size:12px;color:var(--ink-soft);}
.mesa-card.ocupada .mesa-estado{color:var(--accent);font-weight:600;}
.mesa-card .mesa-subtotal{font-family:'IBM Plex Mono',monospace;font-size:15px;margin-top:6px;color:var(--ink);}
.mesa-card .mesa-mesera{font-size:11.5px;color:var(--ink-faint);margin-top:4px;}
.mesa-card .mesa-reasignar{width:100%;margin-top:8px;font-size:12px;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);}
.mesa-card .mesa-eliminar{
  position:absolute;top:8px;right:8px;background:transparent;border:none;color:var(--ink-faint);
  font-size:15px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-sm);line-height:1;
}
.mesa-card .mesa-eliminar:hover{color:var(--accent-dark);background:var(--kraft);}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,13,0.72);align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(2px);}
.modal-box{background:var(--paper-raised);color:var(--ink);border-radius:var(--radius);width:90%;max-width:440px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--line);}
.modal-box.modal-box-wide{max-width:560px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);}
.modal-head h2{margin:0;font-family:'Lora',serif;font-size:18px;}
.modal-close{background:none;border:none;color:var(--ink-soft);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);}
.modal-close:hover{background:var(--kraft);color:var(--ink);}
.modal-body{padding:18px 22px 22px;}
.modal-body .field{margin-bottom:14px;}
.cierre-table{width:100%;border-collapse:collapse;margin-top:14px;}
.cierre-table td{padding:9px 6px;border-bottom:1px solid var(--line);font-size:14px;}
.cierre-table td:last-child{text-align:right;font-family:'IBM Plex Mono',monospace;}
.cierre-table tr.cierre-total td{font-weight:bold;border-top:1px solid var(--line-strong);border-bottom:none;font-size:16px;padding-top:14px;color:var(--accent);}
.cierre-empty{color:var(--ink-faint);font-size:14px;margin-top:14px;}
.cierre-cerrada{color:var(--ok);font-size:13px;margin-top:12px;}
#cierreCerrarCajaBtn:disabled{opacity:0.45;cursor:not-allowed;}


/* ===== AJUSTES PARA CELULAR (responsive) ===== */
html{-webkit-text-size-adjust:100%;}
body{min-height:100vh;min-height:100dvh;}

@media (max-width:820px){
  /* Pestañas: una sola fila con scroll horizontal en vez de salirse de la pantalla */
  .tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab-btn{flex:none;white-space:nowrap;}
}

@media (max-width:640px){
  body{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right));}

  /* Cabecera */
  .masthead{flex-direction:column;align-items:flex-start;}
  .masthead .folio{font-size:12px;line-height:1.9;}

  /* 16px evita que iPhone haga zoom automático al tocar un campo */
  input,select,textarea,.tipo-mini-select,.mesa-card .mesa-reasignar{font-size:16px;}

  .tipo-venta-toggle{flex-wrap:wrap;}
  .totals{max-width:none;}
  .row{gap:12px;margin-bottom:16px;}

  /* Carrito: cada producto se muestra como tarjeta en vez de tabla ancha */
  .table-wrap table.items{min-width:0;}
  table.items,table.items tbody{display:block;width:100%;}
  table.items thead{display:none;}
  table.items tr{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;position:relative;
    background:var(--kraft);border:1px solid var(--line);border-radius:var(--radius);
    padding:12px;margin-bottom:10px;
  }
  table.items td{display:block;padding:0;border:none;width:auto;}
  table.items td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:4px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--ink-faint);
  }
  table.items td[data-label="Producto"]{grid-column:1 / -1;font-weight:600;padding-right:34px;}
  table.items td[data-label="Producto"]::before{display:none;}
  table.items td.rm-cell{position:absolute;top:6px;right:6px;}
  table.items td.cart-empty{grid-column:1 / -1;}
  table.items td.line-total{text-align:left;}
  .cant-btn{width:40px;height:40px;font-size:20px;}
  .cant-stepper input.rCant{width:56px;height:40px;}
  .tipo-mini-select{width:100%;padding:9px 8px;}
  .rm-row{font-size:22px;padding:6px 10px;}

  /* Tablas de reportes/inventario: scroll horizontal dentro de su caja */
  .table-wrap{-webkit-overflow-scrolling:touch;}
}

@media (max-width:480px){
  .scan-box{flex-direction:column;align-items:stretch;}
  .scan-box .btn{width:100%;}
  .actions .btn{flex:1 1 100%;}
  .inv-toolbar .field{min-width:100%;}
  .inv-toolbar .btn{width:100%;}
  .btn{min-height:44px;}
  .mesa-activa-banner .btn{width:100%;}

  .modal-overlay{padding:12px;}
  .modal-box,.modal-box.modal-box-wide{width:100%;max-height:90vh;max-height:90dvh;}
  .modal-head{padding:14px 16px;}
  .modal-body{padding:14px 16px 18px;}
}

@media print{
  body{background:#fff;padding:0;}
  .layout{display:block;}
  .ledger,.actions,.tabs,.scan-box{display:none;}
  .sheet{border:none;padding:0;box-shadow:none;}
  .masthead{border-bottom:2px solid #000;}
}