/* ============================================================
   JU 寿 · sistema visual do gestor de reservas
   Tokens extraídos do site oficial juomakase.com.br (oklch)
   ============================================================ */
:root{
  --paper:oklch(98.5% .003 80);
  --ink:oklch(14% .005 270);
  --ink-soft:oklch(32% .005 270);
  --night:oklch(10% .004 270);
  --sand:oklch(92% .012 75);
  --hanko:oklch(50% .2 25);
  --muted:oklch(96% .005 80);
  --muted-fg:oklch(45% .005 270);
  --border:oklch(88% .005 80);
  --ok:oklch(52% .11 155);
  --alerta:oklch(62% .13 75);
  --font-serif:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --font-jp:"Shippori Mincho","Noto Serif JP",serif;
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
  --r:2px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55;
}
body.noite{background:var(--night);color:var(--paper);
  --muted:oklch(16% .005 270);--border:oklch(100% 0 0/.10);
  --muted-fg:oklch(65% .005 270);--sand:oklch(30% .012 75);}

h1,h2,h3{font-family:var(--font-serif);font-weight:300;letter-spacing:.01em;margin:0}
h1{font-size:2.1rem}h2{font-size:1.5rem}h3{font-size:1.15rem}
.jp{font-family:var(--font-jp)}
.serif{font-family:var(--font-serif)}
a{color:inherit}
.kicker{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-fg);font-weight:400}
.muted{color:var(--muted-fg)}
.hanko{color:var(--hanko)}
.center{text-align:center}

/* --------- controles --------- */
button,.btn{
  font-family:var(--font-sans);font-size:.82rem;letter-spacing:.06em;
  padding:.6rem 1.1rem;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:opacity .15s ease, background .15s ease;
}
button:hover,.btn:hover{opacity:.82}
button:disabled{opacity:.35;cursor:not-allowed}
.btn-vazio{background:transparent;color:inherit;border-color:var(--border)}
.btn-vazio:hover{background:var(--muted)}
.btn-hanko{background:var(--hanko);border-color:var(--hanko);color:#fff}
.btn-sm{padding:.35rem .7rem;font-size:.72rem}
body.noite button,body.noite .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
body.noite .btn-vazio{background:transparent;color:var(--paper);border-color:var(--border)}
body.noite .btn-hanko{background:var(--hanko);border-color:var(--hanko);color:#fff}

input,select,textarea{
  font-family:var(--font-sans);font-size:.9rem;width:100%;
  padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--r);
  background:transparent;color:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink-soft)}
body.noite input:focus,body.noite select:focus,body.noite textarea:focus{border-color:var(--paper)}
body.noite select option{background:var(--night);color:var(--paper)}
label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-fg);margin:0 0 .35rem}
.campo{margin-bottom:1rem}
.linha{display:grid;gap:1rem}
@media(min-width:640px){.l2{grid-template-columns:1fr 1fr}.l3{grid-template-columns:repeat(3,1fr)}}

/* --------- superfícies --------- */
.cartao{border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;background:transparent}
.cartao-solido{background:var(--muted)}
.selo{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.22rem .55rem;border:1px solid var(--border);border-radius:var(--r);
}
.selo-ok{border-color:var(--ok);color:var(--ok)}
.selo-alerta{border-color:var(--alerta);color:var(--alerta)}
.selo-hanko{border-color:var(--hanko);color:var(--hanko)}
.selo-cheio{background:var(--ink);color:var(--paper);border-color:var(--ink)}

table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
   color:var(--muted-fg);font-weight:400;padding:.5rem .6rem;border-bottom:1px solid var(--border)}
td{padding:.7rem .6rem;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:hover{background:var(--muted)}

/* --------- carimbo --------- */
.carimbo{
  border:2px solid var(--hanko);color:var(--hanko);font-family:var(--font-jp);
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;font-size:1rem;line-height:1.05;text-align:center;letter-spacing:0;
}
.regua{height:1px;background:var(--border);border:0;margin:2rem 0}
.esconde{display:none!important}