/* XPTO Labs Design System — tokens do projeto ec71ae6f (Claude Design)
   Fontes auto-hospedadas: fonts.googleapis.com é bloqueado na China. */

@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-serif-display-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/roboto-slab-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/roboto-300.woff2') format('woff2'); }

:root {
  --surface-0: #F7F7F7;   /* canvas */
  --surface-1: #FFFFFF;   /* cards */
  --ink: #252729;
  --ink-2: #818284;
  --paper: #F5F2ED;       /* texto sobre dark */
  --border: #E8E8E8;
  --border-gray: #EBEBEB;
  --mustard: #EDAE49;
  --steel: #4A7FA5;
  --coral: #D3596C;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --zh: -apple-system, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--ink); background: var(--surface-0);
}

/* ---------- primitivas da marca ---------- */

.accent-bar { width: 32px; height: 2px; background: var(--mustard); margin-bottom: 10px; }
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-2);
}
h1 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; }

.wordmark { display: inline-flex; align-items: baseline; gap: 0.28em; }
.wordmark .x { font-family: 'Roboto Slab', serif; font-weight: 400; }
.wordmark .l { font-family: 'Roboto', sans-serif; font-weight: 300; }

.btn {
  display: inline-block; border: 0.5px solid var(--ink); border-radius: 24px;
  background: var(--ink); color: var(--paper); font-family: var(--sans);
  font-size: 14px; font-weight: 500; padding: 9px 20px; cursor: pointer;
  text-decoration: none; transition: opacity 0.18s ease-out;
}
.btn:hover { opacity: 0.88; } .btn:active { opacity: 0.75; }
.btn-ghost { background: transparent; color: var(--ink); }

.badge {
  display: inline-block; border-radius: 16px; font-size: 11px; font-weight: 500;
  padding: 2px 9px; letter-spacing: 0.02em;
}
.badge-ok     { background: rgba(74,127,165,0.12); color: #356180; }
.badge-warn   { background: rgba(237,174,73,0.14); color: #8a6420; }
.badge-danger { background: rgba(211,89,108,0.12); color: #b03e52; }
.badge-flat   { background: var(--surface-0); color: var(--ink-2); border: 0.5px solid var(--border); }

.card {
  background: var(--surface-1); border: 0.5px solid var(--border);
  border-radius: 4px; padding: 20px;
}

/* ---------- layout ---------- */

.wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 64px; }
.site-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.stamp { font-size: 12px; color: var(--ink-2); }

/* ---------- roteiro: card de dia ---------- */

.alert-strip {
  border: 0.5px solid var(--coral); border-radius: 4px; background: var(--surface-1);
  padding: 12px 16px; font-size: 13.5px; margin: 16px 0; color: var(--ink);
}
.alert-strip strong { color: #b03e52; font-weight: 500; }

.day {
  background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 4px;
  margin-top: 14px; overflow: hidden;
}
.day.today { border-color: var(--mustard); }
.day.today .d-head::before { content: ''; display: block; width: 32px; height: 2px; background: var(--mustard); margin-bottom: 8px; }
.day.past { opacity: 0.55; }

.d-head { padding: 16px 18px 12px; border-bottom: 0.5px solid var(--border); }
.d-title { display: flex; align-items: baseline; gap: 10px; }
.d-title .dow { font-family: var(--serif); font-size: 21px; }
.d-title .today-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6420; }
.d-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); align-items: center; }

.period { padding: 12px 18px; border-bottom: 0.5px solid var(--border); }
.period:last-child { border-bottom: none; }
.p-label { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.p-label span { letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 6px; }
.p-empty { color: var(--ink-2); font-size: 14px; }

.act { border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 12px; }
.act:last-child { margin-bottom: 2px; }
.act.obj-cult { border-left-color: var(--steel); }
.act.obj-compras { border-left-color: var(--mustard); }
.act.obj-pai { border-left-color: var(--coral); }
.act.fixo { border-left-color: var(--ink); }

.a-name { font-weight: 500; font-size: 15px; }
.a-place { font-size: 14px; color: var(--ink); margin-top: 1px; }
.a-zh { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.a-zh code {
  font-family: var(--zh); font-size: 14px; background: var(--surface-0);
  border: 0.5px solid var(--border-gray); border-radius: 4px; padding: 3px 8px;
}
.a-zh .missing { font-size: 12.5px; color: var(--ink-2); }
.mini {
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink);
  background: transparent; border: 0.5px solid var(--ink); border-radius: 24px;
  padding: 3px 12px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: opacity 0.18s ease-out;
}
.mini:hover { opacity: 0.85; }
.a-notes { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
.a-notes b { font-weight: 500; color: var(--ink); }

/* ---------- bolso ---------- */

details.bolso { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 4px; margin-top: 16px; }
details.bolso summary {
  padding: 14px 18px; font-weight: 500; font-size: 14px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.bolso summary::-webkit-details-marker { display: none; }
details.bolso summary::after { content: '+'; color: var(--ink-2); font-size: 16px; }
details.bolso[open] summary::after { content: '−'; }
.bolso-body { padding: 0 18px 16px; border-top: 0.5px solid var(--border); }
.bolso-body h3 { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 6px; }
.bolso-body p, .bolso-body li { font-size: 13.5px; line-height: 1.55; }
.bolso-body ul { padding-left: 18px; }

/* ---------- legenda ---------- */

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 5px; }

/* ---------- index / login ---------- */

.trip-link { display: block; text-decoration: none; color: inherit; margin-top: 14px; transition: opacity 0.18s ease-out; }
.trip-link:hover { opacity: 0.88; }
.login-box { max-width: 360px; margin: 18vh auto 0; padding: 0 16px; }
.login-box input {
  width: 100%; font-family: var(--sans); font-size: 15px; padding: 10px 14px;
  border: 0.5px solid var(--border); border-radius: 4px; background: var(--surface-1);
  margin: 14px 0 10px; color: var(--ink);
}
.login-box input:focus { outline: 1px solid var(--mustard); outline-offset: 2px; border-color: var(--border); }
.erro { color: #b03e52; font-size: 13px; margin-top: 8px; display: none; }

.icon { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; vertical-align: -2px; }
footer { margin-top: 36px; font-size: 12px; color: var(--ink-2); }