:root{
  --bg:#f4f5f7; --card:#ffffff; --text:#1f2430; --muted:#6b7280;
  --primary:#2f7d5f; --primary-dark:#245f48; --danger:#c0392b; --warn:#c9891a;
  --border:#e2e5ea; --radius:14px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{margin:0 0 8px;}
.muted{color:var(--muted);}
.error{color:var(--danger); font-weight:600;}

.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--card); border-bottom:1px solid var(--border);
}
.topbar-title{font-weight:700; font-size:1.1rem;}
.btn-icon{
  background:none; border:none; font-size:1.4rem; padding:8px 10px; border-radius:10px; cursor:pointer;
}
.btn-icon:active{background:var(--border);}

#app{max-width:900px; margin:0 auto; padding:14px 14px 90px;}

.view-centered{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:16px;
}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}

.login-card{width:100%; max-width:380px;}
.login-card h1{text-align:center;}
.login-card p{text-align:center;}

label{display:flex; flex-direction:column; gap:6px; font-size:0.9rem; font-weight:600; color:#374151; margin-bottom:10px;}
input,select,textarea{
  font-size:1rem; padding:12px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--text); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary); outline-offset:1px;}

.btn{
  font-size:1rem; font-weight:700; padding:14px 16px; border-radius:12px; border:none;
  cursor:pointer; transition:transform .05s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:active{background:var(--primary-dark);}
.btn-secondary{background:#eef1f0; color:var(--text);}
.btn-block{width:100%;}
.btn-admin{background:#edf1fb;}

.home-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px;
}
.btn-big{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:28px 10px; font-size:1.05rem; font-weight:700; text-align:center; line-height:1.6;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btn-big:active{background:#eef4f1;}
@media (min-width:600px){
  .home-grid{grid-template-columns:1fr 1fr 1fr;}
}

.field-row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:6px;}
.field-row label{flex:1 1 140px; margin-bottom:0;}
.field-row .grow{flex:2 1 200px;}
.field-row > button{height:48px; align-self:flex-end;}

.dia-bloque{margin-bottom:18px;}
.dia-bloque h3{font-size:1rem; color:var(--primary-dark); margin-bottom:8px;}
.opciones-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:520px){
  .opciones-grid{grid-template-columns:1fr;}
}
.col-titulo{font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px;}
.btn-opcion{
  display:block; width:100%; text-align:left; background:#fff; border:1.5px solid var(--border);
  border-radius:12px; padding:14px 14px; font-size:.98rem; font-weight:600; margin-bottom:8px; min-height:52px;
}
.btn-opcion:active{background:#eaf4ee; border-color:var(--primary);}
.btn-opcion .precio{display:block; font-weight:400; color:var(--muted); font-size:.85rem;}
.btn-otro{background:#fff8ec; border-color:#e9d29a;}

.table-wrap{overflow-x:auto;}
.tabla-items{width:100%; border-collapse:collapse; font-size:.92rem;}
.tabla-items th,.tabla-items td{padding:8px 6px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;}
.tabla-items td:nth-child(1){white-space:normal; min-width:160px;}
.btn-mini{background:#f3e6e6; color:var(--danger); border:none; border-radius:8px; padding:6px 10px; font-weight:700; cursor:pointer;}
.btn-mini.edit{background:#e7edf7; color:#2b4a8a;}

.totales{display:flex; flex-wrap:wrap; gap:16px; justify-content:flex-end; margin-top:10px; font-size:.95rem;}
.total-final{font-size:1.1rem; color:var(--primary-dark);}

.sticky-actions{
  position:sticky; bottom:0; display:flex; gap:10px; background:linear-gradient(to top, var(--bg) 70%, transparent);
  padding:12px 0 4px;
}
.sticky-actions .btn-secondary{flex:0 0 auto;}
.sticky-actions .btn-primary{flex:1;}

.lista-pedidos{display:flex; flex-direction:column; gap:10px;}
.pedido-card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.pedido-card.estado-entregado{border-left:6px solid #2f7d5f;}
.pedido-card.estado-pendiente{border-left:6px solid #c9891a;}
.pedido-card.estado-cancelado{border-left:6px solid #c0392b; opacity:.7;}
.pedido-card-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap;}
.pedido-card-top .hora{font-weight:800; font-size:1.2rem;}
.pedido-card-top .cliente{font-weight:700;}
.pedido-items-mini{margin:0; padding-left:18px; font-size:.9rem; color:#374151;}
.badges{display:flex; gap:6px; flex-wrap:wrap;}
.badge{font-size:.75rem; font-weight:700; padding:3px 8px; border-radius:999px;}
.badge-entrega-pendiente{background:#fbe9d0; color:#8a5a10;}
.badge-entrega-entregado{background:#dcf0e4; color:#1f6e46;}
.badge-entrega-cancelado{background:#fbdada; color:#93261a;}
.badge-pago-pagado{background:#dcf0e4; color:#1f6e46;}
.badge-pago-pendiente{background:#fdeaea; color:#9a3030;}
.pedido-card-actions{display:flex; gap:8px; margin-top:4px;}

.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50;
}
.modal[hidden]{display:none;}
.modal-content{
  background:#fff; width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  border-radius:18px 18px 0 0; padding:16px;
}
@media (min-width:700px){
  .modal{align-items:center;}
  .modal-content{border-radius:18px;}
}