:root{
  --bg-page:#f2ead9;
  --paper:#fffdf7;
  --paper-edge:#d8c9a8;
  --ink:#171310;
  --muted:#5c5346;
  --tomato:#c1442d;
  --tomato-dark:#9c3722;
  --basil:#4f5c2a;
  --basil-dark:#3c4620;
  --danger:#7a2a2a;
  --thread:#c9bda1;
  --chip-bg:#fff;
  --chip-border:#cfc2a4;
  --pin-gold:#a3781a;
}
*{box-sizing:border-box;}
body,html{margin:0;padding:0;}
body{background:var(--bg-page);}
#app{
  font-family:'Courier New', ui-monospace, monospace;
  background:var(--bg-page);
  color:var(--ink);
  min-height:100vh;
  padding:0 0 40px 0;
}

.local-banner{
  background:#3c4620; color:#fff; text-align:center; font-size:13px; font-weight:bold;
  padding:8px 12px; letter-spacing:0.5px;
}

.header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:18px 20px;
  background:var(--tomato);
  border-bottom:4px solid var(--tomato-dark);
}
.brand{
  font-family: Georgia, 'Times New Roman', serif;
  font-weight:900;
  letter-spacing:1px;
  font-size:26px;
  color:#fff;
}
.brand small{
  display:block;
  font-family:'Courier New', monospace;
  font-weight:700;
  font-size:12px;
  letter-spacing:2px;
  color:#ffe4da;
  margin-top:2px;
}
.header-actions{display:flex; gap:8px; flex-wrap:wrap;}
.toggle-archived{
  background:#fff;
  border:2px solid var(--tomato-dark);
  color:var(--tomato-dark);
  padding:12px 16px;
  border-radius:6px;
  font-family:inherit;
  font-weight:bold;
  font-size:15px;
  cursor:pointer;
}
.toggle-archived:hover{background:#fff0ec;}

/* ---------- LOCK SCREEN ---------- */
.lock-wrap{
  max-width:380px; margin:12vh auto 0 auto; padding:0 20px; text-align:center;
}
.lock-wrap h1{
  font-family:Georgia, serif; font-size:26px; letter-spacing:1px; margin-bottom:8px; color:var(--ink);
}
.lock-wrap p{color:var(--muted); font-size:15px; margin-top:0; margin-bottom:24px;}
.pin-input{
  width:100%; padding:16px; font-size:26px; letter-spacing:10px; text-align:center;
  border-radius:8px; border:2px solid var(--thread); background:var(--paper); color:var(--ink);
  font-family:inherit;
}
.lock-btn{
  margin-top:16px; width:100%; padding:16px; border:none; border-radius:8px;
  background:var(--tomato); color:#fff; font-family:inherit; font-size:17px;
  letter-spacing:2px; font-weight:bold; cursor:pointer;
}
.lock-btn:active{background:var(--tomato-dark);}
.lock-error{color:#a33; font-size:14px; margin-top:10px; min-height:18px; font-weight:bold;}
.lock-hint{color:var(--muted); font-size:12px; margin-top:20px; line-height:1.6;}

/* ---------- COMPOSER ---------- */
.composer{
  max-width:680px; margin:20px auto 0 auto; padding:0 20px;
}
.composer-card{
  background:var(--paper);
  border:2px solid var(--thread);
  border-radius:12px;
  padding:18px;
}
.composer-label{
  font-size:13px; letter-spacing:2px; color:var(--muted); margin-bottom:8px; display:block; font-weight:bold;
}
.mesa-input{
  width:100%; padding:14px; font-size:26px; font-weight:900; text-transform:uppercase;
  letter-spacing:1px; border-radius:8px; border:2px solid var(--thread);
  background:#fff; color:var(--ink); font-family:Georgia, serif; margin-bottom:14px;
}
.msg-input{
  width:100%; padding:14px; font-size:19px; min-height:90px; resize:vertical;
  border-radius:8px; border:2px solid var(--thread); background:#fff; color:var(--ink);
  font-family:'Courier New', monospace; margin-bottom:14px; line-height:1.6; font-weight:600;
  text-transform:uppercase;
}

/* ---------- MODE TABS ---------- */
.mode-tabs{display:flex; gap:10px; margin-bottom:14px;}
.mode-tab{
  flex:1; padding:16px 10px; font-family:inherit; font-size:17px; font-weight:900;
  border-radius:8px; border:2px solid var(--chip-border); background:#fff; color:var(--muted);
  cursor:pointer; letter-spacing:1px;
}
.mode-tab.active.desayuno{background:var(--basil); border-color:var(--basil-dark); color:#fff;}
.mode-tab.active.pizza{background:var(--tomato); border-color:var(--tomato-dark); color:#fff;}

.chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.swatch{
  width:34px; height:34px; border-radius:50%; cursor:pointer; border:3px solid transparent;
}
.chip{
  font-family:inherit; font-size:17px; font-weight:800; padding:14px 18px;
  border-radius:24px; border:2px solid var(--chip-border); background:var(--chip-bg); color:var(--ink);
  cursor:pointer; letter-spacing:0.5px;
}
.chip:active{background:#f0e9d6;}
.chip.separator{
  background:#efe6d2; border-color:var(--muted); color:var(--muted); font-weight:900;
}

.row-between{display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px;}
.send-btn{
  background:var(--tomato); color:#fff; border:none; padding:16px 30px;
  border-radius:8px; font-family:inherit; font-weight:900; font-size:18px; letter-spacing:2px;
  cursor:pointer;
}
.send-btn:active{background:var(--tomato-dark);}
.send-btn:disabled{opacity:0.5; cursor:default;}

/* ---------- PINNED NOTE ---------- */
.pinned-wrap{
  max-width:680px; margin:0 auto; padding:0 20px 4px 20px;
}
.pinned-ticket{
  position:relative;
  background:#fff3cf;
  border:3px solid var(--pin-gold);
  border-radius:10px;
  padding:20px 20px 14px 20px;
  box-shadow:0 6px 16px rgba(0,0,0,0.2);
}
.pinned-label{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:900; letter-spacing:2px; color:var(--pin-gold); margin-bottom:8px;
}
.pinned-mesa{
  font-family:Georgia, serif; font-weight:900; text-transform:uppercase;
  font-size:26px; letter-spacing:1px; margin:0 0 6px 0; color:var(--ink);
}
.pinned-msg{
  font-family:'Courier New', monospace; font-size:20px; line-height:1.6; white-space:pre-wrap;
  margin:0 0 14px 0; font-weight:700; color:var(--ink);
}

/* ---------- TICKET RAIL ---------- */
.section-label{
  max-width:680px; margin:28px auto 12px auto; padding:0 20px;
  font-size:13px; letter-spacing:3px; color:var(--muted); font-weight:bold;
}
.rail{
  max-width:680px; margin:0 auto; padding:0 20px;
  display:flex; flex-direction:column; gap:24px;
}
.empty-state{
  color:var(--muted); font-size:16px; text-align:center; padding:34px 10px; line-height:1.7;
}
.ticket{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border-radius:4px;
  padding:26px 20px 18px 20px;
  box-shadow:0 6px 16px rgba(0,0,0,0.18);
  border:1px solid var(--paper-edge);
}
.ticket::before{
  content:"";
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(var(--clip-rot, -3deg));
  width:38px; height:18px;
  background:var(--ink);
  border-radius:3px;
  box-shadow: inset 0 0 0 3px var(--paper);
}
.ticket-perf{
  border-bottom:2px dashed var(--paper-edge);
  padding-bottom:12px; margin-bottom:12px;
}
.ticket-mesa{
  font-family:Georgia, serif; font-weight:900; text-transform:uppercase;
  font-size:28px; letter-spacing:1px; margin:0; color:var(--ink);
}
.ticket-time{
  font-size:13px; letter-spacing:0.5px; color:var(--muted); margin-top:4px; font-weight:bold;
}
.ticket-msg{
  font-family:'Courier New', monospace; font-size:20px; line-height:1.65; white-space:pre-wrap;
  margin:0 0 16px 0; font-weight:700; color:var(--ink);
}
.ticket-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
.ticket-btn{
  font-family:inherit; font-size:15px; font-weight:bold; letter-spacing:0.5px; padding:12px 16px;
  border-radius:6px; border:2px solid var(--paper-edge); background:transparent; cursor:pointer;
  color:var(--ink);
}
.ticket-btn.archive{border-color:var(--basil); color:var(--basil);}
.ticket-btn.archive:hover{background:rgba(79,92,42,0.1);}
.ticket-btn.delete{border-color:var(--danger); color:var(--danger);}
.ticket-btn.delete:hover{background:rgba(122,42,42,0.1);}
.ticket-btn.pin{border-color:var(--pin-gold); color:var(--pin-gold);}
.ticket-btn.pin:hover{background:rgba(163,120,26,0.12);}

.footer-note{
  max-width:680px; margin:30px auto 0 auto; padding:0 20px; color:var(--muted);
  font-size:13px; text-align:center; line-height:1.7;
}