/* ══════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Paleta alinhada ao padrão OS-MVMSTI — bancada de diagnóstico (grafite + ciano) */
  --bg: #121926;
  --surface: #1d2536;
  --surface2: #28324a;
  --border: #3a4661;
  --border2: #4d5c7e;
  --hover-overlay: rgba(255,255,255,.02);
  --shadow-color: rgba(0,0,0,.5);
  --shadow-color-strong: rgba(0,0,0,.6);

  --primary: #2ee0d2;
  --primary-hover: #22c7ba;
  --accent: #7c87f9;
  --accent-glow: rgba(46,224,210,.25);
  --primary-glow-08: rgba(46,224,210,.08);
  --primary-glow-12: rgba(46,224,210,.12);
  --primary-glow-15: rgba(46,224,210,.18);
  --primary-glow-18: rgba(46,224,210,.18);
  --primary-glow-25: rgba(46,224,210,.30);
  --primary-glow-30: rgba(46,224,210,.30);
  --primary-glow-45: rgba(46,224,210,.46);
  --accent-glow-10: rgba(124,135,249,.12);

  --text: #f3f5fb;
  --text-muted: #aab6cc;
  --text-dim: #7e8dab;
  --text-on-primary: #041412;

  --green: #34cc70; --green-bg: rgba(52,204,112,.16); --green-text: #86eeae; --green-border: rgba(52,204,112,.34); --green-bg-hover: rgba(52,204,112,.24);
  --red: #f0555a;   --red-bg: rgba(240,85,90,.16);   --red-text: #ffb0b3;  --red-border: rgba(240,85,90,.34);   --red-bg-hover: rgba(240,85,90,.24);
  --yellow: #f5a524; --yellow-bg: rgba(245,165,36,.17); --yellow-text: #fed687;
  --blue: #4c8bf7;  --blue-bg: rgba(76,139,247,.16);  --blue-text: #a4cbfd;
  --cyan: #2ee0d2;  --cyan-bg: rgba(46,224,210,.16);  --cyan-text: #7ff0e6;
  --gray-bg: rgba(255,255,255,.07); --gray-dot: #7a8aa8;

  --radius: 14px;
  --radius-sm: 9px;
  --font: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --spinner-track: rgba(255,255,255,.3);
  --spinner-active: #fff;
  --header-bg: rgba(18,25,38,.85);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════
   MODO CLARO
══════════════════════════════════════════════ */
[data-theme="light"] {
  --bg: #eef1f8;
  --surface: #ffffff;
  --surface2: #e7ebf4;
  --border: #d2d9e9;
  --border2: #b4bfd6;
  --hover-overlay: rgba(15,15,30,.025);
  --shadow-color: rgba(30,30,60,.10);
  --shadow-color-strong: rgba(30,30,60,.16);

  --primary: #0c8f83;
  --primary-hover: #0a776d;
  --accent: #4740d1;
  --accent-glow: rgba(12,143,131,.25);
  --primary-glow-08: rgba(12,143,131,.09);
  --primary-glow-12: rgba(12,143,131,.12);
  --primary-glow-15: rgba(12,143,131,.16);
  --primary-glow-18: rgba(12,143,131,.16);
  --primary-glow-25: rgba(12,143,131,.25);
  --primary-glow-30: rgba(12,143,131,.30);
  --primary-glow-45: rgba(12,143,131,.38);
  --accent-glow-10: rgba(71,64,209,.1);

  --text: #0f1728;
  --text-muted: #556285;
  --text-dim: #7c89a8;
  --text-on-primary: #ffffff;

  --green-bg: rgba(22,163,74,.13); --green-text: #127034; --green-border: rgba(22,163,74,.34); --green-bg-hover: rgba(22,163,74,.22);
  --red-bg: rgba(239,68,68,.13);  --red-text: #ad1a1a;  --red-border: rgba(239,68,68,.34);   --red-bg-hover: rgba(239,68,68,.22);
  --yellow-bg: rgba(245,158,11,.16); --yellow-text: #8a3d0c;
  --blue-bg: rgba(59,130,246,.13); --blue-text: #1745c7;
  --cyan-bg: rgba(12,143,131,.14); --cyan-text: #0a776d;
  --gray-bg: rgba(15,15,30,.06); --gray-dot: #5c6b8a;

  --header-bg: rgba(238,241,248,.85);

  color-scheme: light;
}

html { font-size: 15px; transition: background-color .2s ease; }
body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; }

/* ══════════════════════════════════════════════
   BOTÃO DE TROCAR TEMA (sol / lua)
══════════════════════════════════════════════ */
.btn-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-theme-toggle:hover { color: var(--text); border-color: var(--primary); }
.btn-theme-toggle svg { width: 18px; height: 18px; }
.btn-theme-toggle .icon-sun { display: none; }
.btn-theme-toggle .icon-moon { display: block; }
[data-theme="light"] .btn-theme-toggle .icon-sun { display: block; }
[data-theme="light"] .btn-theme-toggle .icon-moon { display: none; }

/* ══════════════════════════════════════════════
   LOGIN / HOME SCREENS
══════════════════════════════════════════════ */
.login-bg {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--primary-glow-18) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 80% 80%, var(--accent-glow-10) 0%, transparent 70%);
  pointer-events: none;
}

#screen-login, #screen-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 24px 80px var(--shadow-color), 0 0 0 1px var(--accent-glow);
}

.login-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
}
.logo-mark {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
.logo-sub { font-size: .75rem; color: var(--text-muted); }

.login-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.02em; }
.login-desc { font-size: .875rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.55; }
.login-footer {
  margin-top: 28px; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: .75rem; color: var(--text-dim);
}

/* ══════════════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.field-hint { font-size: .72rem; color: var(--text-dim); margin-top: 2px; }

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="date"], input[type="number"],
input[type="color"], select, textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: .9rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
textarea { resize: vertical; min-height: 70px; font-family: var(--font); }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238585a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.5); cursor: pointer; }
input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }

.input-wrap { position: relative; }
.input-wrap input { padding-right: 44px; }
.btn-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 4px; transition: color .15s;
}
.btn-eye:hover { color: var(--text); }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.checkbox-row label { font-size: .85rem; color: var(--text); cursor: pointer; }

.checkbox-list {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px; max-height: 220px; overflow-y: auto;
}
.checkbox-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .12s;
}
.checkbox-list-item:hover { background: var(--surface2); }
.checkbox-list-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.checkbox-list-item .item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.checkbox-list-item .item-nome { font-size: .85rem; color: var(--text); }
.checkbox-list-item .item-desc { font-size: .75rem; color: var(--text-muted); margin-top: 1px; }
.checkbox-list-item .item-valor { font-size: .82rem; color: var(--accent); font-weight: 600; flex-shrink: 0; white-space: nowrap; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--text-on-primary);
  font-family: var(--font); font-size: .9rem; font-weight: 600;
  border: none; border-radius: var(--radius-sm);
  padding: 11px 20px; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 16px var(--primary-glow-30);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 20px var(--primary-glow-45); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary.full { width: 100%; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: .85rem; font-weight: 500;
  padding: 9px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-secondary:hover { border-color: var(--primary); background: var(--primary-glow-08); }

.btn-danger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--red-bg); color: var(--red-text);
  border: 1px solid var(--red-border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: .82rem; font-weight: 500;
  padding: 7px 14px; cursor: pointer; transition: background .15s;
}
.btn-danger:hover { background: var(--red-bg-hover); }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; transition: color .12s, border-color .12s;
}
.btn-icon:hover { color: var(--text); border-color: var(--primary); }

.btn-whatsapp {
  background: var(--green-bg); border-color: var(--green-border); color: var(--green-text);
}
.btn-whatsapp:hover { background: var(--green-bg-hover); border-color: var(--green-border); color: var(--green-text); }

.btn-logout {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-family: var(--font); font-size: .82rem; font-weight: 500;
  padding: 7px 14px; cursor: pointer; transition: color .15s, border-color .15s;
}
.btn-logout:hover { color: var(--text); border-color: var(--border2); }

/* ══════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════ */
.alert-error {
  background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red-text);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: .85rem;
}
.alert-success {
  background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green-text);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: .85rem;
}

/* ══════════════════════════════════════════════
   SPINNERS
══════════════════════════════════════════════ */
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--spinner-track);
  border-top-color: var(--spinner-active); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block;
}
.spinner.dark { border-color: rgba(0,0,0,.15); border-top-color: var(--primary); }
.big-spinner {
  width: 36px; height: 36px; border: 3px solid var(--border2);
  border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.header-logo { display: flex; align-items: center; gap: 10px; }
.header-title { font-weight: 600; font-size: .95rem; }
.logo-mark.small { width: 28px; height: 28px; }

/* ══════════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════════ */
.main {
  max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px;
  display: flex; flex-direction: column; gap: 24px;
}

.section-label {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--primary); margin-bottom: 20px;
}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}

.resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 40px; }
.stat-label { overflow-wrap: break-word; }
.card-stat { 
  background: var(--surface); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 24px; 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  gap: 12px; 
  position: relative; 
  overflow: hidden; 
}
.card-stat::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 4px; 
  background: var(--stat-c, var(--primary)); 
  opacity: 0.8; 
}
.card-stat:hover { 
  border-color: var(--stat-c); 
  transform: translateY(-5px); 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); 
}
.card-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--stat-c, var(--primary)) 15%, transparent); color: var(--stat-c, var(--primary)); order: 2; }
.card-stat-icon svg { width: 17px; height: 17px; }
.card-stat-body { order: 1; min-width: 0; }
.stat-label { font-size: .75rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.cliente-banner {
  background: linear-gradient(135deg, var(--primary-glow-15), var(--accent-glow-10));
  border: 1px solid var(--primary-glow-25); border-radius: var(--radius);
  padding: 20px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cliente-doc { font-family: var(--mono); font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; }
.cliente-info { font-size: .82rem; color: var(--text-muted); }
.cliente-plano { font-size: .78rem; color: var(--text-muted); margin-top: 4px; background: var(--primary-glow-08); border: 1px solid var(--primary-glow-18); border-radius: 6px; padding: 4px 10px; display: inline-block; }

/* ══════════════════════════════════════════════
   STATE MESSAGES
══════════════════════════════════════════════ */
.state-msg {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: .9rem; gap: 12px;
}
.state-icon { font-size: 2rem; }

.result-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; min-height: 180px;
  display: flex; flex-direction: column;
}

/* ══════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════ */
.table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.table-info { font-size: .82rem; color: var(--text-muted); }
.table-scroll { overflow-x: auto; }

/* Abas em aberto / arquivadas */
.cobranca-tabs { display: flex; gap: 4px; }
.tab-aba-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: .82rem;
  font-weight: 500; cursor: pointer; transition: all .15s;
}
.tab-aba-btn:hover { background: var(--surface2); color: var(--text); }
.tab-aba-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: rgba(255,255,255,.2); font-size: .72rem; font-weight: 700;
}
.tab-aba-btn:not(.active) .tab-count { background: var(--surface2); color: var(--text-muted); }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead th {
  text-align: left; padding: 12px 16px; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.table tbody tr:hover { background: var(--hover-overlay); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody td { padding: 13px 16px; vertical-align: middle; color: var(--text); }
.td-desc { max-width: 260px; }
.td-desc-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.td-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.td-actions { display: flex; gap: 6px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-green  { background: var(--green-bg);  color: var(--green-text); } .badge-green::before  { background: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red-text); }    .badge-red::before    { background: var(--red); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow-text); } .badge-yellow::before { background: var(--yellow); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue-text); }   .badge-blue::before   { background: var(--blue); }
.badge-cyan   { background: var(--cyan-bg);   color: var(--cyan-text); }   .badge-cyan::before   { background: var(--cyan); }
.badge-gray   { background: var(--gray-bg);   color: var(--text-muted); } .badge-gray::before { background: var(--gray-dot); }

.btn-detail {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-family: var(--font); font-size: .78rem; font-weight: 500;
  padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s, background .12s;
}
.btn-detail:hover { color: var(--text); border-color: var(--primary); background: var(--primary-glow-08); }

/* ══════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 80px var(--shadow-color-strong); animation: slideUp .2s ease;
}
.modal.modal-lg { max-width: 720px; }
.modal.modal-large { max-width: 680px; }
.tabs-sm .tab-btn { padding: 6px 14px; font-size: .82rem; }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 24px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface);
}
.modal-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.btn-close {
  background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: color .12s, background .12s;
}
.btn-close:hover { color: var(--text); background: var(--surface2); }
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

.detail-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; padding-bottom: 0; }
.detail-key { font-size: .78rem; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.detail-val { font-size: .875rem; text-align: right; font-weight: 500; }
.detail-val.mono { font-family: var(--mono); font-size: .82rem; word-break: break-all; }

.btn-boleto, .btn-copy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm); font-family: var(--font); font-size: .875rem; font-weight: 600;
  padding: 11px 20px; cursor: pointer; text-decoration: none; width: 100%; transition: background .15s;
}
.btn-boleto { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green-text); }
.btn-boleto:hover { background: var(--green-bg-hover); }
.btn-copy { background: var(--surface2); border: 1px solid var(--border2); color: var(--text-muted); font-weight: 500; }
.btn-copy:hover { color: var(--text); border-color: var(--primary); }

/* Fundo sempre branco propositalmente: QR Codes precisam de bom contraste para serem escaneados, independente do tema ativo */
.pix-qrcode { display: flex; justify-content: center; padding: 16px; background: #fff; border-radius: 12px; }
.pix-qrcode img, .pix-qrcode canvas { max-width: 220px; }

/* ══════════════════════════════════════════════
   SIDEBAR COLAPSÁVEL
══════════════════════════════════════════════ */
.btn-sidebar-toggle {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color .15s;
}
.btn-sidebar-toggle:hover { color: var(--text); }

.btn-sidebar-toggle-mobile {
  color: var(--text-muted);
  margin-right: 4px;
}

/* Estado recolhido no desktop */
.sidebar-collapsed {
  width: 64px !important;
  padding-left: 8px;
  padding-right: 8px;
}
.sidebar-collapsed .sidebar-logo {
  align-items: center;
  padding-bottom: 20px;
}
.sidebar-collapsed .sidebar-logo-top {
  justify-content: center;
  gap: 0;
}
.sidebar-collapsed .logo-name,
.sidebar-collapsed .btn-theme-toggle,
.sidebar-collapsed .btn-alertas,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar-logo-actions {
  display: none !important;
}
.sidebar-collapsed .logo-mark { display: none !important; }
.sidebar-collapsed .btn-sidebar-toggle {
  margin: 0 auto;
}
.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px;
  position: relative;
}
/* Tooltip ao passar mouse em modo recolhido */
.sidebar-collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: .78rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sidebar-collapsed .nav-item:hover::after { opacity: 1; }
.sidebar-collapsed .sidebar-footer { padding-top: 12px; }

/* Overlay para drawer mobile */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }

/* ══════════════════════════════════════════════
   ADMIN — SIDEBAR LAYOUT
══════════════════════════════════════════════ */
.admin-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; background: var(--surface); border-right: 1px solid var(--border);
  padding: 24px 16px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  transition: width .2s cubic-bezier(.4,0,.2,1), padding .2s;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.sidebar-logo {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 8px 24px; position: relative; overflow: visible;
}
.sidebar-logo-top {
  display: flex; align-items: center; gap: 8px;
}
.sidebar-logo-top .logo-name { font-size: .95rem; flex: 1; }
.sidebar-logo-actions {
  display: none; /* oculto no desktop — sino e lua ficam na linha top */
  align-items: center; gap: 6px; padding-top: 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--primary-glow-12); color: var(--primary); }
.nav-item svg { flex-shrink: 0; }
.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }

/* Botão de alertas (sino) com contador */
.btn-alertas { position: relative; flex-shrink: 0; }
.badge-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff; font-size: .62rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  line-height: 1; border: 2px solid var(--surface);
}

/* Cabeçalho e barra de abas mobile — ocultos por padrão, aparecem só em telas pequenas */
.mobile-topbar { display: none; }
.mobile-tabbar {
  display: none;
  position: sticky; top: 60px; z-index: 80;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 4px; overflow-x: auto;
  scrollbar-width: none;
}
.mobile-tabbar::-webkit-scrollbar { display: none; }
.mobile-tabbar .nav-item {
  flex-direction: column; gap: 4px; padding: 10px 14px;
  font-size: .65rem; border-radius: 0; background: none;
  min-width: 72px; text-align: center; white-space: nowrap;
}
.mobile-tabbar .nav-item.active { border-bottom: 2px solid var(--primary); background: none; color: var(--primary); }

.admin-content { flex: 1; padding: 32px 36px; max-width: none; margin: 0; width: 100%; }
.admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.admin-page-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.admin-page-desc { font-size: .85rem; color: var(--text-muted); margin-top: 4px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tab-btn {
  padding: 10px 16px; background: none; border: none; color: var(--text-muted);
  font-family: var(--font); font-size: .85rem; font-weight: 500; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field.full { grid-column: span 2; }

.search-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.search-bar input { flex: 1; }

.logo-preview {
  width: 64px; height: 64px; border-radius: 12px; background: var(--surface2);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }

/* Paleta de cores de marca */
.paleta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.paleta-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.paleta-item:hover { background: var(--surface2); }
.paleta-item.selecionada { border-color: var(--primary); background: var(--primary-glow-08); }
.paleta-swatch { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.paleta-swatch-custom {
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--surface2); border: 1px dashed var(--border2);
}
.paleta-item span { font-size: .68rem; color: var(--text-muted); text-align: center; }

.cor-preview-card {
  margin-top: 16px; padding: 16px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cor-preview-label { font-size: .72rem; color: var(--text-muted); width: 100%; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Faturamento (dashboard) */
.faturamento-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.faturamento-resumo { display: flex; gap: 24px; margin: 16px 0 8px; flex-wrap: wrap; }
.faturamento-resumo > div { min-width: 0; }
#faturamento-grafico-container { width: 100%; overflow-x: auto; }
#faturamento-grafico { width: 100%; height: auto; aspect-ratio: 700 / 220; display: block; min-width: 300px; }
.grafico-barra { fill: var(--primary); transition: fill .15s; }
.grafico-barra:hover { fill: var(--primary-hover); }
.grafico-label { font-size: 10px; fill: var(--text-muted); font-family: var(--font); }
.grafico-valor { font-size: 10px; fill: var(--text); font-family: var(--font); font-weight: 600; }
.grafico-eixo { stroke: var(--border); stroke-width: 1; }

/* Painel suspenso de alertas de vencimento */
.alertas-painel {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,.35); z-index: 250; padding: 8px;
}
.alertas-painel-header { padding: 8px 10px; font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.alerta-item { padding: 10px; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 4px; }
.alerta-item:hover { background: var(--surface2); }
.alerta-item-nome { font-size: .85rem; font-weight: 600; }
.alerta-item-info { font-size: .75rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.alerta-vazio { padding: 24px; text-align: center; font-size: .82rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .resumo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-layout { flex-direction: column; }

  /* Sidebar vira drawer mobile */
  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    padding: 20px 16px;
  }
  .sidebar.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.3);
  }
  .sidebar .nav-label { display: inline !important; }
  .sidebar .logo-name { display: block !important; }
  .sidebar-logo-actions { display: flex !important; }
  .sidebar-collapsed { width: 260px !important; }

  /* Esconde botão de recolher desktop no drawer mobile */
  .sidebar .btn-sidebar-toggle { display: none; }
  .sidebar .sidebar-logo { padding-top: 16px; }

  .btn-sidebar-toggle-mobile { display: flex; }

  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 90;
  }
  .mobile-topbar-logo { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mobile-topbar-logo .logo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
  .mobile-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; }

  /* Tabbar mobile desativada — topbar já tem toda a navegação */
  .mobile-tabbar { display: none !important; }

  .alertas-painel { right: 0; left: auto; width: 300px; }

  .admin-content { padding: 20px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field.full { grid-column: span 1; }
}

@media (max-width: 560px) {
  .login-card { padding: 28px 20px; }
  .resumo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 20px 16px 48px; }
  .header-inner { padding: 12px 16px; }
  .faturamento-resumo { gap: 16px; }
  .faturamento-resumo > div { flex: 1 1 calc(50% - 8px); }
}

/* ══════════════════════════════════════════════════════════
   MELHORIAS MOBILE — baseadas no padrão OS-MVMSTI
══════════════════════════════════════════════════════════ */

/* Sidebar com transição mais suave no mobile */
.sidebar {
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}

/* Indicador de auto-atualização "ao vivo" */
.auto-refresh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.auto-refresh-badge .dot-refresh {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  animation: pulse-refresh 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-refresh {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.65); }
}
.auto-refresh-badge.atualizando .dot-refresh {
  animation: spin .6s linear infinite;
  border: 2px solid var(--primary-glow-18);
  border-top-color: var(--primary);
  background: transparent;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Posiciona o badge na topbar mobile */
.mobile-topbar-actions .auto-refresh-badge {
  font-size: .6rem;
  padding: 2px 6px;
}

/* ── Mobile extra (≤ 560px) ── */
/* ══════════════════════════════════════════════════════════
   Tabelas que viram cards empilhados no mobile.
   Ative com class="table table-cards" e adicione data-label="..."
   em cada <td> (o texto vira o rótulo mostrado ao lado do valor).
══════════════════════════════════════════════════════════ */
/* Evita o zoom automático que o iOS/Safari aplica ao focar em campos
   com font-size menor que 16px — mantém o tamanho de texto original
   em telas maiores e só aumenta no mobile. */
@media (max-width: 600px) {
  input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="date"], input[type="number"],
  select, textarea {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tbody tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 4px 14px; margin-bottom: 10px;
  }
  .table-cards tbody tr:last-child { margin-bottom: 0; }
  .table-cards td {
    border-bottom: 1px dashed var(--border); padding: 9px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right;
  }
  .table-cards tr td:last-child { border-bottom: none; }
  .table-cards td[data-label]::before {
    content: attr(data-label);
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-dim); flex-shrink: 0; text-align: left;
  }
  /* Células sem rótulo (ex: linha "vazia" com colspan) continuam centralizadas normalmente */
  .table-cards td:not([data-label]) { display: block; text-align: center; }
  .table-cards .td-desc { max-width: none; }
  .table-cards .td-desc-text { white-space: normal; }
  .table-cards .td-actions { justify-content: flex-end; padding: 10px 0; gap: 6px; }
}

/* ── Mobile extra (≤ 560px) ── */
@media (max-width: 560px) {


  /* Conteúdo com padding inferior para não ficar atrás da barra do sistema */
  .admin-content {
    padding: 16px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Tabelas menores */
  .table th, .table td {
    padding: 9px 10px;
    font-size: .78rem;
  }

  /* Header de página empilhado */
  .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Busca em coluna */
  .search-bar {
    flex-direction: column;
  }
  .search-bar select {
    max-width: 100% !important;
  }

  /* Cards de stat: 2 colunas sempre */
  .resumo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .stat-value { font-size: 1.2rem; }

  /* Modal de gaveta (sobe de baixo) — padrão OS-MVMSTI */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal, .modal.modal-lg {
    max-width: 100% !important;
    max-height: 93vh;
    border-radius: 16px 16px 0 0;
  }

  /* Faturamento: resumo em 2 colunas no mobile */
  .faturamento-resumo {
    flex-wrap: wrap;
  }
  .faturamento-resumo > div {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
  }

  /* Formulário de cobrança: grid em coluna */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Nome da empresa na topbar mobile */
  .mobile-topbar-logo .logo-name {
    max-width: 100px;
    font-size: .78rem;
  }

  /* Logo menor */
  .logo-mark.small { width: 26px; height: 26px; }

  /* Cabeçalho do portal do cliente: permite quebrar linha em telas
     estreitas em vez de espremer/cortar os botões */
  .header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .header-inner > div[style*="display:flex"],
  .header-inner > div[style*="display: flex"] {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Alvos de toque maiores para dedos (ícones, botões pequenos) */
  .btn-icon, .btn-theme-toggle, .btn-close {
    min-width: 38px; min-height: 38px;
  }
  .btn-logout, .btn-secondary, .btn-danger, .btn-detail {
    min-height: 40px;
  }

  /* Ações do rodapé de modal empilham em telas bem estreitas para não
     ficarem espremidas lado a lado */
  .modal-footer {
    flex-wrap: wrap;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary,
  .modal-footer .btn-danger {
    flex: 1 1 auto;
  }

  /* Botão principal do cabeçalho de página (+ Novo cliente etc.) ocupa
     a largura toda no mobile — mais fácil de tocar */
  .admin-page-header .btn-primary {
    width: 100%;
  }

  /* Cartões de resumo com respiro adequado mesmo com números grandes */
  .card-stat { padding: 16px 14px; }
}

/* ── Telas muito estreitas (≤ 380px) ── */
@media (max-width: 380px) {
  .resumo-cards { grid-template-columns: 1fr !important; }
  .login-card { padding: 24px 18px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar-actions { gap: 6px; }
  .btn-menu-toggle, .btn-theme-toggle, .btn-icon { width: 34px; height: 34px; }
  .sidebar-empresa-nome { max-width: 90px; font-size: .82rem; }
  .stat-value { font-size: 1.05rem; }
  .cliente-doc { font-size: 1rem; }
  .paleta-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Garante que a área segura do sistema (notch/gestos) nunca sobreponha
   os botões no rodapé dos modais, em qualquer tamanho de tela */
.modal-footer {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.main {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════
   NOVO LAYOUT TELA INICIAL (HERO + CARD)
══════════════════════════════════════════════ */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 100%;
  max-width: 1100px;
  padding: 40px;
  z-index: 5;
}

.login-hero {
  flex: 1;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero-text {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-glow-18);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  #screen-home {
    display: block !important;
    height: auto !important;
    min-height: 100vh;
    padding: 40px 16px !important;
    overflow-y: visible !important;
  }

  .login-container {
    flex-direction: column;
    gap: 32px;
    padding: 20px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
  }
  
  .login-hero {
    max-width: 100%;
    align-items: center;
    gap: 24px;
  }

  .hero-content {
    gap: 12px;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }

  .hero-text {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .hero-features {
    align-items: center;
    display: none; /* Esconde features no mobile para focar no login */
  }
  
  .login-logo {
    justify-content: center;
    margin-bottom: 0;
  }

  .login-card {
    width: 100%;
    margin: 0;
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem;
  }
  .hero-text {
    font-size: 0.9rem;
  }
  .login-container {
    padding: 16px;
    gap: 24px;
  }
}