/* =====================================================
   REVISA MAIS — PLATFORM CSS (Design System)
   Versão: 1.0 — 27/03/2026
   Cobre: sidebar, topbar, cards, badges, botões,
          formulários, tabelas, modais, toasts,
          skeletons, bottom nav mobile, tipografia
===================================================== */

/* =====================================================
   0. CUSTOM PROPERTIES
===================================================== */
:root {
  /* Cores */
  --navy:          #0D2240;
  --navy-mid:      #1A3A5C;
  --navy-light:    #244a73;
  --cyan:          #00C8C8;
  --cyan-light:    #E0FAFA;
  --cyan-hover:    #00b0b0;
  --white:         #FFFFFF;
  --bg:            #F5F7FA;
  --bg-card:       #FFFFFF;
  --border:        #E2E8F0;
  --border-focus:  #00C8C8;
  --text-primary:  #0D2240;
  --text-secondary:#4A5568;
  --text-muted:    #8A9BB0;
  --placeholder:   #A0AEC0;

  /* Semânticas */
  --green:         #38A169;
  --green-bg:      #C6F6D5;
  --green-text:    #276749;
  --yellow:        #D69E2E;
  --yellow-bg:     #FEFCBF;
  --yellow-text:   #975A16;
  --red:           #E53E3E;
  --red-bg:        #FED7D7;
  --red-text:      #9B2C2C;
  --gray-bg:       #E2E8F0;
  --gray-text:     #4A5568;

  /* Tipografia */
  --font-display:  'Poppins', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Layout */
  --sidebar-w:     240px;
  --topbar-h:      64px;
  --radius-sm:     6px;
  --radius:        8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(13,34,64,0.07);
  --shadow:     0 2px 10px rgba(13,34,64,0.09);
  --shadow-md:  0 4px 20px rgba(13,34,64,0.13);
  --shadow-lg:  0 8px 40px rgba(13,34,64,0.18);

  /* Espaçamentos */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px;

  /* Transições */
  --t-fast: 150ms ease-in-out;
  --t:      200ms ease-in-out;
  --t-slow: 300ms ease-in-out;
}

/* =====================================================
   1. RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-sm); }

/* =====================================================
   2. LAYOUT PRINCIPAL
===================================================== */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.app-layout--no-sidebar {
  display: block;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
}

/* Main */
.app-main {
  grid-area: main;
  padding: var(--s5);
  overflow-y: auto;
  background-color: var(--bg);
}

/* =====================================================
   3. SIDEBAR
===================================================== */
.sidebar {
  grid-area: sidebar;
  background-color: var(--navy);
  width: var(--sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  transition: width var(--t-slow);
}

/* Logo área */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  height: var(--topbar-h);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  text-decoration: none;
}

.sidebar__logo-icon {
  flex-shrink: 0;
}

.sidebar__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
}

.sidebar__brand {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.sidebar__tagline {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Nav */
.sidebar__nav {
  flex: 1;
  padding: var(--s3) 0;
  overflow-y: auto;
}

.sidebar__section {
  margin-bottom: var(--s3);
}

.sidebar__section-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  padding: var(--s2) var(--s4);
  display: block;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--s2) + 2px;
  gap: 10px;
  padding: 10px var(--s4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  border-left: 3px solid transparent;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

.sidebar__item:hover {
  background-color: rgba(255,255,255,0.06);
  color: var(--white);
  border-left-color: rgba(0,200,200,0.4);
}

.sidebar__item.active {
  background-color: var(--navy-mid);
  color: var(--white);
  border-left-color: var(--cyan);
}

.sidebar__item svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  flex-shrink: 0;
  color: inherit;
}

.sidebar__badge {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: var(--cyan);
  color: var(--navy);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  line-height: 1.6;
}

/* Footer da sidebar */
.sidebar__footer {
  padding: var(--s3) var(--s4);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.sidebar__user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--cyan);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.sidebar__user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar__logout {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.4);
  transition: background-color var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}

.sidebar__logout:hover {
  background-color: rgba(229,62,62,0.15);
  color: #FC8181;
}

.sidebar__logout svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* =====================================================
   4. TOPBAR
===================================================== */
.topbar {
  grid-area: topbar;
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding-inline: var(--s5);
  gap: var(--s4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background-color var(--t-fast);
}

.topbar__toggle:hover {
  background-color: var(--bg);
}

.topbar__toggle svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.topbar__title {
  flex: 1;
}

.topbar__page-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.topbar__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.topbar__breadcrumb a {
  color: var(--cyan);
  transition: color var(--t-fast);
}

.topbar__breadcrumb a:hover { color: var(--cyan-hover); }

.topbar__breadcrumb i,
.topbar__breadcrumb svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke-width: 2.5;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.topbar__icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.topbar__icon-btn:hover {
  background-color: var(--bg);
  color: var(--text-primary);
}

.topbar__icon-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.topbar__notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background-color: var(--red);
  border-radius: 50%;
  border: 2px solid var(--white);
}

.topbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--cyan);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.topbar__avatar:hover { opacity: 0.85; }

/* =====================================================
   5. BOTÕES
===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  min-height: 44px;
  transition: background-color var(--t), color var(--t),
              border-color var(--t), box-shadow var(--t), transform var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
}

.btn:active { transform: scale(0.97); }

.btn svg { width: 18px; height: 18px; stroke-width: 1.5; flex-shrink: 0; }

.btn--primary   { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.btn--primary:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); box-shadow: 0 3px 12px rgba(0,200,200,0.3); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: var(--white); }

.btn--ghost     { background: transparent; color: var(--cyan); border-color: transparent; padding-inline: var(--s2); }
.btn--ghost:hover { color: var(--cyan-hover); }

.btn--danger    { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--danger:hover { background: #C53030; border-color: #C53030; }

.btn--outline   { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn--outline:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.btn--sm        { font-size: 0.8125rem; padding: 0.4rem 0.875rem; min-height: 34px; }
.btn--sm svg    { width: 15px; height: 15px; }

.btn--lg        { font-size: 1rem; padding: 0.875rem 1.75rem; min-height: 52px; }
.btn--lg svg    { width: 20px; height: 20px; }

.btn--full      { width: 100%; justify-content: center; }
.btn--icon      { padding: 0; width: 44px; height: 44px; justify-content: center; }
.btn--icon svg  { width: 20px; height: 20px; }

.btn[disabled], .btn:disabled {
  background: var(--border) !important;
  color: var(--placeholder) !important;
  border-color: var(--border) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* =====================================================
   6. TIPOGRAFIA
===================================================== */
.h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--text-primary); }
.h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.text-sm   { font-size: 0.875rem; }
.text-xs   { font-size: 0.75rem; }
.text-muted { color: var(--text-muted); }
.text-cyan  { color: var(--cyan); }
.text-red   { color: var(--red); }
.text-green { color: var(--green); }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semi { font-weight: 600; }
.font-bold { font-weight: 700; }

/* =====================================================
   7. CARDS
===================================================== */
.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4);
  border-bottom: 1px solid var(--border);
  gap: var(--s3);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.card__body {
  padding: var(--s4);
}

.card__footer {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  background-color: var(--bg);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* KPI Card */
.kpi-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.kpi-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }

.kpi-card__icon--cyan   { background: var(--cyan-light); color: var(--navy); }
.kpi-card__icon--green  { background: var(--green-bg);   color: var(--green); }
.kpi-card__icon--yellow { background: var(--yellow-bg);  color: var(--yellow); }
.kpi-card__icon--navy   { background: rgba(13,34,64,0.08); color: var(--navy); }

.kpi-card__value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.kpi-card__delta {
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-card__delta svg { width: 14px; height: 14px; stroke-width: 2; }
.kpi-card__delta--up   { color: var(--green); }
.kpi-card__delta--down { color: var(--red); }
.kpi-card__delta--neutral { color: var(--text-muted); }

/* Turma Card */
.turma-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}

.turma-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(0,200,200,0.35);
  transform: translateY(-2px);
}

.turma-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
}

.turma-card__escola {
  display: flex;
  align-items: center;
  gap: var(--s1) + 2px;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.turma-card__escola svg { width: 15px; height: 15px; stroke-width: 1.5; color: var(--text-muted); }

.turma-card__materia {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.turma-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.turma-card__info-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.turma-card__info-row svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Barra de vagas */
.vagas-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vagas-bar__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.vagas-bar__track {
  width: 100%;
  height: 6px;
  background-color: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.vagas-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--green);
  transition: width 0.6s ease-out;
}

.vagas-bar__fill--yellow { background-color: var(--yellow); }
.vagas-bar__fill--red    { background-color: var(--red); }

.turma-card__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.turma-card__price span {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* =====================================================
   8. BADGES
===================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.6;
}

.badge svg { width: 12px; height: 12px; stroke-width: 2; }

.badge--aberta    { background: var(--green-bg);  color: var(--green-text); }
.badge--ultimas   { background: var(--yellow-bg); color: var(--yellow-text); }
.badge--lotada    { background: var(--red-bg);    color: var(--red-text); }
.badge--encerrada { background: var(--gray-bg);   color: var(--gray-text); }
.badge--cirurgica { background: var(--cyan-light); color: var(--navy); }
.badge--recorrente{ background: #EBF4FF; color: #2B6CB0; }
.badge--particular{ background: #FAF5FF; color: #553C9A; }
.badge--pendente  { background: var(--yellow-bg); color: var(--yellow-text); }
.badge--confirmado{ background: var(--green-bg);  color: var(--green-text); }
.badge--cancelado { background: var(--red-bg);    color: var(--red-text); }
.badge--admin     { background: rgba(13,34,64,0.1); color: var(--navy); }
.badge--professor { background: #EBF4FF; color: #2B6CB0; }
.badge--aluno     { background: var(--cyan-light); color: var(--navy); }

/* =====================================================
   9. FORMULÁRIOS
===================================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-label .required {
  color: var(--red);
  font-size: 0.9375rem;
  line-height: 1;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 48px;
  padding: 0 var(--s3);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  background-color: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--s2) var(--s3);
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--placeholder); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,200,200,0.15);
}

.form-input.error,
.form-select.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,62,62,0.12); }

.form-error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--red);
}

.form-error svg { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; }

.form-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Animação de loading em ícone */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

/* Select custom arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9BB0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Grid de formulário */
.form-grid { display: grid; gap: var(--s4); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* =====================================================
   10. TABELAS
===================================================== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background-color: var(--bg-card);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table thead th {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr {
  transition: background-color var(--t-fast);
}

.table tbody tr:hover { background-color: var(--bg); }

.table__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.table__action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.table__action-btn:hover { background-color: var(--bg); color: var(--text-primary); }
.table__action-btn--danger:hover { background-color: var(--red-bg); color: var(--red); }

.table__action-btn svg { width: 16px; height: 16px; stroke-width: 1.5; }

/* =====================================================
   11. MODAL
===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(13,34,64,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), visibility 0s var(--t);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  backdrop-filter: blur(4px);
  transition: opacity var(--t), visibility 0s 0s;
}

.modal {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(8px);
  transition: transform var(--t);
}

.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal--lg { max-width: 720px; }
.modal--sm { max-width: 420px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.modal__close:hover { background-color: var(--bg); color: var(--text-primary); }
.modal__close svg { width: 18px; height: 18px; stroke-width: 2; }

.modal__body {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.modal__footer {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
  background: var(--bg);
}

/* =====================================================
   12. TOAST / NOTIFICAÇÕES
===================================================== */
.toast-container {
  position: fixed;
  top: var(--s4);
  right: var(--s4);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--cyan);
  min-width: 300px;
  max-width: 420px;
  pointer-events: all;
  animation: toastIn var(--t) ease-out forwards;
}

.toast.removing { animation: toastOut var(--t) ease-in forwards; }

.toast--success { border-left-color: var(--green); }
.toast--error   { border-left-color: var(--red); }
.toast--warning { border-left-color: var(--yellow); }

.toast__icon { flex-shrink: 0; }
.toast__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.toast--success .toast__icon { color: var(--green); }
.toast--error   .toast__icon { color: var(--red); }
.toast--warning .toast__icon { color: var(--yellow); }
.toast          .toast__icon { color: var(--cyan); }

.toast__content { flex: 1; }
.toast__title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.toast__desc  { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

.toast__close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color var(--t-fast);
  flex-shrink: 0;
}

.toast__close:hover { background-color: var(--bg); }
.toast__close svg { width: 15px; height: 15px; stroke-width: 2; }

@keyframes toastIn  { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
@keyframes toastOut { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(20px); } }

/* =====================================================
   13. SKELETON / LOADING
===================================================== */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.skeleton--text   { height: 14px; margin-bottom: 6px; }
.skeleton--title  { height: 20px; margin-bottom: 10px; }
.skeleton--btn    { height: 44px; border-radius: var(--radius); }
.skeleton--card   { height: 160px; border-radius: var(--radius-md); }
.skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }

/* =====================================================
   14. PROGRESS BAR (multi-step form)
===================================================== */
.steps-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--s6);
}

.step-progress__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  position: relative;
}

.step-progress__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  right: -50%;
  height: 2px;
  background-color: var(--border);
  z-index: 0;
}

.step-progress__item.done::after,
.step-progress__item.active::after {
  background-color: var(--cyan);
}

.step-progress__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  transition: all var(--t);
}

.step-progress__item.active .step-progress__circle {
  border-color: var(--cyan);
  background-color: var(--cyan);
  color: var(--navy);
}

.step-progress__item.done .step-progress__circle {
  border-color: var(--cyan);
  background-color: var(--cyan-light);
  color: var(--navy);
}

.step-progress__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.step-progress__item.active .step-progress__label { color: var(--navy); font-weight: 600; }
.step-progress__item.done  .step-progress__label  { color: var(--green); }

/* =====================================================
   15. PAGINAÇÃO
===================================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.pagination__btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background-color: var(--white);
  transition: all var(--t-fast);
  cursor: pointer;
}

.pagination__btn:hover { border-color: var(--cyan); color: var(--navy); }
.pagination__btn.active { background-color: var(--navy); color: var(--white); border-color: var(--navy); }
.pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pagination__btn svg { width: 16px; height: 16px; stroke-width: 2; }

/* =====================================================
   16. ALERT / EMPTY STATE
===================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
}

.alert svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; margin-top: 1px; }
.alert__body { flex: 1; }
.alert__title { font-weight: 600; margin-bottom: 2px; }
.alert__desc  { font-size: 0.875rem; opacity: 0.85; }

.alert--info    { background: var(--cyan-light); border-color: rgba(0,200,200,0.35); color: var(--navy); }
.alert--success { background: var(--green-bg);   border-color: rgba(56,161,105,0.35); color: var(--green-text); }
.alert--warning { background: var(--yellow-bg);  border-color: rgba(214,158,46,0.35); color: var(--yellow-text); }
.alert--error   { background: var(--red-bg);     border-color: rgba(229,62,62,0.35);  color: var(--red-text); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s7) var(--s4);
  text-align: center;
}

.empty-state svg { width: 48px; height: 48px; stroke-width: 1.2; color: var(--text-muted); opacity: 0.6; }
.empty-state__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); }
.empty-state__desc  { font-size: 0.9375rem; color: var(--text-muted); max-width: 360px; line-height: 1.6; }

/* =====================================================
   17. AVATAR
===================================================== */
.avatar {
  border-radius: 50%;
  background-color: var(--cyan);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

.avatar--sm  { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar--md  { width: 44px; height: 44px; font-size: 1rem; }
.avatar--lg  { width: 56px; height: 56px; font-size: 1.25rem; }

/* =====================================================
   18. UPLOAD DROP ZONE
===================================================== */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--s6) var(--s4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

.dropzone:hover,
.dropzone.dragover { border-color: var(--cyan); background-color: var(--cyan-light); }

.dropzone__icon { color: var(--text-muted); }
.dropzone__icon svg { width: 40px; height: 40px; stroke-width: 1.2; }
.dropzone:hover .dropzone__icon,
.dropzone.dragover .dropzone__icon { color: var(--navy); }

.dropzone__title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.dropzone__desc  { font-size: 0.8125rem; color: var(--text-muted); }
.dropzone__link  { color: var(--cyan); text-decoration: underline; cursor: pointer; }

.file-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background-color: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.file-item svg { width: 20px; height: 20px; stroke-width: 1.5; color: var(--navy); flex-shrink: 0; }
.file-item__name  { flex: 1; font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item__size  { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; }
.file-item__remove { color: var(--text-muted); transition: color var(--t-fast); }
.file-item__remove:hover { color: var(--red); }
.file-item__remove svg { width: 18px; height: 18px; stroke-width: 2; }

/* =====================================================
   19. BOTTOM NAV (mobile)
===================================================== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--white);
  border-top: 1px solid var(--border);
  z-index: 300;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav__list {
  display: flex;
  height: 64px;
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
  padding: var(--s2) var(--s1);
  min-height: 44px;
}

.bottom-nav__item svg { width: 24px; height: 24px; stroke-width: 1.5; }
.bottom-nav__item:hover { color: var(--navy); }
.bottom-nav__item.active { color: var(--navy); }
.bottom-nav__item.active svg { stroke: var(--cyan); }

/* =====================================================
   20. TABS
===================================================== */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  gap: 0;
}

.tab {
  padding: var(--s3) var(--s4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
}

.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--navy); border-bottom-color: var(--cyan); font-weight: 600; }
.tab svg { width: 16px; height: 16px; stroke-width: 1.5; }

/* =====================================================
   21. CHIP / FILTRO
===================================================== */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  user-select: none;
}

.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.active { background-color: var(--navy); color: var(--white); border-color: var(--navy); }
.chip svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* =====================================================
   22. DIVISOR & UTILITÁRIOS
===================================================== */
.divider { height: 1px; background-color: var(--border); width: 100%; }
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s5);
  flex-wrap: wrap;
  gap: var(--s3);
}

.page-header__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--text-primary); }
.page-header__subtitle { font-size: 0.9375rem; color: var(--text-muted); margin-top: 2px; }
.page-header__actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

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

.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }

.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }

.w-full { width: 100%; }

/* =====================================================
   23. COUNTDOWN (próxima aula)
===================================================== */
.countdown {
  display: flex;
  gap: var(--s3);
  justify-content: center;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.countdown__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  background-color: var(--cyan-light);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 2px solid rgba(0,200,200,0.3);
  line-height: 1;
}

.countdown__label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =====================================================
   24. RESPONSIVO — TABLET / MOBILE
===================================================== */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr auto;
    grid-template-areas:
      "topbar"
      "main"
      "bottomnav";
  }

  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 280px;
    z-index: 500;
    transition: left var(--t-slow), box-shadow var(--t-slow);
  }

  .sidebar.open {
    left: 0;
    box-shadow: var(--shadow-lg);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13,34,64,0.5);
    z-index: 499;
  }

  .sidebar-overlay.open { display: block; }

  .topbar__toggle { display: flex; }
  .topbar { padding-inline: var(--s4); }

  .app-main { padding: var(--s4); padding-bottom: calc(64px + var(--s4)); }

  .bottom-nav { display: block; }
  .grid--kpi  { grid-template-columns: repeat(2, 1fr); }
  .grid--4    { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-main { padding: var(--s3); padding-bottom: calc(64px + var(--s3)); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .grid--kpi { grid-template-columns: repeat(2, 1fr); }
  .modal { border-radius: 0; position: fixed; inset: 0; max-height: 100vh; max-width: 100%; margin: 0; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .table thead { display: none; }
  .table tbody td { display: block; padding: var(--s2) var(--s3); }
  .table tbody td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
  }
  .page-header { flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   25. PRINT / ACESSIBILIDADE
===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   26. ALIASES DE COMPATIBILIDADE
   Corrige divergência entre CSS e HTMLs gerados
===================================================== */

/* --radius-xl faltando */
:root { --radius-xl: 20px; }

/* Topbar: .topbar__left / .topbar__right / .topbar__title-group / .topbar__notif */
.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1;
  min-width: 0;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

.topbar__title-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

/* .topbar__title já existe, mas nos HTMLs é o título da página */
.topbar__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__notif {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: background-color var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}

.topbar__notif:hover {
  background-color: var(--bg);
  color: var(--text-primary);
}

.topbar__notif svg,
.topbar__notif i {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  pointer-events: none;
}

/* Sidebar: js usa .is-open, css usava .open — unificar */
.sidebar.is-open {
  left: 0 !important;
  box-shadow: var(--shadow-lg);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,34,64,0.5);
  z-index: 499;
}

.sidebar-overlay.is-visible,
.sidebar-overlay.open {
  display: block;
}

/* app-main-wrapper: wrapper do conteúdo principal (topbar + main) */
.app-main-wrapper {
  display: contents;
}

/* sidebar__role: label do role na sidebar */
.sidebar__role {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* sidebar__user-email */
.sidebar__user-email {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Modal: sistema .modal-wrapper + .modal-wrapper.is-open */
.modal-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility 0s var(--t);
}

.modal-wrapper.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity var(--t), visibility 0s 0s;
}

.modal-wrapper .modal__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(13,34,64,0.55);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.modal-wrapper .modal {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  transform: scale(0.95) translateY(8px);
  transition: transform var(--t);
}

.modal-wrapper.is-open .modal {
  transform: scale(1) translateY(0);
}

.modal-wrapper .modal--lg { max-width: 720px; }
.modal-wrapper .modal--sm { max-width: 420px; }

/* Toast: is-visible state (platform.js usa is-visible) */
.toast {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--t), transform var(--t);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Avatar aliases */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.avatar--sm {
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
}

.avatar--md {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

.avatar--cyan { background-color: var(--cyan); color: var(--navy); }
.avatar--navy { background-color: var(--navy); color: var(--white); }

/* bg-body alias */
.bg-body { background-color: var(--bg); }
:root { --bg-body: var(--bg); }

/* Skeleton animation */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.skeleton {
  background-color: var(--border);
  border-radius: var(--radius);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* empty-state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s7) var(--s4);
  text-align: center;
  gap: var(--s3);
}

.empty-state__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bg);
  color: var(--text-muted);
  margin-bottom: var(--s2);
}

.empty-state__icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.empty-state__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.empty-state__desc  { font-size: 0.9375rem; color: var(--text-muted); max-width: 360px; }

/* Mobile fixes para .modal-wrapper */
@media (max-width: 640px) {
  .modal-wrapper .modal {
    border-radius: 0;
    position: fixed;
    inset: 0;
    max-height: 100vh;
    max-width: 100%;
    margin: 0;
  }
  .modal-wrapper {
    padding: 0;
    align-items: flex-end;
  }
}