:root{
  /* --- Tokens del sistema de diseño Botter (60-20-15-5) --- */
  --botter-white:      #FFFFFF; /* 60% */
  --botter-beige:      #F2F2ED; /* 20% */
  --botter-beige-dark: #E4E4DC;
  --botter-navy:       #141414; /* 15% */
  --botter-navy-10:    #14141419;
  --botter-navy-60:    #14141499;
  --botter-wine:       #E8B923; /*  5% - CTA / acento */
  --botter-wine-10:    #E8B9233D;
  --botter-wine-text:  #8A6600; /* texto/badge sobre fondos claros */
  --botter-wine-hover: #C79E15;
  --botter-warning:    #8A6600;
  --botter-warning-bg: #FBF1D9;
  --botter-warning-bd: #E9CFA0;

  --font-macro: 'Satoshi', sans-serif;
  --font-micro: 'IBM Plex Sans', sans-serif;
  --font-code:  'IBM Plex Mono', monospace;

  --radius:10px;
}
*{box-sizing:border-box;}
body{
  font-family:var(--font-micro);
  background:var(--botter-beige-dark);
  color:var(--botter-navy);
  margin:0;
  padding:1.5rem;
}
.topbar{
  max-width:920px;
  margin:0 auto 1rem;
  background:var(--botter-navy);
  border-radius:12px;
  padding:1.1rem 1.4rem;
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar .logo{
  width:34px;
  height:34px;
  border-radius:8px;
  object-fit:contain;
  flex-shrink:0;
  background:#fff;
}
.topbar h1{
  font-family:var(--font-macro);
  font-weight:700;
  font-style:italic;
  font-size:24px;
  letter-spacing:0.3px;
  color:#fff;
  margin:0;
  white-space:nowrap;
}
.topbar .site-tag{
  font-family:var(--font-code);
  font-weight:500;
  font-size:19.5px;
  color:var(--botter-wine);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar .site-tag .codigo{
  color:#FFFFFF66;
}
.cierre-bar{
  max-width:920px;
  margin:0 auto 1rem;
  background:var(--botter-white);
  border:1px solid var(--botter-navy-10);
  border-radius:12px;
  padding:0.9rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.cierre-bar .fecha{
  font-family:var(--font-micro);
  font-size:13.5px;
  font-weight:600;
  color:var(--botter-navy);
}
.cierre-bar .fecha span{
  font-weight:400;
  color:var(--botter-navy-60);
  margin-left:6px;
}
.cierre-bar .cuenta{
  font-family:var(--font-code);
  font-size:13px;
  font-weight:500;
  padding:5px 12px;
  border-radius:20px;
}
.cierre-bar .cuenta.ok{
  color:var(--botter-navy);
  background:var(--botter-beige);
}
.cierre-bar .cuenta.alerta{
  color:var(--botter-warning);
  background:var(--botter-warning-bg);
}
.cierre-bar .cuenta.cerrado{
  color:#9B3A2C;
  background:#F5E1DD;
}
.layout{
  max-width:920px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width:760px){ .layout{grid-template-columns:1fr;} }

.panel{
  background:var(--botter-white);
  border-radius:12px;
  border:1px solid var(--botter-navy-10);
  padding:1.25rem;
}
.panel h2{
  font-family:var(--font-micro);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--botter-navy-60);
  margin:0 0 0.9rem;
}

/* Buscador */
.search-box{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.search-box input{
  flex:1;
  font-family:inherit;
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--botter-navy-10);
  border-radius:var(--radius);
  outline:none;
  background:var(--botter-white);
  color:var(--botter-navy);
}
.search-box input:focus{ border-color:var(--botter-navy); }
.search-box input:disabled{ background:var(--botter-beige); color:var(--botter-navy-60); }

.resultado{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 10px;
  border-radius:8px;
  cursor:pointer;
}
.resultado:hover{ background:var(--botter-beige); }
.resultado .nombre{ font-size:13.5px; font-weight:500; }
.resultado .cat{ font-size:11px; color:var(--botter-navy-60); font-family:var(--font-code); }
.resultado button{
  font-family:var(--font-micro);
  font-size:12px;
  font-weight:600;
  color:var(--botter-wine-text);
  background:var(--botter-wine-10);
  border:none;
  border-radius:20px;
  padding:5px 12px;
  cursor:pointer;
}
.resultado button:hover{ background:var(--botter-wine); color:var(--botter-navy); }

/* Grupos del carrito */
.grupo{ margin-bottom:16px; }
.grupo-titulo{
  font-family:var(--font-code);
  font-size:10.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--botter-navy-60);
  margin-bottom:6px;
}
.item-linea{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--botter-navy-10);
  border-radius:10px;
  margin-bottom:6px;
  background:var(--botter-white);
}
.item-info{ flex:1; min-width:0; }
.item-nombre{ font-size:13.5px; font-weight:600; }
.item-sub{ font-size:11.5px; color:var(--botter-navy-60); margin-top:1px; font-family:var(--font-code); }
.qty-control{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--botter-beige);
  border-radius:8px;
  padding:3px;
}
.qty-control button{
  width:24px;height:24px;
  border:none;
  background:var(--botter-white);
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:var(--botter-navy);
}
.qty-control span{
  font-family:var(--font-code);
  font-size:13px;
  font-weight:500;
  min-width:34px;
  text-align:center;
}
.btn-eliminar{
  width:26px;height:26px;
  border:none;
  background:transparent;
  color:var(--botter-navy-60);
  cursor:pointer;
  font-size:15px;
  border-radius:6px;
}
.btn-eliminar:hover{ background:#F5E1DD; color:#9B3A2C; }

.vacio{
  font-size:13px;
  color:var(--botter-navy-60);
  padding:1rem 0;
  text-align:center;
}

/* Resumen lateral */
.resumen-fila{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:6px 0;
  color:var(--botter-navy-60);
}
.resumen-fila.total{
  border-top:1px solid var(--botter-navy-10);
  margin-top:6px;
  padding-top:10px;
  font-weight:700;
  color:var(--botter-navy);
  font-size:14px;
}
.alerta-pendientes{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--botter-warning-bg);
  border:1px solid var(--botter-warning-bd);
  color:var(--botter-warning);
  font-size:12.5px;
  padding:8px 10px;
  border-radius:8px;
  margin:10px 0;
}
.btn-confirmar{
  width:100%;
  font-family:var(--font-micro);
  font-size:14px;
  font-weight:600;
  padding:12px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  margin-top:6px;
}
.btn-confirmar.activo{ background:var(--botter-wine); color:var(--botter-navy); }
.btn-confirmar.activo:hover{ background:var(--botter-wine-hover); }
.btn-confirmar.bloqueado{ background:var(--botter-beige); color:var(--botter-navy-60); cursor:not-allowed; }

/* Modal de confirmación */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:#14141499;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:100;
}
.modal-overlay.abierto{ display:flex; }
.modal-box{
  background:var(--botter-white);
  border-radius:14px;
  max-width:380px;
  width:100%;
  padding:1.5rem;
}
.modal-box h3{
  font-family:var(--font-macro);
  font-style:italic;
  font-weight:700;
  font-size:19px;
  color:var(--botter-navy);
  margin:0 0 0.6rem;
}
.modal-box p{
  font-size:13.5px;
  color:var(--botter-navy-60);
  line-height:1.5;
  margin:0 0 1rem;
}
.modal-sucursal{
  background:var(--botter-beige);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:1.2rem;
}
.modal-sucursal .label{
  font-family:var(--font-code);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--botter-navy-60);
  margin-bottom:2px;
}
.modal-sucursal .valor{
  font-size:14px;
  font-weight:600;
  color:var(--botter-navy);
}
.modal-acciones{
  display:flex;
  gap:8px;
}
.modal-acciones button{
  flex:1;
  font-family:var(--font-micro);
  font-size:13.5px;
  font-weight:600;
  padding:11px;
  border-radius:10px;
  border:none;
  cursor:pointer;
}
.modal-btn-cancelar{
  background:var(--botter-beige);
  color:var(--botter-navy);
}
.modal-btn-cancelar:hover{ background:var(--botter-beige-dark); }
.modal-btn-confirmar{
  background:var(--botter-wine);
  color:var(--botter-navy);
}
.modal-btn-confirmar:hover{ background:var(--botter-wine-hover); }
.modal-btn-confirmar:disabled{ opacity:0.6; cursor:not-allowed; }

/* Pantalla de acceso no autorizado / éxito */
.pantalla-centro{
  max-width:420px;
  margin:4rem auto;
  background:var(--botter-white);
  border-radius:12px;
  border:1px solid var(--botter-navy-10);
  padding:2rem;
  text-align:center;
}
.pantalla-centro h2{
  font-family:var(--font-macro);
  font-style:italic;
  font-weight:700;
  font-size:22px;
  margin:0 0 0.6rem;
}
.pantalla-centro p{
  font-size:13.5px;
  color:var(--botter-navy-60);
  line-height:1.5;
}