/* =========================================================
   SoldiCapri — Wireframes Global CSS
   Tema claro · Paleta Residencial Sol di Capri
   ========================================================= */

/* ---------------------------------------------------------
   1. CSS Variables
   --------------------------------------------------------- */
:root {
  /* ── Brand Palette · Residencial Sol di Capri ── */
  --brand-navy:    #1C3A5A;
  --brand-blue:    #2E5B82;
  --brand-gold:    #D28E3A;
  --brand-sun:     #F9C95B;
  --brand-wood:    #5D4336;
  --brand-cream:   #F5F1EA;
  --brand-white:   #FFFFFF;
  --brand-slate:   #333333;
  --brand-neutral: #E3D8C8;

  /* ── Backgrounds ── */
  --bg-base:       #F5F1EA;
  --bg-sidebar:    #1C3A5A;
  --bg-card:       #FFFFFF;
  --bg-inner:      #F4EBDD;
  --bg-elevated:   #FCF8F1;
  --bg-highlight:  #E5ECF5;
  --bg-accent-soft:#F8E6C5;

  /* ── Borders ── */
  --border-subtle: #E8DCCB;
  --border-default:#CFB591;
  --border-muted:  #A48567;

  /* ── Text ── */
  --text-primary:  #1C3A5A;
  --text-secondary:#5D4336;
  --text-muted:    #6E645A;
  --text-dim:      #9E8C79;
  --text-on-dark:  #F8F3EB;
  --text-on-accent:#FFFFFF;

  /* ── Blue (alias para compatibilidade) ── */
  --blue:          #2E5B82;
  --blue-light:    #5B7A9D;
  --blue-pale:     #D4E0EC;
  --blue-dark:     #1C3A5A;
  --blue-darker:   #17314D;
  --blue-deep:     #11253C;

  /* ── Gold / Accent ── */
  --yellow:        #D28E3A;
  --yellow-light:  #F2BE63;
  --yellow-pale:   #F8E6C5;
  --yellow-dark:   #A86C24;

  /* ── Green ── */
  --green:         #1E7A4F;
  --green-light:   #27AE60;
  --green-pale:    #A9DFBF;
  --green-dark:    #144D32;

  /* ── Red ── */
  --red:           #C0392B;
  --red-light:     #E74C3C;
  --red-pale:      #FADBD8;
  --red-dark:      #7B241C;

  /* ── Tablet / warm accent alias ── */
  --purple:        #7A5A4C;
  --purple-light:  #B18F77;
  --purple-pale:   #EDE1D8;
  --purple-dark:   #5D4336;

  /* ── Orange ── */
  --orange:        #C57A2C;
  --orange-light:  #DFA04E;
  --orange-dark:   #8D5720;

  /* ── Effects ── */
  --shadow-soft:   0 10px 28px rgba(28,58,90,.08);
  --shadow-card:   0 14px 36px rgba(28,58,90,.10);
  --shadow-phone:  0 20px 60px rgba(28,58,90,.18);
  --shadow-rail:   -16px 0 36px rgba(28,58,90,.16);
  --overlay:       rgba(28,58,90,.20);
  --surface-glass: rgba(255,255,255,.92);
  --surface-glass-strong: rgba(255,255,255,.84);
  --surface-panel: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,241,231,.98));
  --surface-panel-quiet: linear-gradient(180deg, rgba(248,242,232,.94), rgba(241,232,217,.97));
  --surface-panel-strong: linear-gradient(180deg, rgba(233,240,248,.98), rgba(221,232,244,.98));
  --sidebar-line:  rgba(255,255,255,.10);
  --sidebar-hover: rgba(255,255,255,.10);
  --nav-hover-bg:  rgba(249,201,91,.18);
  --nav-hover-text: #FFFFFF;
  --focus-ring:    rgba(210,142,58,.22);
  --phone-frame: linear-gradient(180deg, #fff7ea, #dcc5a4 84%, #b98f64);
  --phone-inset: rgba(255,255,255,.64);
  --mobile-header-morador: linear-gradient(180deg, #17314d 0%, #11253c 100%);
  --mobile-header-prop: linear-gradient(180deg, #5d4336 0%, #493328 100%);
  --mobile-header-platform: linear-gradient(180deg, #1f4e60 0%, #183b4a 100%);
  --mobile-header-subtext: rgba(248,243,235,.72);
  --chip-surface: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,236,223,.96));
  --chip-surface-strong: linear-gradient(180deg, rgba(233,240,248,.96), rgba(223,233,245,.98));
  --chip-outline: rgba(28,58,90,.12);

  /* ── Spacing / Radius ── */
  --radius-sm:     6px;
  --radius:        8px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --radius-xl:     16px;
}

:root[data-theme="dark"] {
  --bg-base:       #191E26;
  --bg-sidebar:    #132741;
  --bg-card:       #223045;
  --bg-inner:      #2A3950;
  --bg-elevated:   #26344A;
  --bg-highlight:  #31445E;
  --bg-accent-soft:#4B3A2C;

  --border-subtle: #374A61;
  --border-default:#546A84;
  --border-muted:  #8A6B57;

  --text-primary:  #F7F1E7;
  --text-secondary:#DCC9AE;
  --text-muted:    #B9C4D1;
  --text-dim:      #8F9FB2;
  --text-on-dark:  #F7F1E7;
  --text-on-accent:#FFF9F0;

  --blue:          #5F84AD;
  --blue-light:    #7C9AB9;
  --blue-pale:     #D5E0EC;
  --blue-dark:     #F7F1E7;
  --blue-darker:   #0D2035;
  --blue-deep:     #0A1728;

  --yellow:        #D28E3A;
  --yellow-light:  #F9C95B;
  --yellow-pale:   #483927;
  --yellow-dark:   #F2BE63;

  --green-pale:    #234533;
  --red-pale:      #4C2A2A;
  --purple-pale:   #3E322D;

  --shadow-soft:   0 12px 28px rgba(0,0,0,.25);
  --shadow-card:   0 16px 34px rgba(0,0,0,.28);
  --shadow-phone:  0 20px 54px rgba(0,0,0,.36);
  --shadow-rail:   -16px 0 36px rgba(0,0,0,.34);
  --overlay:       rgba(6,10,18,.54);
  --surface-glass: rgba(34,48,69,.94);
  --surface-glass-strong: rgba(38,52,74,.92);
  --surface-panel: linear-gradient(180deg, rgba(33,46,66,.98), rgba(24,35,51,.98));
  --surface-panel-quiet: linear-gradient(180deg, rgba(30,43,60,.94), rgba(21,31,46,.96));
  --surface-panel-strong: linear-gradient(180deg, rgba(36,56,81,.98), rgba(27,42,62,.98));
  --sidebar-line:  rgba(249,201,91,.12);
  --sidebar-hover: rgba(249,201,91,.10);
  --nav-hover-bg:  rgba(249,201,91,.18);
  --nav-hover-text:#F7F1E7;
  --focus-ring:    rgba(249,201,91,.28);
  --phone-frame: linear-gradient(180deg, #f1dfb9, #927548 62%, #674c2b);
  --phone-inset: rgba(255,255,255,.06);
  --mobile-header-morador: linear-gradient(180deg, #102235 0%, #0c1b2b 100%);
  --mobile-header-prop: linear-gradient(180deg, #493329 0%, #38251d 100%);
  --mobile-header-platform: linear-gradient(180deg, #173948 0%, #112b36 100%);
  --mobile-header-subtext: rgba(247,241,231,.74);
  --chip-surface: linear-gradient(180deg, rgba(36,49,69,.96), rgba(27,39,57,.98));
  --chip-surface-strong: linear-gradient(180deg, rgba(42,61,87,.96), rgba(31,47,69,.98));
  --chip-outline: rgba(249,201,91,.10);
}

/* ---------------------------------------------------------
   2. Reset & Base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background:
    radial-gradient(circle at top left, rgba(249,201,91,.16), transparent 24%),
    radial-gradient(circle at top right, rgba(28,58,90,.12), transparent 26%),
    linear-gradient(180deg, var(--bg-base), var(--bg-base));
  color: var(--text-primary);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

::selection {
  background: rgba(210,142,58,.22);
  color: var(--text-primary);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--brand-gold); text-decoration: underline; }

button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
button, input, select, textarea {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* ---------------------------------------------------------
   3. Wireframe Nav (top bar comum a todas as telas)
   --------------------------------------------------------- */
.wf-nav {
  background: linear-gradient(90deg, var(--brand-navy), var(--blue-darker));
  border-bottom: 2px solid var(--brand-gold);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-soft);
}

.wf-nav-title {
  color: var(--brand-sun);
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  white-space: nowrap;
}

.wf-nav a {
  color: var(--blue-pale);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.wf-nav a:hover { background: var(--nav-hover-bg); color: var(--nav-hover-text); text-decoration: none; }
.wf-nav a.current { background: var(--brand-gold); color: var(--brand-navy); font-weight: 600; }
.wf-nav-sep { color: var(--blue-pale); font-size: 10px; }
.wf-nav-page {
  color: var(--text-on-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wf-nav-controls { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.wf-nav-copy { color: var(--blue-pale); font-size: 10px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(249,201,91,.26);
  background: rgba(255,255,255,.08);
  color: var(--text-on-dark);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.theme-toggle:hover {
  background: rgba(249,201,91,.14);
}

.theme-toggle-icon {
  font-size: 12px;
  line-height: 1;
  opacity: .62;
}

.theme-toggle-track {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.16);
}

.theme-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-sun), var(--brand-gold));
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
  transition: transform .18s ease;
}

.theme-toggle[data-theme-value="dark"] .theme-toggle-thumb {
  transform: translateX(18px);
}

.theme-toggle[data-theme-value="light"] .theme-toggle-icon--sun,
.theme-toggle[data-theme-value="dark"] .theme-toggle-icon--moon {
  opacity: 1;
}

.theme-toggle:focus-visible,
.btn:focus-visible,
.field-input:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
.review-rail-inline-btn:focus-visible,
.review-rail-close:focus-visible,
.review-rail-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* ---------------------------------------------------------
   4. Shell Layout (desktop)
   --------------------------------------------------------- */
.shell {
  display: flex;
  min-height: calc(100vh - 37px); /* desconta wf-nav */
}

.sidebar {
  width: 200px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--sidebar-line);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 12px 14px;
  border-bottom: 1px solid var(--sidebar-line);
}

.sidebar-brand-name  { font-size: 12px; font-weight: 700; color: var(--text-on-dark); }
.sidebar-brand-role  { font-size: 9px;  color: var(--blue-pale); margin-top: 1px; }

.sidebar-body { padding: 8px; flex: 1; overflow-y: auto; }

.sidebar-group { margin-top: 10px; }
.sidebar-group:first-child { margin-top: 4px; }

.sidebar-group-label {
  color: var(--blue-pale);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 6px;
  margin-bottom: 3px;
  opacity: .6;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}

.sidebar-item:hover { background: var(--sidebar-hover); }
.sidebar-item.active { background: var(--brand-gold); }

.sidebar-item-icon { font-size: 13px; flex-shrink: 0; }
.sidebar-item-label { font-size: 10px; color: var(--blue-pale); }
.sidebar-item.active .sidebar-item-label { color: var(--brand-navy); font-weight: 700; }
.sidebar-item.disabled { opacity: .4; cursor: not-allowed; }

.sidebar-item-badge {
  margin-left: auto;
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--text-on-accent);
}
.sidebar-item-badge.red    { background: var(--red-light); }
.sidebar-item-badge.yellow { background: var(--brand-gold); color: var(--brand-navy); }
.sidebar-item-badge.blue   { background: var(--blue-light); }

.sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--sidebar-line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--brand-navy);
  background: var(--brand-gold);
  flex-shrink: 0;
}

.sidebar-user-name { font-size: 10px; color: var(--text-on-dark); font-weight: 600; }
.sidebar-user-role { font-size: 9px;  color: var(--blue-pale); }

/* ---------------------------------------------------------
   5. Main Area
   --------------------------------------------------------- */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}

.topbar-left  { display: flex; align-items: center; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.breadcrumb { display: flex; align-items: center; gap: 6px; }
.breadcrumb-item { font-size: 11px; color: var(--text-muted); cursor: pointer; }
.breadcrumb-item:hover { color: var(--brand-navy); }
.breadcrumb-item.active { color: var(--brand-navy); font-weight: 600; cursor: default; }
.breadcrumb-sep { color: var(--brand-neutral); }

.content { padding: 20px 24px; flex: 1; overflow-y: auto; }

/* ---------------------------------------------------------
   6. Cards
   --------------------------------------------------------- */
.card {
  background: var(--surface-panel);
  border-radius: var(--radius-md);
  padding: 14px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

.card-inner {
  background: var(--surface-panel-quiet);
  border-radius: var(--radius);
  padding: 10px 12px;
  border: 1px solid var(--chip-outline);
}

.card-title { font-size: 12px; font-weight: 700; color: var(--brand-navy); margin-bottom: 10px; }
.card-subtitle { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }

/* Stat card (metric destaque) */
.stat-card {
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
}
.stat-card.red    { background: var(--red-pale);    border-color: var(--red-light);  }
.stat-card.yellow { background: var(--yellow-pale);  border-color: var(--brand-gold); }
.stat-card.blue   { background: var(--bg-highlight); border-color: var(--blue-light); }
.stat-card.gray   { background: var(--bg-inner);     border-color: var(--border-muted); }

.stat-card-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat-card.red    .stat-card-label { color: var(--red);         }
.stat-card.yellow .stat-card-label { color: var(--yellow-dark); }
.stat-card.blue   .stat-card-label { color: var(--blue-dark);   }
.stat-card.gray   .stat-card-label { color: var(--text-muted);  }
.stat-card.yellow .stat-card-label { color: var(--yellow-dark); }
.stat-card.blue   .stat-card-label { color: var(--blue-dark);   }
.stat-card.gray   .stat-card-label { color: var(--text-muted);  }

.stat-card-value { font-size: 26px; font-weight: 800; color: var(--brand-navy); margin: 4px 0; }

.stat-card-desc { font-size: 9px; }
.stat-card.red    .stat-card-desc { color: var(--red);          }
.stat-card.yellow .stat-card-desc { color: var(--yellow-dark);  }
.stat-card.blue   .stat-card-desc { color: var(--blue);         }
.stat-card.gray   .stat-card-desc { color: var(--text-muted);   }

/* List card (item de lista) */
.list-card {
  background: var(--surface-panel);
  border-radius: var(--radius);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid transparent;
  margin-bottom: 5px;
  border: 1px solid var(--chip-outline);
  box-shadow: var(--shadow-soft);
}
.list-card.red    { border-left-color: var(--red-light);  }
.list-card.yellow { border-left-color: var(--brand-gold); }
.list-card.blue   { border-left-color: var(--blue);       }
.list-card.green  { border-left-color: var(--green);      }
.list-card.gray   { border-left-color: var(--border-muted); }

.list-card-title { font-size: 10px; font-weight: 600; color: var(--brand-navy); margin-bottom: 2px; }
.list-card-meta  { font-size: 9px; color: var(--text-muted); }

/* ---------------------------------------------------------
   7. Badges / Status Pills
   --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  border: 1px solid transparent;
}

.badge.green  { background: linear-gradient(135deg, var(--green-pale), color-mix(in srgb, var(--green-pale) 68%, white)); color: var(--green-dark); border-color: color-mix(in srgb, var(--green) 24%, transparent); }
.badge.red    { background: linear-gradient(135deg, var(--red-pale), color-mix(in srgb, var(--red-pale) 72%, white)); color: var(--red); border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.badge.yellow { background: linear-gradient(135deg, var(--yellow-pale), color-mix(in srgb, var(--yellow-pale) 68%, white)); color: var(--yellow-dark); border-color: color-mix(in srgb, var(--brand-gold) 26%, transparent); }
.badge.blue   { background: var(--chip-surface-strong); color: var(--brand-navy); border-color: color-mix(in srgb, var(--blue) 24%, transparent); }
.badge.purple { background: linear-gradient(135deg, var(--purple-pale), color-mix(in srgb, var(--purple-pale) 68%, white)); color: var(--purple-dark); border-color: color-mix(in srgb, var(--purple-dark) 22%, transparent); }
.badge.gray   { background: var(--chip-surface); color: var(--text-muted); border-color: var(--border-default); }

.badge .pulse-dot {
  width: 6px; height: 6px;
  background: var(--green-light);
  border-radius: 50%;
}

/* ---------------------------------------------------------
   8. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s, box-shadow .18s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.btn:hover { opacity: .92; transform: translateY(-1px); }

.btn.primary  { background: linear-gradient(135deg, var(--brand-navy), var(--blue));  color: var(--text-on-accent); }
.btn.secondary{ background: var(--chip-surface); color: var(--brand-navy); border: 1px solid var(--border-default); }
.btn.success  { background: linear-gradient(135deg, var(--green), var(--green-light)); color: var(--text-on-accent); }
.btn.danger   { background: linear-gradient(135deg, var(--red), var(--red-light)); color: var(--text-on-accent); }
.btn.ghost    { background: transparent; color: var(--brand-navy); border: 1px dashed var(--blue); box-shadow: none; }
.btn.link     { background: transparent;       color: var(--blue);       padding: 0; font-weight: 400; }
.btn.accent   { background: var(--brand-gold); color: var(--brand-navy); font-weight: 700; }
.btn.sm       { padding: 5px 10px; font-size: 10px; }
.btn.full     { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------
   9. Form Elements
   --------------------------------------------------------- */
.field { margin-bottom: 12px; }
.field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.field-label .required { color: var(--red-light); margin-left: 2px; }

.field-input {
  background: var(--bg-inner);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-primary);
  width: 100%;
}

.field-input.placeholder { color: var(--text-muted); }
.field-input.focus { border-color: var(--blue); }

.field-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.field-select::after { content: '▾'; color: var(--text-dim); font-size: 10px; }

/* ---------------------------------------------------------
   10. Progress Bar
   --------------------------------------------------------- */
.progress-bar {
  background: var(--bg-inner);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}

.progress-fill { height: 100%; border-radius: 4px; }
.progress-fill.blue   { background: var(--blue);  }
.progress-fill.green  { background: var(--green); }
.progress-fill.multi  { background: linear-gradient(90deg, var(--green) 67%, var(--red) 67% 89%, var(--border-muted) 89%); }

/* ---------------------------------------------------------
   11. Avatar
   --------------------------------------------------------- */
.avatar {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text-on-accent); flex-shrink: 0;
}
.avatar.sm  { width: 24px; height: 24px; font-size: 9px;  background: var(--brand-gold);  color: var(--brand-navy); }
.avatar.md  { width: 32px; height: 32px; font-size: 11px; background: var(--brand-gold);  color: var(--brand-navy); }
.avatar.lg  { width: 40px; height: 40px; font-size: 14px; background: var(--brand-navy);  color: var(--text-on-accent); }

/* ---------------------------------------------------------
   12. Notification Bell
   --------------------------------------------------------- */
.notif-bell { position: relative; cursor: pointer; }
.notif-bell .dot {
  position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px;
  background: var(--red-light); border-radius: 50%;
  border: 1px solid var(--bg-card);
}

/* ---------------------------------------------------------
   13. Mobile Phone Mockup
   --------------------------------------------------------- */
.phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.phone-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--chip-outline);
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-navy);
}

.phone {
  width: 240px;
  position: relative;
  background: var(--surface-panel-quiet);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid transparent;
  box-shadow: var(--shadow-phone);
}

.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--phone-frame);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.phone::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  border: 1px solid var(--phone-inset);
  pointer-events: none;
}

.phone-statusbar {
  padding: 6px 16px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  background: transparent !important;
}

.phone-header {
  padding: 10px 14px 14px;
}

.phone-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-panel-quiet);
}

.phone-nav {
  display: grid;
  padding: 8px 4px 10px;
  background: var(--surface-panel);
  border-top: 1px solid var(--border-subtle);
}

.phone-nav-item { text-align: center; padding: 4px 2px; border-radius: 12px; }
.phone-nav-icon { font-size: 16px; }
.phone-nav-label { font-size: 7px; margin-top: 1px; color: var(--text-muted); }
.phone-nav-item.active {
  background: color-mix(in srgb, var(--chip-surface-strong) 82%, transparent);
}
.phone-nav-item.active .phone-nav-label { color: var(--brand-navy); font-weight: 700; }

.search-chip {
  background: var(--chip-surface);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-muted);
  padding: 8px 12px;
  font-size: 10px;
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------
   14. Section / Flow diagram helpers
   --------------------------------------------------------- */
.flow-group {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
}

.flow-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 12px;
  color: var(--brand-navy);
}

.flow-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.flow-node {
  background: var(--bg-inner);
  border-radius: var(--radius);
  padding: 8px 12px;
  text-align: center;
  min-width: 80px;
}

.flow-node-icon  { font-size: 15px; margin-bottom: 3px; }
.flow-node-label { font-size: 10px; font-weight: 600; color: var(--brand-navy); }
.flow-node-route { font-size: 8px;  color: var(--text-muted); margin-top: 1px; }
.flow-node.active { border: 1px solid var(--brand-gold); box-shadow: 0 0 0 2px var(--yellow-pale); }

.flow-arrow { color: var(--brand-gold); font-size: 16px; flex-shrink: 0; }

.flow-action {
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 9px;
  margin-bottom: 4px;
  min-width: 120px;
}
.flow-action.blue   { background: var(--bg-highlight); color: var(--brand-navy);  border: 1px solid var(--blue-light); }
.flow-action.green  { background: var(--green-pale);   color: var(--green-dark);  border: 1px solid var(--green-light); }
.flow-action.yellow { background: var(--yellow-pale);  color: var(--yellow-dark); border: 1px solid var(--brand-gold); }
.flow-action.gray   { background: var(--bg-inner);     color: var(--text-muted);  border: 1px solid var(--border-default); }

/* ---------------------------------------------------------
   15. Utility Classes
   --------------------------------------------------------- */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-1       { flex: 1; }
.flex-wrap    { flex-wrap: wrap; }

.gap-4  { gap: 4px;  }
.gap-6  { gap: 6px;  }
.gap-8  { gap: 8px;  }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.mb-4  { margin-bottom: 4px;  }
.mb-6  { margin-bottom: 6px;  }
.mb-8  { margin-bottom: 8px;  }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mt-4  { margin-top: 4px;  }
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

.text-primary   { color: var(--brand-navy);   }
.text-secondary { color: var(--brand-blue);  }
.text-muted     { color: var(--text-muted);  }
.text-dim       { color: var(--text-dim);    }
.text-blue      { color: var(--blue);        }
.text-gold      { color: var(--brand-gold);  }
.text-green     { color: var(--green);       }
.text-red       { color: var(--red);         }
.text-yellow    { color: var(--yellow-dark); }

.font-bold   { font-weight: 700; }
.font-medium { font-weight: 600; }
.text-xs  { font-size: 9px;  }
.text-sm  { font-size: 10px; }
.text-base{ font-size: 11px; }
.text-md  { font-size: 13px; }
.text-lg  { font-size: 16px; }
.text-xl  { font-size: 22px; }
.text-2xl { font-size: 28px; }

.uppercase { text-transform: uppercase; letter-spacing: .1em; }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.rounded  { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

.opacity-50 { opacity: .5; }
.opacity-40 { opacity: .4; }

.border-top { border-top: 1px solid var(--border-subtle); }
.border-left-red    { border-left: 3px solid var(--red-light);  }
.border-left-yellow { border-left: 3px solid var(--brand-gold); }
.border-left-blue   { border-left: 3px solid var(--blue);       }
.border-left-green  { border-left: 3px solid var(--green);      }
.border-left-gray   { border-left: 3px solid var(--border-muted); }
.border-left-gold   { border-left: 3px solid var(--brand-gold); }
.border-left-navy   { border-left: 3px solid var(--brand-navy); }

.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }

/* section label (uppercase small) */
.section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-blue);
  margin-bottom: 8px;
}

/* "em breve" overlay helper */
.coming-soon {
  opacity: .45;
  pointer-events: none;
}

/* ---------------------------------------------------------
   16. Brand Utilities (Sol di Capri)
   --------------------------------------------------------- */

/* Highlight strip — fundo dourado suave */
.bg-gold-soft   { background: var(--yellow-pale); }
.bg-navy        { background: var(--brand-navy); color: var(--text-on-accent); }
.bg-cream       { background: var(--brand-cream); }
.bg-highlight   { background: var(--bg-highlight); }

/* Divider dourado */
.divider-gold {
  border: none;
  border-top: 2px solid var(--brand-gold);
  margin: 12px 0;
}

/* Pill de acento dourado (ex: "NOVO", "URGENTE") */
.pill-gold {
  display: inline-block;
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-size: 8px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Tag de status navy */
.pill-navy {
  display: inline-block;
  background: var(--brand-navy);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Card com borda superior dourada (destaque) */
.card-accent {
  border-top: 3px solid var(--brand-gold);
}

/* Card com borda superior navy */
.card-navy {
  border-top: 3px solid var(--brand-navy);
}

/* Input focus brand */
.field-input:focus,
.field-input.focus {
  border-color: var(--brand-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44,94,143,.15);
}

/* Scrollbar suave (webkit) */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--bg-inner); }
::-webkit-scrollbar-thumb  { background: var(--brand-neutral); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }