/* ============================= TOKENS ============================= */
:root{
  --bg:#FAF6EF;
  --surface:#FFFFFF;
  --surface-2:#F2E9DC;
  --surface-3:#EAE0CF;
  --text:#2A2019;
  --text-muted:#7A6B5C;
  --border:#E4D6C2;
  --accent:#eea197;
  --accent-ink:#2A2019;
  --accent-soft:#FBE9E6;
  --gold:#B9832E;
  --gold-soft:#F3E4C4;
  --green:#4C7A57;
  --green-soft:#DCEBE0;
  --red-flag:#B23B3B;
  --red-flag-soft:#F6DCDC;
  --shadow: 0 1px 2px rgba(42,32,25,.06), 0 8px 24px -12px rgba(42,32,25,.18);
  --shadow-lg: 0 4px 10px rgba(42,32,25,.08), 0 24px 48px -20px rgba(42,32,25,.28);
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --font-display:"Fraunces", Georgia, "Iowan Old Style", serif;
  --font-body:"Work Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1512;
    --surface:#221A16;
    --surface-2:#2B221C;
    --surface-3:#352A22;
    --text:#F2E9DD;
    --text-muted:#B7A794;
    --border:#3C2F27;
    --accent:#eea197;
    --accent-ink:#241209;
    --accent-soft:#4A322E;
    --gold:#DDB166;
    --gold-soft:#3A2E1C;
    --green:#8CBB9B;
    --green-soft:#233A2A;
    --red-flag:#E28080;
    --red-flag-soft:#3C2222;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lg: 0 4px 10px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#1B1512;
  --surface:#221A16;
  --surface-2:#2B221C;
  --surface-3:#352A22;
  --text:#F2E9DD;
  --text-muted:#B7A794;
  --border:#3C2F27;
  --accent:#E28763;
  --accent-ink:#241209;
  --accent-soft:#3C271F;
  --gold:#DDB166;
  --gold-soft:#3A2E1C;
  --green:#8CBB9B;
  --green-soft:#233A2A;
  --red-flag:#E28080;
  --red-flag-soft:#3C2222;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  text-wrap:balance;
  color:var(--text);
}
p{margin:0;}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;}
a{color:inherit;}
::selection{background:var(--accent-soft);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.hidden{display:none !important;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ============================= LOGO ============================= */
.brand-mark{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; }
.brand-mark svg{ display:block; width:100%; height:100%; }
.brand-mark img{ display:block; width:100%; height:100%; object-fit:contain; }
.topbar .brand-mark{ width:32px; height:32px; }
.brand-lockup{ display:flex; align-items:center; gap:.65rem; }
.brand-word{ font-family:var(--font-display); font-weight:700; letter-spacing:.01em; line-height:1.05; }
.brand-word small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.6em; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }

/* ============================= LOGIN ============================= */
#view-login{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.25rem;
  background:
    radial-gradient(circle at 12% 8%, var(--accent-soft), transparent 45%),
    radial-gradient(circle at 88% 92%, var(--gold-soft), transparent 40%),
    var(--bg);
}
.login-card{
  width:100%;
  max-width:392px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-lg);
  padding:2.25rem 2rem 2rem;
}
.login-card .brand-lockup{ justify-content:center; margin-bottom:1.5rem; }
.login-card h1{ font-size:1.4rem; text-align:center; }
.login-sub{ text-align:center; color:var(--text-muted); font-size:.9rem; margin-top:.35rem; }
.field{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:.62rem .75rem;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ background:var(--surface); }
.field-row{ display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; font-size:.85rem; color:var(--text-muted); }
.field-row label{ display:flex; align-items:center; gap:.5rem; }
.btn{
  border:1px solid transparent;
  border-radius:var(--radius-s);
  padding:.68rem 1.1rem;
  font-weight:600;
  font-size:.92rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-block{ width:100%; margin-top:1.4rem; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-soft{ background:var(--surface-2); color:var(--text); }
.btn-soft:hover{ background:var(--surface-3); }
.btn-danger{ background:var(--red-flag-soft); color:var(--red-flag); }
.btn-sm{ padding:.42rem .7rem; font-size:.8rem; border-radius:7px; }
.btn-icon{ padding:.5rem; border-radius:8px; }
.login-demo-note{
  margin-top:1.25rem; font-size:.78rem; color:var(--text-muted); text-align:center;
  background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--radius-s); padding:.65rem .75rem;
}

/* ============================= APP SHELL ============================= */
#view-app{ display:flex; min-height:100dvh; }
.sidebar{
  width:236px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:1.3rem 1rem; gap:1.6rem;
  position:sticky; top:0; height:100dvh;
}
.sidebar .brand-lockup{ padding:0 .35rem; }
.nav-group{ display:flex; flex-direction:column; gap:.15rem; }
.nav-label{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); padding:.3rem .6rem .5rem; }
.nav-item{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .65rem; border-radius:10px;
  color:var(--text-muted); font-weight:600; font-size:.9rem; background:transparent; border:none; text-align:left; width:100%;
}
.nav-item svg{ flex-shrink:0; }
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent); }
:root[data-theme="dark"] .nav-item.active, @media (prefers-color-scheme:dark){.nav-item.active{color:var(--accent);}}
.sidebar-footer{ margin-top:auto; display:flex; flex-direction:column; gap:.6rem; }
.user-chip{ display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem; border-radius:10px; background:var(--surface-2); }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; line-height:1; text-align:center; flex-shrink:0; }
.avatar span{ display:block; transform:translateY(-0.06em); }
.client-avatar-dot{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
.form-error{ margin-top:.9rem; padding:.6rem .8rem; border-radius:8px; background:var(--red-flag-soft); color:var(--red-flag); font-size:.85rem; font-weight:600; }
.app-version{ text-align:center; font-size:.7rem; color:var(--text-muted); letter-spacing:.02em; }
.user-chip .who{ min-width:0; }
.user-chip .who strong{ display:block; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .who span{ font-size:.72rem; color:var(--text-muted); }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:none; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.page{ padding:1.75rem clamp(1rem,3vw,2.5rem) 6rem; max-width:1180px; width:100%; margin:0 auto; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.page-head h2{ font-size:1.55rem; }
.page-head .eyebrow{ font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem; }
.page-head p.sub{ color:var(--text-muted); font-size:.92rem; margin-top:.3rem; max-width:56ch; }
.page-head-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ============================= CARDS / KPI ============================= */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.6rem; }
.kpi{ padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.kpi .kpi-label{ font-size:.76rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.kpi .kpi-value{ font-family:var(--font-display); font-size:1.9rem; font-weight:600; }
.kpi .kpi-note{ font-size:.78rem; color:var(--green); font-weight:600; }

.section-title{ font-size:1.02rem; font-weight:700; margin:0 0 .85rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.two-col{ display:grid; grid-template-columns:1.3fr .9fr; gap:1.1rem; align-items:start; }

/* recent list */
.recent-list{ display:flex; flex-direction:column; }
.recent-row{ display:flex; align-items:center; gap:.9rem; padding:.8rem 0; border-bottom:1px solid var(--border); }
.recent-row:last-child{ border-bottom:none; }
.recent-row .r-info{ flex:1; min-width:0; }
.recent-row .r-info strong{ display:block; font-size:.9rem; }
.recent-row .r-info span{ font-size:.78rem; color:var(--text-muted); }
.score-badge{ font-family:var(--font-mono); font-weight:600; font-size:.85rem; padding:.28rem .55rem; border-radius:7px; flex-shrink:0; }
.score-badge.excelente{ background:var(--green-soft); color:var(--green); }
.score-badge.specialty{ background:var(--gold-soft); color:var(--gold); }
.score-badge.bajo{ background:var(--red-flag-soft); color:var(--red-flag); }

/* ============================= TABLES / LISTS ============================= */
.toolbar{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.search-box{ position:relative; flex:1; min-width:180px; max-width:320px; }
.search-box input{ width:100%; padding:.55rem .75rem .55rem 2.15rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); }
.search-box svg{ position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--text-muted); }
select.filter-select{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:.55rem .7rem; }

.client-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem; }
.client-card{ padding:1.1rem 1.15rem; display:flex; flex-direction:column; gap:.55rem; cursor:pointer; transition:border-color .12s ease, transform .12s ease; }
.client-card:hover{ border-color:var(--accent); transform:translateY(-1px); }
.client-card .c-top{ display:flex; align-items:center; gap:.7rem; }
.client-card .c-top strong{ font-size:.98rem; }
.client-card .c-top span{ display:block; font-size:.78rem; color:var(--text-muted); }
.client-card .c-meta{ display:flex; gap:.9rem; font-size:.78rem; color:var(--text-muted); flex-wrap:wrap; }
.client-card .c-meta b{ color:var(--text); font-family:var(--font-mono); }

.sheet-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:.9rem; }
.sheet-card{ padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.55rem; }
.sheet-card .s-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.sheet-card .s-top strong{ font-size:.92rem; }
.sheet-card .s-meta{ font-size:.78rem; color:var(--text-muted); display:flex; flex-direction:column; gap:.15rem; }
.sheet-card .s-actions{ display:flex; gap:.5rem; margin-top:.3rem; }
.sheet-card canvas{ width:100%; height:96px; }

.empty-state{ padding:2.5rem 1.5rem; text-align:center; color:var(--text-muted); }
.empty-state svg{ margin-bottom:.7rem; opacity:.55; }
.empty-state strong{ display:block; color:var(--text); margin-bottom:.3rem; }

/* ============================= MODAL / DRAWER ============================= */
.overlay{ position:fixed; inset:0; background:rgba(20,14,10,.42); backdrop-filter:blur(1px); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:80; }
.modal{ background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow-lg); width:100%; max-width:460px; padding:1.5rem 1.5rem 1.4rem; max-height:88vh; overflow:auto; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem; }
.modal-head h3{ font-size:1.1rem; }
.pick-client-list{ display:flex; flex-direction:column; gap:.4rem; max-height:220px; overflow:auto; margin:.9rem 0; }
.pick-client-list button{ display:flex; justify-content:space-between; align-items:center; text-align:left; padding:.6rem .7rem; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); font-weight:600; font-size:.87rem; }
.pick-client-list button:hover{ border-color:var(--accent); }
.or-divider{ display:flex; align-items:center; gap:.7rem; color:var(--text-muted); font-size:.76rem; margin:1rem 0; text-transform:uppercase; letter-spacing:.08em; }
.or-divider::before,.or-divider::after{ content:""; flex:1; height:1px; background:var(--border); }

/* toast */
#toast-wrap{ position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:.5rem; align-items:center; width:100%; padding:0 1rem; pointer-events:none; }
.toast{ background:var(--text); color:var(--bg); padding:.7rem 1.05rem; border-radius:999px; font-size:.85rem; font-weight:600; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.55rem; max-width:92vw; }
.toast.success::before{ content:"✓"; color:var(--green); font-weight:800; }
.toast.error::before{ content:"!"; color:var(--red-flag); font-weight:800; }

/* ============================= FAB ============================= */
.fab{
  position:fixed; right:1.6rem; bottom:1.6rem; width:58px; height:58px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); border:none; z-index:60; transition:transform .15s ease;
}
.fab:hover{ transform:scale(1.05) rotate(90deg); }
.fab:active{ transform:scale(.96) rotate(90deg); }

/* ============================= FICHA FORM ============================= */
.form-preview-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; align-items:start; }
.form-panel{ display:flex; flex-direction:column; gap:1rem; }
.form-card{ padding:1.15rem 1.2rem 1.3rem; }
.form-card h4{ font-size:.92rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; }
.form-card h4 .num{ width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem .9rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem .9rem; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }
.field.compact{ margin-top:0; }
.field .hint{ font-size:.72rem; color:var(--text-muted); }

.attr-row{ display:grid; grid-template-columns:1fr 92px; gap:.7rem; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--border); }
.attr-row:last-of-type{ border-bottom:none; }
.attr-row label{ font-size:.85rem; font-weight:600; }
.attr-num{
  font-family:var(--font-mono); font-weight:700; text-align:center; color:var(--accent);
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.4rem .3rem; width:100%;
}
.attr-num:focus{ background:var(--surface); border-color:var(--accent); }
.total-row{ display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; padding-top:.9rem; border-top:2px solid var(--border); }
.total-row .t-label{ font-weight:700; font-size:.95rem; }
.total-row .t-value{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--accent); }
.total-row .t-tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.22rem .55rem; border-radius:6px; }

.descriptor-row{ display:grid; grid-template-columns:1fr 84px 34px; gap:.55rem; align-items:center; margin-bottom:.5rem; }
.descriptor-row input[type=text]{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.5rem .65rem; }
.descriptor-row input[type=number]{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.5rem .5rem; text-align:right; font-family:var(--font-mono); }
.icon-btn{ width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--red-flag); flex-shrink:0; }
.icon-btn:hover{ background:var(--red-flag-soft); }

.form-sticky-actions{ position:sticky; bottom:1rem; display:flex; gap:.6rem; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:.85rem; box-shadow:var(--shadow-lg); }
.form-sticky-actions .btn{ flex:1; min-width:130px; }

/* preview toggle for small screens */
.preview-toggle{ display:none; gap:.4rem; margin-bottom:.9rem; background:var(--surface-2); border-radius:10px; padding:.25rem; }
.preview-toggle button{ flex:1; border:none; background:transparent; padding:.5rem; border-radius:8px; font-weight:600; font-size:.84rem; color:var(--text-muted); }
.preview-toggle button.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }

/* language chips for the printed sheet */
.lang-chip-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; justify-content:center; }
.lang-chip-row .hint{ font-size:.76rem; }
.lang-chip{ padding:.32rem .7rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:.78rem; font-weight:600; color:var(--text-muted); }
.lang-chip.active{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }

/* flavor/aroma quick-select checklist */
.flavor-wheel{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-s); padding:.85rem 1rem; }
.flavor-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding:.3rem 0; border-bottom:1px dashed var(--border); font-size:.8rem; }
.flavor-col .flavor-row:last-child{ border-bottom:none; }
.flavor-term{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; white-space:nowrap; color:var(--text); }
.flavor-term input{ width:14px; height:14px; accent-color:var(--accent); flex-shrink:0; }
.flavor-term.main{ font-weight:700; }
@media (max-width:520px){ .flavor-wheel{ grid-template-columns:1fr; } }

/* ============================= A4 SHEET (preview + print) ============================= */
.sheet-scroll{ position:sticky; top:1rem; }
.a4-sheet{
  background:#fff; color:#241a12; width:100%; aspect-ratio:210/297; max-width:560px; margin:0 auto;
  border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow-lg);
  padding:5.2% 6%; overflow:hidden; font-family:var(--font-body); display:flex; flex-direction:column; gap:8px;
}
.a4-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:2px solid #B4472B; padding-bottom:8px; }
.a4-head .a4-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(11px,2.3vw,15px); color:#241a12; }
.a4-head .a4-title small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.62em; color:#8a7864; text-transform:uppercase; letter-spacing:.1em; }
.a4-brandmark{ display:flex; align-items:center; justify-content:center; width:clamp(30px,6vw,42px); height:clamp(30px,6vw,42px); flex-shrink:0; }
.a4-brandmark svg, .a4-brandmark img{ width:100%; height:100%; object-fit:contain; display:block; }

.a4-idtable{ width:100%; border-collapse:collapse; font-size:clamp(6.4px,1.28vw,9.4px); }
.a4-idtable td{ border:1px solid #d9c9b3; padding:2.4px 5px; }
.a4-idtable td.lbl{ background:#f2e9dc; font-weight:600; width:38%; color:#5c4c3c; }
.a4-idtable td.val{ font-weight:500; }

.a4-sectitle{ background:#B4472B; color:#fff; font-size:clamp(6.6px,1.3vw,9.6px); font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2.6px 6px; border-radius:3px; margin-top:2px; }

.a4-two{ display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:start; }
.a4-attrtable{ width:100%; border-collapse:collapse; font-size:clamp(6.4px,1.28vw,9.2px); }
.a4-attrtable td, .a4-attrtable th{ border:1px solid #d9c9b3; padding:2px 5px; text-align:left; }
.a4-attrtable th{ background:#f2e9dc; font-weight:700; color:#5c4c3c; }
.a4-attrtable td.num{ text-align:right; font-family:var(--font-mono); }
.a4-attrtable tr.total td{ font-weight:700; background:#faf1e5; }

.a4-canvaswrap{ display:flex; align-items:center; justify-content:center; }
.a4-canvaswrap canvas{ width:100%; height:auto; display:block; }
/* Fixed aspect ratio (matching each canvas's own width/height attributes)
   so the chart scales uniformly at any container width — on screen and
   when printed at full A4 size — instead of being squashed vertically. */
#p-donut{ aspect-ratio: 260 / 170; max-width:260px; }
#p-radar{ aspect-ratio: 260 / 200; max-width:260px; }

.a4-notes{ font-size:clamp(6.4px,1.26vw,9px); border:1px solid #d9c9b3; border-radius:4px; overflow:hidden; }
.a4-notes .row{ display:flex; }
.a4-notes .row + .row{ border-top:1px solid #d9c9b3; }
.a4-notes .lbl{ background:#f2e9dc; font-weight:700; padding:3px 6px; width:82px; flex-shrink:0; color:#5c4c3c; }
.a4-notes .val{ padding:3px 6px; flex:1; }
.a4-notes .mouth{ background:#f7e3d3; }

.a4-footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:clamp(6px,1.1vw,8px); color:#8a7864; border-top:1px solid #d9c9b3; padding-top:5px; }

/* ============================= SETTINGS ============================= */
.settings-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; max-width:640px; }
.settings-card{ padding:1.2rem 1.3rem 1.3rem; }
.settings-card h4{ font-size:.98rem; margin-bottom:.2rem; }
.settings-card p.hint{ font-size:.8rem; color:var(--text-muted); margin-bottom:1rem; }
.pw-wrap{ position:relative; }
.pw-wrap button{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); font-size:.75rem; font-weight:700; }
.toggle{ position:relative; width:40px; height:23px; border-radius:999px; background:var(--surface-3); border:1px solid var(--border); flex-shrink:0; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease; }
.toggle.on{ background:var(--accent); }
.toggle.on::after{ transform:translateX(17px); background:#fff; }
.chip-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.provider-chip{ padding:.45rem .8rem; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); font-size:.82rem; font-weight:600; }
.provider-chip.active{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }

.logo-upload-box{ display:flex; align-items:center; gap:.8rem; }
.logo-upload-preview{
  width:64px; height:64px; flex-shrink:0; border:1px dashed var(--border); border-radius:10px;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.logo-upload-preview img{ width:100%; height:100%; object-fit:contain; }
.logo-upload-empty{ font-size:.62rem; color:var(--text-muted); text-align:center; padding:0 .3rem; }
.logo-upload-actions{ display:flex; flex-direction:column; gap:.4rem; }
.logo-upload-btn{ position:relative; overflow:hidden; }

/* ============================= RESPONSIVE ============================= */
@media (max-width: 980px){
  .form-preview-wrap{ grid-template-columns:1fr; }
  .preview-toggle{ display:flex; }
  .sheet-scroll{ position:static; }
  #panel-form.hide-mobile, #panel-preview.hide-mobile{ display:none; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .sidebar{ display:none; }
  .topbar{ display:flex; }
  .page{ padding:1.25rem 1rem 6.5rem; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:.6rem; }
  .kpi{ padding:.85rem .9rem; }
  .grid-2, .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
  .fab{ right:1rem; bottom:calc(70px + .9rem); width:52px; height:52px; }
  .page-head{ flex-direction:column; align-items:flex-start; }
}

/* bottom nav (mobile) */
.bottom-nav{ display:none; }
@media (max-width:860px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--border);
    padding:.35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .bn-item{ display:flex; flex-direction:column; align-items:center; gap:.15rem; background:none; border:none; color:var(--text-muted); font-size:.66rem; font-weight:600; padding:.35rem .5rem; border-radius:10px; flex:1; }
  .bn-item.active{ color:var(--accent); }
}

/* print */
#print-root{ display:none; }
@media print{
  body.printing > *:not(#print-root){ display:none !important; }
  #print-root{ display:block; }
  #a4-sheet{ box-shadow:none; border:none; border-radius:0; width:210mm; height:297mm; aspect-ratio:auto; max-width:none; padding:14mm 16mm; margin:0; }
  html, body{ margin:0; padding:0; }
  @page{ size:A4; margin:0; }
}
</style>