/* =====================================================
   APPFUT PORTAL WEB - DESIGN SYSTEM v2.0
   Design Profissional inspirado no Flutter App
   ===================================================== */

/* ===== CSS RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== VARIÁVEIS DE DESIGN ===== */
:root {
  /* Brand Colors - Cores do Brasil */
  --primary: #00A859;
  --primary-dark: #008A48;
  --primary-light: #4CAF50;
  --primary-50: #E8F5E9;
  --primary-100: #C8E6C9;
  --primary-200: #A5D6A7;

  /* Secondary - Amarelo Ouro */
  --secondary: #FFC107;
  --secondary-dark: #FFA000;
  --secondary-light: #FFECB3;

  /* Azul (Treinador Auxiliar) */
  --blue: #0066CC;
  --blue-dark: #0D47A1;
  --blue-light: #42A5F5;
  --blue-50: #E3F2FD;

  /* Neutral Colors */
  --white: #FFFFFF;
  --gray-50: #F5F7FA;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* User Type Colors */
  --gestor-color: #00A859;
  --gestor-gradient: linear-gradient(135deg, #00A859 0%, #4CAF50 100%);
  --staff-color: #0066CC;
  --staff-gradient: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
  --parent-color: #D97706;
  --parent-gradient: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);

  /* Semantic Colors */
  --danger: #E53935;
  --danger-light: #FFEBEE;
  --danger-dark: #C62828;
  --warning: #FB8C00;
  --warning-light: #FFF3E0;
  --warning-dark: #E65100;
  --success: #43A047;
  --success-light: #E8F5E9;
  --success-dark: #2E7D32;
  --info: #1E88E5;
  --info-light: #E3F2FD;
  --info-dark: #1565C0;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* Shadows - Material Design 3 (suaves) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 8px 16px -8px rgba(0, 0, 0, 0.04);
  --shadow-colored: 0 8px 24px -4px;

  /* Borders */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width: 280px;
  --sidebar-collapsed: 80px;
  --header-height: 72px;
  --content-max-width: 1400px;

  /* ===== Z-INDEX SCALE (padronização infra) =====
     Usar essas variáveis em vez de números mágicos. */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-popover: 3000;
  --z-toast: 4000;

  /* Espaçamento padrão (Bug 23 - magic numbers) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
}

/* ===== BASE STYLES ===== */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--gray-50);
  min-height: 100vh;
}

/* Garantir que TODOS os elementos usem a fonte correta */
*, *::before, *::after {
  font-family: inherit;
}

input, button, textarea, select {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ===== LOGIN PAGE - Tema Brasil ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  background: linear-gradient(135deg, #00A859 0%, #FFC107 100%);
  overflow: hidden;
  position: relative;
}

.login-page::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  top: -200px;
  left: -200px;
  animation: pulse 4s ease-in-out infinite;
}

.login-page::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  animation: pulse 5s ease-in-out infinite reverse;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.login-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px;
  color: white;
  position: relative;
  z-index: 1;
}

.login-logo {
  width: 100px;
  height: 100px;
  background: white;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.login-logo i {
  width: 56px;
  height: 56px;
  color: #00A859;
}

.login-left h1 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-left p {
  font-size: 1.25rem;
  opacity: 0.95;
  max-width: 450px;
  text-align: center;
  line-height: 1.7;
}

.login-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  opacity: 0.9;
}

.login-feature i {
  width: 24px;
  height: 24px;
  opacity: 0.8;
}

.login-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  border-radius: 48px 0 0 48px;
  padding: 48px;
  position: relative;
  z-index: 1;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.1);
}

.login-card {
  width: 100%;
  max-width: 420px;
}

.login-card h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.login-card .subtitle {
  color: var(--gray-500);
  margin-bottom: 32px;
  font-size: 15px;
}

@media (max-width: 900px) {
  .login-page { flex-direction: column; }
  .login-left { padding: 60px 24px 48px; }
  .login-left h1 { font-size: 2.5rem; }
  .login-right {
    border-radius: 40px 40px 0 0;
    padding: 40px 24px;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 600px) {
  .login-features { display: none; }
}

/* ===== FORM ELEMENTS - Design Moderno ===== */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-sans);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--gray-900);
  transition: var(--transition-fast);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--gray-300);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}

.form-input::placeholder {
  color: var(--gray-400);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--danger);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 4px var(--danger-light);
}

.form-error {
  color: var(--danger);
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-helper {
  color: var(--gray-500);
  font-size: 12px;
  margin-top: 6px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 48px;
  cursor: pointer;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Input with icon */
.form-input-wrapper {
  position: relative;
}

.form-input-wrapper .form-input {
  padding-left: 48px;
}

.form-input-wrapper i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  pointer-events: none;
}

/* Checkbox & Radio - Custom */
.form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Toggle Switch */
.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-normal);
}

.toggle::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.toggle.active {
  background: var(--primary);
}

.toggle.active::after {
  left: 24px;
}

/* Toggle Card - Aluno é próprio responsável */
.toggle-card {
  display: flex;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: var(--transition-normal);
}

.toggle-card.active {
  background: var(--primary-50);
  border-color: var(--primary-200);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 28px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: var(--transition-normal);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.toggle-label input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-label input:checked + .toggle-slider::after {
  left: 24px;
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
}

.toggle-subtitle {
  font-size: 13px;
  color: var(--gray-500);
}

/* ===== BUTTONS - Design System ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn i {
  width: 18px;
  height: 18px;
}

/* Primary Button */
.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
}

/* Secondary Button */
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

/* Danger Button */
.btn-danger {
  background: var(--danger);
  color: white;
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-dark);
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.4);
}

/* Warning Button */
.btn-warning {
  background: var(--warning);
  color: white;
  box-shadow: 0 4px 12px rgba(251, 140, 0, 0.3);
}

.btn-warning:hover:not(:disabled) {
  background: var(--warning-dark);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--gray-900);
}

/* Outline Buttons */
.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline-primary:hover:not(:disabled) {
  background: var(--primary-50);
}

/* Button Sizes */
.btn-xs { padding: 6px 12px; font-size: 12px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-xl { padding: 20px 40px; font-size: 18px; }

/* Button Modifiers */
.btn-block { width: 100%; }
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-lg);
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon.btn-lg { width: 48px; height: 48px; }

/* Botão ícone pequeno (standalone) */
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--gray-700);
  color: var(--gray-300);
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-icon-sm:hover {
  background: var(--gray-600);
  color: var(--white);
}

.btn-rounded { border-radius: var(--radius-full); }

/* ===== APP LAYOUT ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ===== SIDEBAR - Design Premium ===== */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--white);
  border-right: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  z-index: var(--z-dropdown);
  transition: var(--transition-slow);
  box-shadow: var(--shadow-sm);
}

.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.sidebar-logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 168, 89, 0.3);
}

.sidebar-logo-icon i {
  width: 24px;
  height: 24px;
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Botão fechar sidebar (só aparece em mobile) */
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  color: var(--gray-600);
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s;
}

.sidebar-close-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.sidebar-close-btn i {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  .sidebar-close-btn {
    display: flex;
  }
}

.sidebar-nav {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 28px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-400);
  padding: 0 12px;
  margin-bottom: 12px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  margin-bottom: 4px;
}

.sidebar-item i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.sidebar-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.sidebar-item.active {
  background: linear-gradient(135deg, rgba(0, 151, 57, 0.12) 0%, rgba(76, 175, 80, 0.08) 100%);
  color: #009739;
  font-weight: 600;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #009739 0%, #4CAF50 100%) 1;
}

.sidebar-item.active i {
  color: #009739;
}

/* Badge no menu */
.sidebar-item .nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid var(--gray-100);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-xl);
  transition: var(--transition-fast);
  cursor: pointer;
}

.sidebar-user:hover {
  background: var(--gray-100);
}

.sidebar-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.sidebar-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

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

.sidebar-user-name {
  font-weight: 600;
  color: var(--gray-900);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 12px;
  color: var(--gray-500);
}

/* ===== MAIN WRAPPER ===== */
.main-wrapper {
  flex: 1;
  /* Item flex nasce com min-width:auto e se recusa a encolher abaixo do
     conteudo. Sem isto, uma tabela ou um grid largo la dentro empurra o
     wrapper pra fora da viewport e a pagina inteira ganha scroll lateral
     (o overflow-x:hidden do .main-content nao segura, porque o pai ja
     esta largo demais). */
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: var(--transition-slow);
}

/* ===== HEADER - Design Premium ===== */
.header {
  height: var(--header-height);
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-xs);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-toggle {
  display: none !important;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  color: var(--gray-600);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

/* Mostrar botão de menu APENAS em mobile (<= 1024px) */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
}

.mobile-menu-toggle:hover {
  background: var(--gray-200);
}

.mobile-menu-toggle i {
  width: 20px;
  height: 20px;
}

.header-title h1 {
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  letter-spacing: -0.02em;
}

.header-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-school {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}

.header-school i {
  width: 18px;
  height: 18px;
}

/* Header — sino de notificações (responsável) */
.header-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--gray-50);
  color: var(--gray-700);
  transition: var(--transition-fast);
  text-decoration: none;
}

.header-bell:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.header-bell i {
  width: 20px;
  height: 20px;
}

.header-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #DC2626;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-sizing: content-box;
}

/* Header — seletor de filho (portal responsável) */
.child-selector-wrapper {
  position: relative;
}

.child-selector-trigger,
.child-selector-static {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-xl);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
  color: var(--gray-800);
}

.child-selector-static { cursor: default; }

.child-selector-trigger:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.child-selector-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.child-selector-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
}

.child-selector-avatar-fallback i {
  width: 16px;
  height: 16px;
}

.child-selector-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-selector-trigger i[data-lucide="chevron-down"] {
  width: 16px;
  height: 16px;
  color: var(--gray-500);
}

.child-selector-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  padding: 6px;
  display: none;
  z-index: var(--z-popover);
  max-height: 70vh;
  overflow-y: auto;
}

.child-selector-dropdown.active {
  display: block;
}

.child-selector-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: var(--transition-fast);
}

.child-selector-item:hover {
  background: var(--gray-50);
}

.child-selector-item.active {
  background: var(--primary-50, #FEF3C7);
}

.child-selector-item img,
.child-selector-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.child-selector-item-avatar i {
  width: 18px;
  height: 18px;
}

.child-selector-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.child-selector-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-selector-item-meta {
  font-size: 12px;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-selector-item-check {
  width: 18px;
  height: 18px;
  color: var(--user-color, var(--primary));
  flex-shrink: 0;
}

.child-selector-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 6px 4px;
}

/* Welcome state (sem filhos) */
.welcome-no-children {
  padding: 60px 24px;
}

.welcome-no-children i[data-lucide="user-plus"] {
  width: 64px;
  height: 64px;
  color: var(--user-color, var(--primary));
}

/* Mobile: esconder nome no seletor para economizar espaço */
@media (max-width: 600px) {
  .child-selector-name { display: none; }
  .child-selector-trigger { padding: 6px; }
  .child-selector-dropdown {
    right: -40px;
    min-width: 260px;
  }
}

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.header-user:hover {
  background: var(--gray-50);
}

.header-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.header-avatar.gestor {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.header-avatar.staff {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
}

.header-avatar.parent {
  background: linear-gradient(135deg, var(--warning) 0%, var(--secondary) 100%);
}

.header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.header-user-info {
  display: flex;
  flex-direction: column;
}

.header-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-900);
}

.header-user-type {
  font-size: 12px;
  color: var(--gray-500);
}

/* User Dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-100);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition-fast);
  z-index: var(--z-popover);
}

.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--gray-700);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--gray-50);
}

.dropdown-item i {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

.dropdown-item.danger {
  color: var(--danger);
}

.dropdown-item.danger i {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 8px 0;
}

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  padding: 32px;
  overflow-x: hidden;
  max-width: 100%;
}

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header-left h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== CARDS - Design Premium ===== */
.card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--gray-100);
  transition: var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--gray-50) 0%, rgba(255,255,255,0.8) 100%);
}

/* Card header with gradient accent */
.card-header.green-accent {
  background: linear-gradient(135deg, rgba(0, 151, 57, 0.08) 0%, rgba(76, 175, 80, 0.04) 100%);
  border-bottom-color: rgba(0, 151, 57, 0.15);
}

.card-header.blue-accent {
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.08) 0%, rgba(66, 165, 245, 0.04) 100%);
  border-bottom-color: rgba(21, 101, 192, 0.15);
}

.card-header.yellow-accent {
  background: linear-gradient(135deg, rgba(245, 124, 0, 0.08) 0%, rgba(255, 183, 77, 0.04) 100%);
  border-bottom-color: rgba(245, 124, 0, 0.15);
}

.card-header.red-accent {
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.08) 0%, rgba(239, 83, 80, 0.04) 100%);
  border-bottom-color: rgba(198, 40, 40, 0.15);
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.card-body {
  padding: 24px;
}

.card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

/* Card Clickable */
.card.clickable {
  cursor: pointer;
}

.card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ===== STATS CARDS - Design Premium com Gradientes ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--gray-100);
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 4px 0 0 4px;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.stat-icon i {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 1;
}

/* Stat Card Colors with Gradients */
.stat-card.blue::before { background: linear-gradient(180deg, #1976D2 0%, #42A5F5 100%); }
.stat-card.blue .stat-icon {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1565C0;
}
.stat-card.blue:hover { border-color: rgba(33, 150, 243, 0.3); }

.stat-card.green::before { background: linear-gradient(180deg, #009739 0%, #4CAF50 100%); }
.stat-card.green .stat-icon {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  color: #2E7D32;
}
.stat-card.green:hover { border-color: rgba(0, 151, 57, 0.3); }

.stat-card.red::before { background: linear-gradient(180deg, #C62828 0%, #EF5350 100%); }
.stat-card.red .stat-icon {
  background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
  color: #C62828;
}
.stat-card.red:hover { border-color: rgba(198, 40, 40, 0.3); }

.stat-card.yellow::before { background: linear-gradient(180deg, #F57C00 0%, #FFB74D 100%); }
.stat-card.yellow .stat-icon {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  color: #E65100;
}
.stat-card.yellow:hover { border-color: rgba(245, 124, 0, 0.3); }

.stat-card.purple::before { background: linear-gradient(180deg, #7B1FA2 0%, #BA68C8 100%); }
.stat-card.purple .stat-icon {
  background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
  color: #7B1FA2;
}
.stat-card.purple:hover { border-color: rgba(123, 31, 162, 0.3); }

/* Special Brasil gradient card */
.stat-card.brasil::before { background: linear-gradient(180deg, #009739 0%, #FFD700 100%); }
.stat-card.brasil .stat-icon {
  background: linear-gradient(135deg, #E8F5E9 0%, #FFF8E1 100%);
  color: #009739;
}
.stat-card.brasil:hover { border-color: rgba(0, 151, 57, 0.3); }

.stat-content {
  min-width: 0;
  flex: 1;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
  display: block;
  line-height: 1.2;
}

.stat-label {
  font-size: 13px;
  color: var(--gray-500);
  display: block;
  margin-top: 4px;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

.stat-change i {
  width: 14px;
  height: 14px;
}

/* ===== FINANCIAL CARDS - Design Premium com Gradientes ===== */
.financial-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.financial-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.financial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.financial-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: 0.08;
}

.financial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.financial-card.green::before { background: linear-gradient(90deg, #009739 0%, #4CAF50 100%); }
.financial-card.green::after { background: linear-gradient(135deg, #009739 0%, #4CAF50 100%); }

.financial-card.red::before { background: linear-gradient(90deg, #C62828 0%, #EF5350 100%); }
.financial-card.red::after { background: linear-gradient(135deg, #C62828 0%, #EF5350 100%); }

.financial-card.blue::before { background: linear-gradient(90deg, #1565C0 0%, #42A5F5 100%); }
.financial-card.blue::after { background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%); }

.financial-card.yellow::before { background: linear-gradient(90deg, #F57C00 0%, #FFB74D 100%); }
.financial-card.yellow::after { background: linear-gradient(135deg, #F57C00 0%, #FFB74D 100%); }

/* Special Brasil gradient */
.financial-card.brasil::before { background: linear-gradient(90deg, #009739 0%, #FFD700 100%); }
.financial-card.brasil::after { background: linear-gradient(135deg, #009739 0%, #FFD700 100%); }

.financial-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.financial-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.financial-card-icon i {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 1;
}

.financial-card-icon.green {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  color: #2E7D32;
  box-shadow: 0 4px 12px rgba(0, 151, 57, 0.2);
}

.financial-card-icon.red {
  background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
  color: #C62828;
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
}

.financial-card-icon.blue {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1565C0;
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

.financial-card-icon.yellow {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  color: #E65100;
  box-shadow: 0 4px 12px rgba(245, 124, 0, 0.2);
}

.financial-card-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 6px;
}

.financial-card-label {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 500;
}

/* ===== BADGES - Design System com Gradientes ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
  position: relative;
}

.badge i {
  width: 14px;
  height: 14px;
}

.badge-primary {
  background: linear-gradient(135deg, rgba(0, 151, 57, 0.15) 0%, rgba(76, 175, 80, 0.1) 100%);
  color: #009739;
  border: 1px solid rgba(0, 151, 57, 0.2);
}

.badge-success {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(76, 175, 80, 0.1) 100%);
  color: var(--success-dark);
  border: 1px solid rgba(46, 125, 50, 0.2);
}

.badge-warning {
  background: linear-gradient(135deg, rgba(245, 124, 0, 0.18) 0%, rgba(255, 183, 77, 0.12) 100%);
  /* WCAG AA: usar tom mais escuro para garantir 4.5:1 sobre fundo claro */
  color: #8a3d00;
  border: 1px solid rgba(245, 124, 0, 0.3);
}

.badge-danger {
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.15) 0%, rgba(239, 83, 80, 0.1) 100%);
  color: var(--danger-dark);
  border: 1px solid rgba(198, 40, 40, 0.2);
}

.badge-info {
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.18) 0%, rgba(66, 165, 245, 0.12) 100%);
  /* WCAG AA: escurecer texto para garantir contraste 4.5:1 */
  color: #0b3f7a;
  border: 1px solid rgba(21, 101, 192, 0.3);
}

.badge-gray {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
  /* WCAG AA: usar gray-700 (mais escuro) sobre fundo gray-50/100 */
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.badge-secondary {
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.badge-purple {
  background: linear-gradient(135deg, rgba(123, 31, 162, 0.15) 0%, rgba(186, 104, 200, 0.1) 100%);
  color: #7B1FA2;
  border: 1px solid rgba(123, 31, 162, 0.2);
}

.badge-manual {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.15) 0%, rgba(107, 114, 128, 0.1) 100%);
  color: #4B5563;
  border: 1px solid rgba(107, 114, 128, 0.3);
  font-size: 10px;
  margin-left: 4px;
}

/* Gradient filled badges */
.badge-primary-filled {
  background: linear-gradient(135deg, #009739 0%, #4CAF50 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 151, 57, 0.3);
}

.badge-info-filled {
  background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
}

.badge-warning-filled {
  background: linear-gradient(135deg, #F57C00 0%, #FFB74D 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 124, 0, 0.3);
}

.badge-danger-filled {
  background: linear-gradient(135deg, #C62828 0%, #EF5350 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.3);
}

/* Badge Sizes */
.badge-sm { padding: 3px 8px; font-size: 11px; }
.badge-lg { padding: 6px 14px; font-size: 13px; }

/*
  A11y: status apenas por cor é difícil de ler. Adiciona um glifo antes
  do texto. .badge-has-icon (opt-out) desativa quando já houver i/svg.
*/
.badge-success:not(.badge-has-icon):not(:has(i)):not(:has(svg))::before {
  content: '\2713\00a0'; /* ✓ */
  font-weight: 700;
}
.badge-danger:not(.badge-has-icon):not(:has(i)):not(:has(svg))::before {
  content: '\2715\00a0'; /* ✕ */
  font-weight: 700;
}
.badge-warning:not(.badge-has-icon):not(:has(i)):not(:has(svg))::before {
  content: '\26A0\00a0'; /* ⚠ */
}
.badge-info:not(.badge-has-icon):not(:has(i)):not(:has(svg))::before {
  content: '\2139\00a0'; /* ℹ */
}

/* ===== TABLES - Design Premium ===== */
.data-table-container {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--gray-100);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.data-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  background: var(--gray-50);
}

.data-table td {
  font-size: 14px;
  color: var(--gray-700);
}

/* Colunas ordenáveis */
.data-table th.sortable,
th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, color 0.15s;
}

.data-table th.sortable:hover,
th.sortable:hover {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

th.sortable > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

th.sortable i {
  flex-shrink: 0;
}

.data-table tbody tr {
  transition: var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

.data-table-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.data-table-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-600);
  flex-shrink: 0;
}

.data-table-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.data-table-name {
  font-weight: 600;
  color: var(--gray-900);
}

.data-table-sub {
  font-size: 12px;
  color: var(--gray-500);
}

.data-table-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 80px 32px;
}

.empty-state-icon {
  width: 100px;
  height: 100px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}

.empty-state-icon i {
  width: 48px;
  height: 48px;
  color: var(--gray-400);
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 12px;
}

.empty-state p {
  font-size: 15px;
  color: var(--gray-500);
  max-width: 400px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

.empty-state.small {
  padding: 48px 24px;
}

.empty-state.small .empty-state-icon {
  width: 72px;
  height: 72px;
}

.empty-state.small .empty-state-icon i {
  width: 36px;
  height: 36px;
}

/* ===== LOADING ===== */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  gap: 20px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

.loading-container p {
  color: var(--gray-500);
  font-size: 14px;
}

/* ===== MODAL - Design Premium ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  padding: 24px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal empilhado - sem fundo escuro adicional */
.modal-overlay.modal-stacked {
  background: transparent;
  backdrop-filter: none;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  transition: var(--transition-normal);
  box-shadow: var(--shadow-xl);
}

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

.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }
.modal-full { max-width: calc(100vw - 48px); }

.modal-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
}

.modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: pointer;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.modal-close i {
  width: 20px;
  height: 20px;
}

.modal-body {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* ===== CHARGE DETAIL MODAL ===== */
.charge-detail-modal .modal.charge-modal {
  max-width: 800px;
}

.charge-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.charge-info-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.charge-info-section {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.charge-info-section h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.charge-info-section h4 i {
  width: 14px;
  height: 14px;
}

.charge-info-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.charge-info-value.charge-amount {
  font-size: 24px;
  color: var(--primary);
}

.charge-info-sub {
  font-size: 13px;
  color: var(--gray-600);
  margin: 4px 0 0;
}

.charge-info-sub code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.charge-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.charge-info-row .charge-info-section {
  margin: 0;
}

.charge-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.charge-type.type-monthly {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.charge-type.type-enrollment {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
}

.charge-type.type-other {
  background: var(--gray-100);
  color: var(--gray-600);
}

.charge-ids {
  background: transparent;
  padding: 12px 0 0;
  border-top: 1px solid var(--gray-200);
}

/* Coluna direita - QR Code e Ferramentas */
.charge-qr-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.charge-qr-section {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: var(--radius-xl);
  padding: 20px;
  text-align: center;
}

.charge-qr-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: #166534;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.charge-qr-section h4 i {
  width: 18px;
  height: 18px;
}

.charge-qr-code {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  background: white;
  padding: 8px;
  box-shadow: var(--shadow-sm);
  margin: 0 auto 12px;
}

.charge-brcode {
  background: white;
  border-radius: var(--radius-md);
  padding: 10px;
  margin-top: 12px;
}

.charge-brcode code {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--gray-600);
  word-break: break-all;
  display: block;
}

/* Ferramentas PIX */
.charge-pix-tools {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: var(--radius-xl);
  padding: 20px;
}

.charge-pix-tools h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1d4ed8;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.charge-pix-tools h4 i {
  width: 18px;
  height: 18px;
}

.pix-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pix-tool-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: white;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  color: #1e40af;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pix-tool-btn:hover {
  background: #1d4ed8;
  color: white;
  border-color: #1d4ed8;
}

.pix-tool-btn i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Lista vertical de ferramentas PIX (igual ao app) */
.pix-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pix-tools-list .pix-tool-btn {
  justify-content: flex-start;
  width: 100%;
}

.pix-tools-list .pix-tool-btn span {
  flex: 1;
}

.pix-tool-arrow {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.5;
}

/* Variantes de cor para botões PIX (igual ao app) */
.pix-tool-btn.pix-tool-blue {
  color: #1e40af;
  border-color: #bfdbfe;
  background: rgba(59, 130, 246, 0.05);
}
.pix-tool-btn.pix-tool-blue:hover {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.pix-tool-btn.pix-tool-green {
  color: #166534;
  border-color: #86efac;
  background: rgba(34, 197, 94, 0.05);
}
.pix-tool-btn.pix-tool-green:hover {
  background: #22c55e;
  color: white;
  border-color: #22c55e;
}

.pix-tool-btn.pix-tool-yellow {
  color: #a16207;
  border-color: #fde047;
  background: rgba(250, 204, 21, 0.1);
}
.pix-tool-btn.pix-tool-yellow:hover {
  background: #eab308;
  color: white;
  border-color: #eab308;
}

.pix-tool-btn.pix-tool-orange {
  color: #c2410c;
  border-color: #fdba74;
  background: rgba(249, 115, 22, 0.05);
}
.pix-tool-btn.pix-tool-orange:hover {
  background: #f97316;
  color: white;
  border-color: #f97316;
}

.pix-tool-btn.pix-tool-red {
  color: #b91c1c;
  border-color: #fca5a5;
  background: rgba(239, 68, 68, 0.05);
}
.pix-tool-btn.pix-tool-red:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

/* Seção de Link de Pagamento */
.charge-link-section {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 16px;
}

.charge-link-section h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.charge-link-section h4 i {
  width: 14px;
  height: 14px;
}

.link-url-box {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.link-url-box code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--gray-600);
  word-break: break-all;
}

.link-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.link-buttons .btn {
  flex: 1;
  min-width: 80px;
  justify-content: center;
}

/* Estado aguardando PIX */
.charge-awaiting-pix {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde047;
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  text-align: center;
  color: #a16207;
}

.charge-awaiting-pix i {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
}

.charge-awaiting-pix p {
  margin: 0;
  font-weight: 500;
}

/* Opções de reenvio */
.resend-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resend-options .btn {
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

/* Estado sem PIX */
.charge-no-pix {
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 32px 20px;
  text-align: center;
  color: var(--gray-500);
}

.charge-no-pix i {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.charge-no-pix p {
  margin: 0;
  font-weight: 500;
}

/* Estado pago */
.charge-paid-info {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: var(--radius-xl);
  padding: 32px 20px;
  text-align: center;
  color: #166534;
}

.charge-paid-info i {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

.charge-paid-info p {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
}

/* Ações do modal */
.charge-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.charge-modal-actions .btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.charge-modal-actions .btn-lg {
  padding: 14px 20px;
  font-size: 15px;
}

.charge-modal-actions .btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
}

.charge-modal-actions .btn-success:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.charge-modal-actions .btn-outline-danger {
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
}

.charge-modal-actions .btn-outline-danger:hover {
  background: var(--error);
  color: white;
}

/* QR Code Modal ampliado */
.qr-modal .modal.qr-modal-content {
  max-width: 400px;
}

.qr-modal-image {
  width: 280px;
  height: 280px;
  border-radius: var(--radius-lg);
  background: white;
  padding: 16px;
  box-shadow: var(--shadow-md);
  margin: 0 auto 20px;
  display: block;
}

.qr-modal-instruction {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 20px;
}

.qr-modal-brcode {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.brcode-box {
  background: white;
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 12px 0;
}

.brcode-box code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--gray-600);
  word-break: break-all;
}

/* Responsivo */
@media (max-width: 768px) {
  .charge-detail-modal .modal.charge-modal {
    max-width: 100%;
  }

  .charge-detail-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .charge-info-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pix-tools-grid {
    grid-template-columns: 1fr;
  }

  .charge-qr-code {
    width: 150px;
    height: 150px;
  }
}

/* ===== TOAST - Notifications ===== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 340px;
  max-width: 440px;
  animation: toastSlideIn 0.3s ease;
  pointer-events: auto;
  border: 1px solid var(--gray-100);
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.toast.success { border-left: 4px solid var(--success); }
.toast.success .toast-icon { color: var(--success); }

.toast.error { border-left: 4px solid var(--danger); }
.toast.error .toast-icon { color: var(--danger); }

.toast.warning { border-left: 4px solid var(--warning); }
.toast.warning .toast-icon { color: var(--warning); }

.toast.info { border-left: 4px solid var(--info); }
.toast.info .toast-icon { color: var(--info); }

.toast-content { flex: 1; }

.toast-title {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
  font-size: 14px;
}

.toast-message {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}

.toast-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.toast-close:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.toast-close i {
  width: 16px;
  height: 16px;
}

/* ===== ALERTS ===== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
  border: 1px solid;
}

.alert i {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.alert-warning {
  background: var(--warning-light);
  border-color: #FCD34D;
  color: #92400E;
}

.alert-danger {
  background: var(--danger-light);
  border-color: #FCA5A5;
  color: #991B1B;
}

.alert-info {
  background: var(--info-light);
  border-color: #93C5FD;
  color: #1E40AF;
}

.alert-success {
  background: var(--success-light);
  border-color: #6EE7B7;
  color: #065F46;
}

.alert ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.alert li {
  margin: 4px 0;
}

.alert .btn {
  margin-left: auto;
  flex-shrink: 0;
}

/* ===== SEARCH & FILTERS ===== */
.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 280px;
  position: relative;
}

.search-input input {
  width: 100%;
  padding: 12px 16px 12px 48px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--white);
  transition: var(--transition-fast);
}

.search-input input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}

.search-input i,
.search-input svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  pointer-events: none;
}

.filter-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 12px 40px 12px 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-family: var(--font-sans);
  background: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: var(--transition-fast);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}

/* Date Range Filter */
.date-range-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 6px 12px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.date-range-filter label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  white-space: nowrap;
}

.date-range-filter .date-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--gray-50);
  cursor: pointer;
  min-width: 130px;
}

.date-range-filter .date-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
}

.date-range-filter .date-separator {
  font-size: 12px;
  color: var(--gray-400);
}

.date-range-filter .btn-ghost {
  padding: 4px;
  margin-left: 4px;
}

/* Date Range Filter - Mobile */
@media (max-width: 768px) {
  .date-range-filter {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }

  .date-range-filter label {
    width: 100%;
    margin-bottom: 2px;
  }

  .date-range-filter .date-input {
    flex: 1;
    min-width: 100px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .date-range-filter .date-separator {
    flex-shrink: 0;
  }
}

/* ========== PLAN FEES GRID ========== */
.plan-fees-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-100);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}

.plan-fee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--white);
  text-align: center;
}

.plan-fee-item i {
  width: 24px;
  height: 24px;
  color: var(--gray-500);
}

.plan-fee-item .fee-label {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.3;
}

.plan-fee-item .fee-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

/* Plan fees mobile - 768px para cobrir todos celulares */
@media (max-width: 768px) {
  .plan-fees-grid {
    grid-template-columns: 1fr;
  }

  .plan-fee-item {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
    text-align: left;
  }

  .plan-fee-item i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .plan-fee-item .fee-label {
    flex: 1;
    margin-left: 10px;
    font-size: 13px;
  }

  .plan-fee-item .fee-value {
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 8px;
  }
}

/* Plan Quick Actions */
.plan-quick-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}

.plan-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
}

.plan-action-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.plan-action-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.plan-action-btn.primary:hover {
  background: var(--primary-dark);
}

.plan-action-btn i {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .plan-quick-actions {
    flex-direction: column;
  }
}

/* Valor com juros */
.valor-com-juros {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.valor-com-juros .valor-original {
  font-size: 11px;
  color: var(--gray-400);
  text-decoration: line-through;
}

/* Badges PIX e Manual */
.badge-pix {
  background: linear-gradient(135deg, #00c896 0%, #00a86b 100%);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 6px;
}

.badge-manual {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 6px;
}

/* ===== TABS ===== */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 28px;
}

.tab {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition-fast);
}

.tab:hover {
  color: var(--gray-700);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ===== QUICK ACTIONS - Com Gradientes ===== */
.quick-actions {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.quick-actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #009739 0%, #4CAF50 50%, #FFD700 100%);
}

.quick-actions h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-actions h3 i {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 16px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--gray-700);
  transition: all 0.3s ease;
  text-align: center;
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 151, 57, 0.1) 0%, rgba(255, 215, 0, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 151, 57, 0.15);
  border-color: rgba(0, 151, 57, 0.3);
}

.action-card:hover::before {
  opacity: 1;
}

.action-card:hover i {
  color: #009739;
  transform: scale(1.1);
}

.action-card i {
  width: 32px;
  height: 32px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.action-card span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* Variações de cores para action cards */
.action-card.blue:hover {
  box-shadow: 0 12px 24px rgba(21, 101, 192, 0.15);
  border-color: rgba(21, 101, 192, 0.3);
}
.action-card.blue::before {
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(66, 165, 245, 0.08) 100%);
}
.action-card.blue:hover i { color: #1565C0; }

.action-card.yellow:hover {
  box-shadow: 0 12px 24px rgba(245, 124, 0, 0.15);
  border-color: rgba(245, 124, 0, 0.3);
}
.action-card.yellow::before {
  background: linear-gradient(135deg, rgba(245, 124, 0, 0.1) 0%, rgba(255, 183, 77, 0.08) 100%);
}
.action-card.yellow:hover i { color: #F57C00; }

.action-card.red:hover {
  box-shadow: 0 12px 24px rgba(198, 40, 40, 0.15);
  border-color: rgba(198, 40, 40, 0.3);
}
.action-card.red::before {
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.1) 0%, rgba(239, 83, 80, 0.08) 100%);
}
.action-card.red:hover i { color: #C62828; }

.action-card.purple:hover {
  box-shadow: 0 12px 24px rgba(123, 31, 162, 0.15);
  border-color: rgba(123, 31, 162, 0.3);
}
.action-card.purple::before {
  background: linear-gradient(135deg, rgba(123, 31, 162, 0.1) 0%, rgba(186, 104, 200, 0.08) 100%);
}
.action-card.purple:hover i { color: #7B1FA2; }

/* ===== LISTS ===== */
.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition-fast);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:hover {
  background: var(--gray-50);
  margin: 0 -16px;
  padding: 16px;
  border-radius: var(--radius-lg);
}

.list-item-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  flex-shrink: 0;
}

.list-item-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.list-item-content {
  flex: 1;
  min-width: 0;
}

.list-item-title {
  font-weight: 600;
  color: var(--gray-900);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.list-item-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  display: block;
}

.list-item-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.list-item-value {
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-display);
}

/* ===== ANNOUNCEMENTS ===== */
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.announcement-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  cursor: pointer;
  transition: var(--transition-normal);
}

.announcement-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.announcement-card.urgent {
  border-left: 4px solid var(--danger);
  background: linear-gradient(135deg, var(--white) 0%, var(--danger-light) 100%);
}

.announcement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.announcement-date {
  font-size: 12px;
  color: var(--gray-500);
}

.announcement-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.announcement-content {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 16px;
}

.announcement-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
}

.announcement-author i {
  width: 16px;
  height: 16px;
}

.announcement-read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

/* Announcement View Modal */
.announcement-view-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.announcement-view-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

.announcement-view-meta i {
  width: 16px;
  height: 16px;
}

.announcement-view-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 24px;
}

.announcement-view-author {
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
  font-size: 13px;
  color: var(--gray-500);
}

/* ===== PERIOD SELECTOR ===== */
.period-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  width: fit-content;
}

.period-selector .btn {
  background: transparent;
  color: var(--gray-600);
  padding: 8px 16px;
  font-size: 13px;
}

.period-selector .btn.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* ===== DASHBOARD GRID ===== */
.dashboard {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 28px;
}

@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
}

.pagination-info {
  font-size: 14px;
  color: var(--gray-500);
}

.pagination-buttons {
  display: flex;
  gap: 8px;
}

/* ===== UTILITIES ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-500); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-lg { font-size: 16px; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 24px; }
.mt-6 { margin-top: 32px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }

.hidden { display: none !important; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== FORM SECTIONS ===== */
.form-section {
  margin-bottom: 32px;
}

.form-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section-title i {
  width: 20px;
  height: 20px;
  color: var(--gray-500);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* ===== SETTINGS TABS ===== */
.settings-container {
  display: flex;
  gap: 32px;
}

.settings-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.settings-nav {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.settings-nav-item:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.settings-nav-item.active {
  background: var(--primary-50);
  color: var(--primary);
}

.settings-nav-item i {
  width: 20px;
  height: 20px;
}

.settings-content {
  flex: 1;
}

@media (max-width: 900px) {
  .settings-container {
    flex-direction: column;
  }
  .settings-sidebar {
    width: 100%;
  }
  .settings-nav {
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
  .settings-nav-item {
    white-space: nowrap;
  }
}

/* ===== CHILDREN CARDS (Responsável) - Com Gradientes ===== */
.children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.child-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-100);
  transition: all 0.3s ease;
  cursor: pointer;
}

.child-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.child-card-header {
  height: 110px;
  background: linear-gradient(135deg, #009739 0%, #4CAF50 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Gradient variations for different children */
.child-card-header.green { background: linear-gradient(135deg, #009739 0%, #4CAF50 100%); }
.child-card-header.blue { background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%); }
.child-card-header.purple { background: linear-gradient(135deg, #7B1FA2 0%, #BA68C8 100%); }
.child-card-header.yellow { background: linear-gradient(135deg, #F57C00 0%, #FFB74D 100%); }
.child-card-header.red { background: linear-gradient(135deg, #C62828 0%, #EF5350 100%); }
.child-card-header.pink { background: linear-gradient(135deg, #C2185B 0%, #F06292 100%); }
.child-card-header.teal { background: linear-gradient(135deg, #00796B 0%, #4DB6AC 100%); }
.child-card-header.brasil { background: linear-gradient(135deg, #009739 0%, #006B2D 50%, #FFD700 100%); }

.child-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  position: absolute;
  bottom: -36px;
  box-shadow: var(--shadow-lg);
  border: 4px solid white;
}

.child-card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.child-card-status {
  position: absolute;
  bottom: -36px;
  right: calc(50% - 56px);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--success);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid white;
}

.child-card-status i {
  width: 14px;
  height: 14px;
}

.child-card-status.pending {
  background: var(--warning);
}

.child-card-body {
  padding: 48px 24px 24px;
  text-align: center;
}

.child-card-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.child-card-team {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.child-card-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.child-card-stat {
  text-align: center;
}

.child-card-stat-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
}

.child-card-stat-label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== ATTENDANCE CARDS ===== */
.attendance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.attendance-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition-fast);
}

.attendance-card:hover {
  box-shadow: var(--shadow-md);
}

.attendance-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--gray-600);
  flex-shrink: 0;
}

.attendance-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

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

.attendance-name {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.attendance-team {
  font-size: 13px;
  color: var(--gray-500);
}

.attendance-actions {
  display: flex;
  gap: 8px;
}

.attendance-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.attendance-btn i {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  transition: var(--transition-fast);
}

.attendance-btn:hover {
  border-color: var(--gray-300);
}

.attendance-btn.present:hover,
.attendance-btn.present.active {
  background: var(--success);
  border-color: var(--success);
}

.attendance-btn.present:hover i,
.attendance-btn.present.active i {
  color: white;
}

.attendance-btn.absent:hover,
.attendance-btn.absent.active {
  background: var(--danger);
  border-color: var(--danger);
}

.attendance-btn.absent:hover i,
.attendance-btn.absent.active i {
  color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  /* mobile-menu-toggle já definido globalmente */

  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    z-index: var(--z-sticky);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-wrapper {
    margin-left: 0;
  }

  .header-user-info {
    display: none;
  }

  .header-school span {
    display: none;
  }

  .main-content {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-right {
    width: 100%;
  }

  .search-bar {
    flex-direction: column;
  }

  .search-input {
    min-width: 100%;
  }

  .filter-group {
    width: 100%;
  }

  .filter-select {
    flex: 1;
  }

  .modal {
    border-radius: var(--radius-xl);
    max-height: calc(100vh - 32px);
  }

  .modal-overlay {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0 16px;
  }

  .header-title h1 {
    font-size: 1.25rem;
  }

  .main-content {
    padding: 12px;
  }

  .card-body {
    padding: 16px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .sidebar,
  .header,
  .mobile-menu-toggle,
  .btn,
  .toast-container {
    display: none !important;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid var(--gray-300);
  }
}

/* ===== SIDEBAR EXTENSIONS ===== */
.sidebar-divider {
  padding: 16px 20px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.sidebar-group {
  margin-bottom: 4px;
}

.sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.sidebar-group-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.sidebar-group-toggle i:first-child {
  width: 20px;
  height: 20px;
}

.sidebar-group-toggle span {
  flex: 1;
  text-align: left;
}

.sidebar-group-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.sidebar-group.expanded .sidebar-group-arrow {
  transform: rotate(180deg);
}

.sidebar-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.sidebar-group.expanded .sidebar-group-items {
  max-height: 500px;
}

.sidebar-group-items .sidebar-item {
  padding-left: 52px;
}

.sidebar-badge {
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

/* ===== TABS COMPONENT ===== */
.tabs-container {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.tab-btn i {
  width: 16px;
  height: 16px;
}

/* ===== FILTERS BAR ===== */
.filters-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--gray-700);
  font-size: 14px;
  min-width: 160px;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.1);
}

.search-input-container {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-input-container i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-400);
}

.search-input-container .search-input {
  padding-left: 42px;
}

/* ===== CHECKBOX LABEL ===== */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ===== REQUEST CARDS (shared across request modules) ===== */
.requests-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-fast);
  cursor: pointer;
}

.request-card:hover {
  box-shadow: var(--shadow-md);
}

.request-card.pending {
  border-left: 4px solid var(--warning);
}

.request-card-header {
  padding: 16px 20px;
  background: var(--gray-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.request-type-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}

.request-type-badge i {
  width: 16px;
  height: 16px;
}

.request-card-body {
  padding: 20px;
}

.request-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: var(--gray-500);
  flex-wrap: wrap;
}

.request-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.request-meta i {
  width: 14px;
  height: 14px;
}

.request-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.request-actions {
  display: flex;
  gap: 8px;
}

/* ===== DETAIL SECTIONS ===== */
.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}

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

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-item.full-width {
  grid-column: span 2;
}

.detail-label {
  font-size: 12px;
  color: var(--gray-500);
}

.detail-value {
  font-size: 14px;
  color: var(--gray-900);
}

@media (max-width: 600px) {
  .request-card-footer {
    flex-direction: column;
    gap: 12px;
  }

  .request-actions {
    width: 100%;
  }

  .request-actions .btn {
    flex: 1;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-item.full-width {
    grid-column: span 1;
  }
}

/* ===== SCHOOL DETAIL - INFO SECTIONS ===== */

/* Info Sections */
.info-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
}

.info-section-last {
  border-bottom: none;
  padding-bottom: 0;
}

.info-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.info-section-header i {
  width: 14px;
  height: 14px;
}

/* Compact Info Grid */
.info-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}

.info-item-inline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-item-inline.full-width {
  grid-column: span 2;
}

.info-label-sm {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.info-value-sm {
  font-size: 14px;
  color: var(--gray-800);
}

.info-value-sm.text-muted {
  color: var(--gray-500);
  font-style: italic;
}

.code-inline {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
}

/* Tags */
.tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-sm {
  background: var(--primary-50);
  color: var(--primary-dark);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.tag-sm.tag-outline {
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

/* Status Badges Row */
.status-badges-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.status-badge-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-badge-label {
  font-size: 13px;
  color: var(--gray-600);
}

.status-badge-value {
  font-size: 14px;
  color: var(--gray-800);
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.dot-success {
  background: var(--success);
}

.status-dot.dot-danger {
  background: var(--danger);
}

/* Social Links */
.link-primary {
  color: var(--primary);
  text-decoration: none;
}

.link-primary:hover {
  text-decoration: underline;
}

/* Unit Link Badge */
.unit-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--primary-50);
  color: var(--primary-dark);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  margin-right: 6px;
  margin-bottom: 4px;
  transition: var(--transition-fast);
}

.unit-link-badge:hover {
  background: var(--primary-100);
  text-decoration: none;
}

.unit-link-badge.unit-hidden {
  background: var(--gray-100);
  color: var(--gray-500);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-600);
  text-decoration: none;
  margin-right: 8px;
}

.social-link:hover {
  color: var(--primary);
}

/* ===== OWNER CARD (Compact Layout) ===== */

.owner-info-card .card-body {
  padding: 0 !important;
}

/* Header Row: Profile + Balance side by side */
.owner-header-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--gray-100);
}

/* Owner Profile Card - Clickable */
.owner-profile-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 1px solid var(--gray-100);
}

.owner-profile-card:hover {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--white) 100%);
}

.owner-profile-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.owner-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.owner-avatar-lg.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.owner-profile-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.owner-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.owner-profile-email {
  font-size: 12px;
  color: var(--gray-500);
}

.owner-profile-phone {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-400);
  text-decoration: none;
  transition: color 0.2s ease;
}

.owner-profile-phone.clickable-phone:hover {
  color: #25D366;
}

.owner-profile-arrow {
  color: var(--gray-300);
  transition: transform 0.2s ease;
}

.owner-profile-card:hover .owner-profile-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

/* Owner Balance - Inline (right side) */
.owner-balance-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  min-width: 160px;
}

.owner-balance-inline .balance-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--success);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.owner-balance-inline .balance-icon i {
  width: 16px;
  height: 16px;
}

.owner-balance-inline .balance-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.owner-balance-inline .balance-label {
  font-size: 10px;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.owner-balance-inline .balance-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--success-dark);
}

/* Details Row: CPF + PIX */
.owner-details-row {
  display: flex;
  padding: 12px 16px;
  gap: 24px;
  background: var(--white);
}

.owner-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.owner-pix-item {
  flex: 1;
  min-width: 0;
}

.pix-value-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Owner Sections */
.owner-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.owner-section-last {
  border-bottom: none;
}

.owner-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.owner-section-header i {
  width: 14px;
  height: 14px;
}

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

.owner-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Owner PIX Card */
.owner-pix-card {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--gray-100);
}

.owner-pix-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fffbeb;
  border-radius: 8px;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 13px;
}

.owner-pix-warning i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Owner OpenPix Status */
.owner-openpix-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.owner-openpix-status i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.owner-openpix-status.success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.owner-openpix-status.success i {
  color: #16a34a;
}

.owner-openpix-status.warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.owner-openpix-status > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openpix-status-label {
  font-weight: 600;
  font-size: 12px;
}

.openpix-status-id {
  font-size: 11px;
  color: var(--gray-500);
  background: transparent;
  padding: 0;
}

/* Text utilities */
.text-muted {
  color: var(--gray-400) !important;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .info-grid-compact {
    grid-template-columns: 1fr;
  }

  .info-item-inline.full-width {
    grid-column: span 1;
  }
}

/* =====================================================
   MODAL DE EDIÇÃO DE ESCOLA (ADMIN)
   ===================================================== */

.edit-school-modal .modal-body {
  padding: 0;
}

/* Form Sections */
.form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-100);
}

.form-section.form-section-last {
  border-bottom: none;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 16px;
}

.form-section-title i {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

/* Form Grids */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}

.form-grid-2:last-child {
  margin-bottom: 0;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}

/* Units Edit List */
.units-edit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.unit-edit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.unit-edit-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
}

.unit-edit-name i {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
}

.unit-edit-slug {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-slug-input {
  font-size: 13px;
}

.form-grid-3:last-child {
  margin-bottom: 0;
}

/* Input com Prefixo */
.input-prefix-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-prefix-wrapper .input-prefix {
  position: absolute;
  left: 14px;
  color: var(--gray-400);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.input-prefix-wrapper .form-input.with-prefix {
  padding-left: 32px;
}

/* Para prefixos mais longos como "appfut.com.br/" */
.input-prefix-wrapper .input-prefix[style*="font-size: 12px"],
.input-prefix-wrapper .input-prefix:not([style]) {
  font-size: 12px;
}

.input-prefix-wrapper:has(.input-prefix:not([style])) .form-input.with-prefix {
  padding-left: 110px;
}

/* Input com Feedback (para slug) */
.input-with-feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-with-feedback .input-prefix-wrapper {
  flex: 1;
}

.input-with-feedback .input-prefix {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
}

.input-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.input-feedback svg {
  width: 14px;
  height: 14px;
}

.input-feedback.checking {
  color: var(--gray-500);
  background: var(--gray-100);
}

.input-feedback.success {
  color: var(--success-dark);
  background: var(--success-light);
}

.input-feedback.error {
  color: var(--danger-dark);
  background: var(--danger-light);
}

.input-feedback.warning {
  color: var(--warning-dark);
  background: var(--warning-light);
}

.input-feedback.info {
  color: var(--info-dark);
  background: var(--info-light);
}

/* Spinner animation for checking */
.input-feedback .spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 4px;
}

/* Chips Container (Categorias e Instalações) */
.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.chip:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.chip.chip-selected {
  color: white;
  background: var(--primary);
  border-color: var(--primary);
}

.chip.chip-selected:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Toggles Row */
.toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.toggle-item {
  display: flex;
  align-items: center;
}

.toggle-label-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.toggle-label-inline input[type="checkbox"] {
  display: none;
}

.toggle-slider-sm {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: var(--transition-normal);
}

.toggle-slider-sm::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.toggle-label-inline input:checked + .toggle-slider-sm {
  background: var(--primary);
}

.toggle-label-inline input:checked + .toggle-slider-sm::after {
  left: 23px;
}

.toggle-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
}

/* ===== MODAL TABS ===== */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.modal-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.modal-tab:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.modal-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--white);
}

.modal-tab i {
  width: 18px;
  height: 18px;
}

/* Tab Content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ===== NOTIFICAÇÕES TAB ===== */
.notifications-config {
  padding: 20px;
}

.notification-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--info-light);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.notification-info-banner i {
  width: 20px;
  height: 20px;
  color: var(--info);
  flex-shrink: 0;
}

.notification-info-banner span {
  font-size: 14px;
  color: var(--info-dark);
}

/* Notification Channel Card */
.notification-channel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

.notification-channel.disabled {
  opacity: 0.6;
}

.channel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.channel-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel-icon i {
  width: 22px;
  height: 22px;
}

.channel-info {
  flex: 1;
}

.channel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-title span:first-child {
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
}

.channel-badge {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: white;
}

.channel-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
  display: block;
}

.channel-always-on i {
  width: 28px;
  height: 28px;
}

/* Channel Events */
.channel-events {
  border-top: 1px solid var(--gray-100);
}

.channel-events.hidden {
  display: none;
}

.channel-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(37, 211, 102, 0.08);
  font-size: 12px;
  color: #128C7E;
}

.channel-tip i {
  width: 16px;
  height: 16px;
  color: #25D366;
  flex-shrink: 0;
}

/* Event Row */
.event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition-fast);
  border-bottom: 1px solid var(--gray-50);
}

.event-row:last-child {
  border-bottom: none;
}

.event-row:hover {
  background: var(--gray-50);
}

.event-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.event-info {
  flex: 1;
}

.event-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-800);
}

.event-subtitle {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ===== MINI TABS NO CARD INFO ===== */
.info-card-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 16px;
  background: var(--gray-50);
}

.info-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.info-tab i {
  width: 14px;
  height: 14px;
}

.info-tab:hover {
  color: var(--gray-700);
}

.info-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--white);
}

.info-tab-content {
  display: none;
}

.info-tab-content.active {
  display: block;
}

.info-section-mini {
  margin-bottom: 0;
}

.info-section-mini-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* ===== NOTIFICAÇÕES PREVIEW (Card Info) ===== */
.notifications-preview {
  padding-top: 4px;
}

.notification-preview-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
}

.preview-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.preview-icon i,
.preview-icon svg {
  width: 18px;
  height: 18px;
}

.preview-icon.email {
  background: rgba(30, 136, 229, 0.15);
  color: #1E88E5;
}

.preview-icon.whatsapp {
  background: rgba(37, 211, 102, 0.15);
  color: #25D366;
}

.preview-icon.sms {
  background: rgba(156, 163, 175, 0.15);
  color: #9CA3AF;
}

.preview-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  min-width: 70px;
}

.preview-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.preview-badge.success {
  background: var(--success-light);
  color: var(--success-dark);
}

.preview-badge.inactive {
  background: var(--gray-100);
  color: var(--gray-500);
}

.preview-badge.coming-soon {
  background: var(--gray-100);
  color: var(--gray-400);
}

.preview-events {
  font-size: 12px;
  color: var(--gray-500);
  margin-left: auto;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
}

.btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

/* Responsive para Modal de Edição */
@media (max-width: 768px) {
  .edit-school-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .form-grid-3 .form-group[style*="grid-column: span 2"] {
    grid-column: span 1;
  }

  .toggles-row {
    flex-direction: column;
    gap: 16px;
  }

  .modal-tab span {
    display: none;
  }

  .modal-tab i {
    width: 24px;
    height: 24px;
  }
}

/* ========================================
   Access Logs - Histórico de Acessos
   ======================================== */

.access-logs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.access-log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
}

.access-log-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
}

.access-log-icon i {
  width: 16px;
  height: 16px;
}

.access-log-icon.ios {
  background: #E3F2FD;
  color: #1976D2;
}

.access-log-icon.android {
  background: #E8F5E9;
  color: #388E3C;
}

.access-log-icon.web {
  background: #FFF3E0;
  color: #F57C00;
}

.access-log-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.access-log-device {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}

.access-log-time {
  font-size: 12px;
  color: var(--gray-500);
}

.access-log-version {
  font-size: 11px;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.access-logs-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: var(--gray-400);
  font-size: 13px;
}

.access-logs-empty i {
  width: 16px;
  height: 16px;
}

/* Access logs pagination */
.access-logs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  margin-top: 12px;
  border-top: 1px solid var(--gray-100);
}

/* Tab badge */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: var(--primary);
  border-radius: 9px;
  margin-left: 6px;
}

/* Owner tab content */
.owner-tab-content {
  display: none;
  padding: 16px;
}

.owner-tab-content.active {
  display: block;
}

/* Access logs header */
.access-logs-header {
  margin-bottom: 16px;
}

.access-logs-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.access-logs-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.access-logs-subtitle {
  font-size: 12px;
  color: var(--gray-500);
  display: block;
}

/* Owner Card Tabs */
.owner-card-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.owner-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.owner-tab:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.owner-tab.active {
  color: var(--primary);
  background: white;
  box-shadow: var(--shadow-sm);
}

.owner-tab i {
  width: 16px;
  height: 16px;
}

/* ===== HISTORICO DE SAQUES (Admin School Detail) ===== */
.withdrawals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.withdrawal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.withdrawal-item:hover {
  background: var(--gray-100);
  transform: translateX(4px);
}

.withdrawal-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.withdrawal-icon i {
  width: 20px;
  height: 20px;
}

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

.withdrawal-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.withdrawal-amount {
  font-size: 16px;
  font-weight: 700;
}

.withdrawal-fee {
  font-size: 12px;
  color: var(--warning);
  font-weight: 500;
}

.withdrawal-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.withdrawal-dest {
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.withdrawal-date {
  font-size: 11px;
  color: var(--gray-400);
}

.withdrawal-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ===== SEÇÃO DE TURMAS E ALUNOS (Admin School Detail) ===== */

/* Filtros com Chips */
.section-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip:hover {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

.filter-chip.active {
  background: var(--primary-50);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Status dot pequeno para filtros */
.status-dot-sm {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot-sm.active {
  background: var(--success);
}

.status-dot-sm.inactive {
  background: var(--danger);
}

/* Grid de Cards de Turmas */
.team-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.team-card-compact {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.team-card-compact:hover {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-sm);
}

.team-card-compact.inactive {
  background: var(--gray-50);
  opacity: 0.8;
}

.team-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.team-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team-status-indicator.active {
  background: var(--success);
}

.team-status-indicator.inactive {
  background: var(--danger);
}

.team-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-card-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.team-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
}

.team-detail-row i {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}

.team-student-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}

.team-student-count i {
  width: 14px;
  height: 14px;
}

/* Botão de Link no Card de Turma */
.team-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.team-card-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.team-card-link-btn:hover {
  background: var(--primary-100);
  transform: scale(1.1);
}

.team-card-link-btn.no-link {
  background: var(--gray-100);
  color: var(--gray-400);
}

.team-card-link-btn.no-link:hover {
  background: var(--gray-200);
  color: var(--gray-500);
}

.team-card-link-btn i {
  width: 14px;
  height: 14px;
}

.link-has-contract {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--warning);
  border-radius: 50%;
  border: 2px solid white;
}

/* Modal de Link de Matrícula */
.enrollment-link-modal {
  padding: 8px 0;
}

.link-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.link-url-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.link-url-box input {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  background: var(--gray-50);
}

.link-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.link-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

.link-stat i {
  width: 14px;
  height: 14px;
}

.link-description {
  background: var(--gray-50);
  padding: 12px;
  border-radius: var(--radius-md);
}

.link-description strong {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.link-description p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--gray-700);
}

.link-requirements {
  padding: 12px;
  background: var(--info-50);
  border-radius: var(--radius-md);
}

.link-requirements strong {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 10px;
}

.requirements-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.req-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--gray-400);
}

.req-chip.active {
  background: var(--info-50);
  border-color: var(--info);
  color: var(--info);
}

.req-chip i {
  width: 14px;
  height: 14px;
}

.link-contract-section {
  padding: 12px;
  background: var(--purple-50, #f3e8ff);
  border-radius: var(--radius-md);
}

.link-contract-section strong {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 10px;
}

.contract-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: white;
  padding: 10px;
  border-radius: var(--radius-sm);
}

.contract-file {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.contract-file i {
  width: 20px;
  height: 20px;
  color: var(--purple, #9333ea);
  flex-shrink: 0;
}

.contract-file span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.contract-type {
  padding: 2px 6px;
  background: var(--gray-100);
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-500);
  flex-shrink: 0;
}

.link-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.link-actions .btn {
  flex: 1;
}

.no-link-section {
  text-align: center;
  padding: 20px 0;
}

.no-link-section .empty-state {
  margin-bottom: 20px;
}

.no-link-section .btn {
  margin-top: 10px;
}

/* Busca Compacta */
.search-input.compact {
  position: relative;
  width: 220px;
}

.search-input.compact input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: var(--transition-fast);
}

.search-input.compact input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.search-input.compact i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  pointer-events: none;
}

/* Tabela de Alunos */
.students-table .student-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.student-avatar-sm.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.student-name {
  font-weight: 500;
  color: var(--gray-800);
}

/* Modal de Perfil do Aluno */
.student-profile-modal {
  padding: 4px;
}

.student-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 20px;
}

.student-profile-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.student-profile-photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.student-profile-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.student-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-name.clickable {
  cursor: pointer;
  color: var(--primary);
  transition: color var(--transition-fast);
}

.student-name.clickable:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.student-profile-section {
  margin-bottom: 20px;
}

.student-profile-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 12px;
}

.student-profile-section h4 i {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

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

.profile-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-info-item label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-info-item span {
  font-size: 14px;
  color: var(--gray-800);
}

.profile-info-item.full-width {
  grid-column: 1 / -1;
}

.blood-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: white;
  font-weight: 700;
  font-size: 14px;
  border-radius: 20px;
  min-width: 40px;
}

.profile-address {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
}

.profile-observations {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  background: var(--gray-50);
  padding: 12px;
  border-radius: var(--radius-md);
}

/* Card de Responsável */
.responsible-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.responsible-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.responsible-avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.responsible-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.responsible-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.responsible-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-600);
}

.responsible-contact i {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}

/* Responsivo para Mobile */
@media (max-width: 640px) {
  .section-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input.compact {
    width: 100%;
  }

  .team-cards-grid {
    grid-template-columns: 1fr;
  }

  .profile-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FORMULÁRIO DE TURMA ===== */

/* Card de turma com gradiente */
.team-card-compact {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.team-card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.team-card-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.team-card-compact:hover .team-card-edit {
  opacity: 1;
}

.team-card-edit i {
  width: 14px;
  height: 14px;
  color: var(--gray-600);
}

.team-card-edit:hover {
  background: var(--primary-50);
}

.team-card-edit:hover i {
  color: var(--primary);
}

/* Formulário de turma */
.team-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}

.form-section-header i {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.form-section-header span {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Chips selector (para categorias e dias) */
.chips-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chip-btn:hover {
  border-color: var(--primary-200);
  background: var(--primary-50);
}

.chip-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Horários personalizados */
.custom-schedule-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.schedule-day-label {
  width: 80px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}

.custom-schedule-row .form-input {
  flex: 1;
  padding: 10px 14px;
}

/* Preview de cores */
.color-preview {
  height: 80px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-md);
}

.color-preview-name {
  font-size: 18px;
  font-weight: 700;
}

.color-preview-cat {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 4px;
}

/* Grid de presets de cores */
.color-presets-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.color-preset-btn {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.color-preset-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.color-preset-btn.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-200);
}

.preset-name {
  font-size: 9px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Input de cor personalizada */
.color-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-input-wrapper input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius-sm);
}

.color-hex {
  flex: 1;
  font-family: monospace;
  text-transform: uppercase;
}

/* Textarea do formulário */
.form-textarea {
  min-height: 80px;
  resize: vertical;
}

/* Responsivo */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .color-presets-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fix toggle cortado no formulário */
.toggle-slider-sm {
  flex-shrink: 0;
  min-width: 44px;
}

.toggle-label-inline {
  flex-wrap: nowrap;
  width: 100%;
}

.toggle-text {
  white-space: nowrap;
}

/* Fix layout do form-group com toggle */
.form-group .toggle-label-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.toggle-group {
  padding-top: 8px;
}

/* Seção de Link de Matrícula no Modal de Turma */
.enrollment-link-section {
  margin-top: 8px;
}

.link-box {
  background: var(--gray-50);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.link-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.link-url-row input {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  background: white;
}

.link-info-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--gray-500);
}

.link-info-row span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.link-info-row i {
  width: 14px;
  height: 14px;
}

.link-info-row .has-contract {
  color: var(--purple, #9333ea);
  font-weight: 500;
}

.link-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.no-link-box {
  text-align: center;
  padding: 20px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--gray-300);
}

.no-link-box p {
  color: var(--gray-500);
  margin-bottom: 12px;
}

/* =====================================================
   SEÇÃO DE LINK DE MATRÍCULA - MODAL DE TURMA
   ===================================================== */

.enrollment-section {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 16px;
}

.enrollment-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.enrollment-url-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.enrollment-url {
  flex: 1;
  font-size: 13px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enrollment-url-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.btn-icon:hover {
  background: var(--primary);
  color: white;
}

.btn-icon i {
  width: 16px;
  height: 16px;
}

.enrollment-stats {
  display: flex;
  gap: 20px;
}

.enrollment-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

.enrollment-stat i {
  width: 14px;
  height: 14px;
}

.enrollment-contract-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: var(--radius-md);
  border: 1px dashed var(--gray-300);
}

.enrollment-contract-box.has-contract {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-50, #f0fdf4);
}

.contract-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contract-info i {
  width: 20px;
  height: 20px;
  color: var(--success);
}

.contract-info.no-contract i {
  color: var(--gray-400);
}

.contract-info.no-contract span {
  color: var(--gray-500);
  font-size: 13px;
}

.contract-details {
  display: flex;
  flex-direction: column;
}

.contract-label {
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
}

.contract-name {
  font-size: 13px;
  color: var(--gray-600);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-actions {
  display: flex;
  gap: 8px;
}

.enrollment-link-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.enrollment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  text-align: center;
}

.enrollment-empty i {
  width: 40px;
  height: 40px;
  color: var(--gray-300);
}

.enrollment-empty p {
  color: var(--gray-500);
  margin: 0;
}

/* Botão roxo para contrato (legado) */
.btn-outline.btn-purple {
  color: var(--purple, #9333ea);
  border-color: var(--purple, #9333ea);
}

.btn-outline.btn-purple:hover {
  background: var(--purple, #9333ea);
  color: white;
}

/* =====================================================
   MODAL DE TURMA - MINIMALISTA
   ===================================================== */

.tm-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header */
.tm-header {
  background: var(--gray-50);
  margin: -24px -24px 0 -24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.tm-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tm-name-input {
  flex: 1;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  transition: border-color var(--transition-fast);
}

.tm-name-input:focus {
  outline: none;
  border-color: var(--primary);
}

.tm-name-input::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}

/* Status Toggle */
.tm-status {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.tm-status input { display: none; }

.tm-status-track {
  width: 40px;
  height: 22px;
  background: var(--gray-300);
  border-radius: 999px;
  position: relative;
  transition: background var(--transition-fast);
}

.tm-status-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.tm-status input:checked + .tm-status-track {
  background: var(--primary);
}

.tm-status input:checked + .tm-status-track::after {
  left: 20px;
}

.tm-status-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}

/* Section */
.tm-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tm-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tm-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.tm-opt {
  font-weight: 400;
  color: var(--gray-400);
}

/* Grid */
.tm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Chips */
.tm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tm-chip {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tm-chip:hover {
  border-color: var(--gray-400);
}

.tm-chip.active {
  background: var(--gray-800);
  border-color: var(--gray-800);
  color: white;
}

/* Days */
.tm-days {
  display: flex;
  gap: 6px;
}

.tm-day {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-500);
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tm-day:hover {
  border-color: var(--gray-400);
}

.tm-day.active {
  background: var(--gray-800);
  border-color: var(--gray-800);
  color: white;
}

/* Mini Switch */
.tm-mini-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--gray-500);
}

.tm-mini-switch input { display: none; }

.tm-mini-track {
  width: 28px;
  height: 16px;
  background: var(--gray-300);
  border-radius: 999px;
  position: relative;
  transition: background var(--transition-fast);
}

.tm-mini-track::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left var(--transition-fast);
}

.tm-mini-switch input:checked + .tm-mini-track {
  background: var(--gray-600);
}

.tm-mini-switch input:checked + .tm-mini-track::after {
  left: 14px;
}

/* Schedule Rows */
.tm-schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.tm-schedule-day {
  width: 70px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}

.tm-schedule-row .form-input {
  flex: 1;
}

/* Link Section */
.tm-link-section {
  background: var(--gray-50);
  margin: 0 -24px -24px -24px;
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--gray-200);
}

.tm-link-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tm-link-url {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.tm-link-url code {
  flex: 1;
  font-size: 13px;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-link-btns {
  display: flex;
  gap: 4px;
}

.tm-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.tm-icon-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

.tm-icon-btn.danger:hover {
  background: var(--danger-50, #fef2f2);
  border-color: var(--danger);
  color: var(--danger);
}

.tm-icon-btn i {
  width: 14px;
  height: 14px;
}

.tm-link-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--gray-500);
}

/* Contract */
.tm-contract {
  padding: 12px;
  background: white;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
}

.tm-contract.has-file {
  border-style: solid;
}

.tm-contract-file {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tm-contract-file > i {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

.tm-contract-file > span {
  flex: 1;
  font-size: 13px;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-contract-empty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tm-contract-empty span {
  flex: 1;
  font-size: 13px;
  color: var(--gray-500);
}

/* Link Actions */
.tm-link-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-200);
}

.tm-text-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tm-text-btn:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.tm-text-btn.danger:hover {
  background: var(--danger-50, #fef2f2);
  color: var(--danger);
}

.tm-text-btn i {
  width: 14px;
  height: 14px;
}

/* No Link */
.tm-no-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
}

.tm-no-link p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
}

/* Responsive */
@media (max-width: 640px) {
  .tm-grid {
    grid-template-columns: 1fr;
  }

  .tm-header-content {
    flex-direction: column;
    align-items: stretch;
  }

  .tm-status {
    justify-content: flex-end;
  }

  .tm-days {
    flex-wrap: wrap;
  }
}

/* =====================================================
   FORMULÁRIO DE EDIÇÃO DE ALUNO (Admin)
   ===================================================== */

/* Grid de Tipo Sanguíneo */
.blood-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.blood-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blood-type-btn:hover {
  border-color: var(--danger);
  background: var(--danger-light);
}

.blood-type-btn.selected {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

/* Badge de tipo sanguíneo (visualização) */
.blood-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: var(--danger);
  border-radius: var(--radius-md);
}

/* Grid de Bolsa (6 tipos) */
.scholarship-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.scholarship-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.scholarship-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.scholarship-btn .scholarship-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: white;
}

.scholarship-btn .scholarship-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  text-align: center;
}

/* Cores de tipos de bolsa */
.scholarship-btn[data-type="none"] .scholarship-icon { background: var(--gray-400); }
.scholarship-btn[data-type="full"] .scholarship-icon { background: #F59E0B; }
.scholarship-btn[data-type="partial"] .scholarship-icon { background: #14B8A6; }
.scholarship-btn[data-type="sibling"] .scholarship-icon { background: #3B82F6; }
.scholarship-btn[data-type="athlete"] .scholarship-icon { background: #22C55E; }
.scholarship-btn[data-type="social"] .scholarship-icon { background: #A855F7; }

.scholarship-btn.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}

.scholarship-btn.selected .scholarship-label {
  color: var(--primary-dark);
  font-weight: 600;
}

/* Slider de Percentual de Bolsa */
.scholarship-percentage-section {
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
}

.percentage-slider-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.percentage-quick-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.percentage-quick-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.percentage-quick-btn:hover {
  border-color: var(--primary);
  background: var(--primary-50);
}

.percentage-quick-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.percentage-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.percentage-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  outline: none;
}

.percentage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.percentage-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  border: none;
}

.percentage-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  min-width: 50px;
  text-align: center;
}

/* Preview do valor com desconto */
.scholarship-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  margin-top: 12px;
}

.scholarship-preview-label {
  font-size: 13px;
  color: var(--gray-500);
}

.scholarship-preview-original {
  font-size: 15px;
  color: var(--gray-400);
  text-decoration: line-through;
}

.scholarship-preview-arrow {
  color: var(--gray-400);
}

.scholarship-preview-final {
  font-size: 18px;
  font-weight: 700;
  color: var(--success);
}

.scholarship-preview-savings {
  margin-left: auto;
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}

/* Seção de Pausa de Cobrança */
.billing-pause-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--warning-light);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(251, 140, 0, 0.3);
}

.billing-pause-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.billing-pause-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warning-dark);
}

.billing-pause-title i {
  width: 18px;
  height: 18px;
}

.pause-duration-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.pause-duration-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pause-duration-btn:hover {
  border-color: var(--warning);
  background: var(--warning-light);
}

.pause-duration-btn.active {
  background: var(--warning);
  border-color: var(--warning);
  color: white;
}

.pause-until-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--white);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--gray-600);
}

.pause-until-preview i {
  width: 16px;
  height: 16px;
  color: var(--warning);
}

.pause-until-date {
  font-weight: 600;
  color: var(--warning-dark);
}

/* Tabs do Modal de Edição de Aluno */
.student-edit-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.student-edit-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.student-edit-tab:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.student-edit-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--white);
}

.student-edit-tab i {
  width: 16px;
  height: 16px;
}

/* Conteúdo das Abas */
.student-edit-content {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Form row com 3 colunas */
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Upload de foto */
.photo-upload-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.photo-upload-preview {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--gray-200);
}

.photo-upload-preview.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: white;
}

.photo-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Estados brasileiros para select */
.state-select {
  text-transform: uppercase;
}

/* Status de assinatura */
.subscription-status-select option[value="active"] { color: var(--success); }
.subscription-status-select option[value="paused"] { color: var(--warning); }
.subscription-status-select option[value="cancelled"] { color: var(--danger); }

/* Posições de futebol */
.position-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

.position-chip.goleiro { background: #FEF3C7; color: #92400E; }
.position-chip.defensor { background: #DBEAFE; color: #1E40AF; }
.position-chip.meio { background: #D1FAE5; color: #065F46; }
.position-chip.atacante { background: #FEE2E2; color: #991B1B; }

/* Tab Badge (contador) */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-left: 4px;
}

.student-edit-tab.active .tab-badge {
  background: var(--primary-dark);
}

/* ===== CONTRATOS TAB ===== */
.contracts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contract-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gray-300);
  transition: var(--transition-fast);
}

.contract-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.contract-card[data-status="pending_family"] {
  border-left-color: var(--warning);
}

.contract-card[data-status="pending_school"] {
  border-left-color: var(--info);
}

.contract-card[data-status="completed"] {
  border-left-color: var(--success);
}

.contract-card[data-status="pre_signed"] {
  border-left-color: var(--gray-400);
}

.contract-card-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.contract-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  color: var(--gray-600);
  flex-shrink: 0;
}

.contract-icon i {
  width: 20px;
  height: 20px;
}

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

.contract-title {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.contract-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.contract-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.contract-type {
  padding: 2px 8px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

.contract-protocol {
  font-family: monospace;
  color: var(--gray-600);
}

.contract-signatures {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.signature-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.signature-info.signed {
  background: var(--success-light);
  color: var(--success-dark);
}

.signature-info.pending {
  background: var(--gray-100);
  color: var(--gray-500);
}

.contract-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ===== DOCUMENTOS TAB ===== */
.documents-progress {
  margin-bottom: 20px;
}

.documents-progress-bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 8px;
}

.documents-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.documents-progress-text {
  font-size: 13px;
  color: var(--gray-500);
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.document-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-fast);
}

.document-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.document-card.verified {
  border-color: var(--success);
}

.document-card.no-document {
  border-style: dashed;
  background: var(--gray-50);
}

.document-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.document-type-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  border-radius: var(--radius-md);
  color: var(--primary);
  flex-shrink: 0;
}

.document-type-icon i {
  width: 20px;
  height: 20px;
}

.document-card.no-document .document-type-icon {
  background: var(--gray-100);
  color: var(--gray-400);
}

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

.document-type-label {
  display: block;
  font-weight: 600;
  color: var(--gray-800);
  font-size: 13px;
  margin-bottom: 2px;
}

.document-type-desc {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
}

.document-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.document-status-badge.verified {
  background: var(--success-light);
  color: var(--success-dark);
}

.document-status-badge.pending {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.document-status-badge.missing {
  background: var(--gray-100);
  color: var(--gray-500);
}

.document-card-preview {
  padding: 12px;
}

.document-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.document-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-preview-image.error img {
  display: none;
}

.document-preview-image.error::after {
  content: 'Erro ao carregar';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 12px;
}

.document-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.document-preview-overlay span {
  font-size: 12px;
  font-weight: 500;
}

.document-preview-image:hover .document-preview-overlay {
  opacity: 1;
}

.document-card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.document-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.document-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.document-card-empty {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.document-card-empty span {
  font-size: 12px;
  color: var(--gray-400);
}

/* Empty state mini (para aba sem conteúdo) */
.empty-state-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

/* Responsivo */
@media (max-width: 768px) {
  .blood-type-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .scholarship-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .student-edit-tab span {
    display: none;
  }

  .student-edit-tab {
    padding: 12px 14px;
  }

  .photo-upload-section {
    flex-direction: column;
    text-align: center;
  }

  /* Responsivo para documentos */
  .documents-grid {
    grid-template-columns: 1fr;
  }

  /* Responsivo para contratos */
  .contract-card {
    flex-direction: column;
    gap: 12px;
  }

  .contract-card-right {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
  }

  .contract-signatures {
    flex-direction: column;
    gap: 6px;
  }
}

/* ===== DOCUMENT VIEWER MODAL ===== */
.doc-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.doc-viewer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.doc-viewer-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.doc-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.doc-viewer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-weight: 600;
  font-size: 15px;
}

.doc-viewer-title i {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.doc-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-viewer-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  transition: background 0.2s ease;
}

.doc-viewer-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.doc-viewer-btn.close {
  background: rgba(239, 68, 68, 0.3);
}

.doc-viewer-btn.close:hover {
  background: rgba(239, 68, 68, 0.5);
}

.doc-viewer-btn i {
  width: 18px;
  height: 18px;
}

.doc-viewer-zoom-level {
  color: white;
  font-size: 13px;
  min-width: 50px;
  text-align: center;
  opacity: 0.8;
}

.doc-viewer-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
}

.doc-viewer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: white;
}

.doc-viewer-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.doc-viewer-image-wrapper {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-viewer-image {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  transition: transform 0.2s ease;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.doc-viewer-pdf {
  width: 100%;
  height: 100%;
  max-width: 900px;
  border-radius: var(--radius-lg);
  background: white;
}

.doc-viewer-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: white;
  text-align: center;
}

.doc-viewer-error i {
  width: 64px;
  height: 64px;
  opacity: 0.5;
}

.doc-viewer-error span {
  font-size: 18px;
  font-weight: 600;
}

.doc-viewer-error p {
  opacity: 0.6;
  font-size: 14px;
  max-width: 300px;
}

.doc-viewer-footer {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.doc-viewer-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* ===== STUDENT EDIT TABS - Compacto ===== */
.student-edit-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  gap: 0;
}

.student-edit-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.student-edit-tab i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.student-edit-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-edit-tab:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.student-edit-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--white);
}

/* Tab Badge compacto */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-left: 4px;
}

.student-edit-tab.active .tab-badge {
  background: var(--primary-dark);
}

/* ===== CONTRATOS TAB V2 ===== */
.contracts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contract-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gray-300);
  transition: var(--transition-fast);
}

.contract-card:hover {
  box-shadow: var(--shadow-sm);
}

.contract-card[data-status="pending_family"] { border-left-color: var(--warning); }
.contract-card[data-status="pending_school"] { border-left-color: var(--info); }
.contract-card[data-status="completed"] { border-left-color: var(--success); }

.contract-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.contract-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  color: var(--gray-600);
  flex-shrink: 0;
}

.contract-icon i { width: 18px; height: 18px; }

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

.contract-title {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

.contract-card-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Botões de ação do contrato */
.contract-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-md);
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.contract-action-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.contract-action-btn.primary {
  background: var(--primary-50);
  color: var(--primary);
}

.contract-action-btn.primary:hover {
  background: var(--primary-100);
}

.contract-action-btn i { width: 16px; height: 16px; }

/* ===== DOCUMENTOS TAB V2 ===== */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.document-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-fast);
}

.document-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.document-card.verified {
  border-color: var(--success);
}

.document-card.no-document {
  border-style: dashed;
  background: var(--gray-50);
}

.document-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.document-type-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  border-radius: var(--radius-md);
  color: var(--primary);
  flex-shrink: 0;
}

.document-type-icon i { width: 16px; height: 16px; }

.document-card.no-document .document-type-icon {
  background: var(--gray-100);
  color: var(--gray-400);
}

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

.document-type-label {
  display: block;
  font-weight: 600;
  color: var(--gray-800);
  font-size: 12px;
}

.document-type-desc {
  display: block;
  font-size: 10px;
  color: var(--gray-500);
}

.document-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}

.document-status-badge.verified {
  background: var(--success-light);
  color: var(--success-dark);
}

.document-status-badge.pending {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.document-status-badge.missing {
  background: var(--gray-100);
  color: var(--gray-500);
}

.document-status-badge i { width: 10px; height: 10px; }

.document-card-preview {
  padding: 8px;
}

.document-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.document-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.document-preview-overlay span { font-size: 11px; }
.document-preview-overlay i { width: 20px; height: 20px; }

.document-preview-image:hover .document-preview-overlay {
  opacity: 1;
}

.document-card-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.document-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.document-meta i { width: 10px; height: 10px; }

.document-actions {
  display: flex;
  gap: 6px;
}

.document-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.document-action-btn:hover {
  background: var(--gray-200);
}

.document-action-btn.primary {
  background: var(--primary-50);
  color: var(--primary);
}

.document-action-btn.primary:hover {
  background: var(--primary-100);
}

.document-action-btn.success {
  background: var(--success-light);
  color: var(--success-dark);
}

.document-action-btn.warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.document-action-btn i { width: 12px; height: 12px; }

.document-card-empty {
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.document-card-empty i { width: 24px; height: 24px; color: var(--gray-300); }
.document-card-empty span { font-size: 11px; color: var(--gray-400); }

/* ===== EMPTY STATE MINI ===== */
.empty-state-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-state-mini i {
  width: 48px;
  height: 48px;
  color: var(--gray-300);
  margin-bottom: 12px;
}

/* ===== STUDENT PROFILE MODAL V2 ===== */
.student-profile-modal-v2 .modal {
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.student-profile-modal-v2 .modal-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 80px);
}

.sp-modal {
  padding: 20px;
  background: var(--gray-50);
  min-height: 100%;
}

/* Header */
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
}

.sp-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sp-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--gray-200);
  flex-shrink: 0;
}

.sp-avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.sp-header-info {
  flex: 1;
}

.sp-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 4px 0;
}

.sp-school-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.sp-school-name i {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.sp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.sp-badge i { width: 14px; height: 14px; }

.sp-badge.success {
  background: var(--success-light);
  color: var(--success-dark);
}

.sp-badge.danger {
  background: var(--danger-light);
  color: var(--danger-dark);
}

.sp-badge.team {
  background: color-mix(in srgb, var(--team-color) 15%, white);
  color: var(--team-color);
}

.sp-badge.category {
  background: var(--gray-100);
  color: var(--gray-600);
}

.sp-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.sp-scholarship-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
}

.sp-scholarship-badge i { width: 16px; height: 16px; }

.sp-paused-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--warning-light);
  color: var(--warning-dark);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.sp-paused-badge i { width: 14px; height: 14px; }

/* Stats Row */
.sp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.sp-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}

.sp-stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.sp-stat-icon i { width: 20px; height: 20px; }

.sp-stat-icon.blue { background: var(--blue-50); color: var(--blue); }
.sp-stat-icon.green { background: var(--success-light); color: var(--success); }
.sp-stat-icon.purple { background: #F3E8FF; color: #7C3AED; }
.sp-stat-icon.amber { background: #FEF3C7; color: #D97706; }

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

.sp-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-stat-label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
}

/* Content Grid */
.sp-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sp-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card */
.sp-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  overflow: hidden;
}

.sp-card.paused {
  border-color: var(--warning);
  background: linear-gradient(to bottom, var(--warning-light) 0%, white 100%);
}

.sp-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-700);
}

.sp-card-header i {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.sp-card-tag {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--gray-200);
  color: var(--gray-600);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
}

.sp-card-tag.warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.sp-card-count {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.sp-card-body {
  padding: 16px;
}

/* Info Row */
.sp-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.sp-info-row:last-child { margin-bottom: 0; }

.sp-info-row.single {
  grid-template-columns: 1fr;
}

.sp-info-item {
  min-width: 0;
}

.sp-info-item label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-info-item span {
  display: block;
  font-size: 13px;
  color: var(--gray-800);
  word-break: break-word;
}

/* Guardian */
.sp-guardian-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sp-guardian-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.sp-guardian-name {
  display: block;
  font-weight: 600;
  color: var(--gray-800);
  font-size: 14px;
}

.sp-guardian-cpf {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

.sp-guardian-link-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 16px;
  margin-top: 8px;
}

.sp-guardian-link-status svg {
  width: 16px;
  height: 16px;
}

.sp-guardian-link-status.linked {
  background: var(--success-100);
  color: var(--success-700);
  border: 1px solid var(--success-200);
}

.sp-guardian-link-status.not-linked {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-200);
}

.sp-guardian-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-size: 12px;
  text-decoration: none;
  transition: var(--transition-fast);
}

.sp-contact-btn:hover {
  background: var(--primary-100);
}

.sp-contact-btn.secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

.sp-contact-btn.email {
  background: var(--info-light);
  color: var(--info-dark);
}

.sp-contact-btn i { width: 14px; height: 14px; }

/* Medical */
.sp-medical-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-medical-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.sp-medical-item.has-value {
  background: #FEF2F2;
}

.sp-medical-item.full {
  grid-column: 1 / -1;
}

.sp-medical-item i {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.sp-medical-item.has-value i {
  color: var(--danger);
}

.sp-medical-item label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 2px;
}

.sp-medical-item span {
  display: block;
  font-size: 13px;
  color: var(--gray-700);
}

.sp-blood-type {
  margin-left: auto;
  padding: 4px 10px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

/* Financial */
.sp-financial-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 12px;
}

.sp-financial-label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 2px;
}

.sp-financial-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.sp-financial-discount {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sp-financial-discount s {
  color: var(--gray-400);
  font-size: 14px;
}

.discount-badge {
  padding: 2px 8px;
  background: var(--success-light);
  color: var(--success-dark);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.sp-financial-due {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--gray-600);
}

.sp-financial-due i { width: 16px; height: 16px; }

.sp-scholarship-info {
  padding: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--success);
}

.sp-scholarship-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--success-dark);
  font-size: 13px;
}

.sp-scholarship-type i { width: 16px; height: 16px; }

.sp-scholarship-reason {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Team Card */
.sp-team-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.sp-team-color-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--team-color);
}

.sp-team-info {
  flex: 1;
  padding-left: 8px;
}

.sp-team-name {
  display: block;
  font-weight: 600;
  color: var(--gray-800);
  font-size: 14px;
}

.sp-team-category {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

.sp-shirt-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  color: white;
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 700;
}

.sp-no-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--gray-400);
  font-size: 13px;
}

.sp-no-team i { width: 20px; height: 20px; }

.sp-position {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--gray-600);
}

.sp-position i { width: 16px; height: 16px; }

/* Contracts List */
.sp-contracts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-contract-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gray-300);
}

.sp-contract-item[data-status="pending_family"] { border-left-color: var(--warning); }
.sp-contract-item[data-status="pending_school"] { border-left-color: var(--info); }
.sp-contract-item[data-status="completed"] { border-left-color: var(--success); }

.sp-contract-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: var(--radius-md);
  color: var(--gray-500);
}

.sp-contract-icon i { width: 16px; height: 16px; }

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

.sp-contract-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-contract-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.sp-contract-status i { width: 12px; height: 12px; }
.sp-contract-status.warning { color: var(--warning-dark); }
.sp-contract-status.info { color: var(--info-dark); }
.sp-contract-status.success { color: var(--success-dark); }

.sp-contract-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-200);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.sp-contract-btn:hover {
  background: var(--primary);
  color: white;
}

.sp-contract-btn i { width: 14px; height: 14px; }

.sp-see-more {
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
}

.sp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--gray-400);
  font-size: 13px;
}

.sp-empty-state i {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}

/* Docs Grid */
.sp-docs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.sp-doc-item.has-doc {
  background: white;
  border: 1px solid var(--gray-200);
}

.sp-doc-item.verified {
  border-color: var(--success);
  background: var(--success-light);
}

.sp-doc-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  color: var(--gray-400);
}

.sp-doc-item.has-doc .sp-doc-icon {
  background: var(--primary-50);
  color: var(--primary);
}

.sp-doc-icon i { width: 16px; height: 16px; }

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

.sp-doc-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-800);
}

.sp-doc-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-500);
}

.sp-doc-item.verified .sp-doc-status {
  color: var(--success-dark);
}

.sp-doc-status i { width: 12px; height: 12px; }

.sp-doc-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sp-doc-btn:hover {
  background: var(--primary-dark);
}

.sp-doc-btn i { width: 14px; height: 14px; }

/* Action Buttons (Contratos e Documentos) */
.sp-action-buttons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.sp-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.sp-action-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.sp-action-btn.primary {
  background: var(--primary);
  color: white;
}

.sp-action-btn.primary:hover {
  background: var(--primary-dark);
}

.sp-action-btn i { width: 14px; height: 14px; }

/* Responsivo */
@media (max-width: 900px) {
  .sp-content-grid {
    grid-template-columns: 1fr;
  }

  .sp-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sp-header {
    flex-direction: column;
    text-align: center;
  }

  .sp-header-left {
    flex-direction: column;
  }

  .sp-stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .sp-info-row {
    grid-template-columns: 1fr;
  }
}

/* ===== OWNER MODAL (om-*) ===== */
.om {
  padding: 0;
}

.om-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  border-bottom: 1px solid var(--gray-200);
}

.om-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

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

.om-header-info h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.om-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.om-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.om-tag i { width: 12px; height: 12px; }

.om-tag.green { background: var(--primary-50); color: var(--primary-dark); }
.om-tag.blue { background: var(--blue-50); color: var(--blue); }
.om-tag.purple { background: #F3E8FF; color: #7C3AED; }

.om-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px 14px;
  background: var(--primary);
  border-radius: 8px;
  color: white;
  flex-shrink: 0;
}

.om-balance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.om-balance-value {
  font-size: 18px;
  font-weight: 700;
}

.om-stats {
  display: flex;
  gap: 24px;
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid var(--gray-100);
}

.om-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
}

.om-stat i {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
}

.om-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border-top: 1px solid var(--gray-200);
}

.om-box {
  background: white;
  padding: 16px 20px;
}

.om-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

.om-box-title i {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.om-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
}

.om-row:first-of-type { padding-top: 0; }
.om-row:last-of-type { padding-bottom: 0; }

.om-label {
  font-size: 12px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.om-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  text-align: right;
  word-break: break-word;
}

.om-break {
  word-break: break-all;
}

.om-code {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 11px;
  background: var(--gray-100);
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--gray-700);
}

.om-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.om-status i { width: 14px; height: 14px; }

.om-status.success {
  background: var(--success-light);
  color: var(--success-dark);
}

.om-status.warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

/* Responsivo */
@media (max-width: 600px) {
  .om-header {
    flex-wrap: wrap;
  }

  .om-balance {
    width: 100%;
    align-items: center;
    margin-top: 8px;
  }

  .om-stats {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .om-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   RESPONSIVIDADE MOBILE - Portais Responsável/Treinador
   Adicionado: 2026-03-29
   ==================================================== */

/* --------------------------------
   FASE 1 - CRÍTICO
   -------------------------------- */

/* 1.1 Tabelas Responsivas */
@media (max-width: 768px) {
  .data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .data-table {
    min-width: 600px;
  }

  .data-table th,
  .data-table td {
    padding: 12px 14px;
    white-space: nowrap;
  }

  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 1;
  }

  .data-table tr:nth-child(even) td:first-child {
    background: var(--gray-50);
  }
}

/* 1.2 Tabs com Scroll Horizontal */
@media (max-width: 768px) {
  .tabs,
  .tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tabs::-webkit-scrollbar,
  .tabs-container::-webkit-scrollbar {
    display: none;
  }

  .tab,
  .tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 16px;
  }
}

/* 1.3 Search Input */
@media (max-width: 480px) {
  .search-input {
    min-width: 100%;
    width: 100%;
  }

  .search-bar {
    flex-direction: column;
    gap: 10px;
  }

  .search-bar .btn {
    width: 100%;
  }
}

/* 1.4 Stats Grid */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 1.375rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------
   FASE 2 - HEADERS
   -------------------------------- */

/* 2.1 Page Header */
@media (max-width: 480px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-header-left h2 {
    font-size: 1.25rem;
  }

  .page-header-right {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .page-header-right .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }
}

/* 2.2 Card Header Actions */
@media (max-width: 640px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .card-header-actions,
  .card-header .btn {
    width: 100%;
  }

  .card-header .btn {
    justify-content: center;
  }
}

/* --------------------------------
   FASE 3 - FORMS E PAGINATION
   -------------------------------- */

/* 3.1 Pagination */
@media (max-width: 640px) {
  .pagination {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .pagination-info {
    order: 2;
    text-align: center;
    font-size: 0.85rem;
  }

  .pagination-buttons {
    order: 1;
    width: 100%;
    justify-content: center;
  }

  .pagination-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* 3.2 Form Rows */
@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-grid-2,
  .form-grid-3,
  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-group label {
    font-size: 0.85rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Previne zoom no iOS */
  }
}

/* --------------------------------
   FASE 4 - GRIDS ESPECÍFICOS
   -------------------------------- */

/* 4.1 Financial Summary */
@media (max-width: 480px) {
  .financial-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .financial-summary-item {
    padding: 14px;
  }

  .summary-value {
    font-size: 1.25rem;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .financial-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4.2 Children Grid (Portal Responsável) */
@media (max-width: 480px) {
  .children-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .child-card {
    padding: 16px;
  }

  .child-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .children-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4.3 Attendance Grid */
@media (max-width: 640px) {
  .attendance-grid {
    grid-template-columns: 1fr;
  }

  .attendance-card {
    padding: 14px;
  }
}

/* 4.4 Quick Actions Grid */
@media (max-width: 480px) {
  .actions-grid,
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .action-card,
  .quick-action-card {
    padding: 14px 10px;
  }

  .action-card i,
  .quick-action-card i {
    font-size: 1.25rem;
  }

  .action-card span,
  .quick-action-card span {
    font-size: 0.75rem;
  }
}

@media (max-width: 380px) {
  .actions-grid,
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------
   FASE 5 - MODAL E ACTIONS
   -------------------------------- */

/* 5.1 Modal Fullscreen em Mobile */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .modal {
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    margin: 0;
    max-width: 100%;
  }

  .modal-header {
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 10;
    border-radius: 0;
  }

  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--white);
    z-index: 10;
    border-radius: 0;
    padding: 12px 16px;
  }

  .modal-footer .btn {
    flex: 1;
  }
}

/* 5.2 Empty State */
@media (max-width: 480px) {
  .empty-state {
    padding: 30px 16px;
  }

  .empty-state i {
    font-size: 2.5rem;
  }

  .empty-state h3 {
    font-size: 1.1rem;
  }

  .empty-state p {
    font-size: 0.9rem;
  }
}

/* --------------------------------
   FASE 6 - FILTROS E PAYMENTS
   -------------------------------- */

/* 6.1 Filters Bar */
@media (max-width: 480px) {
  .filters-bar,
  .filters-row {
    flex-direction: column;
    gap: 10px;
  }

  .filter-select,
  .filter-input {
    width: 100%;
  }

  .filter-group {
    width: 100%;
  }
}

/* 6.2 Payments Summary (Portal Responsável) */
@media (max-width: 480px) {
  .payments-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .payment-summary-card {
    padding: 14px;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .payments-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 6.3 Payment Card */
@media (max-width: 480px) {
  .payment-card {
    padding: 14px;
  }

  .payment-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .payment-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .payment-card-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* --------------------------------
   UTILITÁRIOS MOBILE
   -------------------------------- */

/* Esconder em mobile */
@media (max-width: 480px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Mostrar apenas em mobile */
@media (min-width: 481px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Touch targets mínimos */
@media (max-width: 768px) {
  .btn,
  .btn-sm,
  .btn-icon {
    min-height: 44px;
  }

  .btn-sm {
    padding: 10px 14px;
  }

  a.clickable,
  button {
    min-height: 44px;
  }
}

/* Melhorar scroll em containers */
@media (max-width: 768px) {
  .scroll-container {
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------
   ESPECÍFICO PORTAL TREINADOR
   -------------------------------- */

@media (max-width: 480px) {
  /* Attendance list */
  .attendance-student-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .attendance-student-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .attendance-student-actions .btn {
    flex: 1;
  }

  /* Team selector */
  .team-selector {
    width: 100%;
  }

  .team-selector select {
    width: 100%;
  }
}

/* --------------------------------
   ESPECÍFICO PORTAL RESPONSÁVEL
   -------------------------------- */

@media (max-width: 480px) {
  /* Convocations card */
  .convocation-card {
    padding: 14px;
  }

  .convocation-card-header {
    flex-direction: column;
    gap: 8px;
  }

  .convocation-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .convocation-card-actions .btn {
    flex: 1;
  }

  /* Contract card mobile */
  .contract-card-mobile {
    padding: 14px;
  }

  .contract-card-mobile .contract-header {
    flex-direction: column;
    gap: 8px;
  }
}

/* ====================================================
   RESPONSIVIDADE COMPLETA - PORTAL ESCOLA (GESTOR)
   Adicionado: 2026-03-29
   ==================================================== */

/* --------------------------------
   SIDEBAR MOBILE MELHORADO
   -------------------------------- */

@media (max-width: 1024px) {
  /* Overlay escurece fundo quando sidebar aberta */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sticky) - 1);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.visible {
    display: block;
    opacity: 1;
  }

  /* Sidebar slide-in */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: var(--z-sticky);
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  /* Main wrapper sem margin */
  .main-wrapper {
    margin-left: 0;
    width: 100%;
  }

  /* Botão hamburger - exibição controlada pela regra global */
}

/* --------------------------------
   HEADER RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .header {
    padding: 0 12px;
    height: 60px;
  }

  .header-left {
    gap: 8px;
  }

  .header-title h1 {
    font-size: 1.1rem;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-subtitle {
    display: none;
  }

  .header-right {
    gap: 8px;
  }

  .header-school {
    display: none;
  }

  .header-user {
    padding: 6px 8px;
    gap: 6px;
  }

  .header-user-info {
    display: none;
  }

  .header-user i[data-lucide="chevron-down"] {
    display: none;
  }

  .header-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  /* User dropdown posicionado */
  .user-dropdown {
    right: 8px;
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0 10px;
    height: 56px;
  }

  .header-title h1 {
    font-size: 1rem;
    max-width: 120px;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
  }
}

/* --------------------------------
   MAIN CONTENT RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 12px;
  }
}

/* --------------------------------
   DASHBOARD ESCOLA RESPONSIVO
   -------------------------------- */

/* Pending Banner */
@media (max-width: 640px) {
  .pending-banner {
    margin-bottom: 16px;
  }

  .pending-banner-header {
    padding: 12px;
  }

  .pending-banner-icon {
    width: 36px;
    height: 36px;
  }

  .pending-banner-title strong {
    font-size: 14px;
  }

  .pending-banner-item {
    padding: 10px 12px;
  }
}

/* Period Selector */
@media (max-width: 480px) {
  .period-selector-container {
    margin-bottom: 16px;
  }

  .period-selector {
    gap: 8px;
  }

  .period-nav {
    width: 36px;
    height: 36px;
  }

  .period-badge {
    padding: 8px 14px;
    font-size: 12px;
  }

  .period-dots {
    margin-top: 6px;
  }

  .period-dot {
    width: 6px;
    height: 6px;
  }

  .period-dot.active {
    width: 16px;
  }
}

/* Stats Grid 4 colunas */
@media (max-width: 1200px) {
  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stats-grid-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stat-card {
    padding: 12px 14px;
  }

  .stat-card-icon {
    width: 42px;
    height: 42px;
  }

  .stat-card-value {
    font-size: 18px;
  }

  .stat-card-label {
    font-size: 12px;
  }

  .stat-card-subtitle {
    font-size: 10px;
  }
}

/* Quick Actions Grid */
@media (max-width: 1200px) {
  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .quick-actions-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .quick-action-card {
    padding: 12px 6px;
  }

  .quick-action-card i {
    width: 22px;
    height: 22px;
  }

  .quick-action-card span {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .quick-action-card {
    padding: 10px 4px;
    gap: 6px;
  }

  .quick-action-card i {
    width: 20px;
    height: 20px;
  }

  .quick-action-card span {
    font-size: 9px;
    line-height: 1.2;
  }
}

/* Dashboard Grid */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Birthday Card */
@media (max-width: 480px) {
  .birthday-item {
    padding: 8px;
  }

  .birthday-avatar {
    width: 36px;
    height: 36px;
  }

  .birthday-name {
    font-size: 13px;
  }

  .birthday-date {
    font-size: 11px;
  }

  .birthday-age {
    padding: 2px 6px;
    font-size: 10px;
  }

  .birthday-badge {
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* List Items */
@media (max-width: 480px) {
  .list-item {
    padding: 10px;
  }

  .list-item-avatar {
    width: 40px;
    height: 40px;
  }

  .list-item-title {
    font-size: 13px;
  }

  .list-item-subtitle {
    font-size: 11px;
  }

  .list-item-value {
    font-size: 13px;
  }

  .list-item-end {
    gap: 2px;
  }

  .list-item-end .badge {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* --------------------------------
   FINANCIAL PAGE RESPONSIVO
   -------------------------------- */

/* Tabs with Actions */
@media (max-width: 768px) {
  .tabs-with-actions {
    flex-direction: column;
    gap: 12px;
  }

  .tabs-with-actions .tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs-with-actions .header-actions {
    width: 100%;
  }

  .tabs-with-actions .header-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .tab {
    padding: 10px 12px;
    font-size: 12px;
  }

  .tab i {
    width: 16px;
    height: 16px;
  }

  .tab span {
    display: none;
  }

  /* Mostrar apenas ícones nos tabs em mobile */
  .tab i + span {
    display: none;
  }
}

/* Financial Summary Cards */
@media (max-width: 900px) {
  .financial-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .financial-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .financial-card {
    padding: 14px;
  }

  .financial-card-value {
    font-size: 20px;
  }

  .financial-card-label {
    font-size: 12px;
  }
}

/* Balance Card */
@media (max-width: 480px) {
  .balance-card {
    padding: 16px;
  }

  .balance-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .balance-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .balance-card-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .balance-value {
    font-size: 28px;
  }
}

/* FAB (Floating Action Button) */
@media (max-width: 768px) {
  .fab {
    bottom: 16px;
    right: 16px;
  }

  .fab-menu {
    bottom: 70px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .fab {
    width: 56px;
    height: 56px;
    bottom: 12px;
    right: 12px;
  }

  .fab i {
    width: 24px;
    height: 24px;
  }

  .fab-menu {
    bottom: 76px;
    right: 12px;
    min-width: 180px;
  }

  .fab-menu-item {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* --------------------------------
   STUDENTS PAGE RESPONSIVO
   -------------------------------- */

/* Stats Mini Row */
@media (max-width: 640px) {
  .stats-mini-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-mini {
    padding: 12px;
  }

  .stat-mini-value {
    font-size: 20px;
  }

  .stat-mini-label {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .stats-mini-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Filter Buttons */
@media (max-width: 768px) {
  .filter-buttons {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .filter-buttons .filter-select {
    width: 100%;
  }

  .filter-buttons .btn {
    width: 100%;
  }
}

/* Table Container */
@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .data-table {
    min-width: 700px;
  }

  /* Sticky first column */
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  }

  .data-table tr:nth-child(even) td:first-child {
    background: var(--gray-50);
  }

  .data-table tr:hover td:first-child {
    background: var(--gray-100);
  }
}

/* Student Row */
@media (max-width: 480px) {
  .student-row-avatar {
    width: 36px;
    height: 36px;
  }

  .student-row-name {
    font-size: 13px;
  }

  .student-row-info {
    font-size: 11px;
  }
}

/* Table Footer */
@media (max-width: 480px) {
  .table-footer {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .table-count {
    font-size: 12px;
  }
}

/* --------------------------------
   FORMS RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .form-section {
    padding: 16px;
  }

  .form-section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  /* Form grids */
  .form-row,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-group label {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px;
    font-size: 16px; /* Previne zoom iOS */
  }

  .form-group .input-icon {
    padding-left: 40px;
  }

  .form-group .input-icon-left {
    left: 12px;
  }

  /* Checkbox e Radio */
  .checkbox-group,
  .radio-group {
    gap: 8px;
  }

  .checkbox-label,
  .radio-label {
    font-size: 13px;
  }
}

/* Photo Upload Section */
@media (max-width: 480px) {
  .photo-upload-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .photo-preview {
    width: 100px;
    height: 100px;
  }

  .photo-upload-actions {
    flex-direction: column;
    width: 100%;
  }

  .photo-upload-actions .btn {
    width: 100%;
  }
}

/* --------------------------------
   TEAMS PAGE RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .teams-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .teams-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .team-card {
    padding: 14px;
  }

  .team-card-header {
    gap: 10px;
  }

  .team-color-dot {
    width: 12px;
    height: 12px;
  }

  .team-card-name {
    font-size: 15px;
  }

  .team-card-info {
    font-size: 12px;
  }

  .team-card-stats {
    gap: 12px;
  }

  .team-card-stat {
    font-size: 12px;
  }
}

/* --------------------------------
   ATTENDANCE PAGE RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .attendance-header {
    flex-direction: column;
    gap: 12px;
  }

  .attendance-date-selector {
    width: 100%;
    justify-content: space-between;
  }

  .attendance-team-selector {
    width: 100%;
  }

  .attendance-team-selector select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .attendance-list {
    gap: 8px;
  }

  .attendance-student {
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .attendance-student-info {
    flex-direction: row;
    align-items: center;
  }

  .attendance-student-avatar {
    width: 40px;
    height: 40px;
  }

  .attendance-student-name {
    font-size: 14px;
  }

  .attendance-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  .attendance-btn {
    padding: 10px;
    justify-content: center;
  }

  .attendance-btn span {
    display: none;
  }
}

/* --------------------------------
   MODALS RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .modal-overlay {
    padding: 16px;
  }

  .modal {
    max-width: 100%;
    max-height: calc(100vh - 32px);
  }

  .modal-lg {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
  }

  .modal {
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-header {
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .modal-title {
    font-size: 16px;
  }

  .modal-close {
    width: 36px;
    height: 36px;
  }

  .modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
  }

  .modal-footer {
    padding: 12px 16px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Charge Modal */
  .charge-modal .modal {
    min-height: 100vh;
  }

  .charge-step-indicator {
    flex-wrap: wrap;
    gap: 8px;
  }

  .charge-step {
    flex: 1;
    min-width: 80px;
  }
}

/* Student Profile Modal V2 */
@media (max-width: 768px) {
  .student-profile-modal-v2 .modal {
    max-width: 100%;
  }

  .sp-modal {
    padding: 12px;
  }

  .sp-header {
    padding: 14px;
    gap: 12px;
  }

  .sp-avatar {
    width: 60px;
    height: 60px;
  }

  .sp-name {
    font-size: 18px;
  }

  .sp-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .sp-stat-card {
    padding: 10px 12px;
  }

  .sp-stat-value {
    font-size: 14px;
  }

  .sp-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .sp-header {
    flex-direction: column;
    text-align: center;
  }

  .sp-header-left {
    flex-direction: column;
    align-items: center;
  }

  .sp-header-right {
    align-items: center;
  }

  .sp-badges {
    justify-content: center;
  }

  .sp-info-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sp-guardian-contacts {
    flex-direction: column;
  }

  .sp-contact-btn {
    justify-content: center;
  }
}

/* --------------------------------
   CARDS RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .card {
    border-radius: var(--radius-lg);
  }

  .card-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-title {
    font-size: 15px;
  }

  .card-header .btn {
    width: 100%;
    justify-content: center;
  }

  .card-body {
    padding: 14px 16px;
  }

  .card-footer {
    padding: 12px 16px;
  }
}

/* --------------------------------
   SETTINGS PAGE RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
  }

  .settings-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .settings-section {
    padding: 14px;
  }

  .settings-section-title {
    font-size: 14px;
  }

  .setting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .setting-row .btn,
  .setting-row select,
  .setting-row input {
    width: 100%;
  }
}

/* --------------------------------
   ANNOUNCEMENTS & CALENDAR RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .announcement-card {
    padding: 14px;
  }

  .announcement-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .announcement-title {
    font-size: 15px;
  }

  .announcement-meta {
    font-size: 11px;
  }

  .calendar-header {
    flex-direction: column;
    gap: 10px;
  }

  .calendar-nav {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-grid {
    font-size: 12px;
  }

  .calendar-day {
    padding: 6px;
  }
}

/* --------------------------------
   CHAMPIONSHIPS & FRIENDLY MATCHES
   -------------------------------- */

@media (max-width: 768px) {
  .championship-grid,
  .matches-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .championship-card,
  .match-card {
    padding: 14px;
  }

  .championship-card-header,
  .match-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .championship-card-actions,
  .match-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .championship-card-actions .btn,
  .match-card-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* --------------------------------
   TRAINERS PAGE RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .trainers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .trainers-grid {
    grid-template-columns: 1fr;
  }

  .trainer-card {
    padding: 14px;
  }

  .trainer-card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .trainer-avatar {
    width: 60px;
    height: 60px;
  }

  .trainer-card-actions {
    width: 100%;
    flex-direction: row;
    gap: 8px;
  }

  .trainer-card-actions .btn {
    flex: 1;
  }
}

/* --------------------------------
   CONTRACTS PAGE RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  .contracts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .contract-card {
    padding: 14px;
  }

  .contract-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .contract-card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .contract-card-actions .btn {
    justify-content: center;
  }

  .contract-signatures {
    flex-direction: column;
    gap: 8px;
  }
}

/* --------------------------------
   REQUESTS PAGES RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .request-card {
    padding: 14px;
  }

  .request-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .request-card-info {
    width: 100%;
  }

  .request-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .request-card-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* --------------------------------
   BADGES & PILLS RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  .badge-lg {
    font-size: 11px;
    padding: 4px 10px;
  }

  .pill {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* --------------------------------
   DROPDOWN MENUS RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .dropdown-menu {
    position: fixed;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none;
  }

  .dropdown-item {
    padding: 12px 16px;
    min-height: 44px;
  }
}

/* --------------------------------
   TOOLTIPS RESPONSIVO
   -------------------------------- */

@media (max-width: 768px) {
  /* Desabilitar tooltips em mobile */
  [data-tooltip]:hover::after,
  [data-tooltip]:hover::before {
    display: none;
  }
}

/* --------------------------------
   TOAST RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .toast {
    min-width: 100%;
  }
}

/* --------------------------------
   EMPTY STATES RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .empty-state {
    padding: 30px 20px;
  }

  .empty-state i {
    width: 48px;
    height: 48px;
  }

  .empty-state h3 {
    font-size: 16px;
  }

  .empty-state p {
    font-size: 13px;
  }

  .empty-state .btn {
    width: 100%;
  }
}

/* --------------------------------
   LOADING STATES RESPONSIVO
   -------------------------------- */

@media (max-width: 480px) {
  .loading-container {
    padding: 40px 20px;
  }

  .loading-spinner {
    width: 36px;
    height: 36px;
  }

  .loading-container p {
    font-size: 13px;
  }
}

/* --------------------------------
   UTILITY CLASSES MOBILE
   -------------------------------- */

@media (max-width: 768px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .text-center-mobile {
    text-align: center !important;
  }

  .w-full-mobile {
    width: 100% !important;
  }

  .flex-col-mobile {
    flex-direction: column !important;
  }

  .gap-sm-mobile {
    gap: 8px !important;
  }
}

/* ====================================================
   PLAN BADGE - Truncar nomes longos
   ==================================================== */

.plan-cell {
  max-width: 180px;
}

.plan-badge {
  display: inline-block;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Tooltip no hover para ver nome completo */
.plan-badge[title]:hover {
  cursor: help;
}

/* ====================================================
   TOOLTIP ICON - Icone de informacao com tooltip
   ==================================================== */

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--gray-400);
  cursor: help;
  transition: color 0.2s ease;
  position: relative;
}

.tooltip-icon:hover {
  color: var(--primary);
}

.tooltip-icon svg {
  width: 14px;
  height: 14px;
}

/* Tooltip popup */
.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  min-width: 200px;
  max-width: 300px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tooltip-icon::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gray-900);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1001;
}

.tooltip-icon:hover::after,
.tooltip-icon:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ====================================================
   TOOLTIP TRIGGER - Icone de ajuda com tooltip dinamico
   ==================================================== */

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  color: var(--gray-400);
  cursor: help;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.tooltip-trigger:hover {
  color: var(--primary);
  transform: scale(1.1);
}

.tooltip-trigger svg,
.tooltip-trigger i {
  width: 16px;
  height: 16px;
}

/* Custom tooltip popup (created by JS) */
.custom-tooltip {
  position: fixed;
  background: var(--gray-900);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 320px;
  text-align: left;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: tooltipFadeIn 0.15s ease;
}

.custom-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--gray-900);
  border-top: none;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ====================================================
   MESSAGE TYPES GUIDE - Guia visual de tipos de mensagem
   ==================================================== */

.message-types-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.message-type-guide-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.message-type-guide-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.message-type-guide-card .guide-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-type-guide-card .guide-icon svg {
  width: 20px;
  height: 20px;
}

.message-type-guide-card .guide-icon.danger {
  background: var(--red-50);
  color: var(--danger);
}

.message-type-guide-card .guide-icon.warning {
  background: var(--yellow-50);
  color: var(--warning);
}

.message-type-guide-card .guide-icon.info {
  background: var(--blue-50);
  color: var(--info);
}

.message-type-guide-card .guide-icon.secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

.message-type-guide-card .guide-content {
  flex: 1;
  min-width: 0;
}

.message-type-guide-card .guide-title {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 2px;
  font-size: 14px;
}

.message-type-guide-card .guide-desc {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
}

.message-type-guide-card .guide-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
}

.guide-badge.bloqueante {
  background: var(--red-100);
  color: var(--danger);
}

.guide-badge.dispensavel {
  background: var(--green-100);
  color: var(--success);
}

/* ====================================================
   INFO BANNER EXPANDED - Banner de informacao expandido
   ==================================================== */

.info-banner-expanded {
  background: linear-gradient(135deg, var(--blue-50), var(--primary-light-bg));
  border: 1px solid var(--primary-light);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.info-banner-expanded .banner-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.info-banner-expanded .banner-icon {
  width: 44px;
  height: 44px;
  background: var(--primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.info-banner-expanded .banner-icon svg {
  width: 22px;
  height: 22px;
}

.info-banner-expanded .banner-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.info-banner-expanded .banner-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin: 2px 0 0 0;
}

.info-banner-expanded .banner-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-banner-expanded .step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.info-banner-expanded .step-number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.info-banner-expanded .step-content h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 2px 0;
}

.info-banner-expanded .step-content p {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0;
  line-height: 1.4;
}

/* Toggle Button to show/hide guide */
.toggle-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--gray-600);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.toggle-guide-btn:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.toggle-guide-btn svg {
  width: 16px;
  height: 16px;
}

.toggle-guide-btn.active {
  background: var(--primary-light-bg);
  border-color: var(--primary-light);
  color: var(--primary);
}

/* ====================================================
   NOTIFICATION BADGE - Badge de notificacao
   ==================================================== */

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  margin-left: 8px;
}

.notification-badge.success {
  background: var(--success);
}

.notification-badge.warning {
  background: var(--warning);
}

/* Badge pulsante */
.notification-badge.pulse {
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(229, 57, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
  }
}

/* Tab badge (dentro das tabs) */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9px;
  margin-left: 6px;
}

.tab-badge.warning {
  background: var(--warning);
  color: white;
}

.tab-badge.success {
  background: var(--success);
}

.tab-badge.danger {
  background: var(--danger);
}

.tab-btn .tab-badge {
  margin-left: auto;
}

/* ====================================================
   SECTION DIVIDER - Divisor entre secoes
   ==================================================== */

.section-divider {
  margin-top: 24px;
  position: relative;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gray-200);
}

/* ====================================================
   REQUESTS SECTION - Espacamento das secoes de solicitacoes
   ==================================================== */

.requests-section-wrapper {
  margin-top: 24px;
  position: relative;
}

.requests-section-wrapper::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gray-200);
}

.requests-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 16px;
}

.requests-section-title i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

/* Cards de solicitacoes */
.requests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* Request Section Card - Card principal de cada tipo */
.request-section-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid var(--gray-100);
  transition: all 0.25s ease;
}

.request-section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.request-section-card .card-header {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--gray-100);
  padding: 16px 20px !important;
}

.request-section-card .card-title {
  font-size: 15px !important;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 10px;
}

.request-section-card .card-title i {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

/* Tooltip icon */
.request-section-card .tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: help;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.request-section-card .tooltip-icon:hover {
  opacity: 0.8;
}

.request-section-card .tooltip-icon i {
  width: 14px;
  height: 14px;
  color: var(--gray-500);
}

/* Notification badge moderna */
.request-section-card .notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: linear-gradient(135deg, var(--warning) 0%, #f59e0b 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.request-section-card .notification-badge.pulse {
  animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
  }
  50% {
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.5);
  }
}

/* Request Tabs - Abas de filtro modernas */
.request-section-tabs {
  display: flex;
  padding: 12px 16px;
  gap: 6px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  overflow-x: auto;
}

.request-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.request-status-tab:hover {
  background: var(--white);
  color: var(--gray-700);
}

.request-status-tab.active {
  background: var(--white);
  color: var(--gray-800);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.request-status-tab.active.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.request-status-tab.active.success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
}

.request-status-tab.active.danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
}

.request-status-tab.active.secondary {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #374151;
}

/* Tab badges */
.request-status-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
}

.request-status-tab .tab-badge.warning {
  background: var(--warning);
  color: white;
}

.request-status-tab .tab-count {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 400;
}

/* Request Section Content */
.request-section-content {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.request-section-content::-webkit-scrollbar {
  width: 6px;
}

.request-section-content::-webkit-scrollbar-track {
  background: transparent;
}

.request-section-content::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.request-section-content::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Requests List Compact */
.requests-list-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Request Item V2 - Card individual moderno */
.request-item-v2 {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.request-item-v2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gray-300);
  transition: background 0.2s;
}

.request-item-v2.pending::before {
  background: linear-gradient(180deg, var(--warning) 0%, #f59e0b 100%);
}

.request-item-v2.approved::before {
  background: linear-gradient(180deg, var(--success) 0%, #059669 100%);
}

.request-item-v2.rejected::before {
  background: linear-gradient(180deg, var(--danger) 0%, #dc2626 100%);
}

.request-item-v2.unlinked::before {
  background: linear-gradient(180deg, var(--gray-400) 0%, var(--gray-500) 100%);
}

.request-item-v2:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateX(2px);
}

/* Request Header */
.request-item-v2 .req-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.request-item-v2 .req-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary) 0%, #0284c7 100%);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.request-item-v2 .req-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.request-item-v2 .req-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-item-v2 .req-team {
  font-size: 12px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Request Details */
.request-item-v2 .req-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 52px;
}

.request-item-v2 .req-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-600);
}

.request-item-v2 .req-row i {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.request-item-v2 .req-row.docs {
  color: var(--primary);
}

.request-item-v2 .req-row.docs i {
  color: var(--primary);
}

/* Link Header especial */
.request-item-v2 .link-header {
  justify-content: center;
}

.request-item-v2 .link-visual {
  display: flex;
  align-items: center;
  gap: 12px;
}

.request-item-v2 .link-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
}

.request-item-v2 .link-avatar.student {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.request-item-v2 .link-avatar.parent {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
}

.request-item-v2 .link-icon {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
}

/* Rejection reason */
.request-item-v2 .req-rejection {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 8px;
  font-size: 12px;
  color: #991b1b;
}

.request-item-v2 .req-rejection i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Days remaining badge */
.request-item-v2 .days-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.request-item-v2 .days-badge.urgent {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
}

.request-item-v2 .days-badge.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.request-item-v2 .days-badge.normal {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
}

/* Empty state mini */
.empty-state-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--gray-400);
}

.empty-state-mini i {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state-mini span {
  font-size: 13px;
  font-weight: 500;
}

/* Approved/Rejected states */
.request-item-v2.approved {
  background: linear-gradient(135deg, #f0fdf4 0%, var(--white) 100%);
  border-color: #bbf7d0;
}

.request-item-v2.rejected {
  background: linear-gradient(135deg, #fef2f2 0%, var(--white) 100%);
  border-color: #fecaca;
}

.request-item-v2.unlinked {
  background: linear-gradient(135deg, #f9fafb 0%, var(--white) 100%);
  border-color: var(--gray-200);
  opacity: 0.8;
}

/* Mobile responsivo */
@media (max-width: 768px) {
  .requests-grid {
    grid-template-columns: 1fr;
  }

  .request-section-tabs {
    padding: 10px 12px;
  }

  .request-status-tab {
    padding: 6px 12px;
    font-size: 12px;
  }

  .request-item-v2 .req-details {
    padding-left: 0;
    margin-top: 8px;
  }
}

/* ===== ADMIN SETTINGS PAGE ===== */

/* Settings Tabs */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  width: fit-content;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s;
}

.settings-tab:hover {
  color: var(--gray-800);
}

.settings-tab.active {
  background: white;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.settings-tab i {
  width: 18px;
  height: 18px;
}

/* Settings Section */
.settings-section {
  background: white;
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.section-subtitle {
  font-size: 14px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Messages List */
.messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  transition: all 0.2s;
}

.message-card:hover {
  border-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.message-card.inactive {
  opacity: 0.6;
}

.message-card-left {
  display: flex;
  gap: 16px;
  flex: 1;
}

.message-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-icon i {
  width: 22px;
  height: 22px;
}

.message-icon.danger {
  background: var(--danger-light);
  color: var(--danger);
}

.message-icon.warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.message-icon.info {
  background: var(--blue-50);
  color: var(--blue);
}

.message-icon.secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

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

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.message-title {
  font-weight: 600;
  color: var(--gray-900);
}

.message-text {
  font-size: 14px;
  color: var(--gray-600);
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.message-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.message-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-500);
}

.message-meta i {
  width: 14px;
  height: 14px;
}

.message-card-actions {
  display: flex;
  gap: 4px;
}

/* Message Type Grid (Form) */
.message-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.message-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.message-type-option:hover {
  border-color: var(--primary-light);
  background: var(--gray-50);
}

.message-type-option.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}

.message-type-option input {
  display: none;
}

.message-type-option i {
  width: 24px;
  height: 24px;
  color: var(--gray-600);
}

.message-type-option.selected i {
  color: var(--primary);
}

.message-type-option span {
  font-weight: 500;
  color: var(--gray-700);
  font-size: 13px;
}

.message-type-option small {
  font-size: 11px;
  color: var(--gray-500);
}

/* ========== MESSAGE TYPE CARDS (New Design) ========== */
.message-type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.message-type-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-type-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.message-type-card.danger { border-left: 4px solid var(--danger); }
.message-type-card.warning { border-left: 4px solid var(--warning); }
.message-type-card.info { border-left: 4px solid var(--blue); }
.message-type-card.secondary { border-left: 4px solid var(--gray-500); }

.mtc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.mtc-icon i {
  width: 20px;
  height: 20px;
}

.mtc-icon.danger { background: var(--danger-light); color: var(--danger); }
.mtc-icon.warning { background: var(--warning-light); color: var(--warning-dark); }
.mtc-icon.info { background: var(--blue-50); color: var(--blue); }
.mtc-icon.secondary { background: var(--gray-100); color: var(--gray-600); }

.mtc-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.mtc-badge.blocking {
  background: var(--danger-light);
  color: var(--danger);
}

.mtc-badge.dismissible {
  background: var(--success-light);
  color: var(--success);
}

.mtc-content {
  flex: 1;
}

.mtc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.mtc-count {
  font-size: 12px;
  color: var(--gray-500);
  margin: 4px 0 0 0;
}

.mtc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.15s;
}

.mtc-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.mtc-btn i {
  width: 14px;
  height: 14px;
}

/* Messages Section Header */
.messages-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.messages-section-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.messages-section-header h4 i {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

/* Empty State Compact */
.empty-state.compact {
  padding: 32px;
}

.empty-state.compact i {
  width: 40px;
  height: 40px;
}

.empty-state.compact h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.empty-state.compact p {
  font-size: 14px;
}

/* Info Banner Compact */
.info-banner.compact {
  padding: 12px 16px;
  margin-bottom: 20px;
}

.info-banner.compact i {
  width: 18px;
  height: 18px;
}

/* ========== PLATFORM SELECTOR ========== */
.platform-selector {
  display: flex;
  gap: 12px;
}

.platform-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.platform-option:hover {
  border-color: var(--primary-light);
  background: var(--gray-50);
}

.platform-option.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}

.platform-option input {
  display: none;
}

.platform-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-500);
}

.platform-icon i {
  width: 24px;
  height: 24px;
}

.platform-option.selected .platform-icon {
  color: var(--primary);
}

.platform-icon svg {
  width: 28px;
  height: 28px;
}

.platform-icon.ios {
  color: #000;
}

.platform-icon.all i {
  color: var(--gray-500);
  width: 20px;
  height: 20px;
}

.platform-option.selected .platform-icon.all i {
  color: var(--primary);
}

.platform-option span {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

/* ========== USER TYPE SELECTOR ========== */
.user-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  background: white;
}

.user-type-option:hover {
  border-color: var(--primary-light);
  background: var(--gray-50);
}

.user-type-option.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}

.user-type-option input {
  display: none;
}

.user-type-option i {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

.user-type-option.selected i {
  color: var(--primary);
}

.user-type-option span {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

/* ========== SCREEN SELECTOR ========== */
.screen-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
}

.screen-category {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.screen-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary-50), var(--gray-50));
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.screen-category-header:hover {
  background: linear-gradient(135deg, var(--primary-100), var(--gray-100));
}

.screen-category-header i.category-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.screen-category-header i.chevron-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  transition: transform 0.2s;
}

.screen-category.expanded .screen-category-header i.chevron-icon {
  transform: rotate(180deg);
}

.screen-category-header span {
  flex: 1;
}

.screen-category-routes {
  display: none;
  flex-direction: column;
  background: white;
  border-top: 1px solid var(--gray-200);
}

.screen-category.expanded .screen-category-routes {
  display: flex;
}

.screen-route-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--gray-100);
}

.screen-route-option:last-child {
  border-bottom: none;
}

.screen-route-option:hover {
  background: var(--gray-50);
}

.screen-route-option.selected {
  background: var(--primary-50);
  border-left: 3px solid var(--primary);
}

.screen-route-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.screen-route-option .route-label {
  flex: 1;
  font-size: 13px;
  color: var(--gray-700);
}

.screen-route-option .route-path {
  font-size: 11px;
  color: var(--gray-400);
  font-family: 'SF Mono', Monaco, monospace;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
}

.screen-route-option.selected .route-label {
  color: var(--primary-dark);
  font-weight: 500;
}

.screen-route-option.selected .route-path {
  background: var(--primary-100);
  color: var(--primary-dark);
}

.screen-route-option.selected .route-label {
  color: var(--primary-dark);
  font-weight: 500;
}

/* ========== STATUS TOGGLE CARD ========== */
.status-toggle-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.status-toggle-card.active {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  border: 2px solid var(--danger);
}

.status-toggle-card.inactive {
  background: var(--gray-100);
  border: 2px solid var(--gray-300);
}

.status-toggle {
  position: relative;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
}

.status-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: 0.3s;
  border-radius: 30px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.status-toggle input:checked + .toggle-slider {
  background-color: var(--danger);
}

.status-toggle input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.status-toggle-info {
  flex: 1;
}

.status-toggle-info strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.status-toggle-card.active .status-toggle-info strong {
  color: var(--danger);
}

.status-toggle-card.inactive .status-toggle-info strong {
  color: var(--gray-600);
}

.status-toggle-info p {
  margin: 0;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.4;
}

/* ========== FORM PREVIEW (Type Indicator) ========== */
.form-preview {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

.form-preview.force-update {
  background: var(--danger-light);
  border: 1px solid var(--danger);
}

.form-preview.maintenance {
  background: var(--warning-light);
  border: 1px solid var(--warning);
}

.form-preview.terms {
  background: var(--blue-50);
  border: 1px solid var(--blue);
}

.form-preview.warning {
  background: var(--warning-light);
  border: 1px solid var(--warning);
}

.form-preview.info {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
}

.form-preview.feature-disabled {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
}

.form-preview .preview-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-preview .preview-icon i {
  width: 24px;
  height: 24px;
}

.form-preview.force-update .preview-icon { background: var(--danger); color: white; }
.form-preview.maintenance .preview-icon { background: var(--warning); color: white; }
.form-preview.terms .preview-icon { background: var(--blue); color: white; }
.form-preview.warning .preview-icon { background: var(--warning); color: white; }
.form-preview.info .preview-icon { background: var(--blue); color: white; }
.form-preview.feature-disabled .preview-icon { background: var(--gray-600); color: white; }

.form-preview .preview-content strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.form-preview.force-update .preview-content strong { color: var(--danger); }
.form-preview.maintenance .preview-content strong { color: var(--warning-dark); }
.form-preview.terms .preview-content strong { color: var(--blue); }
.form-preview.warning .preview-content strong { color: var(--warning-dark); }
.form-preview.info .preview-content strong { color: var(--blue); }
.form-preview.feature-disabled .preview-content strong { color: var(--gray-700); }

.form-preview .preview-content p {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.4;
}

/* Form check inline */
.form-check-inline {
  display: flex;
  gap: 12px;
}

.form-check-card.compact {
  padding: 12px 16px;
}

.form-check-card.compact .check-content {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form-check-card.compact .check-content div {
  display: none;
}

/* Legal Documents Grid */
.legal-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.legal-doc-card {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: all 0.2s;
}

.legal-doc-card:hover {
  border-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.legal-doc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-bottom: 1px solid var(--gray-100);
}

.legal-doc-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-doc-icon i {
  width: 20px;
  height: 20px;
}

.legal-doc-info {
  flex: 1;
}

.legal-doc-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.legal-doc-body {
  padding: 16px;
}

.legal-doc-version {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.version-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.version-date {
  font-size: 13px;
  color: var(--gray-500);
}

.legal-doc-summary {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

.legal-doc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--gray-100);
}

.version-count {
  font-size: 12px;
  color: var(--gray-500);
}

.legal-doc-actions {
  display: flex;
  gap: 4px;
}

/* Legal Doc View Modal */
.legal-doc-view {
  max-height: 60vh;
  overflow-y: auto;
}

.legal-doc-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}

.legal-doc-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gray-600);
}

.legal-doc-meta i {
  width: 16px;
  height: 16px;
}

.legal-doc-summary-view {
  background: var(--gray-50);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--gray-700);
}

.legal-doc-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-700);
}

/* Legal Category */
.legal-category {
  margin-bottom: 32px;
}

.legal-category:last-child {
  margin-bottom: 0;
}

.legal-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}

.legal-category-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-category-icon i {
  width: 18px;
  height: 18px;
}

.legal-category-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.legal-category-header p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--gray-500);
}

/* Empty Legal Doc Card */
.legal-doc-card.empty {
  border-style: dashed;
  border-color: var(--gray-200);
  background: white;
}

.legal-doc-card.empty:hover {
  border-color: var(--primary);
  background: var(--primary-50);
}

.legal-doc-icon.muted {
  background: var(--gray-100);
  color: var(--gray-400);
}

.legal-doc-card.empty:hover .legal-doc-icon.muted {
  background: var(--primary-100);
  color: var(--primary);
}

.legal-doc-empty-text {
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
  margin: 0;
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-500);
}

/* Stats Overview Grid */
.stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon i {
  width: 24px;
  height: 24px;
}

.stat-icon.blue {
  background: var(--blue-50);
  color: var(--blue);
}

.stat-icon.green {
  background: var(--success-light);
  color: var(--success);
}

.stat-icon.purple {
  background: #F3E8FF;
  color: #7C3AED;
}

.stat-icon.amber {
  background: #FEF3C7;
  color: #D97706;
}

.stat-icon.teal {
  background: #CCFBF1;
  color: #0D9488;
}

.stat-content {
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
}

.stat-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  margin-top: 2px;
}

.stat-sub {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

/* System Info Section */
.system-info-section {
  padding: 20px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

.system-info-section h4 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.system-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.system-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

/* ====================================================
   STATS DASHBOARD - Dashboard de Estatisticas Avancado
   ==================================================== */

.stats-dashboard {
  padding: 0;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}

.stats-header-left h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 4px 0;
}

.stats-header-left h3 i {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.stats-header-left p {
  color: var(--gray-500);
  margin: 0;
  font-size: 14px;
}

/* Highlights */
.stats-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.highlight-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  position: relative;
  overflow: hidden;
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.highlight-card.primary {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.highlight-card.success {
  background: linear-gradient(135deg, #10B981, #059669);
}

.highlight-card.info {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.highlight-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.highlight-icon i {
  width: 28px;
  height: 28px;
}

.highlight-content {
  flex: 1;
}

.highlight-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.highlight-label {
  display: block;
  font-size: 14px;
  opacity: 0.9;
  margin-top: 2px;
}

.highlight-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.highlight-badge .badge {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border: none;
  font-size: 11px;
}

/* Stats Groups */
.stats-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stats-group {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  color: white;
}

.group-header i {
  width: 18px;
  height: 18px;
}

.group-header.blue { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.group-header.green { background: linear-gradient(135deg, #10B981, #059669); }
.group-header.purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.group-header.amber { background: linear-gradient(135deg, #F59E0B, #D97706); }
.group-header.teal { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.group-header.rose { background: linear-gradient(135deg, #F43F5E, #E11D48); }

.group-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 20px;
  gap: 16px;
}

.group-stat {
  text-align: center;
}

.group-stat.featured .stat-number {
  color: var(--primary);
  font-size: 28px;
}

.group-stat.warning .stat-number {
  color: var(--warning);
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
}

.stat-desc {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.group-insight {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  font-size: 13px;
  color: var(--gray-600);
}

.group-insight i {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.group-insight.success {
  background: var(--success-light);
  color: var(--success);
}

.group-insight.success i {
  color: var(--success);
}

.group-insight.warning {
  background: var(--warning-light);
  color: #92400E;
}

.group-insight.warning i {
  color: var(--warning);
}

.group-insight.danger {
  background: var(--danger-light);
  color: var(--danger);
}

.group-insight.danger i {
  color: var(--danger);
}

/* Extra Metrics */
.stats-extra {
  background: var(--gray-50);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--gray-200);
}

.stats-extra h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 20px 0;
}

.stats-extra h4 i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.extra-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.extra-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}

.metric-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: 10px;
}

.metric-content {
  flex: 1;
}

.metric-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-800);
}

.metric-label {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

/* ====================================================
   INFRA TAB - Aba de Infraestrutura
   ==================================================== */

.infra-section {
  margin-bottom: 32px;
}

.infra-section h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}

.infra-section h4 i {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

/* Version Cards */
.version-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.version-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 24px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Shimmer animation */
@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(200%) rotate(45deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* iOS - Dark premium com brilho */
.version-card.ios {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 50%, #1a1a1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.version-card.ios::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-20deg);
  animation: shimmer 4s infinite;
}

.version-card.ios::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(147, 112, 219, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.version-card.ios:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(147, 112, 219, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.version-card.ios .version-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: float 3s ease-in-out infinite;
}

.version-card.ios .version-icon svg {
  fill: #ffffff;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.version-card.ios .version-platform {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.version-card.ios .version-number {
  color: #ffffff !important;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Android - Gradient verde vibrante */
.version-card.android {
  background: linear-gradient(135deg, #00C853 0%, #00E676 50%, #69F0AE 100%);
  border: none;
  box-shadow:
    0 10px 40px rgba(0, 230, 118, 0.4),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

.version-card.android::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s infinite;
}

.version-card.android::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(105, 240, 174, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

.version-card.android:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 60px rgba(0, 230, 118, 0.5),
    0 0 50px rgba(105, 240, 174, 0.3);
}

.version-card.android .version-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation: float 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.version-card.android .version-icon svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.version-card.android .version-icon svg path {
  fill: #ffffff;
}

.version-card.android .version-platform {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.version-card.android .version-number {
  color: #ffffff !important;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

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

.version-info {
  flex: 1;
}

.version-platform {
  display: block;
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 2px;
}

.version-number {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 8px;
}

/* Version Status Badges */
@keyframes orange-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 107, 0, 0.6); }
  50% { box-shadow: 0 0 25px rgba(255, 107, 0, 0.8), 0 0 35px rgba(255, 149, 0, 0.5); }
}

@keyframes green-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 200, 83, 0.6); }
  50% { box-shadow: 0 0 25px rgba(0, 200, 83, 0.8), 0 0 35px rgba(0, 230, 118, 0.5); }
}

.version-card.ios .version-status {
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none !important;
  background: none !important;
}

.version-card.ios .version-status.badge-warning {
  background: linear-gradient(135deg, #ff9500, #ff6b00) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.7);
  animation: orange-glow 2s ease-in-out infinite;
}

.version-card.ios .version-status.badge-success {
  background: linear-gradient(135deg, #30d158, #00c853) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(0, 200, 83, 0.7);
  animation: green-glow 2s ease-in-out infinite;
}

.version-card.android .version-status {
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none !important;
  background: none !important;
}

.version-card.android .version-status.badge-warning {
  background: linear-gradient(135deg, #ffb300, #ff8f00) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 143, 0, 0.7);
  animation: orange-glow 2s ease-in-out infinite;
}

.version-card.android .version-status.badge-success {
  background: #ffffff !important;
  color: #1b5e20 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  animation: none;
}

.version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 10px;
}

.version-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-600);
}

.version-meta i {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
}

/* Services Links Grid */
.services-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.service-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.service-link-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.service-link-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-link-icon i {
  width: 20px;
  height: 20px;
  color: white;
}

/* Logo container para servicos com imagens reais */
.service-link-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gray-100);
}

.service-link-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.service-link-logo svg {
  width: 28px;
  height: 28px;
}

.service-link-logo .logo-fallback {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.service-link-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 2px;
}

.service-link-info span {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

.service-link-card .external-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.service-link-card:hover .external-icon {
  color: var(--primary);
}

/* Service Card Tooltips */
.service-link-card[data-tooltip] {
  position: relative;
}

.service-link-card[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  width: 280px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.service-link-card[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gray-900);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1001;
}

.service-link-card[data-tooltip]:hover::after,
.service-link-card[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Form Grid for Settings */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .col-span-2 {
  grid-column: span 2;
}

.form-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

.form-check span {
  font-size: 14px;
  color: var(--gray-700);
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.form-hint a {
  color: var(--primary);
  text-decoration: none;
}

.form-hint a:hover {
  text-decoration: underline;
}

/* Section intro (titulo + hint) */
.section-intro {
  margin-bottom: 16px;
}

.section-intro h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 4px 0;
}

.section-intro h4 svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.section-hint {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
  line-height: 1.4;
}

/* Form Check Card (Checkbox estilizado) */
.form-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.form-check-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.form-check-card:hover {
  border-color: var(--primary-200);
  background: var(--primary-50);
}

.form-check-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.form-check-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-50);
}

.check-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.check-content > i {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.form-check-card:has(input:checked) .check-content > i {
  color: var(--primary);
}

.check-content > div {
  flex: 1;
}

.check-content span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 2px;
}

.check-content small {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

/* ========== MONITORAMENTO - NOVO DESIGN ========== */

/* Info Banner - Estilos base */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}

.info-banner > i,
.info-banner > svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-banner > div {
  flex: 1;
}

.info-banner strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.info-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}

/* Info Banner - Variantes de cor */
.info-banner.success {
  background: var(--success-light);
  border: 1px solid #86EFAC;
}

.info-banner.success i,
.info-banner.success svg {
  color: var(--success);
}

.info-banner.warning {
  background: var(--warning-light);
  border: 1px solid #FCD34D;
}

.info-banner.warning i,
.info-banner.warning svg {
  color: var(--warning);
}

.info-banner.danger {
  background: var(--danger-light);
  border: 1px solid #FCA5A5;
}

.info-banner.danger i,
.info-banner.danger svg {
  color: var(--danger);
}

.info-banner.info {
  background: var(--info-light);
  border: 1px solid #93C5FD;
}

.info-banner.info i,
.info-banner.info svg {
  color: var(--info);
}

.monitoring-section {
  margin-bottom: 32px;
}

.monitoring-section-header {
  margin-bottom: 16px;
}

.monitoring-section-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.monitoring-section-header h4 i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.monitoring-section-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--gray-500);
}

/* Service Cards - Novo */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.service-card-new {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--gray-100);
  transition: all 0.2s;
}

.service-card-new:hover {
  box-shadow: var(--shadow-md);
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.service-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card-icon i {
  width: 20px;
  height: 20px;
  color: var(--gray-600);
}

.service-card-title {
  flex: 1;
}

.service-card-title h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.service-provider {
  font-size: 12px;
  color: var(--gray-400);
}

.service-card-desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--gray-600);
}

.service-card-tooltip {
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.service-card-tooltip i {
  display: none;
}

/* Cron Jobs - Novo */
.cron-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.cron-job-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: all 0.2s;
}

.cron-job-card:hover {
  box-shadow: var(--shadow-md);
}

.cron-job-header {
  margin-bottom: 8px;
}

.cron-job-status {
  font-size: 11px;
  padding: 4px 8px;
}

.cron-job-status i {
  width: 12px;
  height: 12px;
}

h5.cron-job-name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.cron-job-short {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-600);
}

.cron-job-schedule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--primary-50);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.cron-job-schedule i {
  width: 14px;
  height: 14px;
}

.cron-job-local-time {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  font-size: 11px;
  color: var(--gray-600);
  margin-bottom: 12px;
}

.cron-job-local-time i {
  width: 12px;
  height: 12px;
  color: var(--gray-400);
}

.cron-job-local-time strong {
  color: var(--gray-700);
}

.cron-job-tooltip {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.cron-job-tooltip i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ========== FERRAMENTAS - NOVO DESIGN ========== */

.tools-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.tool-item {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tool-item.danger {
  border-color: #FECACA;
  background: #FFF5F5;
}

.tool-item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}

.tool-item.danger .tool-item-header {
  background: #FEE2E2;
  border-bottom-color: #FECACA;
}

.tool-item-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tool-item-icon i {
  width: 24px;
  height: 24px;
}

.tool-item-icon.amber { background: #FEF3C7; color: #D97706; }
.tool-item-icon.blue { background: var(--blue-50); color: var(--blue); }
.tool-item-icon.purple { background: #F3E8FF; color: #7C3AED; }
.tool-item-icon.green { background: var(--success-light); color: var(--success); }
.tool-item-icon.teal { background: #CCFBF1; color: #0D9488; }
.tool-item-icon.danger { background: #FEE2E2; color: var(--danger); }

.tool-item-title {
  flex: 1;
}

.tool-item-title h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.tool-item-where {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

.tool-item-where i {
  width: 14px;
  height: 14px;
}

.tool-item-header .btn {
  flex-shrink: 0;
}

.tool-item-body {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tool-item-section {
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.tool-item-section.warning {
  background: #FFFBEB;
}

.tool-item-section.danger {
  background: #FEF2F2;
}

.tool-item-section strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.tool-item-section strong i {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}

.tool-item-section.warning strong i {
  color: #D97706;
}

.tool-item-section.danger strong {
  color: var(--danger);
}

.tool-item-section.danger strong i {
  color: var(--danger);
}

.tool-item-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-600);
}

@media (max-width: 900px) {
  .tool-item-body {
    grid-template-columns: 1fr;
  }
}

/* Danger Zone - Novo */
.danger-zone-new {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-lg);
  padding: 20px;
}

.danger-zone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #FECACA;
}

.danger-zone-icon {
  width: 40px;
  height: 40px;
  background: #FEE2E2;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
}

.danger-zone-icon i {
  width: 20px;
  height: 20px;
}

.danger-zone-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--danger);
}

.danger-zone-header p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--gray-600);
}

.danger-action-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: var(--radius-md);
}

.danger-action-info {
  flex: 1;
}

.danger-action-info h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.danger-action-info h5 i {
  width: 18px;
  height: 18px;
  color: var(--danger);
}

.danger-action-info > p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}

.danger-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #FEF3C7;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #92400E;
}

.danger-warning i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.danger-action-card .btn {
  flex-shrink: 0;
  align-self: center;
}

/* Legal category title */
.legal-category-title {
  flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .settings-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .settings-tab span {
    display: none;
  }

  .settings-tab {
    padding: 10px 16px;
  }

  .message-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .col-span-2 {
    grid-column: span 1;
  }

  .stats-overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .message-card {
    flex-direction: column;
    gap: 12px;
  }

  .message-card-actions {
    align-self: flex-end;
  }
}

/* ============================================
   ANNOUNCEMENTS V2 - Design Moderno
   ============================================ */

/* Page Layout */
.announcements-page-v2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.ann-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.ann-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ann-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ann-title-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.ann-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.ann-count {
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.ann-create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ann-create-btn i {
  width: 18px;
  height: 18px;
}

/* Filters */
.ann-filters {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.ann-filter-row {
  margin-bottom: 12px;
}

.ann-priority-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ann-priority-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ann-priority-chip i {
  width: 16px;
  height: 16px;
}

.ann-priority-chip:hover {
  border-color: var(--chip-color, var(--gray-400));
  color: var(--chip-color, var(--gray-700));
}

.ann-priority-chip.active {
  background: var(--chip-color, var(--primary));
  border-color: var(--chip-color, var(--primary));
  color: white;
}

.ann-teams-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}

.ann-teams-scroll::-webkit-scrollbar {
  display: none;
}

.ann-team-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 20px;
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ann-team-chip i {
  width: 16px;
  height: 16px;
}

.ann-team-chip.active {
  background: var(--team-color, var(--primary));
  border-color: var(--team-color, var(--primary));
  color: white;
}

/* Grid */
.ann-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* Card */
.ann-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  transition: var(--transition-normal);
  border: 1px solid var(--gray-100);
}

.ann-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ann-card-priority-bar {
  width: 5px;
  background: var(--priority-color);
  flex-shrink: 0;
}

.ann-card-content {
  flex: 1;
  padding: 16px;
  cursor: pointer;
}

.ann-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ann-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ann-card-badge i {
  width: 12px;
  height: 12px;
}

.ann-card-date {
  font-size: 12px;
  color: var(--gray-400);
}

.ann-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ann-card-text {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 12px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ann-card-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ann-card-team {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--gray-100);
  border-radius: 8px;
  font-size: 11px;
  color: var(--gray-600);
  font-weight: 500;
}

.ann-card-team i {
  width: 12px;
  height: 12px;
}

.ann-card-team.all {
  background: #E8F5E9;
  color: #2E7D32;
}

.ann-card-team.more {
  background: var(--gray-200);
}

/* Card Stats */
.ann-card-stats {
  background: var(--gray-50);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.ann-card-stats:hover {
  background: var(--gray-100);
}

.ann-card-progress {
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ann-card-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ann-card-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ann-card-progress-percent {
  font-size: 13px;
  font-weight: 700;
}

.ann-card-progress-count {
  font-size: 11px;
  color: var(--gray-500);
}

/* Card Actions */
.ann-card-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 8px;
  border-left: 1px solid var(--gray-100);
}

.ann-card-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--gray-400);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.ann-card-action:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.ann-card-action i {
  width: 16px;
  height: 16px;
}

/* Empty State */
.ann-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.ann-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: 50%;
}

.ann-empty-icon i {
  width: 40px;
  height: 40px;
  color: var(--gray-400);
}

.ann-empty h3 {
  font-size: 18px;
  color: var(--gray-700);
  margin: 0 0 8px;
}

.ann-empty p {
  color: var(--gray-500);
  margin: 0 0 20px;
}

/* ===== VIEW MODAL ===== */
.ann-view-modal {
  max-width: 600px;
}

.ann-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.ann-view-priority {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.ann-view-priority i {
  width: 20px;
  height: 20px;
}

.ann-view-body {
  padding: 20px;
}

.ann-view-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--gray-900);
}

.ann-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.ann-view-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

.ann-view-meta i {
  width: 16px;
  height: 16px;
}

.ann-view-teams-label,
.ann-view-content-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ann-view-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ann-view-team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: white;
}

.ann-view-team i {
  width: 14px;
  height: 14px;
}

.ann-view-team.all {
  background: linear-gradient(135deg, #00A859, #4CAF50);
}

.ann-view-content {
  background: var(--gray-50);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 20px;
}

.ann-view-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--gray-50);
  padding: 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.ann-view-stats:hover {
  background: var(--gray-100);
}

.ann-view-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ann-view-stat i {
  width: 24px;
  height: 24px;
}

.ann-view-stat-info {
  display: flex;
  flex-direction: column;
}

.ann-view-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.ann-view-stat-label {
  font-size: 11px;
  color: var(--gray-500);
}

.ann-view-details-btn {
  width: 100%;
}

/* ===== VIEWS MODAL ===== */
.ann-views-modal {
  max-width: 550px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.ann-views-summary {
  padding: 16px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}

.ann-views-progress-wrapper {
  margin-bottom: 16px;
}

.ann-views-progress-bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ann-views-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.ann-views-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-500);
}

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

.ann-views-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-lg);
}

.ann-views-stat.green {
  background: #E8F5E9;
}

.ann-views-stat.blue {
  background: #E3F2FD;
}

.ann-views-stat.orange {
  background: #FFF3E0;
}

.ann-views-stat i {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

.ann-views-stat.green i { color: #4CAF50; }
.ann-views-stat.blue i { color: #2196F3; }
.ann-views-stat.orange i { color: #FF9800; }

.ann-views-stat span {
  font-size: 20px;
  font-weight: 700;
}

.ann-views-stat.green span { color: #2E7D32; }
.ann-views-stat.blue span { color: #1565C0; }
.ann-views-stat.orange span { color: #E65100; }

.ann-views-stat small {
  font-size: 11px;
  color: var(--gray-500);
}

.ann-views-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.ann-views-team {
  margin-bottom: 16px;
}

.ann-views-team-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.ann-views-team-header i {
  width: 18px;
  height: 18px;
}

.ann-views-team-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.ann-views-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ann-view-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
}

.ann-view-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ann-view-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ann-view-item-avatar span {
  font-size: 16px;
  font-weight: 700;
  color: #1565C0;
}

.ann-view-item-info {
  flex: 1;
  min-width: 0;
}

.ann-view-item-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-view-item-responsible {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-500);
}

.ann-view-item-responsible i {
  width: 12px;
  height: 12px;
}

.ann-view-item-time {
  flex-shrink: 0;
}

.ann-view-item-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #E8F5E9;
  color: #2E7D32;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.ann-views-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-400);
}

.ann-views-empty i {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

/* ===== CREATE MODAL ===== */
.ann-create-modal {
  max-width: 550px;
}

.ann-create-priority {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ann-create-priority-item {
  cursor: pointer;
}

.ann-create-priority-item input {
  display: none;
}

.ann-create-priority-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  transition: var(--transition-fast);
}

.ann-create-priority-box i {
  width: 24px;
  height: 24px;
}

.ann-create-priority-item input:checked + .ann-create-priority-box {
  border-color: var(--p-color);
  background: color-mix(in srgb, var(--p-color) 10%, white);
  color: var(--p-color);
}

.ann-create-all-teams {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 12px;
}

.ann-create-all-teams input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.ann-create-teams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ann-create-team-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition-fast);
}

.ann-create-team-item:hover {
  background: var(--gray-100);
}

.ann-create-team-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.ann-create-team-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ann-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ann-header-right {
    width: 100%;
  }

  .ann-create-btn {
    width: 100%;
    justify-content: center;
  }

  .ann-grid {
    grid-template-columns: 1fr;
  }

  .ann-create-priority {
    grid-template-columns: 1fr;
  }

  .ann-create-teams {
    grid-template-columns: 1fr;
  }

  .ann-view-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ann-views-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ann-priority-filters {
    flex-direction: column;
  }

  .ann-priority-chip {
    justify-content: center;
  }
}

/* ===== FLOATING BUTTONS ===== */
.floating-icons {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 9990;
}

.floating-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
  cursor: pointer;
}

.floating-icon svg {
  width: 26px;
  height: 26px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.floating-icons:hover .floating-icon {
  transform: translateX(-8px);
}

.floating-icon:hover {
  transform: translateX(-18px) scale(1.12) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.12);
}

.floating-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.25s ease;
  pointer-events: none;
  z-index: 10;
}

.floating-icon:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0);
}

.floating-icon.icon-whatsapp svg {
  fill: #25D366;
}

.floating-icon.icon-appstore {
  background: #fff;
}

.floating-icon.icon-appstore img {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

.floating-icon.icon-playstore img {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

.floating-icon.icon-instagram svg path {
  fill: url(#instagram-gradient);
}

.floating-icon {
  animation: gentleFloat 4s ease-in-out infinite;
}

.floating-icon:nth-child(1) { animation-delay: 0s; }
.floating-icon:nth-child(2) { animation-delay: 0.3s; }
.floating-icon:nth-child(3) { animation-delay: 0.6s; }
.floating-icon:nth-child(4) { animation-delay: 0.9s; }

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-4px) translateX(0); }
}

.floating-icons:hover .floating-icon,
.floating-icon:hover {
  animation: none;
}

@media (max-width: 1024px) {
  .floating-icons {
    right: 16px;
    left: auto;
    top: auto;
    bottom: 20px;
    transform: none;
    flex-direction: row;
    gap: 12px;
  }

  .floating-icon {
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .floating-icon svg {
    width: 24px;
    height: 24px;
  }

  .floating-icon img {
    width: 60% !important;
    height: 60% !important;
  }

  .floating-icons:hover .floating-icon {
    transform: none;
  }

  .floating-icon:hover {
    transform: scale(1.1) !important;
  }

  .floating-icon::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .floating-icons {
    right: 12px;
    bottom: 20px;
    gap: 10px;
    flex-direction: column;
  }

  .floating-icon {
    width: 48px;
    height: 48px;
  }

  .floating-icon svg,
  .floating-icon i {
    width: 55% !important;
    height: 55% !important;
  }

  .floating-icon img {
    width: 55% !important;
    height: 55% !important;
  }
}

/* =====================================================
   PAYMENT MODAL - Detalhes do Pagamento
   Baseado no App Flutter: payment_detail_screen.dart
   ===================================================== */

/* Tamanho extra grande para o modal */
.modal-xxl {
  max-width: 900px;
  width: 95%;
}

/* Layout principal em grid */
.pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Coluna esquerda */
.pm-left-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Coluna direita */
.pm-right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Secao do Aluno */
.pm-student-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  border-radius: var(--radius-xl);
}

.pm-student-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

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

.pm-student-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 4px 0;
}

.pm-student-responsible {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 8px 0;
}

.pm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-full);
}

.pm-badge i {
  width: 12px;
  height: 12px;
}

.pm-badge.type-monthly { background: #DBEAFE; color: #1E40AF; }
.pm-badge.type-enrollment { background: #D1FAE5; color: #065F46; }
.pm-badge.type-uniform { background: #E0E7FF; color: #3730A3; }
.pm-badge.type-trip { background: #FEF3C7; color: #92400E; }
.pm-badge.type-tournament { background: #FEE2E2; color: #991B1B; }
.pm-badge.type-equipment { background: #FEF3C7; color: #92400E; }
.pm-badge.type-friendly { background: #E0F2FE; color: #0369A1; }
.pm-badge.type-other { background: var(--gray-200); color: var(--gray-700); }
.pm-badge.manual { background: #FEE2E2; color: #991B1B; }

/* Descrição do pagamento */
.pm-description {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--gray-600);
  font-style: italic;
}

/* ========================================
   STATUS HEADER - Gradiente por status
   Inspirado no app Flutter
   ======================================== */
.pm-status-header {
  padding: 32px 24px;
  text-align: center;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: -24px -24px 24px -24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pm-status-header.status-pending {
  background: linear-gradient(135deg, #FDB913 0%, #F5A623 100%);
}
.pm-status-header.status-overdue {
  background: linear-gradient(135deg, #E53935 0%, #D32F2F 100%);
}
.pm-status-header.status-paid {
  background: linear-gradient(135deg, #43A047 0%, #388E3C 100%);
}
.pm-status-header.status-refunded {
  background: linear-gradient(135deg, #7B1FA2 0%, #6A1B9A 100%);
}
.pm-status-header.status-cancelled {
  background: linear-gradient(135deg, #9E9E9E 0%, #757575 100%);
}

.pm-status-icon {
  width: 48px;
  height: 48px;
  color: white;
}

.pm-status-text {
  font-size: 18px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.pm-status-amount {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-top: 4px;
}

.pm-overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.pm-overdue-badge i {
  width: 14px;
  height: 14px;
}

.pm-interest-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.15);
  border-radius: 16px;
  color: rgba(255,255,255,0.9);
  font-size: 11px;
}

.pm-interest-notice i {
  width: 12px;
  height: 12px;
}

/* ========================================
   AMOUNT BREAKDOWN - Valor com bolsa
   ======================================== */
.pm-amount-breakdown {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.pm-amount-breakdown h5 {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-amount-breakdown h5 i {
  width: 14px;
  height: 14px;
}

.pm-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.pm-amount-label {
  font-size: 14px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-amount-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.pm-amount-row.pm-scholarship {
  color: var(--success);
}

.pm-amount-row.pm-scholarship .pm-amount-label {
  color: var(--success);
  font-weight: 500;
}

.pm-amount-row.pm-scholarship .pm-amount-label i {
  width: 14px;
  height: 14px;
}

.pm-amount-row.pm-scholarship .pm-amount-value {
  color: var(--success);
}

.pm-amount-row.pm-total {
  border-top: 1px solid var(--gray-300);
  padding-top: 12px;
  margin-top: 4px;
}

.pm-amount-row.pm-total .pm-amount-label {
  font-weight: 600;
  color: var(--gray-800);
}

.pm-amount-row.pm-total .pm-amount-value {
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
}

/* ========================================
   RECEIPT DETAILS - Detalhes de pagamento
   ======================================== */
.pm-receipt-details {
  background: white;
  border: 2px solid rgba(67, 160, 71, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.pm-receipt-details h6 {
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-receipt-details h6 i {
  width: 14px;
  height: 14px;
}

.pm-receipt-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}

.pm-detail-label {
  color: var(--gray-500);
}

.pm-detail-value {
  color: var(--gray-800);
  font-weight: 500;
}

.pm-detail-code {
  font-family: monospace;
  font-size: 11px;
  background: var(--gray-100);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-manual-tag {
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

/* Notas/Observações na seção de datas */
.pm-notes-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pm-notes-value {
  font-style: italic;
  color: var(--gray-600);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Cards de Informacao */
.pm-info-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pm-info-row.single {
  grid-template-columns: 1fr;
}

.pm-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.pm-info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-info-icon i {
  width: 20px;
  height: 20px;
}

.pm-info-icon.status-warning { background: #FEF3C7; color: #D97706; }
.pm-info-icon.status-danger { background: #FEE2E2; color: #DC2626; }
.pm-info-icon.status-success { background: var(--primary-50); color: var(--primary); }
.pm-info-icon.status-info { background: var(--blue-50); color: var(--blue); }
.pm-info-icon.status-secondary { background: var(--gray-200); color: var(--gray-600); }
.pm-info-icon.valor { background: var(--primary-50); color: var(--primary); }
.pm-info-icon.vencimento { background: var(--blue-50); color: var(--blue); }
.pm-info-icon.pago { background: var(--primary-50); color: var(--primary); }
.pm-info-icon.taxa { background: #FEF3C7; color: #F59E0B; }

.pm-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pm-info-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pm-info-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.pm-info-value.pm-valor {
  font-size: 18px;
  font-weight: 700;
  color: #059669;
}

.pm-status-warning { color: #D97706; }
.pm-status-danger { color: #DC2626; }
.pm-status-success { color: var(--primary); }
.pm-status-info { color: var(--blue); }
.pm-status-secondary { color: var(--gray-600); }

/* Status row com badge manual */
.pm-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-manual-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #FEF3C7;
  color: #92400E;
  border-radius: var(--radius-full);
}

/* Secoes genericas */
.pm-section {
  padding: 16px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

.pm-section h5 {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-section h5 i {
  width: 14px;
  height: 14px;
}

/* Secao de Datas */
.pm-dates .pm-date-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-200);
}

.pm-dates .pm-date-row:last-child {
  border-bottom: none;
}

.pm-date-label {
  font-size: 13px;
  color: var(--gray-500);
}

.pm-date-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

/* Secao de Link */
.pm-link-section .pm-link-box {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.pm-link-section .pm-link-box code {
  font-family: monospace;
  font-size: 11px;
  color: var(--gray-600);
  word-break: break-all;
}

.pm-link-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-link-buttons .btn {
  flex: 1;
  min-width: 80px;
  justify-content: center;
}

/* Secao de IDs */
.pm-ids .pm-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.pm-id-label {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 60px;
}

.pm-id-value {
  font-family: monospace;
  font-size: 11px;
  color: var(--gray-600);
  background: var(--white);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  word-break: break-all;
}

/* Secao QR Code */
.pm-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1px solid #86EFAC;
  border-radius: var(--radius-xl);
}

.pm-qr-wrapper {
  position: relative;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.pm-qr-wrapper:hover {
  transform: scale(1.02);
}

.pm-qr-image {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  background: white;
  padding: 8px;
  box-shadow: var(--shadow-sm);
}

.pm-qr-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--transition-fast);
  color: white;
  gap: 4px;
}

.pm-qr-overlay i {
  width: 24px;
  height: 24px;
}

.pm-qr-overlay span {
  font-size: 12px;
  font-weight: 500;
}

.pm-qr-wrapper:hover .pm-qr-overlay {
  opacity: 1;
}

.pm-brcode-preview {
  margin-top: 12px;
  background: white;
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.pm-brcode-preview code {
  font-family: monospace;
  font-size: 10px;
  color: var(--gray-600);
}

/* Estado aguardando PIX */
.pm-awaiting-pix {
  background: linear-gradient(135deg, #FEFCE8 0%, #FEF9C3 100%);
  border: 1px solid #FDE047;
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  text-align: center;
  color: #A16207;
}

.pm-awaiting-pix i {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
}

.pm-awaiting-pix p {
  margin: 0 0 8px 0;
  font-weight: 600;
}

.pm-awaiting-sub {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 16px !important;
}

/* Ferramentas PIX */
.pm-pix-tools {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #93C5FD;
  border-radius: var(--radius-xl);
  padding: 20px;
}

.pm-pix-tools h5 {
  font-size: 14px;
  font-weight: 600;
  color: #1D4ED8;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.pm-pix-tools h5 i {
  width: 18px;
  height: 18px;
}

.pm-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-tool-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  color: #1E40AF;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  width: 100%;
}

.pm-tool-btn:hover {
  background: #1D4ED8;
  color: white;
  border-color: #1D4ED8;
}

.pm-tool-btn i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pm-tool-btn span {
  flex: 1;
}

.pm-tool-arrow {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.5;
}

/* Variantes de cor para botoes PIX */
.pm-tool-btn.pm-tool-blue {
  color: #1E40AF;
  border-color: #BFDBFE;
  background: rgba(59, 130, 246, 0.05);
}
.pm-tool-btn.pm-tool-blue:hover {
  background: #2563EB;
  color: white;
  border-color: #2563EB;
}

.pm-tool-btn.pm-tool-green {
  color: #166534;
  border-color: #86EFAC;
  background: rgba(34, 197, 94, 0.05);
}
.pm-tool-btn.pm-tool-green:hover {
  background: #22C55E;
  color: white;
  border-color: #22C55E;
}

.pm-tool-btn.pm-tool-yellow {
  color: #A16207;
  border-color: #FDE047;
  background: rgba(250, 204, 21, 0.1);
}
.pm-tool-btn.pm-tool-yellow:hover {
  background: #EAB308;
  color: white;
  border-color: #EAB308;
}

.pm-tool-btn.pm-tool-orange {
  color: #C2410C;
  border-color: #FDBA74;
  background: rgba(249, 115, 22, 0.05);
}
.pm-tool-btn.pm-tool-orange:hover {
  background: #F97316;
  color: white;
  border-color: #F97316;
}

.pm-tool-btn.pm-tool-red {
  color: #B91C1C;
  border-color: #FCA5A5;
  background: rgba(239, 68, 68, 0.05);
}
.pm-tool-btn.pm-tool-red:hover {
  background: #EF4444;
  color: white;
  border-color: #EF4444;
}

.pm-tool-btn.pm-tool-gray {
  color: var(--gray-600);
  border-color: var(--gray-300);
  background: var(--gray-50);
}
.pm-tool-btn.pm-tool-gray:hover {
  background: var(--gray-600);
  color: white;
  border-color: var(--gray-600);
}

/* Secao Pago */
.pm-paid-section {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1px solid #86EFAC;
  border-radius: var(--radius-xl);
  padding: 24px;
}

.pm-paid-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #86EFAC;
}

.pm-paid-header > i {
  width: 48px;
  height: 48px;
  color: #16A34A;
}

.pm-paid-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #166534;
}

.pm-paid-method {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #15803D;
}

.pm-paid-id {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--gray-600);
}

.pm-paid-id code {
  font-family: monospace;
  color: var(--gray-700);
}

.pm-paid-tools h6 {
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-paid-tools h6 i {
  width: 14px;
  height: 14px;
}

/* Secao Estornado */
.pm-refunded-section {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
  border: 1px solid #C4B5FD;
  border-radius: var(--radius-xl);
  padding: 24px;
}

.pm-refunded-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #C4B5FD;
}

.pm-refunded-header > i {
  width: 48px;
  height: 48px;
  color: #7C3AED;
}

.pm-refunded-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #6D28D9;
}

.pm-refunded-sub {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #8B5CF6;
}

.pm-refunded-id {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--gray-600);
}

.pm-refunded-id code {
  font-family: monospace;
  color: var(--gray-700);
}

.pm-refunded-tools h6 {
  font-size: 12px;
  font-weight: 600;
  color: #6D28D9;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-refunded-tools h6 i {
  width: 14px;
  height: 14px;
}

/* Detalhes do Estorno */
.pm-refund-details {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.pm-refund-details .pm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.pm-refund-details .pm-detail-row:last-child {
  border-bottom: none;
}

.pm-value-purple {
  color: #7C3AED;
  font-weight: 700;
}

.pm-status-purple {
  color: #7C3AED;
  font-weight: 600;
}

/* Botão roxo para estorno */
.pm-tool-btn.pm-tool-purple {
  color: #6D28D9;
  border-color: #C4B5FD;
  background: rgba(139, 92, 246, 0.05);
}
.pm-tool-btn.pm-tool-purple:hover {
  background: #7C3AED;
  color: white;
  border-color: #7C3AED;
}

/* Acoes */
.pm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.pm-action-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
}

.pm-action-info {
  text-align: center;
  color: var(--gray-500);
  font-size: 14px;
  padding: 16px;
}

/* Modal QR Code ampliado */
.pm-qr-modal {
  max-width: 420px;
}

.pm-qr-modal-image {
  width: 300px;
  height: 300px;
  border-radius: var(--radius-lg);
  background: white;
  padding: 16px;
  box-shadow: var(--shadow-md);
  margin: 0 auto 24px;
  display: block;
}

.pm-qr-instruction {
  font-size: 15px;
  color: var(--gray-600);
  margin-bottom: 24px;
}

.pm-qr-brcode-section {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.pm-brcode-box {
  background: white;
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 12px 0 16px;
}

.pm-brcode-box code {
  font-family: monospace;
  font-size: 12px;
  color: var(--gray-600);
  word-break: break-all;
}

/* Modal PDF */
.pm-pdf-modal {
  max-width: 900px;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.pm-pdf-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

.pm-pdf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--gray-50);
  z-index: 1;
}

.pm-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
}

/* Modal Reenviar */
.pm-resend-modal {
  max-width: 400px;
}

.pm-resend-text {
  color: var(--gray-600);
  margin-bottom: 20px;
}

.pm-resend-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-resend-options .btn {
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

/* Responsivo */
@media (max-width: 900px) {
  .pm-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .modal-xxl {
    max-width: 100%;
    margin: 16px;
  }

  .pm-status-header {
    margin: -20px -20px 20px -20px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 20px;
  }

  .pm-status-amount {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .pm-info-row {
    grid-template-columns: 1fr;
  }

  .pm-student-section {
    flex-direction: column;
    text-align: center;
  }

  .pm-badges {
    justify-content: center;
  }

  .pm-link-buttons {
    flex-direction: column;
  }

  .pm-link-buttons .btn {
    width: 100%;
  }

  .pm-qr-image {
    width: 150px;
    height: 150px;
  }

  .pm-qr-modal-image {
    width: 250px;
    height: 250px;
  }

  .pm-status-header {
    padding: 20px 16px;
  }

  .pm-status-text {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .pm-status-amount {
    font-size: 24px;
  }

  .pm-status-icon {
    width: 40px;
    height: 40px;
  }

  .pm-amount-breakdown {
    padding: 12px;
  }

  .pm-receipt-details {
    padding: 12px;
  }

  .pm-detail-code {
    max-width: 140px;
    font-size: 10px;
  }
}

/* ================================
   CONTRATOS & COMUNICADOS - DESIGN PROFISSIONAL V3
   ================================ */

/* Grid lado a lado para contratos e comunicados */
.contracts-announcements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 1200px) {
  .contracts-announcements-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CONTRATOS CARD REDESIGN ===== */
.contracts-list {
  display: flex;
  flex-direction: column;
}

.contract-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  transition: all 0.2s ease;
  cursor: default;
}

.contract-card:last-child {
  border-bottom: none;
}

.contract-card:hover {
  background: var(--gray-50);
}

.contract-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contract-card-student {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.contract-card-student .mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.contract-card-student .mini-avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.contract-card-student span {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.contract-card-body {
  flex: 1;
  min-width: 0;
}

.contract-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.contract-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contract-card-meta code {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--gray-100);
  border-radius: 4px;
  color: var(--gray-600);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

.contract-card-meta span {
  font-size: 11px;
  color: var(--gray-500);
}

.contract-card-meta .signature-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--success);
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
}

.contract-card-meta .signature-info i {
  width: 12px;
  height: 12px;
}

.contract-card-meta .signature-info.external {
  color: var(--purple);
  background: rgba(139, 92, 246, 0.1);
}

.contract-card-meta .signature-info.partial {
  color: var(--info);
  background: rgba(59, 130, 246, 0.1);
}

.contract-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.contract-card-actions .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-500);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.contract-card-actions .btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.contract-card-actions .btn i {
  width: 16px;
  height: 16px;
}

/* Status badge no contrato */
.contract-card .badge {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ===== COMUNICADOS CARD REDESIGN ===== */
.announcements-admin-list {
  display: flex;
  flex-direction: column;
}

.announcement-admin-card {
  padding: 16px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: all 0.2s ease;
}

.announcement-admin-card:last-child {
  border-bottom: none;
}

.announcement-admin-card:hover {
  background: linear-gradient(135deg, var(--gray-50) 0%, rgba(34, 197, 94, 0.02) 100%);
}

.announcement-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}

.announcement-admin-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.announcement-admin-title .badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.announcement-admin-title h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
  line-height: 1.4;
}

.announcement-admin-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.announcement-admin-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
}

.announcement-admin-meta span i {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.announcement-admin-content {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-admin-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-150);
}

.announcement-admin-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-500);
}

.announcement-admin-footer span i {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}

/* ===== TABS COMPACTOS ===== */
.compact-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.compact-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.compact-tab:hover {
  background: var(--white);
  color: var(--gray-800);
}

.compact-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mini-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.mini-badge.success {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.mini-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.mini-badge.info {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

/* ===== PAGINAÇÃO COMPACTA ===== */
.compact-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.compact-pagination span {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

.compact-pagination .btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compact-pagination .btn i {
  width: 14px;
  height: 14px;
}

/* ===== BADGES MELHORADOS ===== */
.badge-purple {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  .contract-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
  }

  .contract-card-header {
    justify-content: space-between;
    width: 100%;
  }

  .contract-card-student {
    min-width: auto;
  }

  .contract-card-actions {
    position: absolute;
    top: 14px;
    right: 16px;
  }

  .announcement-admin-header {
    flex-direction: column;
    gap: 8px;
  }

  .announcement-admin-meta {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .announcement-admin-footer {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

/* ===== SCHOOL DETAIL GRID ===== */
.school-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1100px) {
  .school-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de contratos e comunicados */
#contractsAnnouncementsGrid .card {
  height: auto;
}

/* ========================================
   CONTRATOS TABLE - DESIGN PROFISSIONAL V4
   ======================================== */

.contracts-table-wrapper {
  overflow-x: auto;
}

.contracts-table-header {
  display: grid;
  grid-template-columns: 44px 1fr 100px 140px 90px 120px 80px;
  gap: 12px;
  padding: 12px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contracts-table-body {
  display: flex;
  flex-direction: column;
}

.contract-row {
  display: grid;
  grid-template-columns: 44px 1fr 90px 120px 85px 95px 70px;
  gap: 12px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s ease;
}

.contract-row:last-child {
  border-bottom: none;
}

.contract-row:hover {
  background: var(--gray-50);
}

.contract-row-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.contract-row-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.contract-row-avatar .avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.contract-row-info {
  min-width: 0;
}

.contract-row-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-row-doc {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.contract-row-protocol code {
  font-size: 10px;
  padding: 3px 6px;
  background: var(--gray-100);
  border-radius: 4px;
  color: var(--gray-600);
  font-family: 'SF Mono', Monaco, monospace;
}

.contract-row-signer {
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-row-signer .text-muted {
  color: var(--gray-400);
}

.contract-row-date {
  font-size: 12px;
  color: var(--gray-500);
}

.contract-row-status {
  text-align: center;
}

.contract-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.contract-row-actions button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.15s ease;
}

.contract-row-actions button:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.contract-row-actions button i {
  width: 16px;
  height: 16px;
}

/* ========================================
   COMUNICADOS LIST - DESIGN PROFISSIONAL V4
   ======================================== */

.ann-list-wrapper {
  display: flex;
  flex-direction: column;
}

.ann-card {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ann-card:last-child {
  border-bottom: none;
}

.ann-card:hover {
  background: var(--gray-50);
}

.ann-card-left {
  flex-shrink: 0;
  padding-top: 2px;
}

.ann-priority {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ann-card-content {
  flex: 1;
  min-width: 0;
}

.ann-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 6px;
  line-height: 1.4;
}

.ann-card-body {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: 10px;
}

.ann-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ann-card-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gray-500);
}

.ann-card-footer span i {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* ========================================
   PAGINATION UNIFICADA
   ======================================== */

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.table-pagination .pagination-text {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

.table-pagination .btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

.table-pagination .btn i {
  width: 16px;
  height: 16px;
}

/* ========================================
   RESPONSIVO - CONTRATOS & COMUNICADOS
   ======================================== */

@media (max-width: 1100px) {
  .contracts-table-header {
    display: none;
  }

  .contract-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .contract-row-avatar {
    order: 1;
  }

  .contract-row-info {
    order: 2;
    flex: 1;
    min-width: 120px;
  }

  .contract-row-status {
    order: 3;
  }

  .contract-row-protocol {
    order: 4;
    width: 100%;
  }

  .contract-row-signer {
    order: 5;
  }

  .contract-row-date {
    order: 6;
  }

  .contract-row-actions {
    order: 7;
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .ann-card {
    flex-direction: column;
    gap: 10px;
  }

  .ann-card-footer {
    gap: 12px;
  }
}

/* ========================================
   DOCS SECTION - DESIGN MODERNO V5
   ======================================== */

.docs-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .docs-section {
    grid-template-columns: 1fr;
  }
}

/* Remove card styling interno, usa o próprio card */
.docs-section .card {
  margin-bottom: 0;
}

/* ===== CONTRATOS - TABELA MODERNA ===== */
.contracts-table-wrapper {
  overflow-x: auto;
  border-radius: 0 0 12px 12px;
}

.contracts-table-header {
  display: grid;
  grid-template-columns: 140px 80px 100px 70px 95px 65px;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--gray-200);
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.contracts-table-body {
  background: white;
}

.contract-row {
  display: grid;
  grid-template-columns: 140px 80px 100px 70px 95px 65px;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--gray-100);
  transition: all 0.15s ease;
  cursor: default;
}

.contract-row:last-child {
  border-bottom: none;
}

.contract-row:hover {
  background: linear-gradient(to right, rgba(34, 197, 94, 0.03), transparent);
}

.contract-row-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.contract-row-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.contract-row-avatar img,
.contract-row-avatar .avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.contract-row-avatar img {
  object-fit: cover;
}

.contract-row-avatar .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
}

.contract-row-text {
  min-width: 0;
}

.contract-row-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-row-doc {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-row-protocol code {
  font-size: 9px;
  padding: 3px 6px;
  background: var(--gray-100);
  border-radius: 4px;
  color: var(--gray-600);
  font-family: 'SF Mono', Monaco, monospace;
  letter-spacing: 0.3px;
}

.contract-row-signer,
.contract-row-date {
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-row-status span {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.contract-row-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.contract-row-actions button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.15s ease;
}

.contract-row-actions button:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.contract-row-actions button i {
  width: 15px;
  height: 15px;
}

/* ===== COMUNICADOS - LISTA COMPACTA MODERNA ===== */
.ann-list-wrapper {
  background: white;
  border-radius: 0 0 12px 12px;
}

.ann-row {
  display: grid;
  grid-template-columns: 70px 1fr 120px 100px 50px;
  gap: 10px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ann-row:last-child {
  border-bottom: none;
}

.ann-row:hover {
  background: linear-gradient(to right, rgba(59, 130, 246, 0.03), transparent);
}

.ann-row-priority {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.ann-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-row-author {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-row-date {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
}

.ann-row-views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-400);
}

.ann-row-views i {
  width: 12px;
  height: 12px;
}

/* ===== PAGINAÇÃO MODERNA ===== */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-top: 1px solid var(--gray-100);
  border-radius: 0 0 12px 12px;
}

.table-pagination .pagination-text {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 600;
}

.table-pagination .btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.table-pagination .btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.table-pagination .btn:disabled {
  opacity: 0.4;
}

.table-pagination .btn i {
  width: 14px;
  height: 14px;
}

/* ===== COMPACT TABS MODERNO ===== */
.compact-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, white, #fafbfc);
  border-bottom: 1px solid var(--gray-100);
}

.compact-tab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.compact-tab:hover {
  color: var(--gray-700);
  background: var(--gray-50);
}

.compact-tab.active {
  color: var(--primary);
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

.mini-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  .contracts-table-header {
    display: none;
  }

  .contract-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .contract-row-info {
    flex: 1;
    min-width: 150px;
  }

  .contract-row-protocol,
  .contract-row-signer {
    display: none;
  }

  .ann-row {
    grid-template-columns: 70px 1fr 50px;
  }

  .ann-row-author,
  .ann-row-date {
    display: none;
  }
}

/* Fix: Cards de docs com mesma altura */
.docs-section .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header do card (título + badge + refresh) */
.docs-section .card-header {
  flex-shrink: 0;
}

/* Área de conteúdo cresce igualmente */
.docs-section .contracts-table-wrapper,
.docs-section .ann-list-wrapper {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

/* ===== MODAL DETALHES COMUNICADO ===== */
.ann-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ann-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.ann-detail-header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.ann-detail-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}

.ann-detail-priority i {
  width: 14px;
  height: 14px;
}

.ann-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.3;
  margin: 0;
}

.ann-detail-content {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-700);
  border-left: 4px solid var(--primary);
}

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

.ann-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.ann-meta-item:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
}

.ann-meta-item > i {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.ann-meta-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ann-meta-item .meta-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ann-meta-item .meta-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}

.ann-detail-views {
  border-top: 1px solid var(--gray-200);
  padding-top: 20px;
}

.ann-views-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
}

.ann-views-header i {
  width: 18px;
  height: 18px;
  color: var(--success);
}

.ann-views-count {
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}

.ann-views-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
}

.ann-view-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.ann-view-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 168, 89, 0.1);
  transform: translateY(-2px);
}

.ann-view-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}

.ann-view-card {
  position: relative;
}

.ann-view-card:hover .ann-view-delete {
  opacity: 1;
}

.ann-view-delete:hover {
  background: #dc2626;
  color: white;
}

.ann-view-delete i {
  width: 14px;
  height: 14px;
}

.ann-view-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ann-view-avatar i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.ann-view-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ann-view-student {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.ann-view-student i {
  width: 14px;
  height: 14px;
  color: var(--secondary-dark);
}

.ann-view-student strong {
  color: var(--gray-800);
  font-weight: 600;
}

.ann-view-parent {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
}

.ann-view-parent i {
  width: 12px;
  height: 12px;
  color: var(--gray-400);
}

.ann-view-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray-500);
  padding-top: 4px;
  border-top: 1px dashed var(--gray-200);
  margin-top: 2px;
}

.ann-view-time i {
  width: 12px;
  height: 12px;
  color: var(--gray-400);
}

.ann-views-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  background: var(--gray-50);
  border-radius: 12px;
  color: var(--gray-500);
}

.ann-views-empty i {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.ann-views-empty p {
  font-size: 14px;
  margin: 0;
}

/* Scrollbar customizada para lista de visualizações */
.ann-views-list::-webkit-scrollbar {
  width: 6px;
}

.ann-views-list::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.ann-views-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.ann-views-list::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

@media (max-width: 640px) {
  .ann-detail-meta {
    grid-template-columns: 1fr;
  }
}

/* Avatar com foto */
.ann-view-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ann-view-avatar.has-photo i {
  display: none;
}

/* Links clicáveis */
.ann-view-avatar {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ann-view-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 168, 89, 0.3);
}

.ann-view-student,
.ann-view-parent {
  cursor: pointer;
  transition: color 0.2s ease;
}

.ann-view-student:hover,
.ann-view-parent:hover {
  color: var(--primary);
}

.ann-view-student:hover strong,
.ann-view-parent:hover strong {
  color: var(--primary);
  text-decoration: underline;
}

.link-icon {
  width: 12px !important;
  height: 12px !important;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--primary);
  margin-left: auto;
}

.ann-view-student:hover .link-icon,
.ann-view-parent:hover .link-icon {
  opacity: 1;
}

/* ===== MODAL DE PERFIL ===== */
.profile-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-modal-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-modal-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.profile-modal-photo:hover {
  transform: scale(1.05);
}

.profile-modal-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--gray-300);
}

.profile-modal-avatar i {
  width: 36px;
  height: 36px;
  color: var(--gray-400);
}

.profile-modal-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-modal-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;
}

.profile-modal-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-50);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  width: fit-content;
}

.profile-modal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  width: fit-content;
}

.profile-modal-status.active {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.profile-modal-status.inactive {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.profile-modal-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--gray-50);
  border-radius: 12px;
}

.profile-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--gray-700);
}

.profile-detail-item i {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ========== TIMELINE DE ATIVIDADES ========== */

.activity-timeline {
  display: flex;
  flex-direction: column;
}

.activity-date-group {
  padding: 8px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}

.activity-date-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-50);
  transition: background 0.15s;
}

.activity-item:hover {
  background: var(--gray-50);
}

.activity-item.success {
  border-left-color: var(--success);
}

.activity-item.warning {
  border-left-color: var(--warning);
}

.activity-item.danger {
  border-left-color: var(--danger);
}

.activity-item.info {
  border-left-color: var(--info);
}

.activity-item.primary {
  border-left-color: var(--primary);
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gray-100);
}

.activity-item.success .activity-icon {
  background: var(--success-light);
  color: var(--success);
}

.activity-item.warning .activity-icon {
  background: var(--warning-light);
  color: var(--warning);
}

.activity-item.danger .activity-icon {
  background: var(--danger-light);
  color: var(--danger);
}

.activity-item.info .activity-icon {
  background: var(--info-light);
  color: var(--info);
}

.activity-item.primary .activity-icon {
  background: var(--primary-50);
  color: var(--primary);
}

.activity-icon i {
  width: 16px;
  height: 16px;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
}

.activity-description {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-time {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
  flex-shrink: 0;
}

.activities-footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--gray-100);
}

@media (max-width: 768px) {
  .activity-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .activity-icon {
    width: 28px;
    height: 28px;
  }

  .activity-icon i {
    width: 14px;
    height: 14px;
  }

  .activity-title {
    font-size: 12px;
  }

  .activity-description {
    font-size: 11px;
  }
}

/* ========================================
   RESPONSIVO GERAL - ADMIN MOBILE
   ======================================== */

/* Sidebar Mobile */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: none;
  }

  .sidebar.open {
    left: 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

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

  .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .header {
    padding: 12px 16px;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }
}

@media (min-width: 901px) {
  .mobile-menu-toggle {
    display: none !important;
  }

  .sidebar-overlay {
    display: none !important;
  }
}

/* Main Content Mobile */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .page-header-actions .btn {
    flex: 1;
    min-width: 120px;
  }

  /* Owner section - tabs responsivas com scroll horizontal */
  .owner-card-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 6px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .owner-card-tabs::-webkit-scrollbar {
    display: none;
  }

  .owner-tab {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .owner-tab i {
    width: 14px;
    height: 14px;
  }

  .tab-badge {
    font-size: 10px;
    padding: 1px 5px;
  }

  /* Header Row: Profile + Saldo empilhados no mobile */
  .owner-header-row {
    flex-direction: column;
  }

  .owner-profile-card {
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
  }

  .owner-balance-inline {
    min-width: auto;
    justify-content: center;
    padding: 12px 16px;
  }

  .owner-info-grid {
    grid-template-columns: 1fr !important;
  }

  .owner-section {
    padding: 12px;
  }

  .owner-details-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* School Detail Mobile */
@media (max-width: 900px) {
  .school-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .docs-section {
    flex-direction: column;
  }

  .docs-section > .card {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* Header da escola */
  .school-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .school-header-left {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .school-header-info {
    text-align: left;
  }

  .school-header-info h1 {
    font-size: 1.25rem;
  }

  .school-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  /* Cards */
  .card {
    padding: 16px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .card-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Info grid compacta */
  .info-grid-compact {
    grid-template-columns: 1fr !important;
  }

  .info-grid-compact .info-item-inline.full-width {
    grid-column: span 1;
  }

  /* Tabs */
  .tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 11px;
  }

  /* Owner section - tabs responsivas com scroll horizontal */
  .owner-card-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 6px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .owner-card-tabs::-webkit-scrollbar {
    display: none;
  }

  .owner-tab {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .owner-tab i {
    width: 14px;
    height: 14px;
  }

  .tab-badge {
    font-size: 10px;
    padding: 1px 5px;
  }

  /* Header Row: Profile + Saldo empilhados no mobile */
  .owner-header-row {
    flex-direction: column;
  }

  .owner-profile-card {
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
  }

  .owner-balance-inline {
    min-width: auto;
    justify-content: center;
    padding: 12px 16px;
  }

  /* Seção do dono */
  .owner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Evitar overflow horizontal em grids de informação */
  .owner-info-grid {
    grid-template-columns: 1fr !important;
  }

  .owner-section {
    padding: 12px;
  }

  .owner-details-row {
    flex-direction: column;
    gap: 12px;
  }

  /* Teams grid */
  .teams-grid {
    grid-template-columns: 1fr !important;
  }

  /* Students table */
  .students-table-header {
    display: none;
  }

  .student-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }

  .student-row > div {
    min-width: auto;
  }

  .student-row-info {
    flex: 1;
    min-width: 150px;
  }

  /* Charges table */
  .charges-table-header {
    display: none;
  }

  .charge-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .charge-row > div {
    width: 100%;
  }

  /* Buttons */
  .btn-lg {
    padding: 12px 16px;
    font-size: 14px;
  }

  .btn-sm {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Modal */
  .modal-content {
    margin: 10px;
    max-height: calc(100vh - 20px);
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* Trainers Section */
.trainers-section {
  margin-bottom: 24px;
}

.trainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.trainer-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.trainer-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,168,89,0.1);
}

.trainer-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.trainer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}

.trainer-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.trainer-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.trainer-info p {
  font-size: 12px;
  color: var(--gray-500);
}

.trainer-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.trainer-role.admin {
  background: var(--info-light);
  color: var(--info);
}

.trainer-role.trainer {
  background: var(--success-light);
  color: var(--success);
}

.trainer-role.assistant {
  background: var(--warning-light);
  color: var(--warning);
}

.trainer-teams {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.trainer-teams-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.trainer-teams-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trainer-team-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--gray-100);
  border-radius: 4px;
  font-size: 12px;
  color: var(--gray-700);
}

.trainer-team-badge i {
  width: 12px;
  height: 12px;
}

.trainer-all-teams {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

@media (max-width: 600px) {
  .trainers-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   STAFF LIST (TREINADORES E FAMILIARES)
   ======================================== */

.staff-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.staff-item:hover {
  background: var(--primary-50);
}

.staff-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.staff-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.staff-role {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.staff-role.admin {
  background: var(--info-light);
  color: var(--info);
}

.staff-role.trainer {
  background: var(--success-light);
  color: var(--success);
}

.staff-role.assistant {
  background: var(--warning-light);
  color: var(--warning);
}

.staff-role.parent {
  background: var(--primary-100);
  color: var(--primary);
}

.staff-teams {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.staff-arrow {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* Mini Pagination */
.mini-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--gray-100);
}

.mini-pagination span {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 50px;
  text-align: center;
}

.mini-pagination .btn {
  width: 28px;
  height: 28px;
  padding: 0;
}

.mini-pagination .btn i {
  width: 14px;
  height: 14px;
}

@media (max-width: 600px) {
  .staff-teams {
    max-width: 100px;
  }
  
  .staff-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  
  .staff-name {
    font-size: 13px;
  }
}

/* Select Compact */
.form-select.compact {
  padding: 6px 32px 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--gray-300);
  background-color: white;
  cursor: pointer;
}

.form-select.compact:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-100);
}

/* Charges/Students Pagination */
.charges-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.charges-pagination .pagination-info {
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 500;
}

@media (max-width: 600px) {
  .charges-pagination {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
  }
  
  .charges-pagination .btn {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .charges-pagination .pagination-info {
    width: 100%;
    text-align: center;
    order: -1;
  }
}

/* ============================================================
   INFRA / A11Y (adicionado pelo agente de infra)
   ============================================================ */

/*
  Touch feedback: scale leve no clique para botões. Funciona como
  affordance em mobile sem depender de :hover.
*/
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled),
.btn-warning:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.btn-outline-primary:active:not(:disabled),
.btn-icon:active:not(:disabled),
.btn-icon-sm:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 60ms ease;
}

/*
  Sticky-hover fix para touch devices: efeitos de :hover ficam "presos"
  após toque. Restringe os hovers principais a dispositivos com mouse fino.
  (Não é viável reescrever todos os :hover individualmente; o seletor abaixo
  cobre o caso oposto - hover NÃO suportado - removendo o estado preso.)
*/
@media (hover: none) {
  .btn-primary:hover:not(:disabled),
  .btn-secondary:hover:not(:disabled),
  .btn-danger:hover:not(:disabled),
  .btn-warning:hover:not(:disabled),
  .btn-ghost:hover:not(:disabled),
  .btn-outline-primary:hover:not(:disabled),
  .sidebar-item:hover,
  .card:hover,
  .stat-card:hover,
  .action-card:hover,
  .list-item:hover,
  .tab:hover,
  .header-user:hover,
  .child-selector-trigger:hover,
  .child-selector-item:hover,
  .data-table tbody tr:hover,
  .data-table th.sortable:hover,
  th.sortable:hover,
  .dropdown-item:hover {
    /* Reverte para o estado base (browser ainda aplica :hover momentâneo
       em alguns tap-and-holds, mas remove o "sticky hover" após release). */
    background: initial;
    border-color: initial;
    transform: none;
    box-shadow: initial;
  }
}

/*
  Sidebar mobile: garantir touch targets >= 44px (Apple HIG / Material).
*/
@media (max-width: 768px) {
  .sidebar-item {
    padding: 12px 16px;
    min-height: 44px;
  }
  .sidebar-group-toggle {
    padding: 12px 16px;
    min-height: 44px;
  }
  .sidebar-close-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Botões de header (sino, hamburger) também devem ter área tocável */
  .header-bell,
  .mobile-menu-toggle,
  .header-user {
    min-width: 44px;
    min-height: 44px;
  }
}

/*
  Focus visível em foco-com-teclado (acessibilidade).
*/
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.modal-close:focus-visible,
.sidebar-close-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/*
  Helper para esconder visualmente mas manter leitor de tela.
*/
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}