/* =========================================================================
   Le Art Clinic — design tokens & base styles (P0 scaffold)
   Palette : porcelain / glaze / azulejo / cobalt  (Portuguese azulejo accent)
   Type    : Fraunces (display) · Hanken Grotesk (UI) · Space Mono (data)
   ========================================================================= */

:root{
  /* Brand colour tokens */
  --porcelain:#F1EFE8;   /* page background */
  --glaze:#FBFAF6;       /* cards / surfaces */
  --azulejo:#14305A;     /* primary text / brand */
  --cobalt:#2E5AAC;      /* accent */
  --cobalt-soft:#6E92CF;
  --kiln:#B5683C;        /* alert — use sparingly */
  --slate:#5C6675;       /* secondary text */
  --line:#DAD6CB;        /* hairlines / borders */

  /* Typography */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing / shape */
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,48,90,.06), 0 10px 28px rgba(20,48,90,.07);
  --container:1080px;
}

/* Hide Alpine-controlled nodes until Alpine initialises */
[x-cloak]{ display:none !important; }

/* --- Reset-ish ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--porcelain);
  color:var(--azulejo);
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--azulejo);
  margin:0 0 .5em;
}
p{ margin:0 0 1rem; }
a{ color:var(--cobalt); text-underline-offset:3px; }
ul{ margin:0; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* --- Layout helpers ----------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1rem, 4vw, 2rem);
}
.main{ padding-block:clamp(2rem, 6vw, 4rem); }

/* Skip link (visible on keyboard focus) */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--azulejo); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) 0;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

/* --- Decorative azulejo frieze ----------------------------------------- */
.azulejo-band{
  height:56px;
  background-color:var(--azulejo);
  /* Geometric tile: alternating cobalt diamonds with a glazed centre dot */
  background-image:
    conic-gradient(from 45deg at 50% 50%,
      var(--cobalt-soft) 0 25%, transparent 0 50%,
      var(--cobalt-soft) 0 75%, transparent 0),
    radial-gradient(circle at 50% 50%, var(--glaze) 0 2px, transparent 3px);
  background-size:28px 28px, 28px 28px;
  background-position:center;
  border-bottom:3px solid var(--cobalt);
}

/* --- Header ------------------------------------------------------------- */
.site-header{ background:var(--glaze); border-bottom:1px solid var(--line); }
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding-block:1rem;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:700; font-size:1.5rem; letter-spacing:-.02em;
  color:var(--azulejo); text-decoration:none;
}
.wordmark__accent{ font-style:italic; font-weight:600; color:var(--cobalt); }

.nav{ display:flex; align-items:center; gap:clamp(.5rem, 2vw, 1.5rem); flex-wrap:wrap; }
.nav__link{ font-weight:500; color:var(--slate); text-decoration:none; padding:.35rem .25rem; }
.nav__link:hover{ color:var(--azulejo); }
.nav__link[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* Language switcher */
.lang{ position:relative; }
.lang__btn{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.04em;
  background:var(--porcelain); color:var(--azulejo);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.4rem .6rem; cursor:pointer;
}
.lang__menu{
  position:absolute; right:0; top:calc(100% + .4rem); z-index:20;
  margin:0; padding:.25rem; list-style:none; min-width:5.5rem;
  background:var(--glaze); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
}
.lang__item{
  display:block; padding:.4rem .6rem; border-radius:6px; text-decoration:none;
  color:var(--slate); font-family:var(--font-mono); font-size:.85rem;
}
.lang__item:hover{ background:var(--porcelain); color:var(--azulejo); }
.lang__item.is-active{ color:var(--cobalt); font-weight:700; }

/* --- Hero --------------------------------------------------------------- */
.hero{ max-width:46ch; margin-bottom:clamp(2rem, 5vw, 3rem); }
.eyebrow{ font-size:.78rem; letter-spacing:.16em; color:var(--cobalt); margin:0 0 .75rem; }
.hero__title{ font-size:clamp(2.2rem, 6vw, 3.4rem); }
.hero__lede{ font-size:1.15rem; color:var(--slate); }
.hero__actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero__pong{ font-family:var(--font-mono); font-size:.85rem; color:var(--slate); }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  font-family:var(--font-ui); font-weight:600; font-size:.95rem;
  background:var(--glaze); color:var(--azulejo);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.6rem 1rem; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--cobalt); border-color:var(--cobalt); color:#fff; }
.btn--primary:hover{ background:var(--azulejo); border-color:var(--azulejo); }

/* --- Cards / grid ------------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(1rem, 3vw, 1.5rem);
}
.card{
  background:var(--glaze); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow);
}
.card__title{ font-size:1.25rem; margin-bottom:1rem; }

.specimen{ margin:0 0 .6rem; }
.specimen--display{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; }
.specimen--body{ font-family:var(--font-ui); color:var(--slate); }
.specimen--mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Palette swatches */
.swatches{ list-style:none; padding:0; display:grid; gap:.5rem; }
.swatch{ display:flex; align-items:center; gap:.75rem; font-size:.9rem; color:var(--slate); }
.swatch::before{
  content:""; width:1.5rem; height:1.5rem; border-radius:6px;
  background:var(--c); border:1px solid var(--line); flex:none;
}
.swatch code{ margin-left:auto; font-size:.78rem; color:var(--slate); }

/* Alpine counter demo */
.counter{ display:flex; align-items:center; gap:.75rem; }
.counter__value{ font-size:1.5rem; min-width:3ch; text-align:center; }

/* --- Footer ------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); margin-top:clamp(2rem, 6vw, 4rem); }
.site-footer .container{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.5rem; color:var(--slate); font-size:.85rem;
}
.site-footer__muted{ color:var(--slate); }

/* --- Accessibility: visible keyboard focus ------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--cobalt);
  outline-offset:2px;
  border-radius:6px;
}

/* --- Respect reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================================
   P1 — authentication: flashes, login card, forms, status pages
   ========================================================================= */

:root{
  --sage:#3F7A5B;        /* success accent (muted clinical green) */
  --sage-soft:#E3EDE6;
}

/* Flash messages */
.flashes{ margin-top:1.25rem; display:grid; gap:.5rem; }
.flash{
  padding:.7rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--glaze); font-size:.92rem;
}
.flash--error{ border-color:var(--kiln); background:#F6E9E2; color:#7C3F1E; }
.flash--success{ border-color:var(--sage); background:var(--sage-soft); color:#2C5A41; }
.flash--info{ border-color:var(--cobalt-soft); background:#E7EEF8; color:var(--azulejo); }

/* Login card */
.auth{ display:flex; justify-content:center; padding-block:clamp(1.5rem, 5vw, 3.5rem); }
.auth__card{ width:100%; max-width:24rem; }
.auth__title{ font-size:1.9rem; margin:.1rem 0 .25rem; }
.auth__lede{ color:var(--slate); margin-bottom:1.5rem; }

/* Forms */
.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.35rem; }
.field__label{ font-weight:600; font-size:.9rem; color:var(--azulejo); }
.field__input{
  font-family:var(--font-ui); font-size:1rem; color:var(--azulejo);
  background:var(--porcelain); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.65rem .8rem; width:100%;
}
.field__input:focus{ border-color:var(--cobalt); }
.btn--block{ width:100%; }

/* Nav user chip */
.nav__user{ font-size:.82rem; color:var(--slate); }

/* Simple status pages (403 / protegido) */
.status-page{ max-width:46ch; }
.status-page__lede{ color:var(--slate); font-size:1.1rem; }
.status-page code{ background:var(--porcelain); padding:.1rem .35rem; border-radius:4px; }

/* =========================================================================
   P3 — Jornada module: page head, funnel, badges, table, detail cards
   ========================================================================= */

.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
}

/* --- Funnel (6 states, horizontal curated progression) ------------------ */
.funil{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:.5rem;
  padding:1rem; margin-bottom:1.5rem;
  background:var(--glaze); border:1px solid var(--line); border-radius:var(--radius);
}
.funil__step{
  flex:1 1 0; min-width:120px;
  display:flex; flex-direction:column; gap:.25rem;
  padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:var(--porcelain); border:1px solid var(--line);
  color:var(--azulejo); text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.funil__step:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.funil__step.is-active{ background:var(--cobalt); border-color:var(--cobalt); color:#fff; }
.funil__count{ font-size:1.7rem; line-height:1; color:var(--cobalt); }
.funil__step.is-active .funil__count{ color:#fff; }
.funil__label{ font-size:.82rem; color:var(--slate); }
.funil__step.is-active .funil__label{ color:rgba(255,255,255,.88); }
.funil__sep{ align-self:center; color:var(--cobalt-soft); font-size:1.5rem; line-height:1; }

/* --- State badge -------------------------------------------------------- */
.badge{
  display:inline-block; padding:.22rem .65rem; border-radius:999px;
  font-size:.78rem; font-weight:600; line-height:1.3;
  background:#E7EEF8; border:1px solid var(--cobalt-soft); color:var(--azulejo);
}

/* --- Table -------------------------------------------------------------- */
.tabela-wrap{ overflow-x:auto; }
.tabela{
  width:100%; border-collapse:collapse;
  background:var(--glaze); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.tabela th, .tabela td{
  text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--line);
  font-size:.92rem; white-space:nowrap;
}
.tabela th{
  font-weight:600; color:var(--slate);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
}
.tabela tbody tr:last-child td{ border-bottom:none; }
.tabela tbody tr:hover{ background:var(--porcelain); }
.vazio{ text-align:center; color:var(--slate); padding:2rem; }
.filtro-aviso{ margin:0 0 1rem; font-size:.9rem; }
.link-forte{ color:var(--azulejo); font-weight:600; text-decoration:none; }
.link-forte:hover{ color:var(--cobalt); text-decoration:underline; }

/* --- Detail cards ------------------------------------------------------- */
.detalhe-grid{ align-items:start; }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:0; font-size:.92rem; }
.kv dt{ color:var(--slate); }
.kv dd{ margin:0; color:var(--azulejo); }
.itens{ list-style:none; padding:0; margin:.75rem 0 0; display:grid; gap:.4rem; font-size:.92rem; }
.itens li{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:.4rem; }
.muted{ color:var(--slate); }
.estado-form{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.estado-form .field__input{ width:auto; flex:1 1 12rem; }
.form-narrow{ max-width:32rem; }

/* =========================================================================
   P4 — Orçamento: items table, total highlight, add form, small buttons
   ========================================================================= */

.orc-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.orc-card-itens{ grid-column:1 / -1; }   /* items span the full width */

.tabela .ar, .orc-tabela .ar{ text-align:right; }
.orc-tabela td, .orc-tabela th{ white-space:nowrap; }

/* Total highlight (Space Mono) */
.orc-total{
  display:flex; align-items:baseline; justify-content:flex-end; gap:1rem;
  margin-top:1rem; padding-top:1rem; border-top:2px solid var(--cobalt);
}
.orc-total__label{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.orc-total__valor{ font-size:2rem; line-height:1; color:var(--cobalt); }

/* Add-item form: three compact numeric fields in a row */
.orc-add-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; }
@media (max-width:480px){ .orc-add-row{ grid-template-columns:1fr; } }

/* Card action row */
.card-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }

/* Button variants */
.btn--sm{ padding:.4rem .75rem; font-size:.85rem; }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--glaze); }

/* =========================================================================
   P5 — Logística form: two-column date row, branded checkbox, textarea
   ========================================================================= */

.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (max-width:480px){ .row-2{ grid-template-columns:1fr; } }

.check{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-weight:500; color:var(--azulejo); }
.check input{ width:1.15rem; height:1.15rem; accent-color:var(--cobalt); }

.field__textarea{ min-height:7rem; resize:vertical; line-height:1.5; }