/* ==========================================================================
   Maeda Barbeiro — sistema visual (revamp "papel e carvão")
   --------------------------------------------------------------------------
   Arquivo ÚNICO de estilo (D-011: CSS próprio, sem framework, fluxo essencial
   funciona sem JavaScript). O revamp preserva a marcação: todos os nomes de
   classe usados pelos templates continuam existindo com a mesma função.

   Direção: barbearia clássica + ferramenta operacional + editorial sóbrio.
     - Papel osso como fundo, carvão como tinta e como faixa de marca.
     - Latão e tabaco como acentos quentes; verde-escuro e oxblood só para
       estados (confirmado / destrutivo).
     - Borda em vez de sombra; raio mínimo; uma única camada de superfície.
     - Serifa editorial (Fraunces) nos títulos, sans técnica (IBM Plex Sans)
       na interface, mono (IBM Plex Mono) só para horários e metadados.

   Organização:
     0. Fontes              8. Alertas e avisos
     1. Tokens              9. Listas (livro-razão)
     2. Base e reset       10. Agenda
     3. Tipografia         11. Jornada pública
     4. Layout e shell     12. Painel
     5. Botões             13. Admin
     6. Formulários        14. Responsivo
     7. Badges de estado
   ========================================================================== */

/* ==========================================================================
   0. FONTES — auto-hospedadas em /assets/fonts (SIL OFL 1.1, licenças ao
   lado dos arquivos). Só o subconjunto latino, que cobre o português.
   `font-display: swap` mantém o texto visível enquanto a fonte carrega.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/fraunces-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

/* ==========================================================================
   1. TOKENS
   Contrastes (WCAG 2.2) medidos sobre --color-background (#f3eee4):
     tinta 15,9:1 · texto secundário 7,7:1 · texto discreto 6,0:1
     tabaco 4,8:1 (links) · tabaco escuro 5,9:1 (rótulos pequenos)
     verde 8,4:1 · oxblood 6,5:1
   Refinamento: nenhum texto de apoio fica abaixo de 5:1 em papel, folha
   ou pergaminho, e nenhum texto fica abaixo de 12px.
   O latão (#b98432) tem 2,8:1 sobre o papel: é SÓ decorativo (filetes,
   sublinhado ativo, marca). Sobre o carvão ele chega a 5,6:1 e pode ser
   texto. Bordas de campos usam --color-border-strong (≥ 3:1).
   ========================================================================== */

:root {
  /* --- Paleta base --- */
  --ink: #171411;          /* carvão */
  --ink-raised: #2a241f;   /* carvão elevado (hover do primário) */
  --paper: #f3eee4;        /* osso */
  --sheet: #fbf8f2;        /* folha — superfície de campos e recibos */
  --parchment: #e7ddcf;    /* pergaminho — realce, hover, bloqueio */
  --wood: #8b5e3c;         /* tabaco */
  --wood-deep: #7a5230;
  --brass: #b98432;        /* latão */
  --brass-light: #d9b26a;  /* latão sobre carvão */
  --forest: #2e4a3e;       /* verde escuro */
  --oxblood: #8a3c35;

  /* --- Superfícies --- */
  --color-background: var(--paper);
  --color-surface: var(--sheet);
  --color-surface-secondary: var(--parchment);
  --color-surface-hover: #ede5d8;
  --color-surface-inverse: var(--ink);

  /* --- Texto --- */
  --color-text: var(--ink);
  --color-text-secondary: #51483e;   /* 7,7:1 papel · 6,7:1 pergaminho */
  --color-text-muted: #62584b;       /* 6,0:1 papel · 5,2:1 pergaminho */
  --color-text-inverse: var(--paper);
  --color-text-inverse-muted: #a99b8a;

  /* --- Bordas --- */
  --color-border: #cfc2b3;          /* filete decorativo */
  --color-border-strong: #8f806e;   /* limite de controle (3,6:1) */
  --color-rule: var(--ink);         /* filete editorial forte */

  /* --- Marca ---
     `--color-brand` continua sendo o identificador da paleta (o teste de
     rotas procura por ele). É o latão: decorativo sobre papel. Para texto
     de marca sobre papel usa-se --color-brand-deep (tabaco). */
  --color-brand: var(--brass);
  --color-brand-deep: var(--wood);
  --color-brand-strong: var(--wood-deep);
  --color-brand-soft: #f1e6d2;
  --color-on-brand: var(--paper);

  /* --- Estados --- */
  --color-success: var(--forest);
  --color-success-bg: #e4ebe5;
  --color-success-border: #b9c8bd;

  --color-warning: #7a5520;
  --color-warning-bg: #f5e9d2;
  --color-warning-border: #e0c89a;

  --color-danger: var(--oxblood);
  --color-danger-strong: #722f29;
  --color-danger-bg: #f4e4e0;
  --color-danger-border: #ddb9b2;
  --color-on-danger: var(--paper);

  --color-neutral: #51483e;
  --color-neutral-bg: #ebe4d8;
  --color-neutral-border: var(--color-border);

  --color-focus: var(--wood);

  /* --- Espaçamento (escala de 4px) --- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Tipografia --- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  --text-2xs: 0.75rem;   /* 12px — rótulo mono em caixa alta (piso) */
  --text-xs: 0.8125rem;  /* 13px — metadado mono, etiquetas */
  --text-sm: 0.875rem;   /* 14px — texto secundário */
  --text-base: 1rem;     /* 16px — corpo e campos */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.25rem;    /* 20px — título de bloco (serifa) */
  --text-xl: 1.5rem;     /* 24px — título de seção */
  --text-2xl: 2.125rem;  /* 34px — título de página */
  --text-3xl: 2.75rem;   /* 44px — título de destaque */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-label: 0.09em;
  --tracking-wide: 0.06em;

  /* --- Raios: mínimos, de propósito --- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  /* --- Transições --- */
  --transition-fast: 120ms ease;

  /* --- Camadas --- */
  --z-skip-link: 60;

  /* --- Larguras --- */
  --content-width: 64rem; /* alinha a marca com a mesa do painel */
  --booking-width: 44rem; /* jornada pública: uma coluna, foco */
  --panel-width: 64rem;   /* painel e admin: operacional */
  --form-width: 34rem;    /* formulários não esticam além disto */
}

/* ==========================================================================
   2. BASE E RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

a {
  color: var(--color-brand-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--color-text);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Foco sempre visível: anel tabaco (4,8:1 sobre o papel) */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.container {
  width: min(100% - 2.5rem, var(--content-width));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: var(--z-skip-link);
  inset: 0 auto auto 0;
  padding: var(--space-3) var(--space-4);
  transform: translateY(-110%);
  background: var(--brass-light);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--ink);
}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-text);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

p {
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: var(--weight-semibold);
}

.lead {
  max-width: 56ch;
  margin-block: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* Rótulo em caixa alta — metadado, por isso mono */
.eyebrow,
.step-kicker,
.shop-name {
  margin: 0 0 var(--space-3);
  color: var(--wood-deep);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.step-text {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   4. LAYOUT E SHELL
   ========================================================================== */

/* Faixa de marca: carvão com o monograma em latão. É a "placa da porta" —
   presente em todas as telas, sem brilho nem translucidez. */
.site-header {
  border-bottom: 3px solid var(--brass);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.site-header .container {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text-inverse);
}

.brand-mark {
  display: inline-grid;
  width: 1.875rem;
  height: 1.875rem;
  place-items: center;
  border: 1px solid var(--brass);
  color: var(--brass-light);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.brand-sub {
  color: var(--brass-light);
  font-style: italic;
  font-weight: 400;
}

.brand:hover .brand-mark {
  background: var(--brass);
  color: var(--ink);
}

.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.footer-brand {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.footer-note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Folha de página (jornada pública, login e estados de sistema).
   Uma superfície só: borda fina, raio mínimo, sem sombra. */
.booking-shell {
  position: relative;
  width: min(100%, var(--booking-width));
  margin: var(--space-7) auto var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Filete duplo no topo da folha: traço de carvão + fio de latão.
   É a assinatura visual do produto — tipografia de placa clássica,
   sem listras de barber pole. */
.barber-stripe {
  height: 7px;
  margin: -1px -1px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:
    linear-gradient(var(--ink), var(--ink)) top / 100% 4px no-repeat,
    linear-gradient(var(--brass), var(--brass)) bottom / 100% 1px no-repeat;
}

/* Cabeçalho de página: rótulo + título à esquerda, ação à direita */
.booking-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter) var(--space-5);
}

.booking-header h1,
.booking-unavailable h1 {
  max-width: 24ch;
}

/* Indicador de passo (1 / 3) — metadado em mono, sem pílula */
.step-label {
  flex: none;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
  white-space: nowrap;
}

.step-label span {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}

.booking-intro {
  max-width: 52ch;
  margin: 0;
  padding: 0 var(--gutter) var(--space-5);
  color: var(--color-text-secondary);
}

/* "Nada aqui": página em branco do livro — tracejado, sem caixa pesada */
.empty-state {
  margin: 0 var(--gutter) var(--space-6);
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  text-align: center;
}

.empty-state h2 {
  max-width: none;
  font-size: var(--text-lg);
}

.empty-state p {
  max-width: 48ch;
  margin: var(--space-2) auto 0;
  color: var(--color-text-secondary);
}

.slot-section .empty-state {
  margin: 0;
}

/* Estados de sistema (erro genérico / home) — direto no papel */
.error-state,
.hero {
  max-width: 44rem;
  padding-block: var(--space-8);
}

.error-state h1,
.hero h1 {
  font-size: var(--text-3xl);
}

.error-state .button,
.hero .button {
  margin-top: var(--space-2);
}

.notice {
  max-width: 40rem;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brass);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

/* Telas curtas (indisponível, 403/404/429, CSRF, login) */
.booking-unavailable {
  width: min(100%, 36rem);
  padding-bottom: var(--space-6);
}

.booking-unavailable > :not(.barber-stripe) {
  margin-inline: var(--gutter);
}

.booking-unavailable .step-kicker {
  margin-top: var(--space-6);
}

.booking-unavailable h1 {
  margin-bottom: var(--space-4);
}

.booking-unavailable [role="alert"] > p:not(.step-kicker),
.booking-unavailable > p:last-child:not(.override-actions) {
  max-width: 52ch;
  color: var(--color-text-secondary);
}

.booking-unavailable [role="alert"] .lead {
  font-size: var(--text-base);
}

.booking-unavailable > p:last-child {
  margin-top: var(--space-5);
}

/* ==========================================================================
   5. BOTÕES
   Primário = carvão (ação principal da tela). Secundário = contorno.
   Destrutivo = oxblood, só para ação destrutiva real. Link = tabaco.
   ========================================================================== */

.button,
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--color-text-inverse);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.button:hover,
.primary-action:hover {
  border-color: var(--ink-raised);
  background: var(--ink-raised);
  box-shadow: inset 0 -2px 0 var(--brass);
  color: var(--color-text-inverse);
}

.button:active,
.primary-action:active {
  transform: translateY(1px);
}

.button:disabled,
.primary-action:disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.button-secondary,
.secondary-action {
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
}

.button-secondary:hover,
.secondary-action:hover {
  border-color: var(--ink);
  background: var(--color-surface-hover);
  box-shadow: none;
  color: var(--color-text);
}

.button-danger,
.danger-action {
  border-color: var(--oxblood);
  background: var(--oxblood);
  color: var(--color-on-danger);
}

.button-danger:hover,
.danger-action:hover {
  border-color: var(--color-danger-strong);
  background: var(--color-danger-strong);
  box-shadow: none;
  color: var(--color-on-danger);
}

.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-brand-deep);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.button-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-danger);
}

.back-link {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.primary-link {
  display: flex;
  width: 100%;
  margin-top: var(--space-5);
  text-align: center;
}

/* ==========================================================================
   6. FORMULÁRIOS
   ========================================================================== */

.field-group + .field-group {
  margin-top: var(--space-5);
}

.field-group label,
.form-field label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field-group input,
.field-group textarea,
.field-group select,
.form-field input,
.form-field select,
.form-field textarea,
.schedule-row input,
.schedule-row select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-field select,
.field-group select {
  padding-right: var(--space-7);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.field-group input:hover,
.form-field input:hover,
.form-field select:hover,
.schedule-row input:hover {
  border-color: var(--ink);
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.schedule-row input:focus,
.schedule-row select:focus {
  border-color: var(--ink);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  background-color: #fff;
}

.form-field input[readonly],
.field-group input[readonly] {
  border-style: dashed;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.field-group input:disabled,
.form-field input:disabled,
.form-field select:disabled {
  background: var(--color-surface-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.field-group.has-error input,
.form-field.has-error input,
.form-field.has-error select,
.schedule-row input.has-error {
  border-color: var(--color-danger);
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.schedule-day.has-error {
  border-color: var(--color-danger);
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.field-error,
.field-help,
.form-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.field-error {
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

.field-help,
.form-note {
  color: var(--color-text-muted);
}

.schedule-row .field-error {
  flex-basis: 100%;
}

.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Checkbox: alvo confortável, cor de marca escura */
.form-field-check label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.form-field-check input,
.schedule-remove input {
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--ink);
}

.customer-form,
.customer-review,
.confirmation-body,
.reservation-body {
  padding: var(--space-5) var(--gutter) var(--space-6);
}

.customer-review {
  padding-bottom: 0;
}

.customer-review p {
  margin: 0;
}

.customer-review p + p {
  margin-top: var(--space-2);
}

.confirmation-form {
  padding-top: var(--space-4);
}

.customer-form .primary-action {
  width: 100%;
  margin-top: var(--space-5);
}

.confirmation-form .primary-action {
  margin-top: 0;
}

/* ==========================================================================
   7. BADGES DE ESTADO
   Etiqueta retangular com ponto: cor + texto sempre juntos (o estado nunca
   depende só da cor). Caixa alta curta, sem pílula.
   ========================================================================== */

.status-stamp,
.booking-state,
.service-admin-state,
.connection-state,
.readiness-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--color-neutral-border);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-stamp::before,
.booking-state::before,
.service-admin-state::before,
.connection-state::before,
.readiness-status::before {
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-stamp {
  margin: 0 0 var(--space-4);
}

.booking-state {
  margin: 0 0 var(--space-4);
}

/* Positivos */
.reservation-shell.is-confirmed .status-stamp,
.reservation-shell:not(.is-cancelled):not(.is-past) .status-stamp,
.booking-state:not(.is-cancelled):not(.is-past),
.service-admin-state,
.connection-state.is-connected {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* Em listas, "ativo" é o normal: etiqueta só com contorno, para que a
   exceção (inativo) seja o que chama o olho. */
.service-admin-item:not(.is-inactive) .service-admin-state {
  background: transparent;
}

/* Neutros / inativos */
.reservation-shell.is-past .status-stamp,
.booking-state.is-past,
.service-admin-item.is-inactive .service-admin-state {
  border-color: var(--color-neutral-border);
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
}

/* Cancelamento / erro */
.reservation-shell.is-cancelled .status-stamp,
.booking-state.is-cancelled,
.connection-state.is-attention {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.connection-line {
  margin: 0 0 var(--space-4);
}

/* Na página do canal o estado É o conteúdo principal: etiqueta maior */
.connection-line .connection-state {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.day-closed {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ==========================================================================
   8. ALERTAS E AVISOS
   Barra lateral de 3px + fundo tintado: o tom diz o tipo, o texto diz o que
   aconteceu. Nenhum alerta é um "card".
   ========================================================================== */

.flash-notice {
  margin: var(--space-4) var(--gutter) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-success-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.manual-note {
  max-width: 60ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brass);
  background: var(--color-brand-soft);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.preview-period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.preview-period strong {
  font-family: var(--font-body);
}

/* Nota de atenção: texto em tom de atenção com marcador, não caixa —
   precede listas (prévia de impacto) e resume falhas (avisos). */
.preview-note {
  position: relative;
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.preview-note::before {
  position: absolute;
  top: 0.1em;
  left: 0;
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-warning);
  color: var(--paper);
  content: "!";
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.preview-confirm {
  max-width: var(--form-width);
  margin-top: var(--space-5);
}

.preview-confirm .button {
  width: 100%;
}

.confirmation-note {
  max-width: 52ch;
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
}

.timezone-note {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   9. LISTAS — o "livro-razão"
   Linhas separadas por filetes, direto na página. Sem card por item.
   ========================================================================== */

.service-admin-list,
.override-list,
.agenda-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}

.service-admin-item,
.override-item,
.agenda-item {
  display: grid;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-height: 3.75rem;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.service-admin-item:hover,
.override-item:hover,
.agenda-item:hover {
  background: var(--color-surface-hover);
}

.service-admin-name,
.override-period,
.agenda-detail strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.service-admin-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
}

.service-admin-details,
.override-state,
.agenda-detail span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.service-admin-details {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.service-admin-item {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.service-admin-item.is-inactive .service-admin-name {
  color: var(--color-text-muted);
}

.override-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.override-period {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.override-remove {
  margin: 0;
}

.override-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.override-section {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.override-section h2 {
  margin: 0 0 var(--space-4);
}

.override-item.is-blocked .override-state {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

/* Seta de detalhe (›) ao fim da linha */
.agenda-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast);
}

.agenda-link:hover,
.agenda-item:hover .agenda-link,
.service-admin-item:hover .agenda-link {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ==========================================================================
   10. AGENDA
   ========================================================================== */

/* Navegação temporal: seta, data e seta formam UMA peça — uma régua com
   divisórias, não três objetos soltos. As setas continuam links reais
   (teclado, alvo de 44px). */
.agenda-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  margin: var(--space-6) 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.agenda-toolbar h2 {
  align-self: center;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xl);
  text-align: center;
}

.agenda-toolbar h2::first-letter {
  text-transform: uppercase;
}

.agenda-toolbar .back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 3.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast);
}

.agenda-toolbar .back-link:first-child {
  border-right: 1px solid var(--color-border);
}

.agenda-toolbar .back-link:last-child {
  border-left: 1px solid var(--color-border);
}

.agenda-toolbar .back-link:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

.agenda-toolbar .back-link:focus-visible {
  outline-offset: -3px;
}

/* A régua encosta no livro-razão logo abaixo */
.agenda-toolbar + .agenda-list,
.agenda-toolbar + .week-day {
  margin-top: 0;
}

/* Horário = âncora de leitura: coluna mono com filete de latão à direita,
   como a margem de um livro de marcações. */
.agenda-item {
  grid-template-columns: auto minmax(0, 1fr);
}

/* A coluna do horário tem piso fixo (linhas alinhadas na agenda) mas
   cresce para rótulos longos das prévias ("24 de setembro · 09:00–09:40"). */
.agenda-list .agenda-item {
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr) auto;
}

.agenda-item .agenda-time {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: var(--space-3);
  border-right: 2px solid var(--brass);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.agenda-item .agenda-detail {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.agenda-item .agenda-detail strong {
  font-size: var(--text-base);
}

.agenda-item.is-cancelled .agenda-time {
  border-right-color: var(--color-border);
  color: var(--color-text-muted);
}

.agenda-item.is-cancelled .agenda-detail strong {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  text-decoration: line-through;
  text-decoration-color: var(--color-danger);
}

.agenda-item.is-cancelled em {
  width: fit-content;
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
  text-transform: uppercase;
}

/* Bloqueio: hachura discreta — o horário está "riscado" no livro */
.agenda-item.is-blocked {
  background: repeating-linear-gradient(
    -45deg,
    var(--parchment) 0 6px,
    transparent 6px 12px
  );
}

.agenda-item.is-blocked .agenda-time {
  border-right-color: var(--color-text-muted);
}

.agenda-item.is-blocked:hover {
  background: repeating-linear-gradient(
    -45deg,
    var(--parchment) 0 6px,
    var(--color-surface-hover) 6px 12px
  );
}

.week-day {
  margin-top: var(--space-6);
}

.week-day h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.week-day:not(:has(.agenda-list)) h3 {
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

/* ==========================================================================
   11. JORNADA PÚBLICA
   ========================================================================== */

.schedule-header,
.review-header {
  padding: var(--space-5) var(--gutter) var(--space-5);
}

.schedule-header h1 {
  max-width: 20ch;
}

.review-header h1 {
  max-width: 22ch;
}

.confirmation-header {
  padding: var(--space-6) var(--gutter) var(--space-5);
}

.confirmation-header h1 {
  max-width: 18ch;
  font-size: var(--text-3xl);
}

.service-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.service-summary strong {
  color: var(--color-text);
  font-size: var(--text-base);
}

.service-summary span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.service-summary span + span::before,
.service-summary strong + span::before {
  margin-right: var(--space-3);
  color: var(--color-border-strong);
  content: "/";
}

/* Escolha de serviço: TABELA DE PREÇOS de barbearia — nome em serifa,
   pontilhado de guia, preço alinhado. A linha inteira é o alvo de clique. */
.service-list {
  margin: 0 var(--gutter) var(--space-6);
  padding: 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}

.service-list li + li {
  margin-top: 0;
}

.service-card {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

/* Pontilhado de guia entre o nome e o preço */
.service-card::after {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0.45em;
  border-bottom: 2px dotted var(--color-border-strong);
  content: "";
}

.service-card:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.service-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
}

.service-details {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.service-details span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.service-details strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.service-action {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--color-brand-deep);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.service-card:hover .service-action {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.date-section,
.slot-section {
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid var(--color-border);
}

.date-section h2,
.slot-section > h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
}

.slot-section > h2::first-letter {
  text-transform: uppercase;
}

/* Datas: fichas quadradas; a selecionada é carvão com fio de latão */
.date-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: var(--space-2);
}

.date-choice {
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast);
}

.date-choice span,
.date-choice strong {
  display: block;
}

.date-choice span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.date-choice strong {
  margin-top: 0.125rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
}

.date-choice:hover {
  border-color: var(--ink);
  background: var(--color-surface-hover);
}

.date-choice.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: inset 0 -3px 0 var(--brass);
}

.date-choice.is-selected span {
  color: var(--color-text-inverse-muted);
}

.date-choice.is-selected strong {
  color: var(--color-text-inverse);
}

/* Horários livres */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-2);
}

.slot-time {
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast);
}

.slot-time:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Recibo: pergaminho com picote tracejado — o comprovante da cadeira */
.appointment-receipt {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  margin: 0;
  padding: var(--space-4) var(--gutter);
  border-block: 1px dashed var(--color-border-strong);
  background: var(--color-surface-secondary);
}

.appointment-receipt div {
  min-width: 0;
  padding: var(--space-3) 0;
}

.appointment-receipt div:nth-child(even) {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.appointment-receipt div:nth-child(n + 3) {
  border-top: 1px solid var(--color-border);
}

.appointment-receipt dt,
.review-label {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.appointment-receipt dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.review-label {
  margin-bottom: var(--space-2) !important;
  color: var(--color-text-muted);
}

.booking-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter) 0;
}

.cancel-form {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.cancel-form p {
  max-width: 60ch;
  color: var(--color-text-secondary);
}

/* Bloco com ação destrutiva: marcado pela margem oxblood */
.cancel-form:has(.button-danger) {
  border-left: 3px solid var(--color-danger);
}

/* Ação destrutiva nunca encostada na ação construtiva vizinha */
.cancel-form + .cancel-form:has(.button-danger) {
  margin-top: var(--space-7);
}

.cancel-form .empty-state {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger-border);
  border-left: 3px solid var(--color-danger);
  background: var(--color-danger-bg);
  text-align: left;
}

.cancel-form .empty-state h2 {
  color: var(--color-danger);
  font-size: var(--text-md);
}

.cancel-form .empty-state p {
  margin: 0;
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

/* Cancelamento público: folha, e as duas saídas bem distintas */
.cancel-shell .cancel-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5) var(--gutter) var(--space-6);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.reservation-body .button {
  margin-block: var(--space-2) var(--space-4);
}

/* Na reserva, "Cancelar esta reserva" só leva à confirmação: contorno
   oxblood, para não disputar com o conteúdo nem com "novo agendamento". */
.reservation-body .button-danger {
  border-color: var(--color-danger);
  background: transparent;
  color: var(--color-danger);
}

.reservation-body .button-danger:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
}

/* ==========================================================================
   12. PAINEL
   Painel e admin NÃO são um card flutuante: a página é a própria mesa de
   trabalho, com cabeçalho editorial, abas e conteúdo direto no papel.
   ========================================================================== */

.booking-shell.panel-agenda {
  width: min(100%, var(--panel-width));
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.panel-agenda > .barber-stripe {
  display: none;
}

.panel-agenda > .booking-header {
  align-items: flex-end;
  padding: var(--space-7) 0 var(--space-5);
}

.panel-agenda > .booking-header h1 {
  font-size: var(--text-2xl);
}

.panel-agenda > .booking-header .shop-name {
  margin-bottom: var(--space-2);
}

.panel-agenda > .flash-notice {
  margin-inline: 0;
}

.panel-body {
  padding: var(--space-5) 0 0;
}

.panel-body > p:first-child .back-link {
  display: inline-block;
  margin-bottom: var(--space-2);
}

/* Abas do painel: filete de carvão embaixo; ativa com traço de latão */
.panel-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-rule);
  overflow-x: auto;
  scrollbar-width: none;
}

.panel-nav::-webkit-scrollbar {
  display: none;
}

.panel-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-bottom: -1px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 3px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast),
    border-color var(--transition-fast), background-color var(--transition-fast);
}

.panel-nav a:first-child {
  padding-left: 0;
}

.panel-nav a:hover {
  border-bottom-color: var(--color-border-strong);
  color: var(--color-text);
}

.panel-nav a.is-active {
  border-bottom-color: var(--brass);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* A ação do painel ("+ Nova reserva") é um botão, não uma aba */
.panel-nav a.panel-nav-action {
  align-self: center;
  margin: 0 0 var(--space-2) auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--weight-medium);
}

.panel-nav a.panel-nav-action:hover,
.panel-nav a.panel-nav-action.is-active {
  border-color: var(--ink-raised);
  background: var(--ink-raised);
  box-shadow: inset 0 -2px 0 var(--brass);
  color: var(--paper);
}

.header-logout {
  display: flex;
  flex: none;
  margin: 0;
}

.header-logout button {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: border-color var(--transition-fast),
    color var(--transition-fast), background-color var(--transition-fast);
}

.header-logout button:hover {
  border-color: var(--ink);
  color: var(--color-text);
}

/* Login (CR-001): folha estreita com o filete duplo */
.login-shell {
  width: min(100%, 30rem);
  padding-bottom: var(--space-5);
}

.booking-unavailable > .login-card {
  padding: 0 0 var(--space-4);
}

.login-card .step-kicker {
  margin-top: var(--space-6);
}

.login-card h1 {
  margin-bottom: var(--space-2);
  font-size: 1.75rem;
}

.login-card > .flash-notice,
.login-card > .form-error {
  margin: var(--space-4) 0 0;
}

.login-form {
  margin-top: var(--space-5);
}

.login-form.manual-form .button {
  align-self: stretch;
  margin-top: var(--space-2);
}

.login-card .timezone-note {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.login-card .override-actions,
.login-card .back-link {
  display: inline-block;
  margin-top: var(--space-1);
}

/* Ficha de detalhe (reserva, WhatsApp, tenant): uma folha só */
.booking-detail {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.booking-detail > h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-lg);
}

.booking-detail > .booking-state,
.booking-detail > .preview-note {
  margin-top: var(--space-4);
}

.booking-detail dl {
  margin: 0;
}

.booking-detail dl > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.booking-detail dl > div:first-child {
  border-top: 0;
}

.booking-detail dt {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1.9;
  text-transform: uppercase;
}

.booking-detail dd {
  margin: 0;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.booking-detail + .preview-note,
.booking-detail + .timezone-note {
  margin-top: var(--space-4);
}

/* Formulários do painel: coluna de leitura, não a largura da tela */
.manual-form,
.schedule-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.manual-form {
  max-width: var(--form-width);
}

.panel-body > .manual-form {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.schedule-form h2 {
  margin: 0;
}

.manual-form .button,
.schedule-form > .button {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Semana normal: cada dia é uma linha do quadro de horários */
.schedule-day {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.schedule-form h2 + .schedule-day {
  border-top: 1px solid var(--color-rule);
}

.schedule-day legend {
  float: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
}

.schedule-day legend .day-closed {
  margin-left: 0;
}

.schedule-day > .schedule-rows,
.schedule-day > .field-error,
.schedule-day > .add-period {
  grid-column: 2;
}

.schedule-day.has-error {
  padding-left: var(--space-3);
}

.schedule-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.schedule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.schedule-row > span[aria-hidden="true"] {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.schedule-row input[type="time"] {
  width: auto;
  min-width: 7.5rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.schedule-row.is-blank input[type="time"] {
  border-style: dashed;
  background: transparent;
}

.schedule-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.add-period {
  justify-self: start;
  align-self: flex-start;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-brand-deep);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast);
}

.add-period:hover {
  border-color: var(--ink);
  border-style: solid;
  color: var(--color-text);
}

.schedule-form .empty-state {
  margin: 0;
}

/* ==========================================================================
   13. ADMIN
   ========================================================================== */

/* A senha gerada aparece uma única vez: mono, destacada como ficha */
.credential-password {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-success);
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* CR-004/CR-006 — link público e prontidão */
.client-ready-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.public-link-card,
.readiness-card {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.client-ready-grid .public-link-card,
.client-ready-grid .readiness-card {
  margin-top: 0;
}

.public-link-card h2,
.readiness-card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

/* Link público: um endereço PRONTO, não um campo de formulário.
   O <input readonly> continua sendo o alvo do botão Copiar (progressive
   enhancement: sem JS o texto segue selecionável), mas é apresentado como
   texto — sem caixa, sem tracejado — com as duas ações ao lado. */
.public-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
}

.public-link-row .button {
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

/* As duas ações do link são utilitárias: nenhuma compete com a ação
   principal da tela (+ Nova reserva, Salvar...). */
.public-link-row .button:not(.button-secondary) {
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
}

.public-link-row .button:not(.button-secondary)::after {
  content: "↗";
  font-size: 0.9em;
}

.public-link-row .button:not(.button-secondary):hover {
  border-color: var(--ink);
  background: var(--color-surface-hover);
  box-shadow: none;
}

.public-link-input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 var(--space-1) 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: text;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
}

.public-link-input:focus-visible {
  outline-offset: 3px;
}

/* Nas fichas do admin (coluna estreita) o endereço ocupa a linha inteira
   e as ações vêm logo abaixo. Em telas estreitas um endereço longo termina
   em reticências, mas Copiar/Abrir sempre usam o valor completo. */
.public-link-card:not(.is-compact) .public-link-row {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.public-link-card:not(.is-compact) .public-link-input {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.public-link-guidance {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-sm);
}

.public-link-path {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Versão compacta (topo da agenda): rótulo + endereço + ações, numa faixa
   com margem de latão — a "placa" da página do barbeiro. */
.public-link-card.is-compact {
  display: block;
  margin-top: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.public-link-card.is-compact h2 {
  margin: 0;
  color: var(--wood-deep);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.public-link-card.is-compact > p {
  margin: 0;
}

.public-link-card.is-compact .public-link-guidance {
  margin: 0;
}

.readiness-status {
  margin: 0 0 var(--space-3);
}

.readiness-card.is-ready {
  border-top-color: var(--color-success);
}

.readiness-card.is-ready .readiness-status {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.readiness-card.is-action-needed {
  border-top-color: var(--color-warning);
}

.readiness-card.is-action-needed .readiness-status {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.readiness-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.readiness-item:first-child {
  border-top: 0;
}

.readiness-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.readiness-detail {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-align: right;
}

.readiness-item.is-ok .readiness-detail {
  color: var(--color-success);
}

.readiness-item.is-ok .readiness-detail::before {
  margin-right: var(--space-1);
  content: "✓";
}

.readiness-item.is-blocked .readiness-detail {
  color: var(--color-warning);
  font-weight: var(--weight-medium);
}

.readiness-action {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* ==========================================================================
   14. RESPONSIVO
   ========================================================================== */

@media (max-width: 52rem) {
  .service-admin-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .service-admin-details {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }

  .schedule-day {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-day > .schedule-rows,
  .schedule-day > .field-error,
  .schedule-day > .add-period {
    grid-column: 1;
  }

  .schedule-day legend {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
    padding-top: 0;
  }
}

@media (max-width: 40rem) {
  :root {
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;
    --text-xl: 1.3125rem;
  }

  .container {
    width: min(100% - 2rem, var(--content-width));
  }

  .site-header .container {
    min-height: 3.25rem;
  }

  .booking-shell {
    margin-block: var(--space-4);
  }

  .booking-header {
    flex-wrap: wrap;
    align-items: center;
    padding-top: var(--space-5);
  }

  .panel-agenda > .booking-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: var(--space-5) 0 var(--space-4);
  }

  .step-label {
    order: -1;
    margin-left: auto;
  }

  /* Serviços: nome e preço na mesma linha; guia some, duração desce */
  .service-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 0;
  }

  .service-card::after {
    display: none;
  }

  .service-details {
    grid-column: 2;
  }

  .service-action {
    grid-column: 1 / -1;
  }

  .override-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .override-remove {
    grid-column: 1 / -1;
  }

  /* Nav do painel no mobile: grade 3 × 2 de abas + ação em largura total.
     Tudo visível sem rolagem lateral, e a ação mais frequente do painel
     ("+ Nova reserva") continua em destaque. */
  .panel-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .panel-nav a,
  .panel-nav a:first-child {
    justify-content: center;
    margin: 0;
    padding: var(--space-3) var(--space-1);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    font-size: var(--text-sm);
  }

  .panel-nav a:nth-child(3n) {
    border-right: 0;
  }

  .panel-nav a:hover {
    border-bottom-color: var(--color-border);
    background: var(--color-surface-hover);
  }

  .panel-nav a.is-active {
    border-bottom-color: var(--color-border);
    background: var(--ink);
    box-shadow: inset 0 -3px 0 var(--brass);
    color: var(--paper);
  }

  .panel-nav a.panel-nav-action {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--space-3);
    border: 0;
    border-radius: 0;
  }

  /* Admin tem só 2 itens: sem ação dedicada, as duas abas dividem a linha */
  .panel-nav[aria-label="Navegação administrativa"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-nav[aria-label="Navegação administrativa"] a {
    border-bottom: 0;
  }

  .panel-nav[aria-label="Navegação administrativa"] a:nth-child(3n) {
    border-right: 1px solid var(--color-border);
  }

  .panel-nav[aria-label="Navegação administrativa"] a:last-child {
    border-right: 0;
  }

  .public-link-card.is-compact {
    padding-left: var(--space-4);
  }

  .public-link-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .public-link-row .public-link-input {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
  }

  .public-link-row .button {
    min-height: 2.75rem;
  }

  .agenda-toolbar {
    margin-top: var(--space-5);
  }

  .agenda-toolbar h2 {
    padding-inline: var(--space-2);
    font-size: var(--text-lg);
  }

  .agenda-toolbar .back-link {
    min-width: 2.75rem;
  }

  /* Mobile: o horário vira a primeira linha do lançamento e a margem de
     latão passa para a borda esquerda da linha inteira — o texto do
     lançamento ganha a largura toda e o preço não quebra. */
  .agenda-list .agenda-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0 var(--space-3) var(--space-3);
    border-left: 2px solid var(--brass);
  }

  .agenda-list .agenda-item .agenda-time {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    border-right: 0;
    font-size: var(--text-sm);
    white-space: normal;
  }

  .agenda-list .agenda-item .agenda-detail {
    grid-column: 1;
    grid-row: 2;
  }

  .agenda-list .agenda-item .agenda-link {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .agenda-list .agenda-item.is-cancelled {
    border-left-color: var(--color-border);
  }

  .agenda-list .agenda-item.is-blocked {
    border-left-color: var(--color-text-muted);
  }

  .appointment-receipt {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-receipt div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .appointment-receipt div:nth-child(n + 2) {
    border-top: 1px solid var(--color-border);
  }

  .booking-detail {
    padding-inline: var(--space-4);
  }

  .booking-detail dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .panel-body > .manual-form {
    padding: var(--space-4);
  }

  .manual-form .button,
  .schedule-form > .button {
    align-self: stretch;
  }

  .override-actions .button {
    flex: 1 1 100%;
  }

  .readiness-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .readiness-detail {
    text-align: left;
  }

  .hero,
  .error-state {
    padding-block: var(--space-7);
  }
}

@media (min-width: 90rem) {
  :root {
    --booking-width: 46rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}