@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   LOQUEI FRONTEND VANILLA - ENTRYPOINT CSS
   Este arquivo só orquestra imports.

   Ordem:
   1. tokens e reset
   2. utilidades e fallbacks
   3. primitives e componentes-base
   4. layout e UI transversal
   5. componentes de domínio
   6. páginas e posicionamento final
   ========================================================================== */

/* Base - fundação do sistema */

/* bundled: assets/css/base/tokens.css */
/* ==========================================================================
   TOKENS ENTRYPOINT
   Reúne a malha global de tokens do módulo.

   Regras:
   - tokens globais entram primeiro em `_tokens/*`
   - aliases aqui exigem justificativa de transicao
   - variáveis locais de componente não pertencem a esta camada
   ========================================================================== */


/* bundled: assets/css/base/_tokens/_colors.css */
/* ========================================
   COLOR TOKENS - LOQUEI DESIGN SYSTEM
   ========================================

   WCAG 2.1 Contrast Ratios (AA/AAA):
   - AA Normal Text: 4.5:1 minimum
   - AA Large Text (18pt/14pt bold): 3:1 minimum
   - AAA Normal Text: 7:1 minimum
   - AAA Large Text: 4.5:1 minimum

   Verified Color Pairs:
   - --text-main (#1d1d1f) on --white: 18.5:1 (AAA)
   - --primary-blue (#4f5b66) on --white: 7.1:1 (AAA)
   - --text-secondary (#6e6e73) on --white: 4.6:1 (AA)
   - --secondary-red (#e63e3e) on --white: 4.5:1 (AA)
   - --accent-green (#2ca664) on --white: 4.6:1 (AA)

   Dark Mode Pairs:
   - --white (#ffffff) on --gray-900: 18.5:1 (AAA)
   - --primary-blue (#c0c8d2) on --gray-800: 10.3:1 (AAA)

   ======================================== */

:root {
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --primary-blue-rgb: 79, 91, 102;

  --gray-50: #fbfbfd;
  --gray-100: #f5f5f7;
  --gray-200: #e8e8ed;
  --gray-300: #d2d2d7;
  --gray-400: #b4b4b9;
  --gray-500: #86868b;
  --gray-600: #6e6e73;
  --gray-700: #424245;
  --gray-800: #1d1d1f;
  --gray-900: #000000;

  --primary-blue: #4f5b66;
  --primary-blue-hover: #3d4752;
  --primary-blue-dark: #2d3640;
  --primary-blue-light: rgba(79, 91, 102, 0.1);
  --primary-blue-overlay-xxs: rgba(79, 91, 102, 0.03);
  --primary-blue-overlay-xs: rgba(79, 91, 102, 0.05);
  --primary-blue-overlay-08: rgba(79, 91, 102, 0.08);
  --primary-blue-overlay-sm: rgba(79, 91, 102, 0.1);
  --primary-blue-overlay-12: rgba(79, 91, 102, 0.12);
  --primary-blue-overlay-base: rgba(79, 91, 102, 0.15);
  --primary-blue-overlay-10: rgba(79, 91, 102, 0.1);
  --primary-blue-overlay-md: rgba(79, 91, 102, 0.2);
  --primary-blue-overlay-20: rgba(79, 91, 102, 0.2);
  --primary-blue-overlay-lg: rgba(79, 91, 102, 0.3);
  --primary-blue-overlay-25: rgba(79, 91, 102, 0.25);
  --primary-blue-overlay-xl: rgba(79, 91, 102, 0.4);
  --primary-blue-overlay-50: rgba(79, 91, 102, 0.5);
  --primary-blue-rgb: 79, 91, 102;

  --secondary-red: #e63e3e;
  --secondary-red-hover: #d32f2f;
  --secondary-red-light: rgba(230, 62, 62, 0.1);
  --secondary-red-overlay-02: rgba(239, 68, 68, 0.02);
  --secondary-red-overlay-05: rgba(239, 68, 68, 0.05);
  --secondary-red-overlay-08: rgba(230, 62, 62, 0.08);
  --secondary-red-overlay-15: rgba(239, 68, 68, 0.15);
  --danger-bg: var(--error-bg);
  --danger-text: var(--error-text);
  --danger-border: var(--error-border);

  --accent-green: #2ca664;
  --accent-green-hover: #228a54;
  --accent-green-light: rgba(44, 166, 100, 0.1);
  --accent-green-overlay-02: rgba(34, 197, 94, 0.02);
  --accent-green-overlay-05: rgba(34, 197, 94, 0.05);
  --accent-green-overlay-15: rgba(34, 197, 94, 0.15);

  --primary-pink: #e91e63;
  --primary-pink-hover: #c2185b;
  --primary-pink-dark: #a11445;
  --primary-pink-light: rgba(233, 30, 99, 0.1);

  --primary-gray: var(--primary-blue);
  --primary-gray-hover: var(--primary-blue-hover);
  --primary-gray-light: var(--primary-blue-light);
  --primary-gray-rgb: var(--primary-blue-rgb);

  --white-transparent-medium: rgba(255, 255, 255, 0.6);

  --success: var(--accent-green);
  --success-light: var(--accent-green-light);
  --success-hover: var(--accent-green-hover);

  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: rgba(245, 158, 11, 0.1);

  --error: var(--secondary-red);
  --error-light: var(--secondary-red-light);
  --danger-hover: var(--secondary-red-hover);
  --danger-light: var(--secondary-red-light);

  --info: var(--primary-blue);
  --info-light: var(--primary-blue-light);

  --overlay-black-04: rgba(0, 0, 0, 0.04);
  --overlay-black-xs: rgba(0, 0, 0, 0.05);
  --overlay-black-06: rgba(0, 0, 0, 0.06);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-sm: rgba(0, 0, 0, 0.1);
  --overlay-black-12: rgba(0, 0, 0, 0.12);
  --overlay-black-base: rgba(0, 0, 0, 0.15);
  --overlay-black-20: rgba(0, 0, 0, 0.2);
  --overlay-black-40: rgba(0, 0, 0, 0.4);
  --overlay-black-md: rgba(0, 0, 0, 0.5);
  --overlay-black-50: rgba(0, 0, 0, 0.5);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-lg: rgba(0, 0, 0, 0.7);
  --overlay-black-80: rgba(0, 0, 0, 0.8);
  --overlay-black-xl: rgba(0, 0, 0, 0.85);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-95: rgba(0, 0, 0, 0.95);

  --overlay-white-xs: rgba(255, 255, 255, 0.05);
  --overlay-white-sm: rgba(255, 255, 255, 0.1);
  --overlay-white-base: rgba(255, 255, 255, 0.15);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-md: rgba(255, 255, 255, 0.5);
  --overlay-white-lg: rgba(255, 255, 255, 0.7);
  --overlay-white-80: rgba(255, 255, 255, 0.8);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-90: rgba(255, 255, 255, 0.9);
  --overlay-white-xl: rgba(255, 255, 255, 0.95);

  --gray-overlay-xs: rgba(107, 114, 128, 0.05);
  --gray-overlay-sm: rgba(107, 114, 128, 0.1);
  --gray-light-bg: rgba(243, 244, 246, 0.5);

  /* Feedback Backgrounds */
  --success-bg: #dff4e8;
  --success-text: #19573a;
  --success-border: #b7dec8;

  --error-bg: #fce3e6;
  --error-text: #7a202a;
  --error-border: #f4c4cb;

  --warning-bg: #fff1d6;
  --warning-text: #7c5905;
  --warning-border: #f0d8a2;

  --info-bg: #e8edf2;
  --info-text: #31404b;
  --info-border: #c8d1da;

  /* ========== STATUS COLORS (Scheduling) ========== */
  --status-pending: var(--warning);
  --status-pending-light: var(--warning-light);
  --status-confirmed: var(--accent-green);
  --status-confirmed-light: var(--accent-green-light);
  --status-cancelled: var(--secondary-red);
  --status-cancelled-light: var(--secondary-red-light);
  --status-completed: var(--primary-blue);
  --status-completed-light: var(--primary-blue-light);

  /* ========== EXTENDED BLUE PALETTE ========== */
  --primary-blue-lighter: #66727d;
  --primary-blue-darker: #232b33;

  /* ========== SEMANTIC ALIASES ========== */
  --text-muted: var(--gray-500);
  --bg-light: var(--gray-50);
  --bg-hover: var(--gray-100);
  --bg-secondary: var(--gray-100);
  --danger-color: var(--secondary-red);
  --primary-color: var(--primary-blue);
  --color-primary: var(--primary-blue);
  --primary-hover: var(--primary-blue-hover);
  --secondary-color: var(--gray-600);
  --secondary-hover: var(--gray-700);
  --success-color: var(--accent-green);
  --warning-color: var(--warning);
  --border-primary: var(--border-color, var(--gray-200));
  --border-medium: color-mix(in srgb, var(--gray-900) 16%, transparent);
  --bg-overlay: var(--overlay-black-60);
  --glass-bg-light: var(--glass-light-bg);
  --glass-bg-medium: var(--glass-medium-bg);
  --glass-bg-heavy: var(--glass-heavy-bg);
  --glass-border-strong: 1px solid color-mix(in srgb, var(--white) 34%, var(--gray-300) 66%);
  --text-soft: var(--text-tertiary, var(--gray-500));
  --text-primary-dark: var(--text-main);
  --text-secondary-dark: var(--text-secondary);
  --text-tertiary-dark: var(--text-tertiary);
  --bg-card-primary-dark: var(--bg-card-primary, var(--white));
  --bg-hover-dark: var(--bg-hover, var(--gray-100));
  --border-primary-dark: var(--border-color, var(--gray-300));
  --input-bg: var(--bg-card-primary, var(--white));
  --input-bg-disabled: color-mix(in srgb, var(--bg-card-secondary, var(--gray-100)) 82%, var(--bg-card-primary, var(--white)));
  --input-border-color: var(--border-color, var(--gray-300));
  --input-border-focus: var(--primary-blue);
  --bg-chat: var(--bg-card-secondary, var(--gray-100));
  --danger-dark: color-mix(in srgb, var(--secondary-red) 78%, var(--black));

  /* ========== WEATHER WIDGET COLORS ========== */
  --weather-light-blue: #c5ccd4;
  --weather-sky-blue: #9ca8b3;
  --weather-steel-blue: #71808d;
  --weather-dark-blue: #3b4652;
}


/* bundled: assets/css/base/_tokens/_spacing.css */
/* ==========================================================================
   TOKENS: SPACING
   Escala-base de spacing, paddings estruturais e aliases semânticos.

   Contract:
   - `--space-*` é a malha primária
   - `--spacing-*` existe como alias semântico para leitura de layout
   - viewport helpers daqui alimentam shells e modais em mobile
   ========================================================================== */

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */

  --border-spacing: 2rem;
  --border-spacing-mobile: 1rem;

  /* Semantic spacing aliases - Clean & Modern */
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-4);
  --spacing-md: var(--space-6);
  --spacing-lg: var(--space-8);
  --spacing-xl: var(--space-12);
  --spacing-2xl: var(--space-16);

  --container-padding: var(--space-8);
  --container-padding-mobile: var(--space-4);

  --gap-cards: var(--space-8);
  --gap-sections: var(--space-20);

  /* Viewport heights */
  --viewport-height-full: 100dvh;
  --viewport-height-full-fallback: 100vh;
  --viewport-height-90: 90dvh;
  --viewport-height-90-fallback: 90vh;
}


/* bundled: assets/css/base/_tokens/_typography.css */
/* ========================================
   TYPOGRAPHY TOKENS - LOQUEI DESIGN SYSTEM

   Fluid Typography usando clamp():
   clamp(min, preferred, max)
   - Escala automaticamente entre breakpoints
   - Sem necessidade de media queries
   ======================================== */



:root {
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-secondary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* ========== FONT SIZES (Fluid) ========== */
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: clamp(0.8125rem, 0.75rem + 0.15vw, 0.875rem);
  --font-size-base: clamp(0.9375rem, 0.875rem + 0.15vw, 1rem);
  --font-size-md: 0.9375rem;
  --font-size-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.7rem + 0.7vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 2rem + 1vw, 2.75rem);
  --font-size-5xl: clamp(2.75rem, 2.4rem + 1.5vw, 3.5rem);

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ========== LETTER SPACING (Modern Refinement) ========== */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-body: -0.011em;
  --letter-spacing-normal: 0;

  /* ========== SEMANTIC TYPOGRAPHY ========== */
  --font-title-primary: var(--font-weight-semibold) var(--font-size-3xl) / var(--line-height-tight) var(--font-family-primary);
  --font-title-secondary: var(--font-weight-semibold) var(--font-size-xl) / var(--line-height-tight) var(--font-family-primary);
  --font-title-tertiary: var(--font-weight-semibold) var(--font-size-lg) / var(--line-height-snug) var(--font-family-primary);

  --font-ui-primary: var(--font-weight-normal) var(--font-size-base) / var(--line-height-normal) var(--font-family-primary);
  --font-ui-secondary: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-normal) var(--font-family-primary);
  
  --font-label-md: var(--font-weight-medium) var(--font-size-sm) / var(--line-height-none) var(--font-family-primary);
}


/* bundled: assets/css/base/_tokens/_borders.css */
/**
 * BORDER TOKENS
 * Centralized border radius and width definitions
 *
 * Usage Guidelines:
 * - Use --border-radius-* for direct sizing
 * - Use semantic aliases (--radius-card, --radius-button) for components
 * - Gold Standard: --border-radius-lg (12px) for cards, modals, major UI
 */

:root {
  /* ========== BORDER RADIUS SCALE ========== */
  --border-radius-none: 0;
  --border-radius-xs: 0.25rem;    /* 4px - Subtle rounding */
  --border-radius-sm: 0.375rem;   /* 6px - Small elements */
  --border-radius-base: 0.5rem;   /* 8px - Base rounding */
  --border-radius-md: 0.625rem;   /* 10px - Buttons, inputs */
  --border-radius-lg: 0.75rem;    /* 12px - Gold Standard: Cards, modals */
  --border-radius-xl: 1rem;       /* 16px - Large containers */
  --border-radius-2xl: 1.5rem;    /* 24px - Hero sections */
  --border-radius-3xl: 2rem;      /* 32px - Extra large */
  --border-radius-full: 9999px;   /* Fully rounded (pills, avatars) */

  /* ========== BORDER WIDTH SCALE ========== */
  --border-width-0: 0;
  --border-width-1: 1px;          /* Standard borders */
  --border-width-2: 1.5px;        /* Emphasized borders */
  --border-width-4: 4px;          /* Heavy emphasis */

  /* ========== SEMANTIC ALIASES ========== */
  /* Use these for consistent component styling */
  --radius-card: var(--border-radius-lg);       /* Cards, containers */
  --radius-button: var(--border-radius-md);     /* Buttons */
  --radius-input: var(--border-radius-md);      /* Form inputs */
  --radius-modal: var(--border-radius-xl);      /* Modals, dialogs */
  --radius-badge: var(--border-radius-full);    /* Badges, pills */
  --radius-avatar: var(--border-radius-full);   /* Avatar images */
  --radius-toast: var(--border-radius-lg);      /* Notifications */
  --radius-dropdown: var(--border-radius-md);   /* Dropdowns, menus */

  /* ========== TRANSITION ALIASES ========== */
  /* Prefer semantic aliases above in new styles. */
  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);
}


/* bundled: assets/css/base/_tokens/_shadows.css */
/* ==========================================================================
   TOKENS: SHADOWS
   Escala de sombras para superfícies, glassmorphism e ênfases contextuais.

   Contract:
   - tokens claros e escuros compartilham os mesmos nomes públicos
   - variações cromáticas (`blue`, `green`, `red`) são utilitárias, não temáticas
   - alterações aqui repercutem em toda a linguagem de profundidade do produto
   ========================================================================== */

:root {
  --shadow-sm: 0 2px 4px rgba(var(--black-rgb), 0.05);
  --shadow-base: 0 4px 6px -1px rgba(var(--primary-blue-rgb), 0.05), 0 2px 4px -1px rgba(var(--black-rgb), 0.06);
  --shadow-md: 0 10px 15px -3px rgba(var(--primary-blue-rgb), 0.08), 0 4px 6px -2px rgba(var(--black-rgb), 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(var(--primary-blue-rgb), 0.1), 0 10px 10px -5px rgba(var(--black-rgb), 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(var(--primary-blue-rgb), 0.15);
  --shadow-2xl: 0 35px 60px -15px rgba(var(--primary-blue-rgb), 0.25);
  
  /* Glassmorphism Shadow */
  --shadow-glass: 0 8px 32px 0 rgba(var(--primary-blue-rgb), 0.15);
  --shadow-inner: inset 0 2px 4px 0 rgba(var(--black-rgb), 0.06);

  --shadow-blue: 0 4px 14px 0 rgba(43, 125, 233, 0.15);
  --shadow-blue-lg: 0 8px 25px rgba(43, 125, 233, 0.25);
  --shadow-blue-xl: 0 12px 35px rgba(43, 125, 233, 0.35);
  --shadow-primary: 0 4px 12px var(--primary-blue-overlay-lg);
  --shadow-red: 0 4px 14px 0 rgba(230, 62, 62, 0.15);
  --shadow-green: 0 4px 14px 0 rgba(44, 166, 100, 0.15);
  --shadow-gray-light: 0 4px 14px 0 rgba(116, 116, 116, 0.15);
  --shadow-subtle-gray: 0 4px 14px rgba(116, 116, 116, 0.08);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'],
body.dark-theme {
  --shadow-base: 0 8px 18px -10px rgba(0, 0, 0, 0.42), 0 2px 6px -2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 28px -14px rgba(0, 0, 0, 0.46), 0 6px 12px -4px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 22px 36px -18px rgba(0, 0, 0, 0.52), 0 10px 18px -8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 28px 48px -20px rgba(0, 0, 0, 0.58);
  --shadow-2xl: 0 36px 68px -24px rgba(0, 0, 0, 0.66);

  --shadow-glass: 0 12px 34px -18px rgba(0, 0, 0, 0.52);
  --shadow-primary: 0 8px 22px -14px rgba(var(--primary-blue-rgb), 0.22);
  --shadow-blue: 0 8px 20px -12px rgba(var(--primary-blue-rgb), 0.22);
  --shadow-blue-lg: 0 12px 28px -16px rgba(var(--primary-blue-rgb), 0.28);
  --shadow-blue-xl: 0 18px 36px -18px rgba(var(--primary-blue-rgb), 0.34);
  --shadow-modal: 0 24px 72px rgba(0, 0, 0, 0.48);
}


/* bundled: assets/css/base/_tokens/_animations.css */
/* ========================================
   ANIMATION & TRANSITION TOKENS

   Usage:
   - transition: var(--transition-base);        // Standard transition
   - transition: transform var(--tr-duration);  // Property-specific
   - transition: var(--transition-theme);       // Theme changes only
   ======================================== */

:root {
  /* Duration tokens */
  --tr-duration-fast: 150ms;
  --tr-duration-base: 250ms;
  --tr-duration-slow: 350ms;
  --tr-duration-slower: 500ms;

  /* Complete transitions (property + duration + easing) */
  --transition-fast: var(--tr-duration-fast) var(--ease-smooth);
  --transition-base: var(--tr-duration-base) var(--ease-smooth);
  --transition-slow: var(--tr-duration-slow) var(--ease-smooth);
  --transition-slower: var(--tr-duration-slower) var(--ease-smooth);
  --transition-normal: var(--transition-base);

  /* Theme-specific transition (colors only) - Optimized for smooth theme switching */
  --transition-theme: background-color var(--tr-duration-fast) var(--ease-smooth),
                      color var(--tr-duration-fast) var(--ease-smooth),
                      border-color var(--tr-duration-fast) var(--ease-smooth),
                      box-shadow var(--tr-duration-fast) var(--ease-smooth);

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;

  --animation-duration-fastest: 100ms;
  --animation-duration-fast: 150ms;
  --animation-duration-base: 200ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 400ms;
  --animation-duration-slower: 500ms;
  --animation-duration-slowest: 600ms;

  --animation-delay-sm: 50ms;
  --animation-delay-base: 100ms;
  --animation-delay-md: 150ms;
  --animation-delay-lg: 200ms;

  --animation-fade-in: fadeIn var(--animation-duration-normal) var(--ease-out);
  --animation-fade-out: fadeOut var(--animation-duration-normal) var(--ease-in);
  --animation-slide-up: slideUp var(--animation-duration-normal) var(--ease-out);
  --animation-slide-down: slideDown var(--animation-duration-normal) var(--ease-out);
  --animation-scale-in: scaleIn var(--animation-duration-fast) var(--ease-bounce);
  --animation-scale-out: scaleOut var(--animation-duration-fast) var(--ease-in);
  --animation-spin: spin 1s linear infinite;

  --tr: var(--transition-base);
  --transicao: var(--transition-base);
}


/* bundled: assets/css/base/_tokens/_breakpoints.css */


:root {


  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-sm-md: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;


  --breakpoint-xl-legacy: 1024px;


  --container-max-width-xs: 320px;
  --container-max-width-sm: 480px;
  --container-max-width-sm-md: 580px;
  --container-max-width-md: 768px;
  --container-max-width-lg: 1024px;
  --container-max-width-xl: 1240px;
  --container-max-width-2xl: 1400px;


  --container-max-width-xl-legacy: 1024px;



}


/* bundled: assets/css/base/_tokens/_components.css */


:root {


  --z-map: 1;
  --z-base: 10;
  --z-weather: 50;
  --z-floating: 100;
  --z-aura-btn: 150;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-panel: 1040;
  --z-popup: 1035;
  --z-modal-backdrop: 1050;
  --z-modal: 1060;
  --z-aura-chat: 1070;
  --z-popover: 1080;
  --z-index-dropdown: 1085;
  --z-iframe: 1090;
  --z-iframe-botao: 1095;
  --z-toast: 1100;
  --z-skip-link: 1200;
  --z-weather-popup: 120;


  --z-index-floating: var(--z-floating);
  --z-index-modal: var(--z-modal);
  --z-index-tooltip: var(--z-popover);
  --z-index-toast: var(--z-toast);

  --glass-shadow: var(--shadow-glass);
  --size-button: 44px;
  --size-input: 44px;
  --size-avatar: 48px;
  --sidebar-width: 320px;
  --navbar-height: 72px;
  --color-primary: var(--primary-blue);
  --color-secondary: var(--secondary-red);
  --font-family: var(--font-family-primary);



  --size-button-sm: 36px;
  --size-button-md: 44px;
  --size-button-lg: 52px;
  --size-button-xl: 60px;


  --button-padding-x-sm: 0.75rem;
  --button-padding-x-md: 1rem;
  --button-padding-x-lg: 1.5rem;
  --button-padding-x-xl: 2rem;

  --button-padding-y-sm: 0.375rem;
  --button-padding-y-md: 0.5rem;
  --button-padding-y-lg: 0.75rem;
  --button-padding-y-xl: 1rem;


  --button-padding-x: var(--button-padding-x-md);
  --button-padding-y: var(--button-padding-y-md);


  --input-height-sm: 36px;
  --input-height-md: 44px;
  --input-height-lg: 52px;
  --input-height-xl: 60px;
  --size-input-md: var(--input-height-md);

  --input-padding-x-sm: 0.75rem;
  --input-padding-x-md: 1rem;
  --input-padding-x-lg: 1.25rem;

  --input-padding-y-sm: 0.375rem;
  --input-padding-y-md: 0.5rem;
  --input-padding-y-lg: 0.75rem;


  --size-avatar-xs: 24px;
  --size-avatar-sm: 32px;
  --size-avatar-md: 48px;
  --size-avatar-lg: 64px;
  --size-avatar-xl: 96px;
  --size-avatar-2xl: 128px;



  --size-icon-xs: 0.75rem;
  --size-icon-sm: 0.875rem;
  --size-icon-md: 1rem;
  --size-icon-lg: 1.25rem;
  --size-icon-xl: 1.5rem;
  --size-icon-2xl: 2rem;



  --glass-light-bg: rgba(var(--white-rgb), 0.5);
  --glass-medium-bg: rgba(var(--white-rgb), 0.7);
  --glass-heavy-bg: rgba(var(--white-rgb), 0.9);
  --glass-bg-solid: rgba(var(--white-rgb), 0.94);
  --glass-intense-bg: rgba(var(--white-rgb), 0.82);
  --glass-light-border: 1px solid color-mix(in srgb, var(--white) 30%, var(--gray-300) 70%);


  --glass-dark-light-bg: rgba(28, 28, 30, 0.5);
  --glass-dark-medium-bg: rgba(28, 28, 30, 0.7);
  --glass-dark-heavy-bg: rgba(28, 28, 30, 0.9);


  --blur-none: blur(0);
  --blur-subtle: blur(1px);
  --blur-xs: blur(2px);
  --blur-sm: blur(4px);
  --blur-md: blur(6px);
  --blur-light: blur(8px);
  --blur-medium: blur(12px);
  --blur-heavy: blur(20px);
  --blur-intense: blur(30px);


  --glass-blur-light: blur(10px) saturate(150%);
  --glass-light-blur: blur(10px) saturate(150%);
  --glass-blur-card: blur(12px) saturate(180%);
  --glass-blur-medium: blur(15px) saturate(165%);
  --glass-blur-heavy: blur(20px) saturate(180%);


  --ui-glass-blur: var(--glass-blur-heavy);


  --card-padding-sm: var(--space-3);
  --card-padding-md: var(--space-4);
  --card-padding-lg: var(--space-6);
  --card-padding-xl: var(--space-8);

  --card-gap-sm: var(--space-2);
  --card-gap-md: var(--space-4);
  --card-gap-lg: var(--space-6);


  --property-image-height-sm: 160px;
  --property-image-height-md: 200px;
  --property-image-height-lg: 280px;
  --property-image-height-xl: 400px;


  --modal-width-sm: 400px;
  --modal-width-md: 600px;
  --modal-width-lg: 800px;
  --modal-width-xl: 1000px;
  --modal-width-full: 95vw;

  --overlay-opacity-light: 0.5;
  --overlay-opacity-medium: 0.7;
  --overlay-opacity-heavy: 0.85;


  --toast-width: 360px;
  --toast-padding: var(--space-4);
  --notification-height: 60px;


  --dropdown-min-width: 180px;
  --dropdown-max-height: 320px;
  --menu-item-height: 44px;


  --checkbox-size: 20px;
  --radio-size: 20px;
  --switch-width: 48px;
  --switch-height: 28px;
  --switch-thumb-size: 24px;


  --progress-height-sm: 4px;
  --progress-height-md: 8px;
  --progress-height-lg: 12px;

  --spinner-size-sm: 16px;
  --spinner-size-md: 24px;
  --spinner-size-lg: 40px;
  --spinner-size-xl: 60px;


  --badge-size-sm: 16px;
  --badge-size-md: 20px;
  --badge-size-lg: 24px;

  --chip-height: 32px;
  --chip-padding-x: var(--space-3);


  --skeleton-line-height: 12px;
  --skeleton-title-height: 20px;
  --skeleton-avatar-size: var(--size-avatar-md);
}


[data-theme='dark'],
body.dark-theme {

  --glass-light-bg: var(--glass-dark-light-bg);
  --glass-medium-bg: var(--glass-dark-medium-bg);
  --glass-heavy-bg: var(--glass-dark-heavy-bg);
  --glass-bg-solid: rgba(25, 31, 38, 0.94);
  --glass-intense-bg: rgba(31, 38, 46, 0.82);
  --glass-light-border: 1px solid color-mix(in srgb, var(--gray-300) 16%, transparent);


  --control-primary-bg: #48484a;
  --control-primary-border: #58585a;
  --control-primary-hover-bg: #5a5a5c;
  --control-secondary-border: #48484a;
  --control-secondary-hover-bg: #2c2c2e;
  --control-secondary-hover-border: #636366;
  --control-shadow: 0 2px 8px rgba(var(--black-rgb), 0.3);
  --control-shadow-hover: 0 4px 12px rgba(var(--black-rgb), 0.4);
}


/* bundled: assets/css/base/_tokens/_themes.css */
/* ==========================================================================
   TOKENS: THEMES
   Variáveis de tema claro/escuro, preferências de sistema e contrast modes.

   Contract:
   - `data-theme` é a fonte de verdade explícita
   - `body.light-theme` e `body.dark-theme` permanecem como aliases de transicao
   - prefers-color-scheme e prefers-reduced-motion só ajustam fallback/global
   ========================================================================== */

[data-theme='light'],
body.light-theme {
  --bg-body-primary: var(--gray-50);
  --bg-body-secondary: var(--white);
  --bg-primary: var(--white);
  --bg-card-primary: var(--white);
  --bg-card-secondary: var(--gray-100);
  --bg-accent: var(--gray-200);
  --bg-overlay: rgba(15, 23, 32, 0.56);

  --text-main: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-soft: var(--gray-500);
  --text-primary-dark: var(--text-main);
  --text-secondary-dark: var(--text-secondary);
  --text-tertiary-dark: var(--text-tertiary);

  --border-color: var(--gray-200);
  --border-light: rgba(0, 0, 0, 0.05);
  --border-primary: var(--border-color);
  --border-medium: color-mix(in srgb, var(--gray-900) 16%, transparent);
  --border-primary-dark: var(--gray-300);

  /* ========== GLASSMORPHISM SEMÂNTICO ========== */
  --glass-bg: rgba(var(--white-rgb), 0.72);
  --glass-bg-hover: rgba(var(--white-rgb), 0.85);
  --glass-border: 1px solid rgba(var(--white-rgb), 0.4);
  --glass-border-subtle: 1px solid rgba(var(--black-rgb), 0.05);
  --glass-blur: blur(20px) saturate(180%);
  
  --glass-surface: rgba(var(--white-rgb), 0.4);
  --glass-header: rgba(var(--primary-blue-rgb), 0.88);
  --glass-bg-light: rgba(var(--white-rgb), 0.56);
  --glass-bg-medium: rgba(var(--white-rgb), 0.72);
  --glass-bg-heavy: rgba(var(--white-rgb), 0.9);
  --glass-border-strong: 1px solid color-mix(in srgb, var(--white) 36%, var(--gray-300) 64%);
  --light-bg-accent: color-mix(in srgb, var(--primary-blue-overlay-sm) 70%, var(--bg-card-secondary));
  --light-bg-secondary: var(--bg-card-secondary);
  --light-border: color-mix(in srgb, var(--gray-900) 10%, transparent);
  --light-text-primary: var(--text-main);
  --light-text-secondary: var(--text-secondary);

  --bg-card-primary-dark: var(--bg-card-primary);
  --bg-hover-dark: var(--bg-card-secondary);

  --success-bg: #dff4e8;
  --success-text: #19573a;
  --success-border: #b7dec8;
  --warning-bg: #fff1d6;
  --warning-text: #7c5905;
  --warning-border: #f0d8a2;
  --error-bg: #fce3e6;
  --error-text: #7a202a;
  --error-border: #f4c4cb;
  --info-bg: #e8edf2;
  --info-text: #31404b;
  --info-border: #c8d1da;
}

[data-theme='dark'],
body.dark-theme {
  --bg-body-primary: #0a0a0a;
  --bg-body-secondary: #121212;
  --bg-primary: #121212;
  --bg-card-primary: #1c1c1e;
  --bg-card-secondary: #2c2c2e;
  --bg-accent: #3a3a3c;
  --bg-overlay: rgba(0, 0, 0, 0.74);

  --text-main: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #8e8e93;
  --text-soft: #8e8e93;
  --text-primary-dark: var(--text-main);
  --text-secondary-dark: var(--text-secondary);
  --text-tertiary-dark: var(--text-tertiary);

  --border-color: #38383a;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-primary: rgba(255, 255, 255, 0.12);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-primary-dark: rgba(255, 255, 255, 0.18);

  /* ========== ACCENT — DESATURATED MINERAL (DARK) ========== */
  --primary-blue: #6e7681;
  --primary-blue-hover: #848c96;
  --primary-blue-dark: #545b63;
  --primary-blue-light: rgba(110, 118, 129, 0.14);
  --primary-blue-overlay-xxs: rgba(110, 118, 129, 0.04);
  --primary-blue-overlay-xs: rgba(110, 118, 129, 0.06);
  --primary-blue-overlay-08: rgba(110, 118, 129, 0.08);
  --primary-blue-overlay-sm: rgba(110, 118, 129, 0.12);
  --primary-blue-overlay-12: rgba(110, 118, 129, 0.14);
  --primary-blue-overlay-base: rgba(110, 118, 129, 0.18);
  --primary-blue-overlay-md: rgba(110, 118, 129, 0.22);
  --primary-blue-overlay-lg: rgba(110, 118, 129, 0.30);
  --primary-blue-overlay-25: rgba(110, 118, 129, 0.28);
  --primary-blue-overlay-xl: rgba(110, 118, 129, 0.38);
  --primary-blue-overlay-50: rgba(110, 118, 129, 0.52);
  --primary-blue-rgb: 110, 118, 129;

  /* ========== GLASSMORPHISM SEMÂNTICO (DARK) ========== */
  --glass-bg: rgba(28, 28, 30, 0.78);
  --glass-bg-hover: rgba(44, 44, 46, 0.88);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.04);
  --glass-blur: blur(20px) saturate(150%);

  --glass-surface: rgba(255, 255, 255, 0.05);
  --glass-header: rgba(44, 44, 46, 0.82);
  --glass-bg-light: rgba(28, 28, 30, 0.56);
  --glass-bg-medium: rgba(28, 28, 30, 0.72);
  --glass-bg-heavy: rgba(12, 12, 12, 0.9);
  --glass-border-strong: 1px solid rgba(255, 255, 255, 0.12);
  --dark-bg-accent: color-mix(in srgb, var(--primary-blue-overlay-base) 72%, var(--bg-card-secondary));
  --dark-bg-secondary: var(--bg-card-secondary);

  --bg-card-primary-dark: var(--bg-card-primary);
  --bg-hover-dark: var(--bg-card-secondary);

  --success-bg: rgba(44, 166, 100, 0.15);
  --success-text: #86efac;
  --success-border: rgba(44, 166, 100, 0.25);
  --warning-bg: rgba(245, 158, 11, 0.15);
  --warning-text: #fcd34d;
  --warning-border: rgba(245, 158, 11, 0.25);
  --error-bg: rgba(230, 62, 62, 0.15);
  --error-text: #fca5a5;
  --error-border: rgba(230, 62, 62, 0.25);
  --info-bg: rgba(110, 118, 129, 0.12);
  --info-text: #e5e5e5;
  --info-border: rgba(110, 118, 129, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-body-primary: #0a0a0a;
    --bg-body-secondary: #121212;
    --bg-primary: #121212;
    --bg-card-primary: #1c1c1e;
    --bg-card-secondary: #2c2c2e;
    --bg-secondary: #2c2c2e;
    --bg-overlay: rgba(0, 0, 0, 0.74);
    --text-main: #f5f5f7;
    --text-secondary: #98989d;
    --text-muted: #6e6e73;
    --text-tertiary: #8e8e93;
    --border-color: #38383a;
    --primary-blue: #6e7681;
    --primary-blue-hover: #848c96;
    --primary-blue-dark: #545b63;
    --primary-blue-light: rgba(110, 118, 129, 0.14);
    --primary-blue-rgb: 110, 118, 129;
    --glass-bg-light: rgba(28, 28, 30, 0.56);
    --glass-bg-medium: rgba(28, 28, 30, 0.72);
    --bg-card-primary-dark: #1c1c1e;
    --bg-hover-dark: #2c2c2e;
    --text-primary-dark: #f5f5f7;
    --text-secondary-dark: #98989d;
    --text-tertiary-dark: #8e8e93;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: more) {
  :root {
    --text-main: #000000;
    --text-secondary: #1d1d1f;
    --border-color: #1d1d1f;
    --card-border: #1d1d1f;
    --input-border: #1d1d1f;
  }

  [data-theme='dark'] {
    --text-main: #ffffff;
    --text-secondary: #f5f5f7;
    --border-color: #ffffff;
    --card-border: #ffffff;
    --input-border: #ffffff;
  }
}

/* ========== THEME TRANSITION STATE ========== */
/* Prevents FOUC (Flash of Unstyled Content) during theme switching */
body.theme-transitioning {
  /* Smooth transition for all theme-related properties */
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Prevent layout shifts during transition */
  overflow-anchor: none;
}

/* Apply theme transition to all elements during theme switch */
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  body.theme-transitioning,
  body.theme-transitioning *,
  body.theme-transitioning *::before,
  body.theme-transitioning *::after {
    transition-duration: 0.01ms !important;
  }
}


/* bundled: assets/css/base/_tokens/_dark-tokens.css */
/* ==========================================================================
   DARK MODE TOKENS - Supplementary overrides
   Complements _themes.css with additional semantic tokens for dark mode.
   Uses `html.dark` selector as requested + data-theme for consistency.
   
   Contrast: All text/background pairs meet WCAG AA (4.5:1 minimum).
   ========================================================================== */

html.dark,
html[data-theme='dark'] {
  /* Surface tokens */
  --color-surface-primary: #0a0a0a;
  --color-surface-secondary: #1c1c1e;
  --color-surface-tertiary: #2c2c2e;
  --color-surface-elevated: #3a3a3c;
  --color-surface-overlay: rgba(0, 0, 0, 0.78);

  /* Text tokens - AA compliant on dark surfaces */
  --color-text-primary: #f5f5f7;       /* 15.3:1 on #1c1c1e */
  --color-text-secondary: #98989d;     /* 6.1:1 on #1c1c1e */
  --color-text-tertiary: #8e8e93;      /* 5.2:1 on #1c1c1e — WCAG AA */
  --color-text-inverse: #1d1d1f;

  /* Border tokens */
  --color-border-primary: rgba(255, 255, 255, 0.12);
  --color-border-secondary: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* Interactive tokens */
  --color-interactive-primary: #98989d;
  --color-interactive-hover: #b0b0b5;
  --color-interactive-active: #c8c8cc;
  --color-interactive-disabled: #48484a;

  /* Focus ring */
  --color-focus-ring: rgba(110, 118, 129, 0.5);

  /* Scrollbar */
  --color-scrollbar-track: #2c2c2e;
  --color-scrollbar-thumb: #48484a;
  --color-scrollbar-thumb-hover: #636366;

  /* Skeleton loader override */
  --skeleton-base: #3a3a3c;
  --skeleton-shimmer: rgba(255, 255, 255, 0.06);

  /* Input fields */
  --input-bg: #2c2c2e;
  --input-border: rgba(255, 255, 255, 0.12);
  --input-text: #f5f5f7;
  --input-placeholder: #8e8e93;

  /* Shadows - subtle in dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
}

/* System preference fallback (when no explicit theme is set) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']):not(.light) {
    --color-surface-primary: #0a0a0a;
    --color-surface-secondary: #1c1c1e;
    --color-surface-tertiary: #2c2c2e;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #98989d;
    --color-text-tertiary: #8e8e93;
    --color-border-primary: rgba(255, 255, 255, 0.12);
  }
}



/* Small helper kept global for browsers that do not expose :focus-visible consistently. */
body.using-keyboard .focus-visible,
body.using-keyboard :focus-visible.focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}


/* bundled: assets/css/base/reset.css */
/* =============================
   🔄 LOQUEI - RESET & BASE
   ============================= */

/* NOTA: tokens.css é importado no style.css principal */

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

/* ========== ELEMENTOS BASE ========== */
html {
  font: var(--font-ui-primary);
  background-color: var(--bg-body-primary);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

body {
  min-height: 100vh;
  font: var(--font-ui-primary);
  color: var(--text-main);
  background-color: var(--bg-body-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: var(--letter-spacing-body);
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}

/* ========== TIPOGRAFIA ========== */
h1, h2, h3, h4, .heading {
  font-family: var(--font-family-primary);
  color: var(--text-main);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
}

h1 { font: var(--font-title-primary); }
h2 { font: var(--font-title-secondary); }
h3 { font: var(--font-title-tertiary); }

p {
  margin-bottom: var(--space-6);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ========== LINKS ========== */
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-blue-hover);
  text-decoration: underline;
}

body.using-keyboard a:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* ========== BOTÕES ========== */
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--transition-fast);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

body.using-keyboard button:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* ========== FORMULÁRIOS ========== */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: var(--border-width-1) solid var(--input-border);
  border-radius: var(--border-radius-md);
  background-color: var(--input-bg);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--primary-blue-light);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--input-bg-disabled);
  cursor: not-allowed;
}

/* Remove spinners dos inputs number */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

/* ========== LISTAS ========== */
ul,
ol {
  list-style: none;
}

/* ========== IMAGENS ========== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========== TABELAS ========== */
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: var(--border-width-1) solid var(--gray-200);
}

th {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

/* ========== ELEMENTOS SEMÂNTICOS ========== */
main {
  display: block;
}

section {
  display: block;
}

article {
  display: block;
}

aside {
  display: block;
}

nav {
  display: block;
}

header {
  display: block;
}

footer {
  display: block;
}

/* ========== ELEMENTOS DE CÓDIGO ========== */
code,
pre,
kbd,
samp {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
}

code {
  padding: var(--space-1) var(--space-2);
  background-color: var(--gray-100);
  border-radius: var(--border-radius-sm);
  color: var(--gray-800);
}

pre {
  padding: var(--space-4);
  background-color: var(--gray-100);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  line-height: var(--line-height-relaxed);
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ========== ELEMENTOS DE CITAÇÃO ========== */
blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: var(--border-width-4) solid var(--primary-blue);
  background-color: var(--gray-50);
  font-style: italic;
  color: var(--gray-700);
}

/* ========== ELEMENTOS DE SEPARAÇÃO ========== */
hr {
  border: none;
  height: var(--border-width-1);
  background-color: var(--gray-200);
  margin: var(--space-8) 0;
}

/* ========== ELEMENTOS DE DETALHES ========== */
details {
  margin-bottom: var(--space-4);
}

summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width-1) solid var(--gray-200);
}

summary:hover {
  color: var(--primary-blue);
}

/* ========== ELEMENTOS DE PROGRESSO ========== */
progress {
  width: 100%;
  height: var(--space-2);
  border: none;
  border-radius: var(--border-radius-full);
  background-color: var(--gray-200);
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background-color: var(--gray-200);
  border-radius: var(--border-radius-full);
}

progress::-webkit-progress-value {
  background-color: var(--primary-blue);
  border-radius: var(--border-radius-full);
}

progress::-moz-progress-bar {
  background-color: var(--primary-blue);
  border-radius: var(--border-radius-full);
}

/* ========== SELEÇÃO DE TEXTO ========== */
::selection {
  background-color: var(--primary-blue-light);
  color: var(--primary-blue-dark);
}

::-moz-selection {
  background-color: var(--primary-blue-light);
  color: var(--primary-blue-dark);
}

/* ========== SCROLLBARS ========== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ========== PLACEHOLDER ========== */
::placeholder {
  color: var(--gray-400);
  opacity: 1;
}

::-moz-placeholder {
  color: var(--gray-400);
  opacity: 1;
}

::-webkit-input-placeholder {
  color: var(--gray-400);
  opacity: 1;
}

.container {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ========== DARK MODE OVERRIDES ========== */
[data-theme='dark'] code {
  background-color: var(--bg-card-secondary);
  color: var(--text-main);
}

[data-theme='dark'] pre {
  background-color: var(--bg-card-secondary);
  color: var(--text-main);
}

[data-theme='dark'] blockquote {
  background-color: var(--bg-card-secondary);
  color: var(--text-secondary);
  border-left-color: var(--border-color);
}

[data-theme='dark'] th {
  color: var(--text-main);
}

[data-theme='dark'] td {
  border-bottom-color: var(--border-color);
}

[data-theme='dark'] hr {
  background-color: var(--border-color);
}

[data-theme='dark'] summary {
  border-bottom-color: var(--border-color);
}

[data-theme='dark'] progress {
  background-color: var(--bg-card-secondary);
}

[data-theme='dark'] progress::-webkit-progress-bar {
  background-color: var(--bg-card-secondary);
}

[data-theme='dark'] ::-webkit-scrollbar-track {
  background: var(--bg-card-secondary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--bg-accent);
}

[data-theme='dark'] ::placeholder {
  color: var(--text-tertiary);
}

[data-theme='dark'] ::-moz-placeholder {
  color: var(--text-tertiary);
}

[data-theme='dark'] ::-webkit-input-placeholder {
  color: var(--text-tertiary);
}


/* bundled: assets/css/base/_utilities.css */
/* ==========================================================================
   UTILITIES
   Camada utilitária de baixo nível.

   Regras de uso:
   - utilitários devem ser previsíveis, pequenos e agnósticos de domínio
   - preferir prefixo explícito em código novo (`u-`, `is-`, `has-`)
   - manter aliases de transicao enquanto HTML/JS ainda depender deles
   ========================================================================== */

/* ========== FLEXBOX UTILITIES ========== */

/* Layout básico */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

/* Alinhamento horizontal (justify-content) */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

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

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* Alinhamento vertical (align-items) */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

/* Combinações comuns */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flex-col-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Wrap */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Gap utilities */
.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

/* Flex grow/shrink */
.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

/* ========== DISPLAY UTILITIES ========== */

/* ========== VISIBILITY ========== */
/*
 * Fonte de verdade para ocultação utilitária.
 * `.hidden` é mantida como alias de transicao para markup ja existente.
 * Código novo deve preferir `.u-hidden` para deixar a intenção explícita.
 */
.hidden,
.u-hidden,
.is-hidden {
  display: none !important;
  visibility: hidden;
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-index-toast, 1200);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md);
  background: var(--bg-card-primary);
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform var(--transition-fast);
}

body.using-keyboard .skip-link:focus-visible,
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.grid {
  display: grid;
}

/* ========== POSITION UTILITIES ========== */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* ========== SPACING UTILITIES ========== */

/* Margin */
.m-0 { margin: 0; }
.m-auto { margin: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Padding */
.p-0 { padding: 0; }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* ========== TEXT UTILITIES ========== */

.text-center {
  text-align: center;
}

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

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: 600;
}

.text-normal {
  font-weight: 400;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== ICON SIZE UTILITIES ========== */
/* Classes para dimensionamento de ícones usando tokens do design system */

.icon-xs {
  width: var(--space-4);
  height: var(--space-4);
}

.icon-sm {
  width: var(--space-5);
  height: var(--space-5);
}

.icon-md {
  width: var(--space-6);
  height: var(--space-6);
}

.icon-lg {
  width: var(--space-10);
  height: var(--space-10);
}

.icon-xl {
  width: var(--space-12);
  height: var(--space-12);
}

/* ========== WIDTH/HEIGHT UTILITIES ========== */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

/* ========== OVERFLOW UTILITIES ========== */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

/* ========== Z-INDEX UTILITIES ========== */

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* ========== POINTER EVENTS ========== */

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ========== BORDER RADIUS ========== */

.rounded-sm {
  border-radius: var(--border-radius-xs);
}

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

.rounded-lg {
  border-radius: var(--border-radius-md);
}

.rounded-xl {
  border-radius: var(--radius-card); /* 12px Gold Standard */
}

.rounded-2xl {
  border-radius: var(--border-radius-xl);
}

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

.shadow-glass {
  box-shadow: var(--shadow-glass);
}

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

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-none {
  box-shadow: none;
}

/* ========== TYPOGRAPHY UTILITIES ========== */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }

/* ========== COLOR UTILITIES ========== */

.text-primary { color: var(--text-main); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-blue { color: var(--primary-blue); }
.text-red { color: var(--secondary-red); }
.text-green { color: var(--accent-green); }
.text-white { color: var(--white); }

.bg-white { background-color: var(--white); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-primary { background-color: var(--primary-blue); }
.bg-transparent { background-color: transparent; }

/* ========== BORDER UTILITIES ========== */

.border { border: 1px solid var(--border-color); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }

/* ========== OPACITY UTILITIES ========== */

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ========== TRANSITION UTILITIES ========== */

.transition { transition: var(--transition-base); }
.transition-fast { transition: var(--transition-fast); }
.transition-slow { transition: var(--transition-slow); }
.transition-none { transition: none; }

/* ========== RESPONSIVE UTILITIES ========== */

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:flex-col { flex-direction: column; }
  .md\:text-center { text-align: center; }
  .md\:w-full { width: 100%; }
}

@media (max-width: 480px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:text-sm { font-size: var(--font-size-sm); }
  .sm\:p-2 { padding: var(--space-2); }
  .sm\:p-3 { padding: var(--space-3); }
}


/* bundled: assets/css/vendor/icon-fallback.css */
/* Camada local de icones SVG para tokens canonicos sem CDN */

i.fas,
i.far,
i.fa-solid,
i.fa-regular,
i.fab,
.loquei-icon {
  --loquei-icon-size: var(--size-icon-md, 1rem);
  --loquei-icon-url: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--loquei-icon-size);
  min-width: var(--loquei-icon-size);
  height: var(--loquei-icon-size);
  line-height: 1;
  font-style: normal;
  font-family: inherit;
  font-weight: inherit;
  vertical-align: middle;
  color: currentColor;
}

i.fas::before,
i.far::before,
i.fa-solid::before,
i.fa-regular::before,
i.fab::before,
.loquei-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--loquei-icon-url);
  mask-image: var(--loquei-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

i.fa-spin::before,
i.fa-spin.loquei-icon::before,
i.fa-spinner::before {
  animation: loquei-icon-spin 1s linear infinite;
}

.loquei-icon--xs { --loquei-icon-size: var(--size-icon-xs); }
.loquei-icon--sm { --loquei-icon-size: var(--size-icon-sm); }
.loquei-icon--lg { --loquei-icon-size: var(--size-icon-lg); }
.loquei-icon--xl { --loquei-icon-size: var(--size-icon-xl); }

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

i.fa-times,
i.fa-xmark { --loquei-icon-url: url('/assets/icons/shell/times.svg'); }
i.fa-home { --loquei-icon-url: url('/assets/icons/shell/home.svg'); }
i.fa-search { --loquei-icon-url: url('/assets/icons/shell/search.svg'); }
i.fa-chevron-down { --loquei-icon-url: url('/assets/icons/shell/chevron-down.svg'); }
i.fa-chevron-left { --loquei-icon-url: url('/assets/icons/shell/chevron-left.svg'); }
i.fa-chevron-right { --loquei-icon-url: url('/assets/icons/shell/chevron-right.svg'); }
i.fa-chevron-up { --loquei-icon-url: url('/assets/icons/shell/chevron-up.svg'); }
i.fa-bars { --loquei-icon-url: url('/assets/icons/shell/bars.svg'); }
i.fa-user { --loquei-icon-url: url('/assets/icons/shell/user.svg'); }
i.fa-plus { --loquei-icon-url: url('/assets/icons/shell/plus.svg'); }
i.fa-minus { --loquei-icon-url: url('/assets/icons/shell/minus.svg'); }
i.fa-edit { --loquei-icon-url: url('/assets/icons/shell/edit.svg'); }
i.fa-save { --loquei-icon-url: url('/assets/icons/shell/save.svg'); }
i.fa-eye { --loquei-icon-url: url('/assets/icons/shell/eye.svg'); }
i.fa-eye-slash { --loquei-icon-url: url('/assets/icons/shell/eye-slash.svg'); }
i.fa-filter { --loquei-icon-url: url('/assets/icons/shell/filter.svg'); }
i.fa-info-circle { --loquei-icon-url: url('/assets/icons/shell/info-circle.svg'); }
i.fa-copy { --loquei-icon-url: url('/assets/icons/shell/copy.svg'); }
i.fa-download { --loquei-icon-url: url('/assets/icons/shell/download.svg'); }
i.fa-refresh { --loquei-icon-url: url('/assets/icons/shell/refresh.svg'); }
i.fa-sync-alt { --loquei-icon-url: url('/assets/icons/shell/sync-alt.svg'); }
i.fa-sliders-h { --loquei-icon-url: url('/assets/icons/shell/sliders-h.svg'); }
i.fa-crosshairs { --loquei-icon-url: url('/assets/icons/shell/crosshairs.svg'); }
i.fa-check { --loquei-icon-url: url('/assets/icons/shell/check.svg'); }
i.fa-check-circle { --loquei-icon-url: url('/assets/icons/shell/check-circle.svg'); }
i.fa-spinner { --loquei-icon-url: url('/assets/icons/shell/spinner.svg'); }
i.fa-arrow-left { --loquei-icon-url: url('/assets/icons/shell/arrow-left.svg'); }
i.fa-arrow-right { --loquei-icon-url: url('/assets/icons/shell/arrow-right.svg'); }
i.fa-angle-left { --loquei-icon-url: url('/assets/icons/shell/angle-left.svg'); }
i.fa-angle-right { --loquei-icon-url: url('/assets/icons/shell/angle-right.svg'); }
i.fa-angle-double-left { --loquei-icon-url: url('/assets/icons/shell/angle-double-left.svg'); }
i.fa-angle-double-right { --loquei-icon-url: url('/assets/icons/shell/angle-double-right.svg'); }
i.fa-code { --loquei-icon-url: url('/assets/icons/shell/code.svg'); }
i.fa-cog { --loquei-icon-url: url('/assets/icons/shell/cog.svg'); }
i.fa-crop { --loquei-icon-url: url('/assets/icons/shell/crop.svg'); }
i.fa-eraser { --loquei-icon-url: url('/assets/icons/shell/eraser.svg'); }
i.fa-exclamation-triangle { --loquei-icon-url: url('/assets/icons/shell/exclamation-triangle.svg'); }
i.fa-expand { --loquei-icon-url: url('/assets/icons/shell/expand.svg'); }
i.fa-history { --loquei-icon-url: url('/assets/icons/shell/history.svg'); }
i.fa-play { --loquei-icon-url: url('/assets/icons/shell/play.svg'); }
i.fa-plus-circle { --loquei-icon-url: url('/assets/icons/shell/plus-circle.svg'); }
i.fa-share-alt { --loquei-icon-url: url('/assets/icons/shell/share-alt.svg'); }
i.fa-toggle-on { --loquei-icon-url: url('/assets/icons/shell/toggle-on.svg'); }
i.fa-trash { --loquei-icon-url: url('/assets/icons/shell/trash.svg'); }
i.fa-trash-alt { --loquei-icon-url: url('/assets/icons/shell/trash-alt.svg'); }
i.fa-undo { --loquei-icon-url: url('/assets/icons/shell/undo.svg'); }
i.fa-upload { --loquei-icon-url: url('/assets/icons/shell/upload.svg'); }
i.fa-sparkles { --loquei-icon-url: url('/assets/icons/shell/sparkles.svg'); }

i.fa-balance-scale { --loquei-icon-url: url('/assets/icons/property/balance-scale.svg'); }
i.fa-basketball-ball { --loquei-icon-url: url('/assets/icons/property/basketball-ball.svg'); }
i.fa-bath { --loquei-icon-url: url('/assets/icons/property/bath.svg'); }
i.fa-bed { --loquei-icon-url: url('/assets/icons/property/bed.svg'); }
i.fa-bookmark { --loquei-icon-url: url('/assets/icons/property/bookmark.svg'); }
i.fa-briefcase { --loquei-icon-url: url('/assets/icons/property/briefcase.svg'); }
i.fa-building { --loquei-icon-url: url('/assets/icons/property/building.svg'); }
i.fa-camera { --loquei-icon-url: url('/assets/icons/property/camera.svg'); }
i.fa-car { --loquei-icon-url: url('/assets/icons/property/car.svg'); }
i.fa-chart-bar { --loquei-icon-url: url('/assets/icons/property/chart-bar.svg'); }
i.fa-chart-line { --loquei-icon-url: url('/assets/icons/property/chart-line.svg'); }
i.fa-child { --loquei-icon-url: url('/assets/icons/property/child.svg'); }
i.fa-circle { --loquei-icon-url: url('/assets/icons/property/circle.svg'); }
i.fa-couch { --loquei-icon-url: url('/assets/icons/property/couch.svg'); }
i.fa-crown { --loquei-icon-url: url('/assets/icons/property/crown.svg'); }
i.fa-dollar-sign { --loquei-icon-url: url('/assets/icons/property/dollar-sign.svg'); }
i.fa-door-open { --loquei-icon-url: url('/assets/icons/property/door-open.svg'); }
i.fa-dumbbell { --loquei-icon-url: url('/assets/icons/property/dumbbell.svg'); }
i.fa-elevator { --loquei-icon-url: url('/assets/icons/property/elevator.svg'); }
i.fa-expand-arrows-alt { --loquei-icon-url: url('/assets/icons/property/expand-arrows-alt.svg'); }
i.fa-faucet { --loquei-icon-url: url('/assets/icons/property/faucet.svg'); }
i.fa-fire { --loquei-icon-url: url('/assets/icons/property/fire.svg'); }
i.fa-fire-flame-curved { --loquei-icon-url: url('/assets/icons/property/fire-flame-curved.svg'); }
i.fa-glass-cheers { --loquei-icon-url: url('/assets/icons/property/glass-cheers.svg'); }
i.fa-graduation-cap { --loquei-icon-url: url('/assets/icons/property/graduation-cap.svg'); }
i.fa-heart { --loquei-icon-url: url('/assets/icons/property/heart.svg'); }
i.fa-heart-broken { --loquei-icon-url: url('/assets/icons/property/heart-broken.svg'); }
i.fa-hot-tub { --loquei-icon-url: url('/assets/icons/property/hot-tub.svg'); }
i.fa-image { --loquei-icon-url: url('/assets/icons/property/image.svg'); }
i.fa-images { --loquei-icon-url: url('/assets/icons/property/images.svg'); }
i.fa-leaf { --loquei-icon-url: url('/assets/icons/property/leaf.svg'); }
i.fa-lightbulb { --loquei-icon-url: url('/assets/icons/property/lightbulb.svg'); }
i.fa-list-alt { --loquei-icon-url: url('/assets/icons/property/list-alt.svg'); }
i.fa-magic { --loquei-icon-url: url('/assets/icons/property/magic.svg'); }
i.fa-map-marker-alt { --loquei-icon-url: url('/assets/icons/property/map-marker-alt.svg'); }
i.fa-pause-circle { --loquei-icon-url: url('/assets/icons/property/pause-circle.svg'); }
i.fa-paw { --loquei-icon-url: url('/assets/icons/property/paw.svg'); }
i.fa-ruler-combined { --loquei-icon-url: url('/assets/icons/property/ruler-combined.svg'); }
i.fa-star { --loquei-icon-url: url('/assets/icons/property/star.svg'); }
i.fa-star-half-alt { --loquei-icon-url: url('/assets/icons/property/star-half-alt.svg'); }
i.fa-swimming-pool { --loquei-icon-url: url('/assets/icons/property/swimming-pool.svg'); }
i.fa-table { --loquei-icon-url: url('/assets/icons/property/table.svg'); }
i.fa-tag { --loquei-icon-url: url('/assets/icons/property/tag.svg'); }
i.fa-th { --loquei-icon-url: url('/assets/icons/property/th.svg'); }
i.fa-tree { --loquei-icon-url: url('/assets/icons/property/tree.svg'); }
i.fa-tshirt { --loquei-icon-url: url('/assets/icons/property/tshirt.svg'); }
i.fa-warehouse { --loquei-icon-url: url('/assets/icons/property/warehouse.svg'); }
i.fa-wifi { --loquei-icon-url: url('/assets/icons/property/wifi.svg'); }

i.fa-comment { --loquei-icon-url: url('/assets/icons/chat/comment.svg'); }
i.fa-comments { --loquei-icon-url: url('/assets/icons/chat/comments.svg'); }
i.fa-paper-plane { --loquei-icon-url: url('/assets/icons/chat/paper-plane.svg'); }
i.fa-paperclip { --loquei-icon-url: url('/assets/icons/chat/paperclip.svg'); }
i.fa-smile { --loquei-icon-url: url('/assets/icons/chat/smile.svg'); }
i.fa-phone { --loquei-icon-url: url('/assets/icons/chat/phone.svg'); }
i.fa-envelope { --loquei-icon-url: url('/assets/icons/chat/envelope.svg'); }
i.fa-whatsapp { --loquei-icon-url: url('/assets/icons/chat/whatsapp.svg'); }
i.fa-microphone { --loquei-icon-url: url('/assets/icons/chat/microphone.svg'); }
i.fa-file { --loquei-icon-url: url('/assets/icons/chat/file.svg'); }
i.fa-file-alt { --loquei-icon-url: url('/assets/icons/chat/file-alt.svg'); }
i.fa-file-pdf { --loquei-icon-url: url('/assets/icons/chat/file-pdf.svg'); }
i.fa-file-word { --loquei-icon-url: url('/assets/icons/chat/file-word.svg'); }
i.fa-file-excel { --loquei-icon-url: url('/assets/icons/chat/file-excel.svg'); }
i.fa-file-signature { --loquei-icon-url: url('/assets/icons/chat/file-signature.svg'); }
i.fa-link { --loquei-icon-url: url('/assets/icons/chat/link.svg'); }
i.fa-ellipsis-v { --loquei-icon-url: url('/assets/icons/chat/ellipsis-v.svg'); }
i.fa-hand-wave { --loquei-icon-url: url('/assets/icons/chat/hand-wave.svg'); }

i.fa-calendar { --loquei-icon-url: url('/assets/icons/scheduling/calendar.svg'); }
i.fa-calendar-alt { --loquei-icon-url: url('/assets/icons/scheduling/calendar-alt.svg'); }
i.fa-calendar-check { --loquei-icon-url: url('/assets/icons/scheduling/calendar-check.svg'); }
i.fa-calendar-plus { --loquei-icon-url: url('/assets/icons/scheduling/calendar-plus.svg'); }
i.fa-calendar-times { --loquei-icon-url: url('/assets/icons/scheduling/calendar-times.svg'); }
i.fa-clock { --loquei-icon-url: url('/assets/icons/scheduling/clock.svg'); }
i.fa-user-check { --loquei-icon-url: url('/assets/icons/scheduling/user-check.svg'); }

i.fa-lock { --loquei-icon-url: url('/assets/icons/auth/lock.svg'); }
i.fa-key { --loquei-icon-url: url('/assets/icons/auth/key.svg'); }
i.fa-id-card { --loquei-icon-url: url('/assets/icons/auth/id-card.svg'); }
i.fa-user-plus { --loquei-icon-url: url('/assets/icons/auth/user-plus.svg'); }
i.fa-user-edit { --loquei-icon-url: url('/assets/icons/auth/user-edit.svg'); }
i.fa-user-secret { --loquei-icon-url: url('/assets/icons/auth/user-secret.svg'); }
i.fa-shield-alt { --loquei-icon-url: url('/assets/icons/auth/shield-alt.svg'); }
i.fa-sign-in-alt { --loquei-icon-url: url('/assets/icons/auth/sign-in-alt.svg'); }
i.fa-sign-out-alt { --loquei-icon-url: url('/assets/icons/auth/sign-out-alt.svg'); }
i.fa-check-double { --loquei-icon-url: url('/assets/icons/auth/check-double.svg'); }
i.fa-ban { --loquei-icon-url: url('/assets/icons/auth/ban.svg'); }

i.fa-bell { --loquei-icon-url: url('/assets/icons/notifications/bell.svg'); }
i.fa-bolt { --loquei-icon-url: url('/assets/icons/notifications/bolt.svg'); }

i.fa-cloud { --loquei-icon-url: url('/assets/icons/weather/cloud.svg'); }
i.fa-cloud-sun { --loquei-icon-url: url('/assets/icons/weather/cloud-sun.svg'); }
i.fa-cloud-rain { --loquei-icon-url: url('/assets/icons/weather/cloud-rain.svg'); }
i.fa-cloud-showers-heavy { --loquei-icon-url: url('/assets/icons/weather/cloud-showers-heavy.svg'); }
i.fa-snowflake { --loquei-icon-url: url('/assets/icons/weather/snowflake.svg'); }
i.fa-smog { --loquei-icon-url: url('/assets/icons/weather/smog.svg'); }
i.fa-tornado { --loquei-icon-url: url('/assets/icons/weather/tornado.svg'); }
i.fa-wind { --loquei-icon-url: url('/assets/icons/weather/wind.svg'); }
i.fa-tint { --loquei-icon-url: url('/assets/icons/weather/tint.svg'); }
i.fa-thermometer-half { --loquei-icon-url: url('/assets/icons/weather/thermometer-half.svg'); }
i.fa-tachometer-alt { --loquei-icon-url: url('/assets/icons/weather/tachometer-alt.svg'); }
i.fa-sun { --loquei-icon-url: url('/assets/icons/weather/sun.svg'); }
i.fa-moon { --loquei-icon-url: url('/assets/icons/weather/moon.svg'); }
i.fa-icicles { --loquei-icon-url: url('/assets/icons/weather/icicles.svg'); }

i.fa-facebook-f { --loquei-icon-url: url('/assets/icons/social/facebook-f.svg'); }
i.fa-twitter { --loquei-icon-url: url('/assets/icons/social/twitter.svg'); }
i.fa-linkedin-in { --loquei-icon-url: url('/assets/icons/social/linkedin-in.svg'); }

/* ========== FA6 Aliases ==========
   FontAwesome 6 renamed some icons. Map FA6 names to existing local SVGs. */
i.fa-circle-info { --loquei-icon-url: url('/assets/icons/shell/info-circle.svg'); }
i.fa-circle-xmark,
i.fa-times-circle { --loquei-icon-url: url('/assets/icons/shell/xmark.svg'); }
i.fa-house-circle-xmark { --loquei-icon-url: url('/assets/icons/shell/xmark.svg'); }
i.fa-star-half-stroke { --loquei-icon-url: url('/assets/icons/property/star-half-alt.svg'); }
i.fa-comment-dots { --loquei-icon-url: url('/assets/icons/chat/comment.svg'); }
i.fa-list-check { --loquei-icon-url: url('/assets/icons/property/list-alt.svg'); }


/* Design system semântico */

/* bundled: assets/css/base/_tokens/_design-system.css */
/* =============================
   🎨 DESIGN SYSTEM UNIFICADO
   Tokens para todas as páginas
   ============================= */

:root {
  /* ========== BACKGROUNDS ========== */
  --page-bg: var(--bg-body-primary);
  --page-bg-alt: var(--bg-primary);
  --card-bg: var(--bg-card-primary);
  --card-bg-hover: var(--bg-card-secondary);

  /* ========== BORDERS ========== */
  --card-border: 1px solid var(--border-color);
  --card-border-hover: 1px solid rgba(var(--primary-blue-rgb), 0.1);

  /* ========== SHADOWS ========== */
  --card-shadow: var(--shadow-base);
  --card-shadow-hover: var(--shadow-lg);

  /* ========== SPACING ========== */
  --page-padding: var(--space-8);
  --card-padding: var(--space-8);
  --section-gap: var(--space-12);

  /* ========== RADIUS ========== */
  --card-radius: var(--radius-card);
  --btn-radius: var(--radius-button);

  /* Cores específicas para badges e estados - usando tokens */
  --badge-success: var(--accent-green-light);
  --badge-success-solid: var(--accent-green);
  --badge-warning: var(--warning);
  --badge-warning-light: var(--warning-light);
  --badge-premium: var(--primary-pink);
  --badge-premium-light: var(--primary-pink-light);
  --badge-gold: var(--warning);
  --badge-gold-light: var(--warning-light);
  --badge-error: var(--secondary-red);
  --badge-error-light: var(--secondary-red-light);
  --badge-info: var(--primary-blue);
  --badge-info-light: var(--primary-blue-light);

  /* Cores para weather widget - usando overlays */
  --weather-bg-light: var(--primary-blue-overlay-sm);
  --weather-bg-medium: var(--primary-blue-overlay-md);
  --weather-bg-dark: var(--primary-blue-overlay-lg);
  --weather-accent: var(--primary-blue);

  /* Cores utilitárias - usando tokens */
  --text-dark: var(--gray-700);

  /* ========== Z-INDEX SCALE ========== */
  /* Definições completas em tokens.css - apenas complementos aqui */
  --z-base: 10;
  --z-max: 9999;

  /* ========== FONT FAMILIES ========== */
  --font-monospace: 'Courier New', monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-icons: 'Loquei Icons';

  /* ========== BUTTONS ========== */
  --btn-padding: var(--space-3) var(--space-6);
  --btn-primary: var(--primary-blue);
  --btn-primary-hover: var(--primary-blue-dark);
  --btn-secondary: var(--gray-600);
  --btn-danger: var(--secondary-red);
  --btn-success: var(--accent-green);
}

[data-theme="dark"] {
  --page-bg: var(--bg-body-primary);
  --page-bg-alt: var(--bg-primary);
  --card-bg: var(--bg-card-primary);
  --card-bg-hover: var(--bg-card-secondary);
  --card-border: 1px solid var(--border-color);

  /* Badges dark mode */
  --badge-success: var(--accent-green-overlay-15);
  --badge-success-solid: var(--accent-green);
  --badge-warning-light: var(--warning-light);
  --badge-premium-light: var(--primary-pink-light);
  --badge-gold-light: var(--warning-light);
  --badge-error-light: var(--secondary-red-light);
  --badge-info-light: var(--primary-blue-light);

  /* Weather dark mode - mais mineral e menos colorido */
  --weather-bg-light: var(--primary-blue-overlay-12);
  --weather-bg-medium: var(--primary-blue-overlay-md);
  --weather-bg-dark: var(--primary-blue-overlay-lg);
  --weather-accent: var(--primary-blue);
}


/* Primitives e componentes base */

/* bundled: assets/css/components/_base.css */
/* ==========================================================================
   COMPONENTS BASE
   Primitives estruturais compartilhadas entre múltiplos domínios.

   Escopo:
   - card base
   - grids utilitários de composição

   Fora de escopo:
   - botões
   - formulários
   - componentes de domínio
   ========================================================================== */

/* ========== CARDS ========== */
.card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: var(--transition-base);
}

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

.card__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-light);
}

.card__title {
  font: var(--font-title-tertiary);
  color: var(--text-main);
  margin: 0;
}

.card__body {
  color: var(--text-main);
}

/*
 * Botões não são mais definidos aqui.
 * A fonte de verdade do contrato visual de `.btn` fica em:
 * `assets/css/components/buttons.css`
 *
 * Este arquivo permanece responsável apenas por primitives estruturais
 * reutilizáveis como card e grid.
 */

/* ========== GRID ========== */
.grid {
  display: grid;
  gap: var(--space-4);
}

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

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

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

@media (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}


/* bundled: assets/css/components/buttons.css */
/* =============================
   🔘 BUTTONS COMPONENT
   Fonte de verdade para o contrato visual de `.btn`.

   Regras:
   - variantes usam modificadores BEM (`.btn--primary`, `.btn--icon`)
   - estados novos devem preferir `is-*` e atributos semânticos
   - este arquivo substitui definições antigas espalhadas em `_base.css`
   ============================= */

/* ========== VARIÁVEIS DO COMPONENTE ========== */
/*
 * Tokens locais do bloco.
 * Mantemos a superfície pequena e apoiada em tokens globais.
 */
.btn {
  --btn-height-sm: var(--size-button-sm);
  --btn-height-base: var(--size-button-md);
  --btn-height-lg: var(--size-button-lg);
  --btn-height-xl: var(--size-button-xl);

  --btn-padding-x: var(--button-padding-x);
  --btn-padding-y: var(--button-padding-y);
  --btn-border-radius: var(--radius-button);
  --btn-font-size: var(--font-size-base);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-transition: var(--transition-base);

  /* Primary colors - Minimalist refinement */
  --btn-primary-bg: var(--primary-blue);
  --btn-primary-border: var(--primary-blue);
  --btn-primary-color: var(--white);
  --btn-primary-shadow: var(--shadow-sm);
  --btn-primary-hover-bg: var(--primary-blue-hover);
  --btn-primary-hover-shadow: var(--shadow-blue);

  /* Secondary colors */
  --btn-secondary-bg: var(--white);
  --btn-secondary-border: var(--border-color);
  --btn-secondary-color: var(--text-main);
  --btn-secondary-hover-bg: var(--gray-50);
  --btn-secondary-hover-border: var(--gray-300);

  /* Icon button colors */
  --btn-icon-bg: var(--bg-card-secondary);
  --btn-icon-color: var(--text-secondary);
  --btn-icon-hover-bg: var(--bg-accent);
  --btn-icon-hover-color: var(--text-main);
}

/* Base do bloco `.btn` */
.btn {
  width: auto;
  max-width: none;
  height: var(--btn-height-base);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1.5px solid;
  border-radius: var(--btn-border-radius);
  font: var(--font-label-md);
  cursor: pointer;
  transition: var(--btn-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-xs, var(--shadow-sm));
  box-sizing: border-box;
}

body.using-keyboard .btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--primary-blue-overlay-xs), var(--shadow-xs, var(--shadow-sm));
}

body.using-pointer .btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-xs, var(--shadow-sm));
}

.btn:disabled,
.btn[aria-disabled='true'],
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
}

.btn--primary:hover:not(:disabled) {
  background: var(--btn-primary-hover-bg);
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-hover-shadow);
}

.btn--secondary {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
  color: var(--btn-secondary-hover-color, var(--btn-secondary-color));
  transform: translateY(-0.5px);
  box-shadow: var(--shadow-xs, var(--shadow-sm));
}

.btn--secondary:active:not(:disabled) {
  transform: translateY(0);
}

/* ========== BOTÃO DE ÍCONE ========== */
.btn--icon {
  width: var(--size-button-md);
  height: var(--size-button-md);
  min-width: var(--size-button-md);
  padding: 0;
  border-radius: 50%;
  background: var(--btn-icon-bg);
  border: 1px solid var(--border-primary);
  color: var(--btn-icon-color);
  font-size: var(--font-size-lg);
  box-shadow: none;
}

.btn--icon:hover:not(:disabled) {
  background: var(--btn-icon-hover-bg);
  color: var(--btn-icon-hover-color);
  transform: translateY(-1px);
  border-color: var(--primary-blue-overlay-base);
  box-shadow: var(--shadow-sm);
}

.btn--icon:active:not(:disabled) {
  transform: translateY(0);
}

/* ========== VARIANTES DE ÍCONE ========== */
.btn--icon-sm {
  width: var(--size-button-sm);
  height: var(--size-button-sm);
  min-width: var(--size-button-sm);
  font-size: var(--font-size-base);
}

.btn--icon-lg {
  width: var(--size-button-lg);
  height: var(--size-button-lg);
  min-width: var(--size-button-lg);
  font-size: var(--font-size-xl);
}

/* ========== ESTADO DE LOADING ========== */
.btn--loading,
.btn.is-loading,
.btn[aria-busy='true'] {
  position: relative;
  pointer-events: none;
  overflow: hidden;
}

.btn--loading::before,
.btn.is-loading::before,
.btn[aria-busy='true']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  opacity: 0.7;
  z-index: 1;
}

.btn--loading::after,
.btn.is-loading::after,
.btn[aria-busy='true']::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
  z-index: 2;
}

.btn--loading.btn--primary::after,
.btn.is-loading.btn--primary::after,
.btn[aria-busy='true'].btn--primary::after {
  border-top-color: var(--white);
}

.btn--loading.btn--secondary::after,
.btn.is-loading.btn--secondary::after,
.btn[aria-busy='true'].btn--secondary::after {
  border-top-color: var(--text-main);
}

@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulse animation for loading state */
.btn--loading,
.btn.is-loading,
.btn[aria-busy='true'] {
  animation: btn-pulse 1.8s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* ========== BOTÕES ESPECIAIS ========== */
.btn--danger {
  background: var(--secondary-red);
  border-color: var(--secondary-red);
  color: var(--white);
}

.btn--danger:hover:not(:disabled) {
  background: var(--secondary-red-hover);
  border-color: var(--secondary-red-hover);
  transform: translateY(-1px);
}

.btn--success {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: var(--white);
}

.btn--success:hover:not(:disabled) {
  background: var(--accent-green-hover);
  border-color: var(--accent-green-hover);
  transform: translateY(-1px);
}

.btn--warning {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--white);
}

.btn--warning:hover:not(:disabled) {
  background: var(--warning-hover);
  border-color: var(--warning-hover);
  transform: translateY(-1px);
}

/* ========== BOTÃO GHOST ========== */
.btn--ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  box-shadow: none;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--glass-light-bg);
  color: var(--text-main);
  transform: none;
}

/* ========== GRUPOS DE BOTÕES ========== */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
}

@media (min-width: 600px) {
  .btn-group {
    flex-direction: row;
    justify-content: center;
  }
}

/* ========== RESPONSIVIDADE ========== */
/* Medium - Tablets: 768px (--breakpoint-md) */
@media (max-width: 768px) {
  .btn {
    --btn-height-base: var(--size-button-lg);
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
    min-height: 44px; /* Ensure minimum touch target */
  }

  .btn--sm {
    --btn-height-sm: var(--size-button-md);
    font-size: var(--font-size-sm);
    min-height: 44px;
  }

  /* Improve button spacing on mobile */
  .btn-group {
    gap: var(--space-4);
  }

  .btn-group .btn {
    min-width: 120px;
  }
}

/* Small - Phones: 480px (--breakpoint-sm) */
@media (max-width: 480px) {
  .btn {
    max-width: 100%;
    width: 100%;
  }

  .btn--icon {
    width: var(--size-button-sm);
    height: var(--size-button-sm);
    min-width: var(--size-button-sm);
    font-size: var(--font-size-base);
  }
}

/* ========== TEMAS ========== */
[data-theme='dark'] .btn {
  --btn-primary-bg: var(--control-primary-bg);
  --btn-primary-border: var(--control-primary-border);
  --btn-primary-color: var(--white);
  --btn-primary-shadow: var(--control-shadow);
  --btn-primary-hover-bg: var(--control-primary-hover-bg);
  --btn-primary-hover-shadow: var(--control-shadow-hover);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--control-secondary-border);
  --btn-secondary-color: var(--text-main);
  --btn-secondary-hover-bg: var(--control-secondary-hover-bg);
  --btn-secondary-hover-border: var(--control-secondary-hover-border);
  --btn-secondary-hover-color: var(--white);

  --btn-icon-bg: var(--glass-medium-bg);
  --btn-icon-hover-bg: var(--glass-light-bg);
}

/* ========== VARIANTES DE TAMANHO ========== */
.btn--sm {
  height: var(--btn-height-sm);
  min-height: var(--btn-height-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn--md {
  height: var(--btn-height-base);
  min-height: var(--btn-height-base);
}

.btn--lg {
  height: var(--btn-height-lg);
  min-height: var(--btn-height-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-lg);
}

.btn--xl {
  height: var(--btn-height-xl);
  min-height: var(--btn-height-xl);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-xl);
}

/* ========== VARIANTES DE LARGURA ========== */
.btn--full {
  width: 100%;
  max-width: 100%;
}

.btn--auto {
  width: auto;
  max-width: none;
}

/*
 * Aliases de transicao para botões de ícone.
 * Código novo deve preferir `.btn.btn--icon`.
 */
.button-icon,
.modal-close-btn {
  width: var(--size-button-md);
  height: var(--size-button-md);
  min-width: var(--size-button-md);
  padding: 0;
  border-radius: 50%;
  background: var(--btn-icon-bg);
  border: none;
  color: var(--btn-icon-color);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: var(--btn-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-icon:hover:not(:disabled),
.modal-close-btn:hover:not(:disabled) {
  background: var(--btn-icon-hover-bg);
  color: var(--btn-icon-hover-color);
  transform: scale(1.05);
}

.button-icon:active:not(:disabled),
.modal-close-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* ========== ACESSIBILIDADE - FORCED COLORS MODE ========== */
@media (forced-colors: active) {
  .btn,
  .btn--primary,
  .btn--secondary,
  .btn--danger,
  .btn--success,
  .btn--warning {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .btn:focus-visible,
  .btn--primary:focus-visible,
  .btn--secondary:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }

  .btn--icon,
  .button-icon,
  .modal-close-btn {
    border: 1px solid currentColor;
  }
}


/* bundled: assets/css/components/forms.css */
/* ==========================================================================
   FORMS COMPONENT
   Fonte de verdade para primitives de formulário.

   Escopo:
   - campos base (`.form-input`, `.form-select`, `.form-textarea`)
   - labels, help text, mensagens e input groups
   - variantes de tamanho e estados semânticos do campo

   Fora de escopo:
   - validacao DOM complementar acoplada a wrappers genericos
   - regras específicas de página
   ========================================================================== */

/* ========== VARIÁVEIS DO COMPONENTE ========== */
.form {
  --form-gap: var(--space-5);
  --form-group-gap: var(--space-2);

  --input-height: var(--size-button-md);
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-border-radius: var(--border-radius-lg);
  --input-font-size: var(--font-size-sm);
  --input-transition: var(--transition-fast);

  --input-bg: var(--bg-card-primary);
  --input-border: var(--gray-300);
  --input-border-focus: var(--primary-blue);
  --input-border-error: var(--error);
  --input-border-success: var(--accent-green);

  --label-font-size: var(--font-size-xs);
  --label-font-weight: var(--font-weight-semibold);
  --label-color: var(--text-main);
  --label-margin: var(--space-2);

  --error-color: var(--error);
  --success-color: var(--accent-green);
  --help-color: var(--text-secondary);
}

/* ========== CONTAINER DO FORMULARIO ========== */
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

/* ========== GRUPO DE CAMPOS ========== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--form-group-gap);
  margin-bottom: var(--form-gap);
}

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

/* ========== GRID DE CAMPOS ========== */
.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

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

.form-grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .form-grid--2-cols,
  .form-grid--3-cols {
    grid-template-columns: 1fr;
  }
}

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

/* ========== LABELS ========== */
.form-label {
  display: block;
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  color: var(--label-color);
  margin-bottom: var(--label-margin);
  line-height: var(--line-height-normal);
}

.form-label--required::after {
  content: " *";
  color: var(--error-color);
}

.form-label--optional::after {
  content: " (opcional)";
  color: var(--help-color);
  font-weight: var(--font-weight-normal);
}

/* ========== INPUTS BASE ========== */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--input-bg);
  color: var(--text-main);
  font: var(--font-ui-primary);
  transition: var(--input-transition);
  outline: none;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

/* ========== ESTADOS DE FOCO ========== */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--primary-blue-overlay-xs), var(--shadow-xs, var(--shadow-sm));
}

body.using-keyboard .form-input:focus-visible,
body.using-keyboard .form-select:focus-visible,
body.using-keyboard .form-textarea:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .form-input:focus-visible,
body.using-pointer .form-select:focus-visible,
body.using-pointer .form-textarea:focus-visible {
  outline: none;
}

/* ========== ESTADOS DE HOVER ========== */
.form-input:hover:not(:disabled),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled) {
  border-color: var(--gray-400);
}

/* ========== PLACEHOLDERS ========== */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-500);
  font-weight: var(--font-weight-normal);
}

/* ========== ESTADOS DESABILITADOS ========== */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--input-bg-disabled, var(--gray-100));
  color: var(--gray-500);
  cursor: not-allowed;
  border-color: var(--gray-200);
  opacity: 0.7;
}

/* ========== TEXTAREA ESPECÍFICO ========== */
.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.form-textarea--auto-resize {
  resize: none;
  overflow: hidden;
}

/* ========== VARIANTES DE TAMANHO ========== */
.form-input--sm,
.form-select--sm,
.form-textarea--sm {
  min-height: var(--size-button-sm);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
}

.form-input--lg,
.form-select--lg,
.form-textarea--lg {
  min-height: var(--size-button-lg);
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-4);
}

/* ========== ESTADOS DE VALIDAÇÃO ========== */
.form-input--error,
.form-select--error,
.form-textarea--error {
  border-color: var(--input-border-error);
  box-shadow: 0 0 0 2px var(--secondary-red-overlay-15);
  background-color: var(--secondary-red-overlay-02);
  animation: fieldError 0.2s ease-out;
}

.form-input--success,
.form-select--success,
.form-textarea--success {
  border-color: var(--input-border-success);
  box-shadow: 0 0 0 2px var(--accent-green-overlay-15);
  background-color: var(--accent-green-overlay-02);
  animation: fieldSuccess 0.2s ease-out;
}

@keyframes fieldError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes fieldSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ========== MENSAGENS DE HELP/ERROR ========== */
.form-help,
.form-error,
.form-success {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1rem;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.form-help {
  color: var(--help-color);
}

.form-error {
  color: var(--error-color);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(-4px);
}

.form-error:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

.form-success {
  color: var(--success-color);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(-4px);
}

.form-success:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

.form-error::before {
  content: "⚠";
  font-size: var(--font-size-sm);
  color: var(--error-color);
  font-weight: bold;
  margin-right: var(--space-1);
}

.form-success::before {
  content: "✓";
  font-size: var(--font-size-sm);
  color: var(--success-color);
  font-weight: bold;
  margin-right: var(--space-1);
}

/* ========== INPUT GROUPS ========== */
.form-input-group {
  display: flex;
  align-items: stretch;
  position: relative;
}

.form-input-group .form-input {
  border-radius: 0;
  border-right: none;
}

.form-input-group .form-input:first-child {
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}

.form-input-group .form-input:last-child {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
  border-right: 1px solid var(--input-border);
}

.form-input-group__addon {
  display: flex;
  align-items: center;
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--gray-50);
  border: 2px solid var(--input-border);
  border-left: none;
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: var(--input-font-size);
}

.form-input-group__addon:last-child {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}

/* ========== CAMPOS DE BUSCA ========== */
.form-search {
  position: relative;
  display: flex;
  align-items: center;
}

.form-search .form-input {
  padding-left: var(--space-10);
}

.form-search__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  pointer-events: none;
  z-index: 1;
}

.form-search__clear {
  position: absolute;
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: 50%;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}

.form-search__clear:hover {
  background: var(--glass-light-bg);
  color: var(--text-main);
}

/* ========== UPLOAD DE ARQUIVOS ========== */
.form-file {
  position: relative;
  display: block;
  cursor: pointer;
}

.form-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-file__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 2px dashed var(--input-border);
  border-radius: var(--input-border-radius);
  background: var(--gray-50);
  color: var(--text-secondary);
  font-size: var(--input-font-size);
  transition: var(--input-transition);
  cursor: pointer;
}

.form-file__label:hover {
  border-color: var(--primary-blue);
  background: var(--primary-blue-light);
  color: var(--primary-blue);
}

.form-file--dragover .form-file__label {
  border-color: var(--primary-blue);
  background: var(--primary-blue-light);
  color: var(--primary-blue);
}

/* ========== CHECKBOXES E RADIOS ========== */
.form-checkbox,
.form-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  margin-bottom: var(--space-3);
  box-sizing: border-box;
}

.form-checkbox__input,
.form-radio__input {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-blue);
}

.form-checkbox__label,
.form-radio__label {
  font-size: var(--font-size-sm);
  color: var(--text-main);
  cursor: pointer;
  line-height: 1.5;
  flex: 1;
}

/* ========== CHECKBOX CARDS ========== */
.form-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.form-checkbox-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  color: var(--text-main);
  min-height: 44px;
  box-sizing: border-box;
  transition: var(--transition-fast);
}

.form-checkbox-card:hover {
  border-color: var(--primary-blue-overlay-base);
  background: var(--bg-card-primary);
}

.form-checkbox-card input[type='checkbox'] {
  margin: 0;
}

.form-checkbox-card .checkmark {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  position: relative;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.form-checkbox-card input[type='checkbox']:checked + .checkmark {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

.form-checkbox-card input[type='checkbox']:checked + .checkmark::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 1px;
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: bold;
}

/* ========== RESPONSIVIDADE ========== */
/* Medium - Tablets: 768px (--breakpoint-md) */
@media (max-width: 768px) {
  .form {
    --form-gap: var(--space-4);
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: var(--font-size-base);
    padding: var(--space-3);
    min-height: var(--size-button-lg); /* Better touch targets */
  }

  .form-grid--2-cols {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .form-grid--3-cols {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .form-checkbox-grid {
    grid-template-columns: 1fr;
  }

  /* Improve spacing for mobile */
  .form-group {
    margin-bottom: var(--space-5);
  }
}

/* Small - Phones: 480px (--breakpoint-sm) */
@media (max-width: 480px) {
  .form {
    --form-gap: var(--space-3);
  }

  .form-group {
    margin-bottom: var(--space-4);
  }
}

/* ========== TEMAS ========== */
[data-theme='dark'] .form {
  --input-bg: var(--bg-card-secondary);
  --input-border: var(--gray-600);
  --input-border-focus: var(--primary-blue);
}

[data-theme='dark'] .form-file__label {
  background: var(--bg-card-secondary);
  border-color: var(--gray-600);
}

[data-theme='dark'] .form-input-group__addon {
  background: var(--bg-card-secondary);
  border-color: var(--gray-600);
}

/* ========== TRANSIÇÕES ESPECIAIS ========== */
.form-group--hidden {
  transition: all var(--transition-base);
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
}

.form-group--hidden.hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding: 0;
}

/* ========== ALIASES DE COMPATIBILIDADE ========== */
.section-divider {
  width: 100%;
  height: 1px;
  background-color: var(--gray-200);
  margin-bottom: var(--space-6);
}

/* ========== ACESSIBILIDADE - FORCED COLORS MODE ========== */
@media (forced-colors: active) {
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    border: 1px solid currentColor;
    forced-color-adjust: none;
  }

  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 3px solid;
    outline-offset: 2px;
  }

  .form-checkbox,
  .form-radio {
    border: 1px solid currentColor;
  }
}


/* bundled: assets/css/components/empty-state.css */
/* ==========================================================================
   EMPTY STATE COMPONENT
   Componente transversal para estados vazios, erro e sucesso.

   Contract:
   - `.empty-state` é o bloco canônico
   - aliases sem BEM permanecem para markup ainda nao migrado
   - CTAs devem reutilizar o contrato de botões global (`.btn`)
   ========================================================================== */

/* ========== CONTAINER ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  min-height: 300px;
  background: var(--bg-card-primary);
  border-radius: var(--border-radius-lg);
  border: 1px dashed var(--border-color);
  box-shadow: var(--shadow-sm);
  gap: var(--space-3);
}

/* ========== ICON ========== */
.empty-state__icon,
.empty-state-icon {
  font-size: var(--font-size-3xl);
  color: var(--gray-400);
  opacity: 0.7;
  margin-bottom: var(--space-sm);
  line-height: 1;
}

/* Color variants */
.empty-state__icon--primary {
  color: var(--primary-blue);
  opacity: 0.6;
}

.empty-state__icon--success {
  color: var(--accent-green);
  opacity: 0.6;
}

.empty-state__icon--warning {
  color: var(--warning);
  opacity: 0.6;
}

.empty-state__icon--danger {
  color: var(--secondary-red);
  opacity: 0.6;
}

/* ========== TITLE ========== */
.empty-state__title,
.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin: 0 0 var(--space-sm) 0;
  line-height: var(--line-height-tight);
}

/* ========== DESCRIPTION ========== */
.empty-state__description,
.empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-lg) 0;
  max-width: 420px;
}

/* ========== ACTIONS ========== */
.empty-state__actions,
.empty-state-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Compatibility alias for action links/buttons */
.empty-state__action,
.empty-state-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

/* CTA inside the empty state should rely on the global button contract. */
.empty-cta {
  /* Usar o contrato canônico `.btn.btn--primary` ou `.btn.btn--secondary`. */
}

/* ========== SIZE VARIANTS ========== */

/* Compact */
.empty-state--compact {
  padding: var(--space-xl) var(--space-lg);
  min-height: 200px;
}

.empty-state--compact .empty-state__icon,
.empty-state--compact .empty-state-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-xs);
}

.empty-state--compact .empty-state__title,
.empty-state--compact .empty-state-title {
  font-size: var(--font-size-lg);
}

.empty-state--compact .empty-state__description,
.empty-state--compact .empty-state-description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

/* Expanded */
.empty-state--expanded {
  padding: var(--space-4xl) var(--space-2xl);
  min-height: 400px;
}

.empty-state--expanded .empty-state__icon,
.empty-state--expanded .empty-state-icon {
  font-size: 5rem;
  margin-bottom: var(--space-lg);
}

.empty-state--expanded .empty-state__title,
.empty-state--expanded .empty-state-title {
  font-size: var(--font-size-2xl);
}

.empty-state--expanded .empty-state__description,
.empty-state--expanded .empty-state-description {
  font-size: var(--font-size-lg);
  max-width: 600px;
}

/* ========== STYLE VARIANTS ========== */

/* Minimal surface without card chrome */
.empty-state--simple {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Solid card surface */
.empty-state--solid {
  background: var(--bg-card-secondary);
  border: 1px solid var(--border-color);
  border-style: solid;
}

/* Background image variant */
.empty-state--with-image {
  position: relative;
  background-size: cover;
  background-position: center;
}

.empty-state--with-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-heavy-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  border-radius: inherit;
  z-index: 0;
}

.empty-state--with-image > * {
  position: relative;
  z-index: 1;
}

/* ========== MOTION ========== */
@keyframes empty-state-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state--animated {
  animation: empty-state-fade-in 0.4s var(--ease-out);
}

.empty-state__icon--animated,
.empty-state-icon--animated {
  animation: empty-state-fade-in 0.4s var(--ease-out) 0.1s backwards;
}

.empty-state__title--animated,
.empty-state-title--animated {
  animation: empty-state-fade-in 0.4s var(--ease-out) 0.2s backwards;
}

.empty-state__description--animated,
.empty-state-description--animated {
  animation: empty-state-fade-in 0.4s var(--ease-out) 0.3s backwards;
}

.empty-state__actions--animated,
.empty-state-actions--animated {
  animation: empty-state-fade-in 0.4s var(--ease-out) 0.4s backwards;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
  .empty-state {
    padding: var(--space-2xl) var(--space-lg);
    min-height: 250px;
  }

  .empty-state__icon,
  .empty-state-icon {
    font-size: var(--font-size-3xl);
  }

  .empty-state__title,
  .empty-state-title {
    font-size: var(--font-size-lg);
  }

  .empty-state__description,
  .empty-state-description {
    font-size: var(--font-size-sm);
    max-width: 350px;
  }

  .empty-state__actions,
  .empty-state-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .empty-state__actions > *,
  .empty-state-actions > * {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .empty-state {
    padding: var(--space-xl) var(--space-md);
    min-height: 200px;
  }

  .empty-state__icon,
  .empty-state-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-xs);
  }

  .empty-state__title,
  .empty-state-title {
    font-size: var(--font-size-base);
  }

  .empty-state__description,
  .empty-state-description {
    font-size: var(--font-size-xs);
  }
}

/* ========== TEMA ESCURO ========== */
[data-theme='dark'] .empty-state {
  background: var(--bg-card-primary);
  border-color: var(--border-color);
}

[data-theme='dark'] .empty-state--solid {
  background: var(--bg-card-secondary);
}

[data-theme='dark'] .empty-state__icon,
[data-theme='dark'] .empty-state-icon {
  color: var(--gray-500);
}

/* ========== ACESSIBILIDADE ========== */
.empty-state[role='status'],
.empty-state[role='alert'] {
  /* Suporte melhorado para leitores de tela */
}

@media (prefers-reduced-motion: reduce) {
  .empty-state--animated,
  .empty-state__icon--animated,
  .empty-state__title--animated,
  .empty-state__description--animated,
  .empty-state__actions--animated,
  .empty-state-icon--animated,
  .empty-state-title--animated,
  .empty-state-description--animated,
  .empty-state-actions--animated {
    animation: none;
  }
}

/* ========== SEMANTIC VARIANTS ========== */

/* Error */
.empty-state--error {
  border-color: var(--secondary-red);
  border-style: solid;
}

.empty-state--error .empty-state__icon,
.empty-state--error .empty-state-icon {
  color: var(--secondary-red);
  opacity: 0.8;
}

/* Success */
.empty-state--success {
  border-color: var(--accent-green);
  border-style: solid;
}

.empty-state--success .empty-state__icon,
.empty-state--success .empty-state-icon {
  color: var(--accent-green);
  opacity: 0.8;
}

/* Informational */
.empty-state--info {
  border-color: var(--primary-blue);
  border-style: solid;
}

.empty-state--info .empty-state__icon,
.empty-state--info .empty-state-icon {
  color: var(--primary-blue);
  opacity: 0.8;
}

/* ========== ALIASES DE TRANSICAO ========== */
/* Alias mantido para markup ainda nao migrado. */
.estado-vazio {
  /* Código novo deve preferir `.empty-state`. */
}


/* bundled: assets/css/components/skeleton.css */
/* ==========================================================================
   SKELETON LOADER
   Shimmer-animated placeholder cards shown during content loading.
   Uses design system tokens for consistency.
   ========================================================================== */

.skeleton {
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-md, 8px);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--white) 40%, transparent) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    opacity: 0.5;
  }
}

/* ========== CARD VARIANT ========== */
.skeleton-card {
  height: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  padding: var(--space-md, 16px);
  border: 1px solid var(--border-color);
  background: var(--bg-card-primary);
}

.skeleton-card__image {
  height: 160px;
  border-radius: var(--border-radius-sm, 4px);
}

.skeleton-card__title {
  height: 20px;
  width: 70%;
  border-radius: var(--border-radius-xs, 2px);
}

.skeleton-card__text {
  height: 14px;
  width: 50%;
  border-radius: var(--border-radius-xs, 2px);
}

.skeleton-card__price {
  height: 24px;
  width: 40%;
  border-radius: var(--border-radius-xs, 2px);
  margin-top: auto;
}

/* ========== DARK MODE ========== */
[data-theme='dark'] .skeleton {
  background: var(--bg-card-secondary);
}

[data-theme='dark'] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--white) 8%, transparent) 50%,
    transparent 100%
  );
}

[data-theme='dark'] .skeleton-card {
  background: var(--bg-card-primary);
  border-color: var(--border-color);
}

/* ========== RESPONSIVO ========== */
@media (max-width: 480px) {
  .skeleton-card {
    height: 240px;
  }

  .skeleton-card__image {
    height: 130px;
  }
}


/* bundled: assets/css/components/pagination.css */
/* ==========================================================================
   PAGINATION COMPONENT
   Navegação paginada reutilizável para listas, grids e tabelas.

   Contract:
   - `.pagination-container` é o wrapper transversal
   - `.page-number--active` e `[aria-current='page']` são equivalentes
   - controles devem permanecer clicáveis por teclado e leitores de tela
   ========================================================================== */

/* ========== CONTAINER ========== */
.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-xl) 0;
  width: 100%;
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* ========== NAVIGATION CONTROLS ========== */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  box-sizing: border-box;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  transform: translateY(-1px);
}

.pagination-btn:active:not(:disabled) {
  transform: translateY(0);
}

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

.pagination-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Icons */
.pagination-btn i {
  font-size: var(--font-size-xs);
}

/* ========== PAGE NUMBERS ========== */
.page-numbers {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.page-number {
  width: var(--size-button-md);
  height: var(--size-button-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-base);
  user-select: none;
  box-sizing: border-box;
}

.page-number:hover:not(.page-number--active):not([aria-current='page']) {
  background: var(--primary-blue-overlay-10);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  transform: translateY(-1px);
}

.page-number:active:not(.page-number--active):not([aria-current='page']) {
  transform: translateY(0);
}

.page-number.page-number--active,
.page-number[aria-current='page'] {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  cursor: default;
  pointer-events: none;
}

.page-number:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Ellipsis between page numbers */
.page-number-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-button-md);
  height: var(--size-button-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  user-select: none;
}

/* ========== SIZE VARIANTS ========== */

/* Compact */
.pagination-container--sm .pagination-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
}

.pagination-container--sm .page-number {
  width: var(--size-button-sm);
  height: var(--size-button-sm);
  font-size: var(--font-size-xs);
}

/* Large */
.pagination-container--lg .pagination-btn {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-base);
}

.pagination-container--lg .page-number {
  width: var(--size-button-lg);
  height: var(--size-button-lg);
  font-size: var(--font-size-base);
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
  .pagination-container {
    gap: var(--space-3);
    padding: var(--space-lg) 0;
  }

  .pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .page-numbers {
    gap: var(--space-2xs);
  }

  .page-number {
    width: var(--size-button-sm);
    height: var(--size-button-sm);
    font-size: var(--font-size-xs);
  }

  .page-number-ellipsis {
    min-width: var(--size-button-sm);
    height: var(--size-button-sm);
    font-size: var(--font-size-xs);
  }

  /* Hide text labels on compact screens while keeping icon navigation. */
  .pagination-btn span {
    display: none;
  }

  .pagination-btn i {
    margin: 0;
  }
}

@media (max-width: 480px) {
  .pagination-container {
    padding: var(--space-md) 0;
  }

  .pagination-btn {
    padding: var(--space-sm);
    min-width: var(--size-button-md);
  }

  /* Reduce page density on very small screens. */
  .page-numbers .page-number:not(.page-number--active):not([aria-current='page']):nth-child(n+4):nth-last-child(n+4) {
    display: none;
  }

  /* Keep ellipsis visible when intermediate pages are collapsed. */
  .page-numbers .page-number-ellipsis {
    display: inline-flex !important;
  }
}

/* ========== TEMA ESCURO ========== */
[data-theme='dark'] .pagination-btn {
  background: var(--glass-medium-bg);
  border-color: var(--border-color);
}

[data-theme='dark'] .page-number {
  background: var(--glass-medium-bg);
  border-color: var(--border-color);
}

[data-theme='dark'] .pagination-btn:hover:not(:disabled) {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

[data-theme='dark'] .page-number:hover:not(.page-number--active):not([aria-current='page']) {
  background: var(--primary-blue-overlay-20);
  border-color: var(--primary-blue);
}

/* ========== ESTADOS ESPECIAIS ========== */

/* Paginação em carregamento */
.pagination-container--loading,
.pagination-loading {
  opacity: 0.6;
  pointer-events: none;
}

.pagination-container--loading .pagination-btn,
.pagination-container--loading .page-number,
.pagination-loading .pagination-btn,
.pagination-loading .page-number {
  cursor: wait;
}

/* Paginação desabilitada */
.pagination-container--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========== ACESSIBILIDADE ========== */
.pagination-btn[aria-label],
.page-number[aria-label] {
  /* Melhor suporte para leitores de tela */
}

@media (prefers-reduced-motion: reduce) {
  .pagination-btn,
  .page-number {
    transition: none;
    transform: none !important;
  }
}

/* ========== ALIASES DE TRANSICAO ========== */
/* Classes historicas redirecionam para o novo sistema. */
.paginacao-container {
  /* Alias português - usar .pagination-container em código novo */
}


/* bundled: assets/css/components/loading.css */
/* ==========================================================================
   LOADING SYSTEM
   Superfícies de carregamento com spinner, skeleton, bars e progress.

   Contract:
   - `.modern-loading-overlay` controla o backdrop
   - variantes de apresentação usam classes semânticas (`.dark`, `.small`)
   - feedback visual deve continuar acessível em motion-reduced
   ========================================================================== */

/* ========== OVERLAY ========== */
.modern-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.modern-loading-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modern-loading-overlay.backdrop-dark {
  background: var(--overlay-black-lg);
}

.modern-loading-overlay.backdrop-light {
  background: var(--gray-light-bg);
}

.modern-loading-overlay.backdrop-blur {
  background: var(--overlay-black-base);
  backdrop-filter: var(--backdrop-blur-md);
  -webkit-backdrop-filter: var(--backdrop-blur-md);
}

.modern-loading-overlay.backdrop-none {
  background: transparent;
}

/* ========== CONTAINER ========== */
.modern-loading-container {
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  text-align: center;
  min-width: 240px;
  max-width: 360px;
  position: relative;
}

.modern-loading-container.dark {
  background: var(--gray-800);
  color: var(--white);
}

/* ========== CLOSE BUTTON ========== */
.modern-loading-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  color: var(--gray-500);
  width: var(--size-icon-base);
  height: var(--size-icon-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  transition: var(--transition-fast);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.modern-loading-close:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

body.using-keyboard .modern-loading-close:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .modern-loading-close:focus-visible {
  outline: none;
}

/* ========== CONTENT ========== */
.modern-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* ========== SPINNER ========== */
.modern-loading-spinner {
  width: var(--size-button-md);
  height: var(--size-button-md);
  border: 3px solid var(--gray-100);
  border-top: 3px solid var(--primary-blue);
  border-radius: var(--border-radius-full);
  animation: modern-loading-spin 0.8s var(--ease-smooth) infinite;
}

.modern-loading-spinner.small {
  width: var(--size-icon-base);
  height: var(--size-icon-base);
  border-width: 2px;
}

.modern-loading-spinner.large {
  width: var(--size-avatar-xl);
  height: var(--size-avatar-xl);
  border-width: 4px;
}

.modern-loading-spinner.xlarge {
  width: var(--size-avatar-3xl);
  height: var(--size-avatar-3xl);
  border-width: 5px;
}

/* ========== DOTS ========== */
.modern-loading-dots {
  display: flex;
  gap: var(--space-1);
}

.modern-loading-dots .dot {
  width: var(--space-2);
  height: var(--space-2);
  background: var(--primary-blue);
  border-radius: var(--border-radius-full);
  animation: modern-loading-bounce var(--animation-duration-slower) ease-in-out infinite both;
}

.modern-loading-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}
.modern-loading-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}
.modern-loading-dots .dot:nth-child(3) {
  animation-delay: 0s;
}

/* ========== PULSE ========== */
.modern-loading-pulse {
  width: var(--size-button-md);
  height: var(--size-button-md);
  background: var(--primary-blue);
  border-radius: var(--border-radius-full);
  animation: modern-loading-pulse 1.5s ease-in-out infinite;
}

/* ========== SKELETON ========== */
.modern-loading-skeleton {
  width: var(--size-skeleton-width, 200px);
  height: var(--size-input-md);
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: modern-loading-skeleton 1.5s infinite;
  border-radius: var(--border-radius-sm);
}

/* ========== PROGRESS BAR ========== */
.modern-loading-progress {
  width: 200px;
  height: var(--space-1);
  background: var(--gray-100);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.modern-loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-green));
  border-radius: var(--border-radius-sm);
  transition: var(--transition-base);
  animation: modern-loading-progress-shine 2s infinite;
}

/* ========== BARS ========== */
.modern-loading-bars {
  display: flex;
  gap: 0.125rem;
  align-items: end;
  height: var(--size-button-md);
}

.modern-loading-bars .bar {
  width: var(--space-1);
  background: var(--primary-blue);
  border-radius: var(--border-radius-sm);
  animation: modern-loading-bars 1.2s ease-in-out infinite;
}

.modern-loading-bars .bar:nth-child(1) {
  animation-delay: -1.1s;
}
.modern-loading-bars .bar:nth-child(2) {
  animation-delay: -1s;
}
.modern-loading-bars .bar:nth-child(3) {
  animation-delay: -0.9s;
}
.modern-loading-bars .bar:nth-child(4) {
  animation-delay: -0.8s;
}
.modern-loading-bars .bar:nth-child(5) {
  animation-delay: -0.7s;
}

/* ========== TEXT ========== */
.modern-loading-message {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-main);
  margin: 0;
}

.modern-loading-submessage {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.modern-loading-progress-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* ========== ANIMATIONS ========== */
@keyframes modern-loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes modern-loading-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes modern-loading-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

@keyframes modern-loading-skeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes modern-loading-progress-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes modern-loading-bars {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* ========== COLORS ========== */
.modern-loading-primary {
  color: var(--primary-blue);
}
.modern-loading-secondary {
  color: var(--primary-gray);
}
.modern-loading-success {
  color: var(--accent-green);
}
.modern-loading-warning {
  color: var(--warning);
}
.modern-loading-error {
  color: var(--secondary-red);
}
.modern-loading-info {
  color: var(--info);
}

/* ========== SIZES ========== */
.modern-loading-small {
  transform: scale(0.8);
}
.modern-loading-medium {
  transform: scale(1);
}
.modern-loading-large {
  transform: scale(1.2);
}
.modern-loading-xlarge {
  transform: scale(1.5);
}

/* ========== POSITIONS ========== */
.modern-loading-position-top {
  align-items: flex-start;
  padding-top: var(--space-5);
}

.modern-loading-position-bottom {
  align-items: flex-end;
  padding-bottom: var(--space-5);
}

.modern-loading-position-left {
  justify-content: flex-start;
  padding-left: var(--space-5);
}

.modern-loading-position-right {
  justify-content: flex-end;
  padding-right: var(--space-5);
}

/* ========== ENTRANCE ANIMATIONS ========== */
.modern-loading-fade-in {
  animation: modern-loading-fade-in var(--animation-duration-base) ease;
}

.modern-loading-slide-in {
  animation: modern-loading-slide-in var(--animation-duration-base) ease;
}

.modern-loading-zoom-in {
  animation: modern-loading-zoom-in var(--animation-duration-base) ease;
}

.modern-loading-bounce-in {
  animation: modern-loading-bounce-in var(--animation-duration-slow) ease;
}

/* ========== APP INIT ERROR ========== */
.app-init-error-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--overlay-black-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-init-error-overlay--mounted {
  visibility: visible;
}

.app-init-error-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.app-init-error-card {
  width: min(100%, 500px);
  padding: var(--space-10);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-modal);
  background: var(--bg-card-primary);
  box-shadow: var(--shadow-2xl);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--transition-base);
}

.app-init-error-overlay--visible .app-init-error-card {
  transform: translateY(0) scale(1);
}

.app-init-error-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: var(--secondary-red-light);
  color: var(--secondary-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.app-init-error-title {
  margin: 0 0 var(--space-4);
  color: var(--text-main);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.app-init-error-description {
  margin: 0 0 var(--space-6);
  color: var(--gray-600);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.app-init-error-detail {
  margin: calc(var(--space-6) * -0.5) 0 var(--space-6);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.app-init-error-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.app-init-error-button {
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  padding: 12px 24px;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.app-init-error-button:hover {
  transform: translateY(-1px);
}

.app-init-error-button--primary {
  background: var(--secondary-red);
  color: var(--white);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--secondary-red) 24%, transparent);
}

.app-init-error-button--secondary {
  background: var(--gray-600);
  color: var(--white);
}

@keyframes modern-loading-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modern-loading-slide-in {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modern-loading-zoom-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes modern-loading-bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .modern-loading-container {
    margin: var(--space-5);
    padding: var(--space-5);
  }

  .app-init-error-card {
    padding: var(--space-7);
  }

  .app-init-error-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ========== DARK MODE ========== */
[data-theme="dark"] .modern-loading-container {
  background: var(--gray-800);
  color: var(--white);
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .modern-loading-close {
  color: var(--gray-400);
}

[data-theme="dark"] .modern-loading-close:hover {
  background: var(--gray-700);
  color: var(--white);
}

[data-theme="dark"] .modern-loading-spinner {
  border-color: var(--gray-600);
  border-top-color: var(--primary-blue);
}

[data-theme="dark"] .modern-loading-skeleton {
  background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
  background-size: 200% 100%;
}

[data-theme="dark"] .modern-loading-progress {
  background: var(--gray-700);
}

[data-theme="dark"] .modern-loading-message {
  color: var(--white);
}

[data-theme="dark"] .modern-loading-submessage,
[data-theme="dark"] .modern-loading-progress-text {
  color: var(--gray-400);
}

[data-theme="dark"] .app-init-error-card {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

[data-theme="dark"] .app-init-error-title {
  color: var(--white);
}

[data-theme="dark"] .app-init-error-description,
[data-theme="dark"] .app-init-error-detail {
  color: var(--gray-300);
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  .modern-loading-spinner,
  .modern-loading-dots .dot,
  .modern-loading-pulse,
  .modern-loading-skeleton,
  .modern-loading-progress-bar,
  .modern-loading-bars .bar,
  .modern-loading-fade-in,
  .modern-loading-slide-in,
  .modern-loading-zoom-in,
  .modern-loading-bounce-in {
    animation: none;
  }

  .app-init-error-overlay,
  .app-init-error-card,
  .app-init-error-button {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .modern-loading-container {
    border: 2px solid currentColor;
  }

  .modern-loading-spinner {
    border-width: 4px;
  }

  .modern-loading-progress {
    border: 1px solid currentColor;
  }
}

@media (forced-colors: active) {
  .modern-loading-container {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .modern-loading-spinner {
    border: 3px solid GrayText;
    border-top-color: Highlight;
  }

  .modern-loading-close:focus-visible {
    outline: 3px solid Highlight;
  }
}


/* Layout - estrutura de shell */

/* bundled: assets/css/layout/integration.css */
/* =====================================================
   INTEGRATION STYLES - SISTEMA DE INTEGRAÇÃO
   =====================================================
   Estilos específicos para integração com sistema de contratos
   Data: 2025-01-15
   ===================================================== */

/* =====================================================
   1. STATUS BADGES
   ===================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  transition: var(--transition-fast);
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.status-badge.utilities {
  background: var(--info-bg);
  color: var(--primary-blue);
  border-color: var(--info-bg);
}

.status-badge.contratos {
  background: var(--primary-pink-light);
  color: var(--primary-pink-dark);
  border-color: var(--primary-pink-light);
}

.status-badge.chaves {
  background: var(--success-bg);
  color: var(--accent-green-hover);
  border-color: var(--badge-success);
}

.status-badge.tcd {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--badge-warning);
}

.status-badge[data-status='active'] {
  background: var(--accent-green);
  color: var(--white);
  border-color: var(--accent-green);
  box-shadow: 0 2px 4px var(--accent-green-overlay-15);
}

.status-badge.inactive {
  background: var(--bg-accent, var(--gray-100));
  color: var(--text-tertiary, var(--gray-500));
  border-color: var(--border-color);
}

/* =====================================================
   2. AÇÕES DE INTEGRAÇÃO
   ===================================================== */

/* =====================================================
   3. SEÇÕES DE INTEGRAÇÃO
   ===================================================== */

/* =====================================================
   4. UTILITIES SECTION
   ===================================================== */

.utilities-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.utility-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-primary);
  transition: var(--transition-base);
}

.utility-item:hover {
  background: color-mix(in srgb, var(--bg-card-secondary) 82%, var(--primary-blue-overlay-08));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.utility-item.incluso {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.utility-item.individual {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

.utility-item.coletivo {
  background: var(--warning-bg);
  border-color: var(--warning-bg);
  color: var(--warning-text);
}

.utility-item.separado {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

/* =====================================================
   5. CONTRACT SECTION
   ===================================================== */

/* =====================================================
   6. DIGITAL KEYS SECTION
   ===================================================== */

/* =====================================================
   7. FORMULÁRIO DE INTEGRAÇÃO
   ===================================================== */

.integration-form {
  background: var(--bg-card-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-primary);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.integration-form legend {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-primary);
  background: color-mix(in srgb, var(--bg-card-secondary) 92%, transparent);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.integration-form legend::before {
  content: '';
  width: 4px;
  height: 20px;
  background: var(--primary-blue);
  border-radius: var(--border-radius-sm);
}

.integration-form .form-group {
  margin-bottom: var(--space-lg);
}

.integration-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.integration-form label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
}

.integration-form input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-blue);
}

.integration-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-md);
  background: var(--bg-card-primary);
  color: var(--text-main);
  font-size: var(--font-size-md);
  transition: var(--transition-base);
  box-sizing: border-box;
}

.integration-form select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue-overlay-sm);
}

/* =====================================================
   8. LOADING STATES
   ===================================================== */

/* =====================================================
   9. RESPONSIVE DESIGN
   ===================================================== */

@media (max-width: 768px) {

  .utilities-list {
    grid-template-columns: 1fr;
  }

  .integration-form .form-row {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 480px) {

  .utility-item {
    padding: var(--space-3);
  }

}

/* =====================================================
   10. ANIMATIONS
   ===================================================== */

.status-badge {
  animation: fadeInUp 0.3s ease-out;
}

.utility-item {
  animation: fadeInUp 0.3s ease-out;
}

/* =====================================================
   11. ACCESSIBILITY
   ===================================================== */

.using-keyboard .status-badge:focus-visible,

.using-keyboard .utility-item:focus-within {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.using-keyboard .integration-form select:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}


/* UI - camada transversal */

/* bundled: assets/css/ui/general.css */
/* ==========================================================================
   GENERAL UI
   Camada transversal da interface.

   Responsável por:
   - aliases de shell visual compartilhado
   - controles flutuantes e wrappers transversais
   - superfícies que atravessam múltiplos domínios do app

   Não deve substituir components base nem reintroduzir tokens globais.
   ========================================================================== */

/*
 * Esta camada não define tokens globais do design system.
 * Ela só cria aliases de interface compartilhados pelo shell da aplicação.
 * Por isso os valores vivem em `body` e herdam da malha de tokens base.
 */
body {
  --ui-glass-bg: var(--glass-bg);
  --ui-glass-border: 1px solid var(--overlay-white-md);
  --ui-glass-shadow: 0 4px 10px var(--overlay-black-xs);
  --ui-glass-blur: blur(10px);
  --ui-hover-color: var(--gray-600);
  --ui-shadow-focus: 0 0 0 3px var(--primary-blue-overlay-sm);
  --ui-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ui-transition-fast: all 0.15s ease-in-out;
}

[data-theme='light'],
body.light-theme {
  --ui-glass-bg: var(--glass-bg);
  --ui-glass-border: 1px solid var(--overlay-white-md);
  --ui-glass-shadow: 0 4px 10px var(--overlay-black-xs);
  --ui-hover-color: var(--gray-600);
}

[data-theme='dark'],
body.dark-theme {
  --ui-glass-bg: var(--glass-bg);
  --ui-glass-border: 1px solid var(--overlay-white-xs);
  --ui-glass-shadow: 0 4px 10px var(--overlay-black-base);
  --ui-hover-color: var(--gray-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ui-glass-bg: var(--glass-bg);
    --ui-glass-border: 1px solid var(--overlay-white-xs);
    --ui-glass-shadow: 0 4px 10px var(--overlay-black-base);
    --ui-hover-color: var(--gray-400);
  }
}

.ol-viewport,
.ol-overlaycontainer {
  pointer-events: auto;
}

.ol-control,
.popup-card,
.floating-btn,
.sidebar,
.filtros-mapa,
.user-menu,
.logo,
.map-controls {
  pointer-events: auto;
}

.floating-btn {
  position: fixed;
  z-index: var(--z-floating);
  width: 44px;
  height: 44px;
  touch-action: none;
  border-radius: var(--border-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  color: var(--text-main);
  cursor: pointer;
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--white));
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.floating-btn:hover {
  transform: translateY(-1px);
  background: var(--bg-card-secondary);
  color: var(--primary-blue);
  box-shadow: var(--shadow-md);
}

body.using-keyboard .floating-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  box-shadow: var(--ui-shadow-focus);
}

body.using-pointer .floating-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-md);
}

.floating-btn:active {
  transform: translateY(0);
}

.contracts-floating-btn {
  width: var(--size-button-md);
  height: var(--size-button-md);
  min-width: var(--size-button-md);
  min-height: var(--size-button-md);
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-full);
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--white));
  box-shadow: var(--shadow-md);
  color: var(--primary-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  touch-action: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.contracts-floating-btn .loquei-icon {
  --loquei-icon-size: 1rem;
  color: inherit;
}

.contracts-floating-btn:hover {
  transform: translateY(-1px);
  background: var(--bg-card-secondary);
  box-shadow: var(--shadow-lg);
}

body.using-keyboard .contracts-floating-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .contracts-floating-btn:focus-visible {
  outline: none;
}

[data-theme='dark'] .contracts-floating-btn {
  color: var(--white);
  background: color-mix(in srgb, var(--bg-card-primary) 92%, var(--gray-900));
  border-color: var(--gray-600);
}

.filter-group {
  margin-bottom: var(--space-5);
}

.filter-label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-main);
}

.filter-select,
.filter-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border: var(--border-width-1) solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-fast);
  color: var(--text-main);
  background-color: var(--bg-card-primary);
  contain: layout style;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: var(--ui-shadow-focus);
}

.filter-select:focus-visible,
.filter-input:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

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

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text-main);
  min-height: 44px;
}

.checkbox-group input[type='checkbox'],
.checkbox-input {
  margin: 0;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.checkbox-label {
  font-size: var(--font-size-sm);
  color: var(--text-main);
}


.weather-widget {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  background-color: var(--ui-glass-bg);
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  border: var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow);
  box-sizing: border-box;
}

.weather-temp {
  margin: 0;
}

@media (orientation: landscape) and (max-height: 500px) {
  .floating-btn {
    width: 42px;
    height: 42px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .floating-btn:hover {
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .floating-btn:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-btn {
    animation: none;
    transition: none;
  }

  .floating-btn:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .floating-btn {
    border: 2px solid currentColor;
  }

  .filter-select,
  .filter-input {
    border: 2px solid currentColor;
  }
}

[data-theme='dark'] .filter-select,
[data-theme='dark'] .filter-input {
  background-color: color-mix(in srgb, var(--bg-body-primary) 50%, transparent);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme='dark'] .filter-select:focus,
[data-theme='dark'] .filter-input:focus {
  border-color: var(--primary-blue);
}

[data-theme='dark'] .floating-btn {
  background-color: color-mix(in srgb, var(--bg-card-primary) 92%, var(--gray-900));
  border-color: var(--gray-600);
}

[data-theme='dark'] .weather-widget {
  background-color: var(--ui-glass-bg);
  border-color: var(--gray-600);
}


/* Components - blocos reutilizáveis */

/* bundled: assets/css/components/property-card.css */
/* ==========================================================================
   PROPERTY CARD COMPONENT
   Card transversal para listagens, resultados de busca e coleções salvas.

   Contract:
   - `.property-card` é o bloco canônico
   - custom properties locais mantêm o componente configurável sem poluir
     `:root`
   - ações sobre a imagem devem permanecer acessíveis por teclado
   ========================================================================== */

/* ========== ESTRUTURA BASE DO CARD ========== */
.property-card {
  /*
   * Variáveis locais do bloco.
   * O componente usa tokens globais como fallback e evita poluir `:root`.
   */
  --property-card-image-height-sm: var(--property-image-height-sm);
  --property-card-image-height-md: 180px;
  --property-card-image-height-lg: var(--property-image-height-md);
  --property-card-image-height-xl: var(--property-image-height-lg);
  --property-card-image-height-md: 172px;
  --property-card-padding: var(--space-5);
  --property-card-gap: var(--space-3);
  --property-card-bg: var(--bg-card-primary);
  --property-card-border: var(--border-color);
  --property-card-shadow: var(--shadow-sm);
  --property-card-shadow-hover: var(--shadow-md);
  --property-card-transition: var(--transition-base);

  display: flex;
  flex-direction: column;
  background: var(--property-card-bg);
  border: 1px solid var(--property-card-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: var(--property-card-transition);
  box-shadow: var(--property-card-shadow);
  position: relative;
}

.property-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--property-card-shadow-hover);
  border-color: var(--primary-blue-overlay-base);
}

/* ========== CONTAINER DE IMAGEM ========== */

.property-card:hover .property-card__image {
  transform: scale(1.02);
}

/* Badge de preço sobre a imagem */

/* Botão de ação (favoritar) sobre a imagem */

/* Badge de status */

/* ========== CONTEÚDO DO CARD ========== */

/* Detalhes (quartos, banheiros, área) */

/* Descrição */

/* ========== FOOTER DO CARD (Ações) ========== */

.property-card__actions .btn--secondary,
.property-card__actions .btn--danger {
  flex: 1;
  min-width: auto;
  max-width: none;
  height: var(--size-button-sm);
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
}

/* ========== VARIANTES DO CARD ========== */

/* Compact */

/* Expanded */

/* Horizontal layout for dense/mobile contexts */

/* ========== LINK WRAPPER ========== */

/* ========== GRID DE CARDS ========== */

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {

}

@media (max-width: 480px) {

}

/* ========== TEMA ESCURO ========== */
[data-theme='dark'] .property-card {
  --card-bg: var(--bg-card-primary);
  --card-border: var(--border-color);
  --card-shadow: var(--shadow-sm);
}

/* ========== ESTADOS ESPECIAIS ========== */

/* Card com erro ou indisponível */

/* Card selecionado (para comparação, por exemplo) */

.property-card--return-focus,
.imovel-card--return-focus {
  border-color: color-mix(in srgb, var(--primary-blue) 70%, var(--border-color));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary-blue) 16%, transparent),
    var(--shadow-md);
}

/* ========== ALIASES DE TRANSICAO ========== */
/* Mantidos para markup existente durante a migracao para BEM. */

.item-card,
.imovel-card {
  /* Classes historicas redirecionam para .property-card */
  /* Usar .property-card em código novo */
}

/* Nota: Para migração completa, substituir:
   - .item-card, .item-img, .item-info → .property-card, .property-card__image, .property-card__content
   - .imovel-card, .card-image, .card-content → .property-card, .property-card__image, .property-card__content
*/


/* bundled: assets/css/components/aura.css */
/* =============================
   AURA CHAT
   Assistente flutuante com launcher, quick actions e composer contextual.
   ============================= */

/* ========== FLOATING BUTTON ========== */
#btn-aura.aura-floating-btn {
  width: 56px;
  height: 56px;
  min-width: var(--size-button-md);
  min-height: var(--size-button-md);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-full);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--primary-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  touch-action: none;
}

#btn-aura.aura-floating-btn .aura-floating-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 88%, transparent), color-mix(in srgb, var(--white) 64%, transparent)),
    color-mix(in srgb, var(--white) 36%, transparent);
  border: 1px solid color-mix(in srgb, var(--gray-400) 20%, transparent);
  box-shadow: var(--shadow-md);
}

#btn-aura.aura-floating-btn .aura-floating-icon img {
  width: 74%;
  height: 74%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  filter: saturate(1.02) contrast(1.02);
}

#btn-aura.aura-floating-btn .aura-floating-icon-fallback {
  display: none;
}

body.using-keyboard #btn-aura.aura-floating-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer #btn-aura.aura-floating-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

[data-theme='light'] #btn-aura.aura-floating-btn {
  color: color-mix(in srgb, var(--primary-blue) 88%, var(--gray-900));
}

[data-theme='dark'] #btn-aura.aura-floating-btn {
  color: var(--white);
}

[data-theme='dark'] #btn-aura.aura-floating-btn .aura-floating-icon img {
  filter: grayscale(1) brightness(3) contrast(1.04) drop-shadow(0 0 10px color-mix(in srgb, var(--white) 28%, transparent));
}

[data-theme='dark'] #btn-aura.aura-floating-btn .aura-floating-icon {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gray-800) 84%, transparent), color-mix(in srgb, var(--gray-700) 72%, transparent)),
    color-mix(in srgb, var(--white) 10%, transparent);
  border-color: color-mix(in srgb, var(--white) 14%, transparent);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--gray-900) 32%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent);
}

.aura-chat-container {
  position: fixed;
  bottom: calc(var(--space-8) + 60px);
  right: var(--space-8);
  width: 380px;
  max-width: calc(100dvw - (var(--space-8) * 2));
  height: 600px;
  max-height: calc(100dvh - 160px);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-aura-chat);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: var(--transition-slow);
  touch-action: none;
}

.aura-chat-container.aura-chat-container--mounted {
  display: flex;
}

.aura-chat-container[aria-hidden='true'],
.aura-chat-container.aura-chat-container--mounted[aria-hidden='true'] {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.aura-chat-container.aura-chat-container--visible,
.aura-chat-container[aria-hidden='false'] {
  display: flex;
  opacity: 1;
  visibility: visible;
  animation: none;
}

.aura-chat-header .loquei-icon,
.aura-send-btn .loquei-icon {
  --loquei-icon-size: 0.95rem;
}

/* ========== HEADER ========== */
.aura-chat-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 88%, var(--bg-card-primary)), color-mix(in srgb, var(--primary-blue-hover) 92%, var(--primary-blue)));
  color: var(--white);
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.aura-chat-header h3 {
  font: var(--font-title-tertiary);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  min-width: 0;
}

.aura-chat-header h3 i {
  font-size: var(--font-size-xl);
  color: var(--white);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--white) 50%, transparent));
}

.aura-chat-header h3::before {
  content: none;
}

.aura-safety-note {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--primary-blue) 5%, var(--bg-card-primary));
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.aura-safety-note p {
  margin: 0;
}

.aura-safety-note p + p {
  margin-top: var(--space-1);
}

.aura-safety-note a {
  color: var(--primary-blue);
  font-weight: var(--font-weight-semibold);
  text-underline-offset: 2px;
}

.aura-close-btn {
  width: 44px;
  height: 44px;
  background: var(--overlay-white-20);
  border: none;
  color: var(--white);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: var(--transition-fast);
  z-index: var(--z-aura-chat);
  position: relative;
  pointer-events: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.aura-close-btn:hover {
  background: var(--overlay-white-md);
  transform: translateY(-1px);
}

body.using-keyboard .aura-close-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

body.using-pointer .aura-close-btn:focus-visible {
  outline: none;
}

/* ========== MESSAGES AREA ========== */
.aura-messages {
  flex: 1;
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-chat);
  background-image:
    radial-gradient(circle at 25% 25%, var(--primary-blue-overlay-xxs) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, var(--primary-blue-overlay-xxs) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scroll-behavior: smooth;
}

.aura-messages::-webkit-scrollbar {
  width: 6px;
}

.aura-messages::-webkit-scrollbar-track {
  background: transparent;
}

.aura-messages::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.aura-messages::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ========== MESSAGE BUBBLES ========== */
.aura-message {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  animation: messageSlideIn 0.3s var(--ease-out);
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aura-message--user {
  justify-content: flex-end;
}

.aura-message--bot {
  justify-content: flex-start;
}

.aura-message-bubble {
  max-width: 75%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  font-family: var(--font-family-primary);
  word-wrap: break-word;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.aura-message-bubble:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.aura-message--user .aura-message-bubble {
  background: var(--primary-blue);
  color: var(--white);
  border-bottom-right-radius: var(--border-radius-sm);
}

.aura-message--bot .aura-message-bubble {
  background: var(--bg-card-primary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: var(--border-radius-sm);
}

.aura-message-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  text-align: right;
}

.aura-message--user .aura-message-time {
  color: var(--overlay-white-80);
}

/* ========== TYPING INDICATOR ========== */
.aura-typing-indicator {
  display: none;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  margin: 0 var(--space-5);
  max-width: 75px;
  box-shadow: var(--shadow-sm);
  animation: messageSlideIn 0.3s var(--ease-out);
}

.aura-typing-indicator.aura-typing-indicator--visible,
.aura-typing-indicator[aria-hidden='false'] {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
}

.aura-typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-full);
  background: var(--gray-400);
  animation: typing 1.4s ease-in-out infinite;
}

.aura-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.aura-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* ========== INPUT AREA ========== */
.aura-input-container {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card-primary);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

#aura-message-input {
  flex: 1;
  height: var(--space-11);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--input-border-color);
  border-radius: var(--border-radius-xl);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  transition: var(--transition-fast);
  outline: none;
}

#aura-message-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue-light);
}

#aura-message-input:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

#aura-message-input::placeholder {
  color: var(--gray-400);
}

.aura-send-btn {
  width: var(--size-button-md);
  height: var(--size-button-md);
  flex-shrink: 0;
  background: var(--primary-blue);
  border: none;
  color: var(--white);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.aura-send-btn:hover:not(:disabled) {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.aura-send-btn:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
  transform: none;
}

body.using-keyboard .aura-send-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .aura-send-btn:focus-visible {
  outline: none;
}

.aura-send-btn i {
  font-size: var(--font-size-base);
}

/* ========== EMPTY STATE ========== */

/* ========== QUICK ACTIONS ========== */

[data-theme='dark'] .aura-chat-container {
  background: color-mix(in srgb, var(--bg-card-primary) 95%, var(--gray-900));
  border-color: var(--gray-700);
}

body.using-keyboard .aura-quick-action:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .aura-quick-action:focus-visible {
  outline: none;
}

[data-theme='dark'] .aura-typing-indicator {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
  .aura-chat-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
    max-width: none;
    height: min(72dvh, calc(100dvh - 124px - env(safe-area-inset-top)));
    max-height: 520px;
  }

  .aura-message-bubble {
    max-width: 88%;
  }

  .aura-chat-header h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .aura-chat-container {
    bottom: max(8px, env(safe-area-inset-bottom));
    right: 8px;
    left: 8px;
    border-radius: 22px;
    height: min(66dvh, calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    max-height: 460px;
  }

  .aura-chat-header {
    padding: var(--space-3) var(--space-4);
    border-radius: 22px 22px 0 0;
  }

  .aura-chat-header h3 {
    font-size: var(--font-size-base);
  }

  .aura-messages {
    padding: var(--space-4);
    overscroll-behavior: contain;
  }

  .aura-input-container {
    padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
  }

  #aura-message-input {
    height: var(--size-button-md);
    font-size: var(--font-size-base);
  }

  .aura-send-btn {
    width: var(--size-button-md);
    height: var(--size-button-md);
  }
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  .aura-chat-container,
  .aura-message,
  .aura-send-btn {
    animation: none;
    transition: none;
  }

  .aura-chat-container.aura-chat-container--visible,
  .aura-chat-container[aria-hidden='false'] {
    transform: translateY(0) scale(1);
  }
}

/* ========== LOADING STATE ========== */
.aura-message-bubble.aura-message-bubble--loading {
  position: relative;
  overflow: hidden;
}

.aura-message-bubble.aura-message-bubble--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--overlay-white-20),
    transparent
  );
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}


/* bundled: assets/css/components/auth.css */
/* ==========================================================================
   AUTH SYSTEM
   Superfície de autenticação compartilhada entre página cheia e iframe.

   Escopo:
   - overlays e modal shells
   - tabs de autenticação
   - formulário e feedback da jornada auth

   Fora de escopo:
   - primitives base de botão e formulário
   - acessibilidade complementar, mantida em `auth-accessibility.css`
   ========================================================================== */

/* O namespace `auth-*` é preferido; aliases `.modal-*` permanecem para shells
   compartilhados montados fora da auth page. */


/* bundled: assets/css/components/auth-theme.css */
/* ==========================================================================
   AUTH THEME
   Tema escuro e ajustes visuais específicos do domínio de autenticação.
   ========================================================================== */

[data-theme='dark'] .modal-card,
[data-theme='dark'] .auth-card,
[data-theme='dark'] .auth-modal-frame {
  background: var(--bg-card-primary);
  box-shadow: 0 25px 50px -12px var(--overlay-black-md);
}

[data-theme='dark'] body.auth-page {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-blue) 12%, transparent) 0, transparent 34%),
    linear-gradient(180deg, var(--bg-body-primary) 0%, var(--bg-card-primary) 100%);
}

[data-theme='dark'] body.auth-page.in-iframe {
  background: transparent;
}

[data-theme='dark'] .auth-tabs {
  background: var(--bg-card-secondary);
}

[data-theme='dark'] .auth-tab.auth-tab--active,
[data-theme='dark'] .auth-tab[aria-selected='true'] {
  background: var(--bg-card-primary);
}

[data-theme='dark'] .form-checkbox .checkmark {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
}

[data-theme='dark'] .modal-close,
[data-theme='dark'] .auth-modal-close {
  background: var(--overlay-white-sm);
  border-color: color-mix(in srgb, var(--white) 12%, transparent);
  color: var(--gray-300);
}

[data-theme='dark'] .modal-close:hover,
[data-theme='dark'] .auth-modal-close:hover {
  background: var(--overlay-white-base);
}

[data-theme='dark'] :where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .form-select, .input-wrapper > input, .input-wrapper > select) {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme='dark'] :where(.modal-card, .auth-card, .auth-modal-frame) .auth-form-status--success {
  color: var(--accent-green);
  background: var(--accent-green-overlay-15);
  border-color: var(--accent-green-overlay-15);
}

[data-theme='dark'] :where(.modal-card, .auth-card, .auth-modal-frame) .auth-form-status--error {
  color: color-mix(in srgb, var(--secondary-red) 64%, var(--white));
  background: var(--secondary-red-overlay-15);
  border-color: var(--secondary-red-overlay-15);
}


/* bundled: assets/css/components/auth-accessibility.css */
/* ==========================================================================
   AUTH ACCESSIBILITY
   Overrides de acessibilidade e preferências de sistema.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .auth-overlay,
  .modal-card,
  .auth-modal-frame,
  .modal-close,
  .auth-modal-close {
    animation: none;
    transition: none;
  }

  :where(.modal-card, .auth-card, .auth-modal-frame) .btn--primary:hover,
  :where(.modal-card, .auth-card, .auth-modal-frame) .btn--secondary:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .modal-overlay,
  .auth-overlay {
    background: var(--overlay-black-90);
  }

  .modal-card,
  .auth-modal-frame {
    border: 2px solid currentColor;
  }
}

@media (forced-colors: active) {
  .modal-card,
  .auth-modal-frame {
    border: 2px solid currentColor;
  }

  :where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .form-select, .input-wrapper > input, .input-wrapper > select) {
    border: 1px solid currentColor;
  }

  :where(.modal-card, .auth-card, .auth-modal-frame) .btn {
    border: 2px solid currentColor;
  }
}


/* ========== MODAL OVERLAY ========== */
.modal-overlay,
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: var(--overlay-black-md);
  backdrop-filter: var(--backdrop-blur-md);
  -webkit-backdrop-filter: var(--backdrop-blur-md);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-base);
  touch-action: none;
}

.modal-overlay.modal-overlay--hidden,
.modal-overlay.hidden,
.modal-overlay[aria-hidden='true'] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-overlay.modal-overlay--visible,
.auth-overlay.modal-overlay--visible,
.modal-overlay[aria-hidden='false'],
.modal-overlay:not(.modal-overlay--hidden):not([aria-hidden='true']) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex;
  animation: fadeIn 0.4s var(--ease-out);
}

/* ========== AUTH PAGE SHELL ========== */
body.auth-page {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at top left, var(--primary-blue-overlay-xxs) 0, transparent 32%),
    linear-gradient(180deg, var(--bg-body-primary) 0%, var(--bg-card-secondary) 100%);
  color: var(--text-main);
}

body.auth-page.in-iframe {
  min-height: auto;
  background: transparent;
}

.auth-container {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--space-6))
    calc(env(safe-area-inset-right, 0px) + var(--space-4))
    calc(env(safe-area-inset-bottom, 0px) + var(--space-6))
    calc(env(safe-area-inset-left, 0px) + var(--space-4));
  box-sizing: border-box;
}

.auth-context {
  display: none;
}

@media (min-width: 1024px) {
  body.auth-page:not(.in-iframe) .auth-container {
    width: min(100%, 1180px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1fr);
    gap: clamp(var(--space-8), 6vw, var(--space-12));
    align-items: center;
  }

  body.auth-page:not(.in-iframe) .auth-context {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-6);
  }

  .auth-context__brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-main);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
  }

  .auth-context__brand img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    object-fit: cover;
  }

  .auth-context__copy {
    display: grid;
    gap: var(--space-3);
  }

  .auth-context__eyebrow {
    color: var(--primary-blue-hover);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .auth-context__copy h2 {
    max-width: 13ch;
    margin: 0;
    color: var(--text-main);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }

  .auth-context__copy > p:last-child,
  .auth-context__privacy {
    max-width: 52ch;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
  }

  .auth-context__benefits {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .auth-context__benefits li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-main);
  }

  .auth-context__benefit-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--primary-blue-hover);
    background: var(--primary-blue-overlay-xxs);
  }

  .auth-context__privacy {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
  }

  body.auth-page:not(.in-iframe) .auth-card {
    width: 100%;
    max-width: 620px;
    justify-self: end;
  }
}

body.auth-page.in-iframe .auth-container {
  min-height: auto;
  display: block;
  padding: 0;
}

.auth-card {
  width: min(100%, 720px);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

[data-theme='dark'] .auth-card {
  background: color-mix(in srgb, var(--bg-card-primary) 95%, var(--gray-900));
  border-color: var(--gray-700);
}

body.auth-page.in-iframe .auth-card {
  width: 100%;
  max-width: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-card-secondary) 86%, transparent);
}

.auth-tab {
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-secondary);
  font: var(--font-ui-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-tab:hover {
  color: var(--text-main);
  background: var(--bg-accent);
}

.auth-tab.auth-tab--active,
.auth-tab[aria-selected='true'] {
  color: var(--primary-blue);
  border-color: color-mix(in srgb, var(--primary-blue) 40%, var(--border-color));
  background: var(--bg-card-primary);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary-blue) 22%, transparent);
}

.auth-session-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-color);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-blue) 7%, transparent), transparent 72%),
    var(--bg-card-primary);
  box-shadow: var(--shadow-sm);
}

.auth-session-status__copy {
  min-width: 0;
}

.auth-session-status__copy strong {
  display: block;
  color: var(--text-main);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.auth-session-status__copy p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-wrap: balance;
}

.auth-session-status__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--border-radius-full);
  border: 1px solid color-mix(in srgb, var(--primary-blue) 18%, transparent);
  background: color-mix(in srgb, var(--primary-blue) 10%, var(--bg-card-primary));
  color: var(--primary-blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.auth-session-status[data-state='submitting'] .auth-session-status__badge {
  border-color: color-mix(in srgb, var(--warning) 18%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card-primary));
  color: var(--warning);
}

.auth-session-status[data-state='error'] .auth-session-status__badge {
  border-color: color-mix(in srgb, var(--secondary-red) 18%, transparent);
  background: color-mix(in srgb, var(--secondary-red) 10%, var(--bg-card-primary));
  color: var(--secondary-red);
}

.auth-session-status[data-state='success'] .auth-session-status__badge {
  border-color: color-mix(in srgb, var(--accent-green) 18%, transparent);
  background: color-mix(in srgb, var(--accent-green) 10%, var(--bg-card-primary));
  color: var(--accent-green);
}

body.using-keyboard .auth-tab:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

body.using-pointer .auth-tab:focus-visible {
  outline: none;
}

.auth-content {
  padding: var(--space-7);
}

body.auth-page.in-iframe .auth-content {
  padding: clamp(28px, 4vw, 40px);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  text-align: center;
  align-items: center;
}

.auth-header h2 {
  margin: 0;
  font: var(--font-title-primary);
  color: var(--text-main);
  text-align: center;
  max-width: 18ch;
}

.auth-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  text-align: center;
  max-width: 52ch;
  text-wrap: balance;
}

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

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

/* ========== TYPE SELECT (registro) ========== */
.auth-type-select-wrapper .auth-type-select-icon {
  transition: color 0.15s ease;
}

.auth-type-select-wrapper.has-value .auth-type-select-icon {
  color: var(--primary-blue);
}

.auth-type-select {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 44px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  background-color: var(--white);
  color: var(--text-main);
  font: var(--font-ui-secondary);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

.auth-type-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px var(--primary-blue-overlay-xs);
}

.auth-type-select:hover:not(:focus) {
  border-color: var(--gray-400);
}

[data-theme='dark'] .auth-type-select {
  background-color: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--text-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

.form-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
  margin-bottom: var(--space-5);
}

.auth-back-action {
  justify-content: center;
  margin-top: var(--space-4);
}

.auth-link {
  color: var(--primary-blue);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-fast);
}

.auth-link:hover {
  color: var(--primary-blue-hover);
  text-decoration: underline;
}

.auth-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.terms-group {
  margin-bottom: var(--space-6);
}

.terms-group .auth-link {
  display: inline;
}

.form-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text-main);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.form-checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-checkbox .checkmark {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 1.5px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  position: relative;
  transition: var(--transition-fast);
}

.form-checkbox input[type='checkbox']:checked + .checkmark {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

.form-checkbox input[type='checkbox']:checked + .checkmark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox input[type='checkbox']:focus-visible + .checkmark {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: var(--backdrop-blur-md);
  }
}

/* ========== MODAL CARD ========== */
.modal-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-2xl);
  border: var(--glass-border);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.98) translateY(10px);
  transition: var(--transition-smooth);
  padding: var(--space-10) var(--space-8);
  box-sizing: border-box;
}

.auth-modal-frame {
  background: var(--bg-card-primary);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-2xl);
  border: var(--glass-border);
  width: min(calc(100vw - clamp(32px, 5vw, 80px)), 720px);
  height: min(780px, calc(100dvh - clamp(40px, 7vh, 96px)));
  max-width: 720px;
  max-height: calc(100dvh - clamp(40px, 7vh, 96px));
  overflow: hidden;
  position: relative;
  transform: scale(0.98) translateY(10px);
  transition: var(--transition-smooth);
  padding: 0;
  box-sizing: border-box;
}

.auth-modal-frame::before,
.auth-modal-frame::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.auth-modal-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card-primary) 94%, transparent), color-mix(in srgb, var(--bg-card-secondary) 88%, transparent)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-blue) 14%, transparent), transparent 42%);
  z-index: 1;
}

.auth-modal-frame::after {
  content: 'Abrindo acesso…';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 164px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card-primary) 94%, transparent);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  z-index: 2;
}

.auth-overlay.auth-overlay--loading .auth-modal-frame::before,
.auth-overlay.auth-overlay--loading .auth-modal-frame::after {
  opacity: 1;
}

.auth-overlay.auth-overlay--loading iframe.iframe-full {
  opacity: 0.4;
  transform: scale(0.995);
  filter: saturate(0.9);
}

#modal-login .modal-card {
  max-width: 480px;
  max-height: min(768px, 90dvh);
}

.modal-overlay.modal-overlay--visible .modal-card,
.auth-overlay.modal-overlay--visible .auth-modal-frame,
.modal-overlay[aria-hidden='false'] .modal-card,
.modal-overlay:not(.modal-overlay--hidden):not([aria-hidden='true']) .modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
  animation: modalSlideUp 0.5s var(--ease-bounce);
}

@keyframes modalSlideUp {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(60px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02) translateY(-10px);
  }
  80% {
    opacity: 1;
    transform: scale(0.99) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-card::-webkit-scrollbar {
  width: 8px;
}

.modal-card::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.modal-card::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

/* ========== MODAL HEADER ========== */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.modal-title {
  font: var(--font-title-primary);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--text-main);
  margin: 0;
  text-align: center;
  width: 100%;
}

.modal-close,
.auth-modal-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
  right: calc(env(safe-area-inset-right, 0px) + var(--space-4));
  width: var(--size-button-md);
  height: var(--size-button-md);
  min-width: var(--size-button-md);
  min-height: var(--size-button-md);
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: 999px;
  background: var(--bg-card-secondary);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 0;
  font-size: 0;
  line-height: 1;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

.modal-close::before,
.auth-modal-close::before {
  content: '×';
  display: block;
  font-size: var(--font-size-2xl);
  line-height: 1;
  font-weight: 300;
  color: currentColor;
  transform: translateY(-1px);
  pointer-events: none;
}

.modal-close:hover,
.auth-modal-close:hover {
  background: var(--bg-accent);
  border-color: color-mix(in srgb, var(--primary-blue) 36%, var(--border-color));
  color: var(--text-main);
  transform: scale(1.1);
}

.modal-close:active,
.auth-modal-close:active {
  transform: scale(0.95);
}

.modal-close:focus-visible,
.auth-modal-close:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* ========== MODAL BODY ========== */
.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.modal-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  line-height: var(--line-height-relaxed);
}

/* ========== FORM GROUPS ========== */
:where(.modal-card, .auth-card, .auth-modal-frame) .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-group.hidden {
  display: none;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  :where(.modal-card, .auth-card, .auth-modal-frame) .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  font-family: var(--font-family-primary);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-label--required::after {
  content: '*';
  color: var(--secondary-red);
  margin-left: var(--space-1);
}

:where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .form-select, .input-wrapper > input, .input-wrapper > select) {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--text-main);
  font: var(--font-ui-secondary);
  line-height: 1.2;
  text-align: left;
  transition: var(--transition-fast);
  outline: none;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .input-wrapper > input {
  padding-left: 44px;
  padding-right: var(--space-4);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .input-wrapper--password > input {
  padding-right: 44px;
}

:where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .form-select, .input-wrapper > input, .input-wrapper > select):focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px var(--primary-blue-overlay-xs);
  transform: translateY(-0.5px);
}

:where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .form-select, .input-wrapper > input, .input-wrapper > select):hover {
  border-color: var(--gray-400);
}

:where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .form-select, .input-wrapper > input, .input-wrapper > select):focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

:where(.modal-card, .auth-card, .auth-modal-frame) :is(.form-input, .input-wrapper > input)::placeholder {
  color: var(--gray-400);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-input--error,
:where(.modal-card, .auth-card, .auth-modal-frame) .form-select--error {
  border-color: var(--secondary-red);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-input--error:focus,
:where(.modal-card, .auth-card, .auth-modal-frame) .form-select--error:focus {
  box-shadow: 0 0 0 3px var(--secondary-red-light);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-error {
  font-size: var(--font-size-xs);
  color: var(--secondary-red);
  margin-top: calc(var(--space-1) * -1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-medium);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .form-error i {
  font-size: var(--font-size-xs);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-form-status {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  border: 1px solid transparent;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-form-status--info {
  color: var(--text-main);
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-form-status--success {
  color: var(--accent-green-hover);
  background: var(--accent-green-overlay-05);
  border-color: var(--accent-green-overlay-15);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-form-status--error {
  color: var(--secondary-red-hover);
  background: var(--secondary-red-overlay-05);
  border-color: var(--secondary-red-overlay-15);
}

/* ========== PASSWORD INPUT ========== */
:where(.modal-card, .auth-card, .auth-modal-frame) .password-input-wrapper,
:where(.modal-card, .auth-card, .auth-modal-frame) .input-wrapper {
  position: relative;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .input-wrapper > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  --loquei-icon-size: 1rem;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .password-toggle,
:where(.modal-card, .auth-card, .auth-modal-frame) .btn-toggle-password {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: var(--size-button-md);
  height: var(--size-button-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--border-radius-full);
  transition: color var(--transition-fast);
  z-index: 2;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .password-toggle:hover,
:where(.modal-card, .auth-card, .auth-modal-frame) .btn-toggle-password:hover {
  background: color-mix(in srgb, var(--primary-blue) 10%, transparent);
  color: var(--primary-blue);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .password-toggle:focus-visible,
:where(.modal-card, .auth-card, .auth-modal-frame) .btn-toggle-password:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn-toggle-password i {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: none;
  --loquei-icon-size: 0.95rem;
}

/* ========== BUTTONS ========== */
:where(.modal-card, .auth-card, .auth-modal-frame) .btn {
  width: 100%;
  max-width: none;
  height: 48px;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font: var(--font-ui-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-submit-btn {
  margin-top: var(--space-2);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-submit-btn .loquei-icon {
  --loquei-icon-size: 1rem;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn--primary {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn--primary:hover:not(:disabled) {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue-lg);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn--primary:active {
  transform: translateY(0);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn--secondary {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .btn--secondary:hover:not(:disabled) {
  background: var(--bg-accent);
  border-color: var(--primary-blue);
}

/* ========== DIVIDER ========== */
:where(.modal-card, .auth-card, .auth-modal-frame) .auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-divider::before,
:where(.modal-card, .auth-card, .auth-modal-frame) .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .auth-divider span {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========== FOOTER ========== */
:where(.modal-card, .auth-card, .auth-modal-frame) .modal-footer,
:where(.modal-card, .auth-card, .auth-modal-frame) .auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .modal-footer a,
:where(.modal-card, .auth-card, .auth-modal-frame) .auth-footer a {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-fast);
}

:where(.modal-card, .auth-card, .auth-modal-frame) .modal-footer a:hover,
:where(.modal-card, .auth-card, .auth-modal-frame) .auth-footer a:hover {
  text-decoration: underline;
  color: var(--primary-blue-hover);
}

/* ========== IFRAME ========== */
.auth-modal-frame.iframe-full,
iframe.iframe-full {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 480px) {
  .auth-container {
    padding:
      calc(env(safe-area-inset-top, 0px) + var(--space-4))
      calc(env(safe-area-inset-right, 0px) + var(--space-3))
      calc(env(safe-area-inset-bottom, 0px) + var(--space-4))
      calc(env(safe-area-inset-left, 0px) + var(--space-3));
  }

  .auth-card {
    border-radius: var(--border-radius-xl);
  }

  .auth-content {
    padding: var(--space-5);
  }

  .auth-session-status {
    margin: var(--space-3) var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    flex-direction: column;
    align-items: stretch;
  }

  .auth-session-status__badge {
    width: 100%;
  }

  body.auth-page.in-iframe .auth-content {
    padding:
      calc(env(safe-area-inset-top, 0px) + var(--space-6))
      var(--space-4)
      calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  }

  .auth-header h2 {
    max-width: none;
    font-size: clamp(1.55rem, 6vw, 1.9rem);
  }

  .auth-header p {
    max-width: none;
  }

  .form-footer-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .form-checkbox {
    justify-content: center;
  }

  .auth-submit-btn {
    margin-top: var(--space-1);
  }

  .auth-tabs {
    padding: var(--space-2) var(--space-2) 0;
  }

  .modal-card,
  .auth-modal-frame {
    padding: var(--space-6);
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .auth-modal-frame {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    padding: 0;
  }

  .auth-modal-frame.iframe-full,
  iframe.iframe-full {
    height: 100%;
  }

  .modal-overlay,
  .auth-overlay {
    padding: 0;
  }

  .modal-close,
  .auth-modal-close {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .modal-card {
    max-width: 500px;
    max-height: 700px;
  }

  .auth-modal-frame {
    width: min(calc(100vw - 32px), 680px);
    height: min(760px, calc(100dvh - 40px));
    max-width: 680px;
    max-height: calc(100dvh - 40px);
  }

  body.auth-page.in-iframe .auth-content {
    padding: clamp(24px, 4vw, 32px);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .modal-card,
  .auth-modal-frame {
    max-height: 90vh;
    height: 90vh;
  }

  .modal-overlay,
  .auth-overlay {
    padding: var(--space-2);
  }
}


/* bundled: assets/css/components/auth-accessibility.css */


/* bundled: assets/css/components/avatar-upload.css */
/* ==========================================================================
   AVATAR UPLOAD COMPONENT
   Fluxo completo de upload, preview e recorte do avatar do usuário.

   Contract:
   - `.avatar-upload-container` é o wrapper principal do módulo
   - superfícies de crop reutilizam a semântica global de modal
   - ações precisam continuar clicáveis por mouse e teclado
   ========================================================================== */

/* ========== CONTAINER PRINCIPAL ========== */
.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: 400px;
  margin: var(--space-lg) auto;
}

/* Seção de preview (layout horizontal) */
.avatar-preview-section {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  width: 100%;
}

/* Preview do avatar */
.avatar-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--border-radius-full);
  overflow: hidden;
  background: var(--bg-card-secondary);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-blue);
  transition: var(--transition-base);
  flex-shrink: 0;
}

.avatar-preview:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-blue-lg);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-tertiary);
}

.avatar-placeholder i {
  font-size: 2rem;
  margin-bottom: var(--space-1);
}

.avatar-text {
  font-size: var(--font-size-xs);
  text-align: center;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-black-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-upload-btn {
  background: var(--glass-bg-solid);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-main);
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.avatar-upload-btn:hover {
  background: var(--card-bg, var(--bg-card-primary, white));
  transform: scale(1.05);
}

.avatar-upload-btn:focus-visible,
.avatar-remove-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.avatar-info {
  flex: 1;
}

.avatar-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.avatar-description {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.avatar-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--secondary-red);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.avatar-remove-btn:hover {
  background: var(--secondary-red-hover);
  transform: scale(1.05);
}

.avatar-input-hidden {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Modal de Crop */
.avatar-crop-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.avatar-crop-modal.avatar-crop-modal--mounted {
  display: flex;
}

.avatar-crop-modal.avatar-crop-modal--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.crop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-black-xl);
  backdrop-filter: var(--backdrop-blur-sm);
}

.crop-container {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2xl);
  border: var(--glass-border);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
}

.avatar-crop-modal--visible .crop-container {
  transform: translateY(0) scale(1);
}

.crop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--border-color);
}

.crop-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.crop-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}

.crop-close:hover {
  background: var(--bg-card-secondary);
  color: var(--text-main);
}

.crop-content {
  padding: var(--space-6);
}

.crop-preview {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.crop-canvas {
  border: var(--border-width-1) solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: crosshair;
}

.crop-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.crop-zoom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.crop-zoom label {
  font-size: var(--font-size-sm);
  color: var(--text-main);
  min-width: 50px;
}

.crop-zoom input[type='range'] {
  flex: 1;
  height: 6px;
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-sm);
  outline: none;
}

.crop-zoom input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
}

.crop-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.crop-cancel-btn,
.crop-confirm-btn {
  padding: var(--space-2) var(--space-6);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-base);
}

.crop-cancel-btn {
  background: var(--text-secondary);
  color: var(--white);
}

.crop-cancel-btn:hover {
  background: color-mix(in srgb, var(--text-secondary) 85%, black);
  transform: scale(1.05);
}

.crop-confirm-btn {
  background: var(--primary-blue);
  color: var(--white);
}

.crop-confirm-btn:hover {
  background: var(--primary-blue-hover);
  transform: scale(1.05);
}

/* Modal de Preview */
.avatar-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.avatar-preview-modal.avatar-preview-modal--mounted {
  display: flex;
}

.avatar-preview-modal.avatar-preview-modal--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-black-xl);
  backdrop-filter: var(--backdrop-blur-sm);
}

.preview-container {
  position: relative;
  background: var(--bg-card-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
}

.avatar-preview-modal--visible .preview-container {
  transform: translateY(0) scale(1);
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--border-color);
}

.preview-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.preview-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-base);
}

.preview-close:hover {
  background: var(--bg-card-secondary);
  color: var(--text-main);
}

.preview-content {
  padding: var(--space-6);
}

.preview-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-6);
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.preview-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.preview-actions {
  display: flex;
  gap: var(--space-3);
}

.preview-crop-btn,
.preview-confirm-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-base);
}

.preview-crop-btn {
  background: var(--text-secondary);
  color: var(--white);
}

.preview-crop-btn:hover {
  background: color-mix(in srgb, var(--text-secondary) 85%, black);
  transform: scale(1.05);
}

.preview-confirm-btn {
  background: var(--primary-blue);
  color: var(--white);
}

.preview-confirm-btn:hover {
  background: var(--primary-blue-hover);
  transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 768px) {
  .avatar-preview-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .avatar-preview {
    width: 100px;
    height: 100px;
  }

  .crop-container,
  .preview-container {
    max-width: 95%;
    margin: var(--space-2);
  }

  .crop-actions,
  .preview-actions {
    flex-direction: column;
  }
}

/* Tema escuro */
[data-theme='dark'] .avatar-preview {
  background: var(--bg-card-secondary);
  border-color: var(--gray-600);
}

[data-theme='dark'] .avatar-preview:hover {
  border-color: var(--primary-blue);
}

[data-theme='dark'] .avatar-title {
  color: var(--text-main);
}

[data-theme='dark'] .avatar-description {
  color: var(--text-secondary);
}

[data-theme='dark'] .crop-container,
[data-theme='dark'] .preview-container {
  background: var(--bg-card-primary);
}

[data-theme='dark'] .crop-header,
[data-theme='dark'] .preview-header {
  border-bottom-color: var(--gray-600);
}

[data-theme='dark'] .crop-title,
[data-theme='dark'] .preview-title {
  color: var(--text-main);
}

[data-theme='dark'] .crop-close,
[data-theme='dark'] .preview-close {
  color: var(--text-secondary);
}

[data-theme='dark'] .crop-close:hover,
[data-theme='dark'] .preview-close:hover {
  background: var(--bg-hover-dark);
  color: var(--text-main);
}

[data-theme='dark'] .crop-canvas {
  border-color: var(--gray-600);
}

[data-theme='dark'] .crop-zoom label {
  color: var(--text-main);
}

[data-theme='dark'] .preview-details {
  color: var(--text-secondary);
}

[data-theme='dark'] .avatar-upload-btn {
  color: var(--text-main);
}

[data-theme='dark'] .avatar-placeholder {
  color: var(--text-secondary);
}


/* bundled: assets/css/components/calendar.css */
/* ==========================================================================
   CALENDAR COMPONENT
   Fachada do domínio de calendário.

   Contract:
   - `calendar-widget.css` concentra shell e interação visual do widget
   - `calendar-modal.css` concentra overlays e detalhes dos modais
   - `calendar-theme.css` concentra a camada de tema
   ========================================================================== */


/* bundled: assets/css/components/calendar-widget.css */
/* ==========================================================================
   CALENDAR WIDGET
   Shell visual do widget de calendário.
   ========================================================================== */

.calendar-widget-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-black-50);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-widget-container.hidden,
.calendar-widget-container.is-hidden,
.calendar-widget-container[hidden] {
  display: none;
}

.calendar-widget {
  background: var(--bg-card-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border: var(--border-light);
  transition: var(--transition-base);
  animation: calendar-fadeInUp 0.6s ease-out;
}

.calendar-widget.popup-mode {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--primary-blue) 36%, var(--border-color));
  margin: 0;
}

.calendar-widget.popup-mode .widget-header {
  background: var(--primary-blue);
  color: var(--white);
  padding: var(--space-4);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.calendar-widget.popup-mode .close-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--white);
  color: var(--primary-blue);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
}

.calendar-widget.popup-mode .close-btn:hover {
  background: var(--primary-blue-light);
  color: var(--white);
}

.calendar-widget:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.calendar-widget .widget-header {
  background: var(--bg-card-secondary);
  padding: var(--space-6);
  text-align: center;
  border-bottom: var(--border-light);
  position: relative;
  overflow: hidden;
}

.calendar-widget .widget-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
}

.calendar-widget .widget-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
  margin-bottom: var(--space-3);
  letter-spacing: -0.5px;
  position: relative;
}

.calendar-widget .widget-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
  border-radius: 1px;
}

.calendar-widget .month-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.calendar-widget .nav-btn {
  background: var(--card-bg, var(--bg-card-primary));
  border: 2px solid var(--gray-200);
  border-radius: var(--border-radius-md);
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-normal);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  user-select: none;
  position: relative;
  overflow: hidden;
  line-height: 1;
  box-sizing: border-box;
}

.calendar-widget .nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--overlay-white-md), transparent);
  transition: left var(--transition-slow);
}

.calendar-widget .nav-btn:hover {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-primary);
}

.calendar-widget .nav-btn:hover::before {
  left: 100%;
}

.calendar-widget .nav-btn:active {
  transform: translateY(-1px) scale(1.02);
}

.calendar-widget .nav-btn:focus,
.calendar-widget .add-btn:focus {
  outline: var(--border-width-2) solid var(--primary-blue);
  outline-offset: var(--space-1);
}

.calendar-widget .current-month {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
  flex: 1;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px var(--overlay-black-sm);
}

.calendar-widget .add-btn {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-md);
  padding: var(--space-2) 16px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-normal);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.calendar-widget .add-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--overlay-white-20), transparent);
  transition: left var(--transition-slow);
}

.calendar-widget .add-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-primary);
  background: linear-gradient(135deg, var(--primary-blue-dark), var(--primary-blue-darker));
}

.calendar-widget .add-btn:hover::before {
  left: 100%;
}

.calendar-widget .add-btn:active {
  transform: translateY(-1px);
}

.calendar-widget .calendar-container {
  padding: var(--space-3) 16px;
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
}

.calendar-widget .weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}

.calendar-widget .weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  padding: var(--space-2) 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  position: relative;
}

.calendar-widget .weekday::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 1px;
  background: var(--gray-300);
  border-radius: 1px;
}

.calendar-widget .days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: var(--gray-100);
  border-radius: var(--border-radius-lg);
  padding: var(--space-1);
  box-shadow: inset 0 2px 4px var(--overlay-black-xs);
}

.calendar-widget .day-cell {
  background: var(--card-bg, var(--bg-card-primary));
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-1) 3px;
  cursor: pointer;
  transition: var(--transition-normal);
  position: relative;
  border-radius: var(--border-radius-sm);
  user-select: none;
  border: 2px solid transparent;
}

.calendar-widget .day-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-blue-light), var(--primary-blue-lighter));
  opacity: 0;
  transition: opacity var(--transition-normal);
  border-radius: var(--border-radius-sm);
}

.calendar-widget .day-cell:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-blue);
}

.calendar-widget .day-cell:hover::before {
  opacity: 1;
}

.calendar-widget .day-cell.other-month {
  color: var(--gray-400);
  background: var(--gray-50);
}

.calendar-widget .day-cell.other-month:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-sm);
}

.calendar-widget .day-cell.today {
  background: linear-gradient(135deg, var(--primary-blue-light), var(--primary-blue-lighter));
  font-weight: var(--font-weight-bold);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
}

.calendar-widget .day-cell.today::before {
  opacity: 0.5;
}

.calendar-widget .day-cell.is-selected,
.calendar-widget .day-cell[aria-selected='true'] {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  color: var(--white);
  transform: scale(1.08);
  box-shadow: var(--shadow-primary);
  border-color: var(--primary-blue-dark);
}

.calendar-widget .day-cell.is-selected::before,
.calendar-widget .day-cell[aria-selected='true']::before {
  opacity: 0;
}

.calendar-widget .day-number {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: 2px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.calendar-widget .day-cell.today .day-number {
  animation: calendar-pulse 2s infinite;
}

.calendar-widget .appointment-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  align-items: center;
  min-height: 10px;
  position: relative;
  z-index: 1;
}

.calendar-widget .appointment-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 2px var(--overlay-black-20);
  transition: transform var(--transition-fast);
}

.calendar-widget .appointment-dot:hover {
  transform: scale(1.3);
}

.calendar-widget .dot-pendente {
  background: linear-gradient(135deg, var(--status-pending), var(--warning));
}

.calendar-widget .dot-confirmado {
  background: linear-gradient(135deg, var(--status-confirmed), var(--accent-green));
}

.calendar-widget .dot-cancelado {
  background: linear-gradient(135deg, var(--status-cancelled), var(--secondary-red));
}

.calendar-widget .dot-realizado {
  background: linear-gradient(135deg, var(--status-completed), var(--gray-500));
}

.calendar-widget .appointment-count {
  font-size: var(--font-size-2xs);
  background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
  color: var(--white);
  border-radius: var(--border-radius-md);
  padding: 2px 5px;
  margin-top: 2px;
  min-width: 14px;
  text-align: center;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.calendar-widget .quick-stats {
  display: flex;
  justify-content: space-around;
  padding: var(--space-3) 16px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  border-top: 1px solid var(--gray-200);
  font-size: var(--font-size-xs);
  position: relative;
}

.calendar-widget .quick-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.calendar-widget .stat-item {
  text-align: center;
  flex: 1;
  position: relative;
  transition: transform var(--transition-normal);
}

.calendar-widget .stat-item:hover {
  transform: translateY(-2px);
}

.calendar-widget .stat-number {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--gray-800);
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px var(--overlay-black-sm);
}

.calendar-widget .stat-label {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: var(--font-size-2xs);
}

.calendar-widget .calendar-widget__loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-white-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-panel);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.calendar-widget .calendar-widget__loading-overlay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.calendar-widget .calendar-widget__loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--gray-200);
  border-top: 3px solid var(--primary-blue);
  border-radius: 50%;
  animation: calendar-spin 1s linear infinite;
}

@keyframes calendar-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes calendar-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes calendar-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media (max-width: 768px) {
  .calendar-widget {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
  }

  .calendar-widget .day-cell {
    min-height: 38px;
  }

  .calendar-widget .widget-header {
    padding: 14px 18px;
  }

  .calendar-widget .nav-btn {
    width: 44px;
    height: 44px;
  }

  .calendar-widget .add-btn {
    padding: var(--space-2) 14px;
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .calendar-widget .quick-stats {
    padding: 10px 12px;
  }

  .calendar-widget .stat-number {
    font-size: var(--font-size-sm);
  }

  .calendar-widget .widget-title {
    font-size: var(--font-size-base);
  }

  .calendar-widget .current-month {
    font-size: var(--font-size-md);
  }

  .calendar-widget .day-cell {
    min-height: 36px;
    padding: 3px 2px;
  }

  .calendar-widget .day-number {
    font-size: var(--font-size-xs);
  }

  .calendar-widget .appointment-dot {
    width: 4px;
    height: 4px;
  }

  .calendar-widget .widget-header {
    padding: var(--space-3) 16px;
  }

  .calendar-widget .calendar-container {
    padding: var(--space-2) 12px;
  }
}
/* Appointment list refinements for generated calendar day content */
.appointment-list-empty {
  margin: 0;
  padding: var(--space-5);
  color: var(--text-secondary);
  text-align: center;
}

.appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}


/* bundled: assets/css/components/calendar-modal.css */
/* ==========================================================================
   CALENDAR MODAL
   Overlays, diálogo e lista de agendamentos do calendário.
   ========================================================================== */

.calendar-modal-overlay {
  display: none;
  position: fixed;
  z-index: var(--z-toast);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-black-60);
  backdrop-filter: var(--blur-medium);
  -webkit-backdrop-filter: var(--blur-medium);
  font-family: var(--font-system);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-modal-overlay.calendar-modal-overlay--mounted {
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-modal-overlay.calendar-modal-overlay--visible,
.calendar-modal-overlay[aria-hidden='false'] {
  opacity: 1;
}

.calendar-modal-overlay .modal-content {
  background: var(--card-bg, var(--bg-card-primary, white));
  border-radius: var(--border-radius-xl);
  width: 90%;
  max-width: 540px;
  min-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  transform: translateY(30px) scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: var(--border-width-1) solid var(--border-color);
}

.calendar-modal-overlay.calendar-modal-overlay--visible .modal-content,
.calendar-modal-overlay[aria-hidden='false'] .modal-content {
  transform: translateY(0) scale(1);
}

.calendar-modal-overlay .modal-header {
  background: linear-gradient(135deg, var(--bg-card-secondary) 0%, var(--bg-accent) 100%);
  padding: 28px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.calendar-modal-overlay .modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
}

.calendar-modal-overlay .modal-title {
  font-size: var(--font-size-6xl);
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.5px;
}

.calendar-modal-overlay .close-btn,
.calendar-modal-overlay .close-button {
  background: none;
  border: none;
  font-size: var(--font-size-7xl);
  cursor: pointer;
  color: var(--text-tertiary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.calendar-modal-overlay .close-btn::before,
.calendar-modal-overlay .close-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-accent);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
}

.calendar-modal-overlay .close-btn:hover,
.calendar-modal-overlay .close-button:hover {
  color: var(--text-secondary);
  transform: scale(1.1);
}

.calendar-modal-overlay .close-btn:hover::before,
.calendar-modal-overlay .close-button:hover::before {
  opacity: 1;
}

.calendar-modal-overlay .modal-body {
  padding: 28px;
  max-height: 60vh;
  overflow-y: auto;
}

.calendar-modal-overlay .modal-body::-webkit-scrollbar {
  width: 6px;
}

.calendar-modal-overlay .modal-body::-webkit-scrollbar-track {
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-xs);
}

.calendar-modal-overlay .modal-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--border-radius-xs);
}

.calendar-modal-overlay .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

.calendar-modal-overlay .form-textarea {
  min-height: 100px;
}

.calendar-modal-overlay .modal-footer {
  padding: 28px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  background: linear-gradient(135deg, var(--bg-card-secondary) 0%, var(--bg-accent) 100%);
}

.calendar-modal-overlay .btn {
  padding: var(--space-4) 32px;
  border: none;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  font-size: var(--font-size-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.2px;
  user-select: none;
  position: relative;
  overflow: hidden;
  min-width: 120px;
}

.calendar-modal-overlay .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--overlay-white-20), transparent);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-modal-overlay .btn--secondary {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border: 2px solid var(--border-color);
}

.calendar-modal-overlay .btn--secondary:hover {
  background: var(--bg-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--overlay-black-sm);
  border-color: var(--border-color);
}

.calendar-modal-overlay .btn--secondary:hover::before {
  left: 100%;
}

.calendar-modal-overlay .btn--primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  color: var(--white);
  border: 2px solid transparent;
  box-shadow: 0 4px 12px var(--overlay-black-sm);
}

.calendar-modal-overlay .btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-blue-xl);
  background: linear-gradient(135deg, var(--primary-blue-dark), var(--primary-blue-dark));
}

.calendar-modal-overlay .btn--primary:hover::before {
  left: 100%;
}

.calendar-modal-overlay .btn:active {
  transform: translateY(-1px);
}

.calendar-modal-overlay .btn:focus,
.calendar-modal-overlay .form-input:focus,
.calendar-modal-overlay .close-btn:focus,
.calendar-modal-overlay .close-button:focus {
  outline: var(--border-width-2) solid var(--primary-blue);
  outline-offset: var(--space-1);
}

.calendar-modal-overlay .appointment-list {
  max-height: 340px;
  overflow-y: auto;
  margin-top: 20px;
}

.calendar-modal-overlay .appointment-item {
  background: linear-gradient(135deg, var(--bg-card-secondary) 0%, var(--bg-card-primary) 100%);
  border-radius: var(--border-radius-xl);
  padding: var(--space-5);
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.calendar-modal-overlay .appointment-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-modal-overlay .appointment-item:hover {
  background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-card-secondary) 100%);
  transform: translateX(8px);
  border-color: var(--primary-blue);
  box-shadow: 0 4px 12px var(--overlay-black-sm);
}

.calendar-modal-overlay .appointment-item:hover::before {
  transform: scaleY(1);
}

.calendar-modal-overlay .appointment-time {
  font-weight: 700;
  color: var(--text-main);
  font-size: var(--font-size-lg);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
}

.calendar-modal-overlay .appointment-client {
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  margin-bottom: 10px;
  font-weight: 500;
}

.calendar-modal-overlay .appointment-notes {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-style: italic;
  line-height: 1.5;
}

.calendar-modal-overlay .status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 2px 4px var(--overlay-black-20);
}

@media (max-width: 768px) {
  .calendar-modal-overlay .modal-content {
    width: min(100%, calc(100vw - 24px));
    min-width: 0;
    margin: 12px;
    border-radius: var(--border-radius-xl);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .calendar-modal-overlay .modal-header,
  .calendar-modal-overlay .modal-body,
  .calendar-modal-overlay .modal-footer {
    padding: var(--space-6);
  }
}

@media (max-width: 480px) {
  .calendar-modal-overlay .modal-content {
    width: min(100%, calc(100vw - 16px));
    margin: 8px;
    min-width: 0;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .calendar-modal-overlay .modal-footer {
    flex-direction: column;
  }

  .calendar-modal-overlay .btn {
    width: 100%;
    min-width: auto;
  }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme='dark'] .calendar-modal-overlay .modal-content {
  background: var(--bg-card-primary);
  border-color: var(--border-color);
}

[data-theme='dark'] .calendar-modal-overlay .modal-header {
  background: linear-gradient(135deg, var(--bg-card-secondary) 0%, var(--bg-accent) 100%);
  border-bottom-color: var(--border-color);
}

[data-theme='dark'] .calendar-modal-overlay .modal-footer {
  background: linear-gradient(135deg, var(--bg-card-secondary) 0%, var(--bg-accent) 100%);
  border-top-color: var(--border-color);
}

[data-theme='dark'] .calendar-modal-overlay .appointment-item {
  background: linear-gradient(135deg, var(--bg-card-secondary) 0%, var(--bg-card-primary) 100%);
  border-color: var(--border-color);
}

[data-theme='dark'] .calendar-modal-overlay .appointment-item:hover {
  background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-card-secondary) 100%);
}

[data-theme='dark'] .calendar-modal-overlay .btn--secondary {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme='dark'] .calendar-modal-overlay .btn--secondary:hover {
  background: var(--bg-accent);
}


/* bundled: assets/css/components/calendar-theme.css */
/* ==========================================================================
   CALENDAR THEME
   Camada de tema do calendário.
   Mantém o widget e os modais desacoplados da skin dark.
   ========================================================================== */

[data-theme="dark"] .calendar-widget {
  background: var(--bg-card-primary);
  border-color: var(--gray-600);
  color: var(--text-main);
}

[data-theme="dark"] .calendar-widget .widget-header,
[data-theme="dark"] .calendar-widget .quick-stats,
[data-theme="dark"] .calendar-modal-overlay .modal-header {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-secondary) 100%);
}

[data-theme="dark"] .calendar-modal-overlay {
  background: var(--bg-overlay);
}

[data-theme="dark"] .calendar-widget .widget-title,
[data-theme="dark"] .calendar-widget .current-month,
[data-theme="dark"] .calendar-widget .stat-number,
[data-theme="dark"] .calendar-modal-overlay .modal-title,
[data-theme="dark"] .calendar-modal-overlay .modal-body,
[data-theme="dark"] .calendar-modal-overlay .appointment-time {
  color: var(--text-main);
}

[data-theme="dark"] .calendar-widget .weekday,
[data-theme="dark"] .calendar-widget .stat-label,
[data-theme="dark"] .calendar-modal-overlay .appointment-client,
[data-theme="dark"] .calendar-modal-overlay .appointment-notes {
  color: var(--text-secondary);
}

[data-theme="dark"] .calendar-widget .day-cell {
  background: var(--dark-bg-secondary);
  color: var(--text-main);
}

[data-theme="dark"] .calendar-widget .day-cell:hover {
  background: var(--bg-card-secondary);
}

[data-theme="dark"] .calendar-widget .day-cell.today {
  background: var(--primary-blue-light);
  color: var(--primary-blue);
}

[data-theme="dark"] .calendar-widget .day-cell.is-selected,
[data-theme="dark"] .calendar-widget .day-cell[aria-selected='true'] {
  background: var(--primary-blue);
  color: var(--white);
}

[data-theme="dark"] .calendar-widget .day-cell.other-month {
  background: var(--bg-card-secondary);
  color: var(--text-secondary);
}

[data-theme="dark"] .calendar-modal-overlay .modal-content,
[data-theme="dark"] .calendar-modal-overlay .appointment-item {
  background: var(--dark-bg-secondary);
  border-color: var(--gray-600);
}

[data-theme="dark"] .calendar-modal-overlay .modal-header {
  border-bottom-color: var(--gray-600);
}

[data-theme="dark"] .calendar-modal-overlay .appointment-item {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-secondary) 100%);
}

[data-theme="dark"] .calendar-modal-overlay .appointment-item:hover {
  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-accent) 100%);
}



/* bundled: assets/css/components/confirm-modal.css */
/* ==========================================================================
   CONFIRM MODAL COMPONENT
   Modal transversal para confirmações destrutivas ou de alto impacto.

   Contract:
   - `.confirm-modal-container` controla visibilidade da superfície
   - `[aria-hidden='true']` e `--hidden` permanecem equivalentes
   - botões seguem semântica explícita de cancelar vs confirmar
   ========================================================================== */

/* ========== CONTAINER ========== */
.confirm-modal-container {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
  touch-action: none;
}

.confirm-modal-container.confirm-modal-container--mounted {
  display: flex;
}

.confirm-modal-container:not(.confirm-modal-container--hidden),
.confirm-modal-container[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.confirm-modal-container.confirm-modal-container--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.confirm-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-black-md);
  backdrop-filter: var(--glass-light-blur);
  -webkit-backdrop-filter: var(--glass-light-blur);
}

.confirm-modal-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  border: var(--glass-border);
  max-width: 480px;
  width: 90%;
  padding: var(--space-6);
  z-index: 1;
  transform: translateY(14px) scale(0.98);
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.confirm-modal-container:not(.confirm-modal-container--hidden) .confirm-modal-card,
.confirm-modal-container[aria-hidden='false'] .confirm-modal-card {
  transform: translateY(0) scale(1);
}

.confirm-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-3);
  gap: var(--space-2);
}

.confirm-modal-icon {
  font-size: var(--font-size-3xl);
  color: var(--primary-blue);
}

.confirm-modal-title {
  font: var(--font-title-tertiary);
  color: var(--text-main);
  text-align: center;
  margin: 0;
}

.confirm-modal-body {
  margin-bottom: var(--space-4);
}

.confirm-modal-message {
  font: var(--font-ui-secondary);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.confirm-modal-input-container {
  margin-top: var(--space-4);
}

.confirm-modal-input-container.confirm-modal-input-container--hidden,
.confirm-modal-input-container[aria-hidden='true'] {
  display: none;
}

.confirm-modal-input {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width-2) solid var(--border-color);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  background: var(--bg-card-primary);
  color: var(--text-main);
  transition: var(--transition-fast);
  outline: none;
  box-sizing: border-box;
}

.confirm-modal-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-overlay-xs);
}

body.using-keyboard .confirm-modal-input:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .confirm-modal-input:focus-visible {
  outline: none;
}

.confirm-modal-footer {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.confirm-modal-btn {
  padding: 0 var(--space-5);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
  border: none;
  min-height: var(--size-button-md);
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.confirm-modal-btn-cancel {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border: var(--border-width-1) solid var(--border-color);
}

.confirm-modal-btn-cancel:hover {
  background: var(--gray-200);
}

body.using-keyboard .confirm-modal-btn-cancel:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.confirm-modal-btn-confirm {
  background: var(--primary-blue);
  color: var(--white);
}

.confirm-modal-btn-confirm:hover {
  background: var(--primary-blue-hover);
  transform: translateY(-0.5px);
  box-shadow: var(--shadow-sm);
}

.confirm-modal-btn-confirm:active {
  transform: translateY(0);
}

body.using-keyboard .confirm-modal-btn-confirm:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .confirm-modal-btn-cancel:focus-visible,
body.using-pointer .confirm-modal-btn-confirm:focus-visible {
  outline: none;
}

[data-theme='dark'] .confirm-modal-card {
  background: var(--bg-card-primary);
  border: var(--border-width-1) solid var(--border-color);
}

[data-theme='dark'] .confirm-modal-title {
  color: var(--text-main);
}

[data-theme='dark'] .confirm-modal-message {
  color: var(--text-secondary);
}

[data-theme='dark'] .confirm-modal-input {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme='dark'] .confirm-modal-btn-cancel {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme='dark'] .confirm-modal-btn-cancel:hover {
  background: var(--bg-card-primary);
}

@media (max-width: 480px) {
  .confirm-modal-card {
    width: 95%;
    padding: var(--space-5);
  }

  .confirm-modal-footer {
    flex-direction: column;
  }

  .confirm-modal-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-modal-container,
  .confirm-modal-btn {
    transition: none;
  }
  .confirm-modal-btn-confirm:hover {
    transform: none;
  }
}

/* ========== ACCESSIBILITY: FORCED COLORS ========== */
@media (forced-colors: active) {
  .confirm-modal-card {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .confirm-modal-input,
  .confirm-modal-btn,
  .confirm-modal-btn-cancel,
  .confirm-modal-btn-confirm {
    border: 2px solid currentColor;
  }

  .confirm-modal-input:focus,
  .confirm-modal-input:focus-visible,
  .confirm-modal-btn:focus-visible,
  .confirm-modal-btn-cancel:focus-visible,
  .confirm-modal-btn-confirm:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }
}


/* bundled: assets/css/components/popup-card.css */
/* ==========================================================================
   POPUP CARD COMPONENT
   Card flutuante para preview rápido de imóveis no mapa.

   Contract:
   - `.popup-card` é a superfície principal
   - `--visible` e `--hidden` representam o estado do painel
   - o bloco precisa permanecer seguro para touch e safe-area
   ========================================================================== */

/* ========== CONTAINER PRINCIPAL ========== */
.popup-card {
  position: fixed;
  bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: 92%;
  max-width: 360px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 72%, var(--bg-card-primary)) 0%, color-mix(in srgb, var(--bg-card-primary) 97%, var(--white)) 100%);
  border: 1px solid color-mix(in srgb, var(--border-color) 76%, var(--overlay-white-80));
  border-radius: var(--radius-card);
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--gray-900) 18%, transparent),
    0 8px 18px color-mix(in srgb, var(--gray-900) 10%, transparent),
    inset 0 1px 0 var(--overlay-white-lg);
  padding: var(--space-4);
  z-index: var(--z-popup, var(--z-panel));
  transition:
    transform 240ms var(--ease-smooth),
    opacity 200ms ease-out,
    visibility 0s linear 240ms;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  touch-action: none;
}

.popup-card--visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.popup-card--hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(150%);
  pointer-events: none;
}

/* Header */

.popup-card__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: color-mix(in srgb, var(--overlay-black-sm) 76%, white 24%);
    border: none;
    font-size: var(--font-size-xl);
    line-height: 1;
    cursor: pointer;
    color: var(--white);
    padding: var(--space-1);
    width: var(--size-button-md);
    height: var(--size-button-md);
    min-width: var(--size-button-md);
    min-height: var(--size-button-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    transition: var(--transition-fast);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
    text-align: center;
    box-sizing: border-box;
}

.popup-card__close:hover {
    background: var(--overlay-black-lg);
    transform: translateY(-1px);
}

.popup-card__close:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Carousel/Image */
.popup-card__carousel {
    height: 170px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gray-100) 88%, white 12%), color-mix(in srgb, var(--gray-200) 88%, white 12%));
}

.popup-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.popup-card__image--fallback {
    object-fit: contain;
    padding: var(--space-3);
    background: color-mix(in srgb, var(--bg-card-secondary) 92%, var(--white));
}

.badge-count {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    background: var(--overlay-black-md);
    color: var(--white);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.popup-card__group-badge {
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-full);
    background: var(--overlay-black-md);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* Content */
.popup-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.popup-card__meta {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    min-height: 18px;
}

.popup-card__meta.hidden {
    display: none;
}

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

.popup-card__info h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-main);
}

.popup-card__info p {
    font-size: clamp(1.05rem, 1rem + 0.16vw, 1.2rem);
    font-weight: var(--font-weight-bold);
    color: color-mix(in srgb, var(--primary-blue) 86%, var(--text-main));
    margin: 0;
    letter-spacing: -0.02em;
}

.popup-card__actions {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.popup-card--loading {
    border-color: color-mix(in srgb, var(--border-color) 78%, var(--primary-blue));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--primary-blue) 14%, transparent);
}

.popup-card--loading .popup-card__carousel {
    position: relative;
}

.popup-card--loading .popup-card__carousel::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            100deg,
            color-mix(in srgb, transparent 100%, var(--white)) 0%,
            color-mix(in srgb, var(--white) 22%, transparent) 45%,
            color-mix(in srgb, transparent 100%, var(--white)) 100%
        );
    transform: translateX(-100%);
    animation: popup-card-shimmer 1.25s ease-in-out infinite;
}

.popup-card--loading .popup-card__title,
.popup-card--loading .popup-card__meta,
.popup-card--loading #popup-price {
    opacity: 0.8;
}

.popup-card__like-btn {
    background: color-mix(in srgb, var(--bg-card-secondary) 80%, white 20%);
    border: var(--border-width-1) solid color-mix(in srgb, var(--border-color) 76%, var(--overlay-white-lg));
    border-radius: var(--border-radius-full);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-main);
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}

.popup-card__like-btn:hover {
    background: color-mix(in srgb, var(--secondary-red-light) 76%, white 24%);
    border-color: color-mix(in srgb, var(--secondary-red) 78%, white 22%);
    color: var(--secondary-red);
    transform: translateY(-1px);
}

.popup-card__like-btn.favorito-ativo,
.popup-card__like-btn[aria-pressed='true'] {
    background: color-mix(in srgb, var(--secondary-red-light) 76%, white 24%);
    border-color: color-mix(in srgb, var(--secondary-red) 78%, white 22%);
    color: var(--secondary-red);
}

.popup-card__like-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.popup-card__view-btn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 90%, white 10%) 0%, var(--primary-blue) 100%);
    color: var(--white);
    border: none;
    padding: 0 var(--space-4);
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: var(--size-button-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 12px 20px color-mix(in srgb, var(--primary-blue) 24%, transparent);
}

.popup-card__view-btn:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue-hover) 88%, white 12%) 0%, var(--primary-blue-hover) 100%);
    transform: translateY(-1px);
}

.popup-card__view-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ========== TEMA DARK ========== */
[data-theme='dark'] .popup-card__close:hover {
    background: color-mix(in srgb, var(--gray-800) 84%, transparent);
}

[data-theme='dark'] .popup-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gray-800) 78%, var(--bg-card-primary)) 0%, color-mix(in srgb, var(--bg-card-primary) 94%, var(--gray-900)) 100%);
    border-color: color-mix(in srgb, var(--gray-700) 72%, var(--overlay-white-xs));
    box-shadow:
        0 24px 54px color-mix(in srgb, var(--black) 48%, transparent),
        0 10px 20px color-mix(in srgb, var(--black) 32%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent);
}

[data-theme='dark'] .popup-card--loading {
    border-color: color-mix(in srgb, var(--gray-700) 70%, var(--primary-blue));
}

[data-theme='dark'] .popup-card--loading .popup-card__carousel::after {
    background:
        linear-gradient(
            100deg,
            color-mix(in srgb, transparent 100%, var(--gray-900)) 0%,
            color-mix(in srgb, var(--white) 16%, transparent) 45%,
            color-mix(in srgb, transparent 100%, var(--gray-900)) 100%
        );
}

[data-theme='dark'] .popup-card__carousel {
    background: var(--gray-700);
}

[data-theme='dark'] .popup-card__like-btn:hover {
    background: var(--secondary-red-overlay-15);
}

[data-theme='dark'] .popup-card__like-btn {
    background: color-mix(in srgb, var(--bg-card-secondary) 84%, var(--gray-900));
    border-color: color-mix(in srgb, var(--gray-700) 72%, var(--overlay-white-xs));
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .popup-card {
        width: 95%;
        max-width: 340px;
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .popup-card__carousel {
        height: 160px;
    }

}

@media (max-width: 480px) {
    .popup-card {
        width: calc(100% - var(--space-4));
        max-width: none;
        bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
        padding: var(--space-3);
        /* Margem extra no mobile para não encavalar com logo/aura */
        margin-bottom: 0;
        max-height: calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .popup-card__carousel {
        height: 140px;
    }

    .popup-card__actions {
        flex-direction: column;
        width: 100%;
    }

    .popup-card__view-btn {
        width: 100%;
        justify-content: center;
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup-card {
        transition: none;
    }

    .popup-card--loading .popup-card__carousel::after {
        animation: none;
        transform: none;
    }
}

/* ========== ACESSIBILIDADE - FORCED COLORS MODE ========== */
@media (forced-colors: active) {
    .popup-card {
        border: 2px solid currentColor;
        forced-color-adjust: none;
    }

    .popup-card__close,
    .popup-card__like-btn,
    .popup-card__view-btn {
        border: 1px solid currentColor;
    }

    .popup-card__close:focus-visible,
    .popup-card__like-btn:focus-visible,
    .popup-card__view-btn:focus-visible {
        outline: 3px solid;
        outline-offset: 2px;
    }
}

@keyframes popup-card-shimmer {
    100% {
        transform: translateX(100%);
    }
}


/* bundled: assets/css/components/property-groups-popup.css */
/* ==========================================================================
   PROPERTY GROUPS POPUP
   Sheet de seleção para grupos de imóveis no contexto de mapa e comparativos.

   Contract:
   - `.property-groups-popup` controla backdrop e visibilidade
   - `--visible` e `--hidden` permanecem equivalentes ao estado do sheet
   - itens da lista devem continuar focáveis e claros em touch/mobile
   ========================================================================== */

.property-groups-popup {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-popup, var(--z-panel)) + 2);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-5);
    background: color-mix(in srgb, var(--bg-body-primary) 18%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    touch-action: none;
}

.property-groups-popup--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.property-groups-popup--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.property-groups-popup__sheet {
    position: relative;
    width: min(560px, 100%);
    max-height: min(70dvh, 720px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-card-primary) 96%, white 4%);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--gray-900) 12%, transparent);
    transform: translateY(18px);
    transition: transform var(--transition-base);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.property-groups-popup--visible .property-groups-popup__sheet {
    transform: translateY(0);
}

.property-groups-popup__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: var(--size-button-md);
    height: var(--size-button-md);
    min-width: var(--size-button-md);
    min-height: var(--size-button-md);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: var(--transition-fast);
}

.property-groups-popup__close:hover {
  border-color: color-mix(in srgb, var(--text-main) 18%, var(--border-color));
  background: color-mix(in srgb, var(--bg-card-secondary) 88%, transparent);
}

body.using-keyboard .property-groups-popup__close:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .property-groups-popup__close:focus-visible {
  outline: none;
}

.property-groups-popup__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-right: calc(var(--space-10) + var(--space-2));
}

.property-groups-popup__eyebrow {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.property-groups-popup__title {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.6rem);
    font-weight: var(--font-weight-semibold);
}

.property-groups-popup__subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.property-groups-popup__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    padding-right: var(--space-1);
}

.property-groups-popup__item {
    width: 100%;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-card-secondary) 92%, transparent);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}

.property-groups-popup__item:hover {
    border-color: color-mix(in srgb, var(--text-main) 16%, var(--border-color));
    background: color-mix(in srgb, var(--bg-card-secondary) 84%, white 16%);
}

.property-groups-popup__image {
    width: 92px;
    height: 68px;
    object-fit: cover;
    border-radius: 16px;
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 56%, transparent);
}

.property-groups-popup__image--fallback {
    object-fit: contain;
    padding: var(--space-2);
}

.property-groups-popup__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.property-groups-popup__name {
    color: var(--text-main);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-groups-popup__meta {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-groups-popup__price {
    color: color-mix(in srgb, var(--primary-blue) 78%, var(--text-main));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

[data-theme='dark'] .property-groups-popup__sheet {
    background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--gray-900) 4%);
    border-color: color-mix(in srgb, var(--gray-700) 76%, var(--overlay-white-xs));
    box-shadow: 0 20px 36px color-mix(in srgb, var(--black) 34%, transparent);
}

[data-theme='dark'] .property-groups-popup__item {
    background: color-mix(in srgb, var(--bg-card-secondary) 90%, var(--gray-900));
}

[data-theme='dark'] .property-groups-popup__eyebrow {
    background: color-mix(in srgb, var(--gray-700) 36%, transparent);
}

@media (max-width: 600px) {
    .property-groups-popup {
        padding:
            var(--space-3)
            max(var(--space-3), env(safe-area-inset-right))
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
    }

    .property-groups-popup__sheet {
        width: 100%;
        max-height: min(78dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-6)));
        padding: var(--space-5);
        border-radius: 24px 24px 18px 18px;
    }

    .property-groups-popup__item {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .property-groups-popup__image {
        width: 76px;
        height: 64px;
    }

    .property-groups-popup__price {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .property-groups-popup,
    .property-groups-popup__sheet,
    .property-groups-popup__item,
    .property-groups-popup__close {
        transition: none;
    }

    .property-groups-popup__sheet,
    .property-groups-popup--visible .property-groups-popup__sheet {
        transform: none;
    }
}


/* bundled: assets/css/components/anuncio-preview.css */
/* ==========================================================================
   ANUNCIO PREVIEW
   Superfície de pré-visualização editorial para anúncios e imóveis.

   Contract:
   - `.anuncio-preview` é o wrapper principal
   - o componente prioriza leitura de conteúdo e hierarquia tipográfica
   - badges de status permanecem desacoplados do card principal
   ========================================================================== */

.anuncio-preview {
  max-width: 1024px;
  margin: 0 auto;
  background: var(--bg-card-primary);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border-color);
}

.preview-header-section {
  padding: var(--space-8) var(--space-10);
  background: var(--bg-card-secondary);
  border-bottom: 1px solid var(--border-color);
}

.preview-imovel-title {
  font: var(--font-title-primary);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--text-main);
  margin-bottom: var(--space-3);
}

.preview-imovel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font: var(--font-ui-secondary);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.preview-imovel-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.preview-imovel-meta i {
  color: var(--primary-blue);
}

.preview-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.preview-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.price-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-blue);
}

.price-period {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.preview-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.status-disponivel {
  background: var(--accent-green-light);
  color: var(--accent-green);
}

.status-alugado {
  background: var(--secondary-red-light);
  color: var(--secondary-red);
}

.status-inativo {
  background: var(--bg-accent);
  color: var(--text-secondary);
}

.status-manutencao {
  background: var(--warning-light);
  color: var(--warning);
}

.preview-images {
  padding: var(--space-xl);
  border-bottom: var(--border-width-1) solid var(--gray-200);
}

.preview-images h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--text-main);
}

.preview-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.preview-image-item {
  aspect-ratio: 1;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.preview-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-no-images {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-secondary);
}

.preview-no-images i {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.preview-description,
.preview-details,
.preview-features,
.preview-utilities,
.preview-map,
.preview-contact {
  padding: var(--space-xl);
  border-bottom: var(--border-width-1) solid var(--gray-200);
}

.preview-description h3,
.preview-details h3,
.preview-features h3,
.preview-utilities h3,
.preview-map h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--text-main);
}

.preview-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.preview-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-md);
}

.preview-detail-item i {
  color: var(--primary-blue);
  width: var(--size-icon-sm);
}

.detail-label {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.detail-value {
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin-left: auto;
}

.preview-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.preview-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.preview-feature-item i {
  color: var(--accent-green);
  font-size: var(--font-size-xs);
}

.preview-utilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.preview-utility-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-md);
}

.preview-utility-item i {
  color: var(--primary-blue);
  width: var(--size-icon-sm);
}

.utility-label {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.utility-value {
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin-left: auto;
}

.preview-map-container {
  height: 200px;
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.preview-contact-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.preview-loading {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-secondary);
}

.preview-loading i {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  .preview-header-section {
    padding: var(--space-lg);
  }

  .preview-imovel-title {
    font-size: var(--font-size-xl);
  }

  .preview-imovel-meta {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .preview-price-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .preview-images,
  .preview-description,
  .preview-details,
  .preview-features,
  .preview-utilities,
  .preview-map,
  .preview-contact {
    padding: var(--space-lg);
  }

  .preview-details-grid,
  .preview-features-grid,
  .preview-utilities-grid {
    grid-template-columns: 1fr;
  }

  .preview-contact-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme='dark'] .anuncio-preview {
  background: var(--bg-card-primary);
  border-color: var(--border-color);
}

[data-theme='dark'] .preview-header-section {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
}

[data-theme='dark'] .preview-imovel-title {
  color: var(--text-main);
}

[data-theme='dark'] .preview-imovel-meta {
  color: var(--text-secondary);
}

[data-theme='dark'] .preview-images {
  border-color: var(--border-color);
}

[data-theme='dark'] .preview-images h3,
[data-theme='dark'] .preview-description h3,
[data-theme='dark'] .preview-details h3,
[data-theme='dark'] .preview-features h3,
[data-theme='dark'] .preview-utilities h3,
[data-theme='dark'] .preview-map h3 {
  color: var(--text-main);
}

[data-theme='dark'] .preview-description,
[data-theme='dark'] .preview-details,
[data-theme='dark'] .preview-features,
[data-theme='dark'] .preview-utilities,
[data-theme='dark'] .preview-map,
[data-theme='dark'] .preview-contact {
  border-color: var(--border-color);
}

[data-theme='dark'] .preview-detail-item,
[data-theme='dark'] .preview-utility-item {
  background: var(--bg-accent);
}

[data-theme='dark'] .detail-label,
[data-theme='dark'] .utility-label {
  color: var(--text-secondary);
}

[data-theme='dark'] .detail-value,
[data-theme='dark'] .utility-value {
  color: var(--text-main);
}

[data-theme='dark'] .preview-map-container {
  background: var(--bg-accent);
  color: var(--text-tertiary);
}

[data-theme='dark'] .preview-no-images {
  color: var(--text-tertiary);
}

[data-theme='dark'] .preview-loading {
  color: var(--text-secondary);
}

[data-theme='dark'] .price-value {
  color: var(--primary-blue);
}

[data-theme='dark'] .price-period {
  color: var(--text-secondary);
}

[data-theme='dark'] .status-inativo {
  background: var(--bg-accent);
  color: var(--text-tertiary);
}


/* bundled: assets/css/components/chat.css */
/* ==========================================================================
   CHAT COMPONENT (PROPERTY CHAT SHELL)
   Estilos base para o chat embutido em detalhes do imóvel.
   O chat de página completa usa assets/css/pages/chat-*.css.
   ========================================================================== */

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: var(--space-3);
  flex: 1;
}


/* bundled: assets/css/components/document-validator.css */
/* ==========================================================================
   DOCUMENT VALIDATOR
   Feedback visual de CPF/CNPJ acoplado ao formulário-base.

   Contrato:
   - mantém aliases `.valid` / `.invalid`
   - aceita estados canônicos via `.is-valid` / `.is-invalid`
   - aceita `data-validation-state` para integrações futuras sem class toggling
   ========================================================================== */

/* ========== ESTADOS DE VALIDACAO ========== */
.form-group.valid input[data-validate='cpf'],
.form-group.valid input[data-validate='cnpj'],
.form-group.is-valid input[data-validate='cpf'],
.form-group.is-valid input[data-validate='cnpj'],
.form-group[data-validation-state='valid'] input[data-validate='cpf'],
.form-group[data-validation-state='valid'] input[data-validate='cnpj'] {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 2px var(--accent-green-light);
}

.form-group.invalid input[data-validate='cpf'],
.form-group.invalid input[data-validate='cnpj'],
.form-group.is-invalid input[data-validate='cpf'],
.form-group.is-invalid input[data-validate='cnpj'],
.form-group[data-validation-state='invalid'] input[data-validate='cpf'],
.form-group[data-validation-state='invalid'] input[data-validate='cnpj'] {
  border-color: var(--secondary-red);
  box-shadow: 0 0 0 2px var(--secondary-red-light);
}

.document-validation-message {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: none;
  animation: validation-slide-in var(--transition-fast) ease-out;
}

.document-validation-message[hidden],
.document-validation-icon[hidden] {
  display: none;
}

.document-validation-message.valid,
.document-validation-message.is-valid,
.document-validation-message[data-validation-state='valid'] {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.document-validation-message.invalid,
.document-validation-message.is-invalid,
.document-validation-message[data-validation-state='invalid'] {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

.document-validation-icon {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.document-validation-icon.valid,
.document-validation-icon.is-valid,
.document-validation-icon[data-validation-state='valid'] {
  color: var(--accent-green);
}

.document-validation-icon.invalid,
.document-validation-icon.is-invalid,
.document-validation-icon[data-validation-state='invalid'] {
  color: var(--secondary-red);
}

@keyframes validation-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

input[data-validate='cpf'],
input[data-validate='cnpj'] {
  font-family: var(--font-monospace);
  letter-spacing: 1px;
}

/* Dark mode keeps the field styling legible without changing the state model. */
[data-theme="dark"] input[data-validate='cpf'],
[data-theme="dark"] input[data-validate='cnpj'] {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme="dark"] .document-validation-message {
  box-shadow: var(--shadow-md);
}


/* bundled: assets/css/components/dual-range-slider.css */
/* ==========================================================================
   DUAL RANGE SLIDER
   Controle compartilhado de faixa mínima/máxima para busca e formulários.

   Contract:
   - `.dual-range-slider` é o bloco canônico
   - aliases de contexto (`.filtro-price-range`, `.price-range-container`)
     permanecem como aliases de transicao
   - o foco visível do thumb é parte do contrato de acessibilidade
   ========================================================================== */

/* ============================================
   COMPONENT TOKENS
   ============================================ */

.dual-range-slider,
.dual-range-slider-container,
.filtro-price-range,
.price-range-container {
  --slider-track-height: 6px;
  --slider-thumb-size: 28px;
  --slider-thumb-size-mobile: 24px;
  --slider-value-min-width: 80px;
}

/* ============================================
   CONTAINER PRINCIPAL
   ============================================ */

.dual-range-slider {
  position: relative;
  width: 100%;
  margin: var(--space-4) 0;
}

/* ============================================
   TRACK E PROGRESSO
   ============================================ */

.dual-range-track {
  position: relative;
  height: var(--slider-track-height);
  background: var(--bg-card-secondary);
  border-radius: calc(var(--slider-track-height) / 2);
  margin: var(--space-6) 0;
}

.dual-range-progress {
  position: absolute;
  height: 100%;
  background: var(--primary-blue);
  border-radius: 3px;
  transition: var(--transition-base);
}

/* ============================================
   INPUTS (SLIDERS)
   ============================================ */

.dual-range-inputs {
  position: relative;
  display: flex;
  align-items: center;
}

.dual-range-input {
  position: absolute;
  width: 100%;
  height: var(--slider-track-height);
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}

/* ============================================
   THUMBS (WEBKIT)
   ============================================ */

.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--white);
  border: 2px solid var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.dual-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px var(--primary-blue-overlay-xl);
}

.dual-range-input::-webkit-slider-thumb:active {
  transform: scale(1.12);
  box-shadow: 0 6px 16px var(--primary-blue-overlay-50);
}

body.using-keyboard .dual-range-input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
}

/* ============================================
   THUMBS (FIREFOX)
   ============================================ */

.dual-range-input::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--white);
  border: 2px solid var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px var(--primary-blue-overlay-lg);
  transition: var(--transition-base);
  -moz-appearance: none;
  appearance: none;
}

.dual-range-input::-moz-range-thumb:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px var(--primary-blue-overlay-xl);
}

.dual-range-input::-moz-range-thumb:active {
  transform: scale(1.12);
  box-shadow: 0 6px 16px var(--primary-blue-overlay-50);
}

body.using-keyboard .dual-range-input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
}

.dual-range-input::-moz-range-track {
  background: transparent;
  border: none;
  height: var(--slider-track-height);
}

/* ============================================
   VALORES EXIBIDOS
   ============================================ */

.dual-range-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.dual-range-value {
  background: var(--bg-card-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-primary);
  font: var(--font-ui-secondary);
  font-weight: 600;
  color: var(--text-main);
  min-width: var(--slider-value-min-width);
  text-align: center;
  transition: var(--transition-fast);
}

.dual-range-value.dual-range-value--active {
  background: var(--primary-blue-overlay-xs);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
}

.dual-range-separator {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  margin: 0 var(--space-2);
}

/* ============================================
   INPUTS NUMÉRICOS (OPCIONAL)
   ============================================ */

.dual-range-numeric-inputs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dual-range-numeric-input {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  text-align: center;
  background: var(--bg-card-primary);
  color: var(--text-main);
  transition: var(--transition-base);
}

.dual-range-numeric-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-overlay-xs);
}

/* ============================================
   ESTADOS DE FOCO
   ============================================ */

.dual-range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--primary-blue-light), 0 2px 8px var(--primary-blue-overlay-lg);
}

.dual-range-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--primary-blue-light), 0 2px 8px var(--primary-blue-overlay-lg);
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
  .dual-range-input::-webkit-slider-thumb {
    width: var(--slider-thumb-size-mobile);
    height: var(--slider-thumb-size-mobile);
  }

  .dual-range-input::-moz-range-thumb {
    width: var(--slider-thumb-size-mobile);
    height: var(--slider-thumb-size-mobile);
  }

  .dual-range-values {
    flex-direction: column;
    gap: var(--space-1);
    align-items: stretch;
  }

  .dual-range-separator {
    display: none;
  }
}

/* ============================================
   TEMA ESCURO
   ============================================ */

[data-theme="dark"] .dual-range-track {
  background: var(--border-color);
}

[data-theme="dark"] .dual-range-input::-webkit-slider-thumb {
  background: var(--bg-card-primary);
  border-color: var(--primary-blue);
}

[data-theme="dark"] .dual-range-input::-moz-range-thumb {
  background: var(--bg-card-primary);
  border-color: var(--primary-blue);
}

[data-theme="dark"] .dual-range-value {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme="dark"] .dual-range-value.dual-range-value--active {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

[data-theme="dark"] .dual-range-numeric-input {
  background: var(--bg-card-primary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme="dark"] .dual-range-separator {
  color: var(--text-secondary);
}

[data-theme="dark"] .dual-range-values {
  color: var(--text-secondary);
}

/* ============================================
   ACESSIBILIDADE - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .dual-range-progress,
  .dual-range-input::-webkit-slider-thumb,
  .dual-range-input::-moz-range-thumb,
  .dual-range-value,
  .dual-range-numeric-input {
    transition: none;
  }

  .dual-range-input::-webkit-slider-thumb:hover,
  .dual-range-input::-webkit-slider-thumb:active {
    transform: none;
  }

  .dual-range-input::-moz-range-thumb:hover,
  .dual-range-input::-moz-range-thumb:active {
    transform: none;
  }
}


/* bundled: assets/css/components/gallery.css */
/* ==========================================================================
   GALLERY SYSTEM
   Componente de galeria reutilizável com upload, grid, carousel e preview.

   Contrato:
   - `.gallery` é o bloco-raiz visual
   - estados usam modificadores (`--visible`, `--loading`) ou atributos ARIA
   - aliases `.main` e `.dragging` permanecem para o JS atual
   ========================================================================== */

/* ========== CONTAINER PRINCIPAL ========== */
.gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-card-primary);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-primary);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.gallery-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-primary);
  background: var(--glass-header);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  color: var(--white);
}

.gallery-content {
  padding: var(--space-4);
}

/* ========== UPLOAD ZONE ========== */

body.using-keyboard .gallery-upload-zone:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
}

body.using-pointer .gallery-upload-zone:focus-visible {
  outline: none;
}

.file-input-hidden {
  display: none;
}

/* ========== PROGRESS BAR ========== */

/* ========== ACTIONS & BUTTONS ========== */

/* ========== GRID MODE ========== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.gallery-item {
  position: relative;
  background: var(--white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: var(--border-light);
  transition: var(--transition-base);
  cursor: move;
  aspect-ratio: 16/9;
}

.gallery-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.gallery-item.main,
.gallery-item.gallery-item--primary {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-light);
}

.gallery-item.dragging,
.gallery-item.gallery-item--dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

.gallery-item.gallery-item--loading {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.gallery-image,
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.gallery-item:hover .gallery-image,
.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item img.gallery-image--loading {
  opacity: 0;
}

.gallery-item img.gallery-image--loaded {
  opacity: 1;
}

.gallery-overlay,
.gallery-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--overlay-black-lg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  opacity: 0;
  transition: var(--transition-base);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-overlay {
  align-items: flex-end;
  padding: var(--space-3);
  color: var(--white);
}

.gallery-item-info {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--white);
}

.gallery-item-size {
  font-weight: var(--font-weight-medium);
}

.gallery-item-compression {
  opacity: 0.8;
}

.gallery-info {
  padding: var(--space-2);
}

/* ========== CAROUSEL MODE ========== */
.gallery-carousel {
  display: block;
}

.gallery-carousel .gallery-main {
  position: relative;
  height: 280px;
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.gallery-carousel .gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-normal);
}

.gallery-carousel .gallery-image.gallery-image--loading {
  opacity: 0;
}

.gallery-carousel .gallery-image.gallery-image--loaded {
  opacity: 1;
}

.gallery-carousel .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  color: var(--text-main);
  border: var(--glass-border);
  width: var(--size-button-md);
  height: var(--size-button-md);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.gallery-carousel .gallery-nav:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-50%) scale(1.1);
}

.gallery-carousel .gallery-nav.prev {
  left: var(--space-3);
}

.gallery-carousel .gallery-nav.next {
  right: var(--space-3);
}

.gallery-carousel .gallery-thumbnails {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0;
}

.gallery-carousel .gallery-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.gallery-carousel .gallery-thumb.gallery-thumb--active,
.gallery-carousel .gallery-thumb[aria-current='true'] {
  opacity: 1;
  border: 2px solid var(--primary-blue);
}

.gallery-carousel .gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== EMPTY STATE ========== */
.gallery-empty-state,
.gallery-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-secondary);
}

.gallery-empty-state.gallery-empty-state--hidden,
.gallery-empty-state[aria-hidden='true'],
.gallery-empty-state[hidden],
.gallery-empty[hidden] {
  display: none;
}

.empty-icon,

/* ========== PREVIEW MODAL ========== */
.gallery-preview-modal,
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-black-xl);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.gallery-preview-modal.gallery-preview-modal--mounted,
.gallery-modal.gallery-modal--mounted {
  display: flex;
}

.gallery-preview-modal.gallery-preview-modal--visible,
.gallery-preview-modal[aria-hidden='false'],
.gallery-modal.gallery-modal--visible,
.gallery-modal[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-black-xl);
  cursor: pointer;
}

.preview-container,
.gallery-modal-content {
  position: relative;
  background: var(--bg-card-primary);
  border-radius: var(--border-radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: scale(0.9);
  transition: transform var(--transition-normal);
}

.gallery-modal.gallery-modal--visible .gallery-modal-content,
.gallery-modal[aria-hidden='false'] .gallery-modal-content,
.gallery-preview-modal.gallery-preview-modal--visible .preview-container,
.gallery-preview-modal[aria-hidden='false'] .preview-container {
  transform: scale(1);
}

.preview-header,
.gallery-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--border-color);
}

.preview-title,
.gallery-modal-title {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.preview-close,
.gallery-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--text-secondary);
  padding: var(--space-2);
  border-radius: 999px;
  transition: var(--transition-base);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

.preview-close:hover,
.gallery-modal-close:hover {
  background: var(--bg-card-secondary);
  color: var(--text-main);
}

.preview-close:focus-visible,
.gallery-modal-close:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.preview-content,
.gallery-modal-body {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  padding: var(--space-5);
  text-align: center;
}

.preview-image,
.gallery-modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
}

.preview-info,
.gallery-modal-info {
  padding: var(--space-6);
  border-top: var(--border-width-1) solid var(--border-color);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.preview-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.preview-actions {
  display: flex;
  gap: var(--space-2);
}

/* ========== ANIMATIONS ========== */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.gallery-item {
  animation: fadeIn var(--transition-normal) ease;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .gallery-content {
    padding: var(--space-4);
  }

  .gallery-header {
    padding: var(--space-4);
  }

  .gallery-carousel .gallery-main {
    height: 200px;
  }

  .gallery-carousel .gallery-thumb {
    width: 45px;
    height: 45px;
  }

  .preview-container,
  .gallery-modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }

  .preview-content {
    max-height: 80vh;
  }

  .preview-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
  }

}

/* ========== TEMA ESCURO ========== */
[data-theme='dark'] .gallery {
  background: var(--bg-card-primary);
  border-color: var(--gray-600);
}

[data-theme='dark'] .gallery-header {
  border-bottom-color: var(--gray-600);
}

[data-theme='dark'] .gallery-item {
  background: var(--bg-card-primary);
  border-color: var(--gray-600);
}

[data-theme='dark'] .gallery-item.main {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-overlay-sm);
}

[data-theme='dark'] .gallery-item-overlay {
  background: linear-gradient(to bottom, transparent 0%, var(--overlay-black-xl) 100%);
}

[data-theme='dark'] .preview-container,
[data-theme='dark'] .gallery-modal-content {
  background: var(--bg-card-primary);
  border-color: var(--gray-600);
}

[data-theme='dark'] .preview-header,
[data-theme='dark'] .gallery-modal-header {
  border-bottom-color: var(--gray-600);
}

[data-theme='dark'] .preview-title,
[data-theme='dark'] .gallery-modal-title {
  color: var(--text-main);
}

[data-theme='dark'] .preview-close,
[data-theme='dark'] .gallery-modal-close {
  color: var(--text-secondary);
}

[data-theme='dark'] .preview-close:hover,
[data-theme='dark'] .gallery-modal-close:hover {
  background: var(--bg-card-secondary);
  color: var(--text-main);
}

[data-theme='dark'] .preview-info,
[data-theme='dark'] .gallery-modal-info {
  border-top-color: var(--gray-600);
}

[data-theme='dark'] .preview-details {
  color: var(--text-secondary);
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-image,
  .gallery-upload-zone,
  .gallery-action,
  .gallery-modal,
  .gallery-modal-content,
  .gallery-item img,
  .gallery-item-overlay,
  .preview-close,
  .preview-container {
    transition: none;
    animation: none;
  }

  .gallery-item:hover,
  .gallery-item:hover .gallery-image,
  .gallery-item:hover img {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .gallery-item,
  .gallery-upload-zone,
  .preview-container,
  .gallery-modal-content {
    border-width: 2px;
  }

}

@media (forced-colors: active) {
  .gallery,
  .gallery-item,
  .gallery-upload-zone,
  .preview-container,
  .gallery-modal-content {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .gallery-action:focus-visible,
  .preview-close:focus-visible,
  .gallery-modal-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}


/* bundled: assets/css/components/property-templates.css */
/* =============================
   PROPERTY TEMPLATES COMPONENT
   Sistema de templates para criacao de imoveis
   - Seletor de tipos de imovel
   - Cards de template
   - Preview de caracteristicas
   - Selecao interativa
   ============================= */

/* ========== SELETOR DE TEMPLATES ========== */
.template-selector {
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border-radius: var(--radius-card);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.template-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.template-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.template-description {
  color: var(--text-secondary);
  margin: 0;
}

.template-categories {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

.category-btn {
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-1) solid var(--border-color);
  background: var(--bg-card-secondary);
  color: var(--text-secondary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.category-btn:hover {
  background: var(--primary-blue-light);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  transform: translateY(-1px);
}

.category-btn.category-btn--active,
.category-btn[aria-pressed='true'] {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.template-card {
  background: var(--white);
  border: var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: var(--transition-base);
  cursor: pointer;
}

.template-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-blue-overlay-base);
}

.template-card.template-card--selected,
.template-card[aria-selected='true'] {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-light);
}

.template-card-header {
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.template-icon {
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
  background: var(--primary-blue-light);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  font-size: var(--font-size-xl);
}

.template-icon .loquei-icon {
  --loquei-icon-size: 1.4rem;
}

.template-info {
  flex: 1;
}

.template-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin: 0 0 var(--space-xs) 0;
}

.template-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

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

.template-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.preview-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.preview-item i {
  color: var(--primary-blue);
  width: var(--size-icon-xs);
  --loquei-icon-size: 0.9rem;
}

.template-card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-primary);
  background: var(--bg-primary);
}

.template-select-btn {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-md);
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.template-select-btn:hover {
  background: var(--primary-blue-hover);
}

.template-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.template-btn-primary,
.template-btn-secondary {
  min-height: 42px;
  padding: 0 var(--space-lg);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.template-btn-primary {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
}

.template-btn-primary:hover:not(:disabled) {
  background: var(--primary-blue-hover);
  transform: translateY(-0.5px);
}

.template-btn-primary:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

.template-btn-secondary {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border: var(--border-width-1) solid var(--border-color);
}

.template-btn-secondary:hover {
  background: var(--bg-primary);
  transform: translateY(-0.5px);
}

@media (max-width: 768px) {
  .template-selector {
    padding: var(--space-lg);
  }

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

  .template-categories {
    flex-direction: column;
  }

  .category-btn {
    justify-content: center;
  }

  .template-actions {
    flex-direction: column;
  }

  .template-btn-primary,
  .template-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Dark Mode */
[data-theme="dark"] .template-selector {
  background: var(--bg-card-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .template-card {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .template-card:hover {
  border-color: var(--primary-blue);
}

[data-theme="dark"] .category-btn {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .category-btn:hover {
  background: var(--primary-blue-light);
}

[data-theme="dark"] .template-card-footer {
  background: var(--bg-card-primary);
  border-top-color: var(--border-color);
}

[data-theme="dark"] .template-btn-secondary {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme="dark"] .template-btn-secondary:hover {
  background: var(--bg-card-primary);
}


/* bundled: assets/css/components/toast.css */
/* ==========================================================================
   TOAST NOTIFICATIONS
   Sistema transversal de feedback efêmero para sucesso, erro e status.

   Contract:
   - `.toast-container` define a posição da pilha
   - `.toast--visible` e `.toast--removing` controlam a transição de ciclo
   - o bloco depende exclusivamente de tokens globais para cor e spacing
   ========================================================================== */

/* ========== CONTAINER BASE ========== */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  max-width: calc(100vw - var(--space-8));
  touch-action: none;
}

/* ========== POSIÇÕES DO CONTAINER ========== */

/* Bottom Center (default) */
.toast-container,
.toast-container--bottom-center {
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}

/* Bottom Left */
.toast-container--bottom-left {
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  left: var(--space-6);
  transform: none;
  align-items: flex-start;
  flex-direction: column-reverse;
}

/* Bottom Right */
.toast-container--bottom-right {
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  right: var(--space-6);
  left: auto;
  transform: none;
  align-items: flex-end;
  flex-direction: column-reverse;
}

/* Top Center */
.toast-container--top-center {
  top: calc(var(--space-6) + env(safe-area-inset-top, 0));
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column;
}

/* Top Left */
.toast-container--top-left {
  top: calc(var(--space-6) + env(safe-area-inset-top, 0));
  bottom: auto;
  left: var(--space-6);
  transform: none;
  align-items: flex-start;
  flex-direction: column;
}

/* Top Right */
.toast-container--top-right {
  top: calc(var(--space-6) + env(safe-area-inset-top, 0));
  bottom: auto;
  right: var(--space-6);
  left: auto;
  transform: none;
  align-items: flex-end;
  flex-direction: column;
}

/* ========== TOAST BASE ========== */
.toast {
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  color: var(--text-main);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 58px;
  min-width: 320px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(40px);
  transition: var(--transition-base);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}

/* Animações para posições top */
.toast-container--top-center .toast,
.toast-container--top-left .toast,
.toast-container--top-right .toast {
  transform: translateY(-100px);
}

/* ========== ESTADOS ========== */
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--removing {
  opacity: 0;
  transform: translateY(var(--space-5)) scale(0.9);
}

.toast-container--top-center .toast--removing,
.toast-container--top-left .toast--removing,
.toast-container--top-right .toast--removing {
  transform: translateY(calc(var(--space-5) * -1)) scale(0.9);
}

/* ========== ÍCONE ========== */
.toast__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--white);
}

/* ========== CONTEÚDO ========== */
.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-main);
  margin-bottom: var(--space-1);
}

.toast__message {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

/* ========== BOTÃO FECHAR ========== */
.toast__close {
  flex-shrink: 0;
  min-width: var(--size-button-md);
  min-height: var(--size-button-md);
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.toast__close:hover {
  background: var(--overlay-black-xs);
  color: var(--text-main);
  transform: translateY(-1px);
}

body.using-keyboard .toast__close:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .toast__close:focus-visible {
  outline: none;
}

/* ========== BARRA DE PROGRESSO ========== */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: var(--overlay-black-xs);
}

.toast__progress-bar {
  width: 100%;
  height: 100%;
  background-color: var(--primary-blue);
  animation: toastProgressShrink linear forwards;
}

@keyframes toastProgressShrink {
  from { width: 100%; }
  to { width: 0%; }
}

/* ========== TIPOS ========== */
.toast--success {
  border-left: 4px solid var(--success);
}

.toast--success .toast__icon {
  background: var(--success);
}

.toast--success .toast__icon::before {
  content: '✓';
}

.toast--success .toast__progress-bar {
  background-color: var(--success);
}

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

.toast--error .toast__icon {
  background: var(--error);
}

.toast--error .toast__icon::before {
  content: '✕';
}

.toast--error .toast__progress-bar {
  background-color: var(--error);
}

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

.toast--warning .toast__icon {
  background: var(--warning);
}

.toast--warning .toast__icon::before {
  content: '⚠';
}

.toast--warning .toast__progress-bar {
  background-color: var(--warning);
}

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

.toast--info .toast__icon {
  background: var(--info);
}

.toast--info .toast__icon::before {
  content: 'ℹ';
}

.toast--info .toast__progress-bar {
  background-color: var(--info);
}

/* ========== DARK MODE ========== */
[data-theme='dark'] .toast__progress {
  background-color: var(--overlay-white-xs);
}

[data-theme='dark'] .toast__close:hover {
  background: var(--overlay-white-xs);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .toast-container {
    max-width: calc(100vw - var(--space-6));
  }

  .toast-container--bottom-center,
  .toast-container--bottom-left,
  .toast-container--bottom-right {
    bottom: calc(var(--space-20) + env(safe-area-inset-bottom, 0));
  }

  .toast-container--bottom-left,
  .toast-container--bottom-right,
  .toast-container--top-left,
  .toast-container--top-right {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    align-items: center;
  }

  .toast {
    min-width: 280px;
    max-width: calc(100vw - var(--space-8));
  }
}

@media (max-width: 480px) {
  .toast-container {
    max-width: calc(100% - var(--space-4));
  }

  .toast-container--bottom-center,
  .toast-container--bottom-left,
  .toast-container--bottom-right {
    bottom: var(--space-3);
  }

  .toast-container--top-center,
  .toast-container--top-left,
  .toast-container--top-right {
    top: var(--space-3);
  }

  .toast {
    min-width: 240px;
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 320px) {
  .toast-container {
    max-width: calc(100% - var(--space-4));
  }

  .toast {
    min-width: 200px;
    padding: var(--space-2) var(--space-3);
  }

  .toast__message {
    font-size: var(--font-size-xs);
  }

  .toast__title {
    font-size: var(--font-size-sm);
  }
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast__close,
  .toast__progress-bar {
    animation: none;
    transition: opacity 0.1s ease;
  }

  .toast--visible {
    transform: translateY(0);
  }
}

@media (forced-colors: active) {
  .toast {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .toast__close {
    border: 2px solid currentColor;
  }

  .toast__close:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }

  .toast__progress-bar {
    border: 1px solid currentColor;
  }
}

@media (hover: none) and (pointer: coarse) {
  .toast__close:hover {
    transform: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .toast-container {
    max-width: calc(100% - var(--space-4));
  }

  .toast-container--bottom-center,
  .toast-container--bottom-left,
  .toast-container--bottom-right {
    bottom: var(--space-2);
  }

  .toast-container--top-center,
  .toast-container--top-left,
  .toast-container--top-right {
    top: var(--space-2);
  }
}


/* bundled: assets/css/components/offline-banner.css */
/* ==========================================================================
   Offline Banner - Indicador de conectividade
   ========================================================================== */

.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  transform: translateY(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.offline-banner--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.offline-banner[data-state='offline'] {
  background-color: var(--secondary-red);
  color: var(--white);
}

.offline-banner[data-state='online'] {
  background-color: var(--accent-green);
  color: var(--white);
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme='dark'] .offline-banner[data-state='offline'] {
  background-color: var(--secondary-red);
  color: var(--white);
}

[data-theme='dark'] .offline-banner[data-state='online'] {
  background-color: var(--accent-green);
  color: var(--white);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .offline-banner {
    transition: none;
  }
}


/* bundled: assets/css/components/user-menu.css */
/* ==========================================================================
   USER MENU
   Menu contextual do usuário com atalhos de navegação e preferências.

   Contract:
   - `.user-toggle__button` é o gatilho principal
   - `.user-menu--visible` e `[aria-hidden='false']` representam o estado aberto
   - `body.user-menu-open` controla o backdrop global do dropdown
   ========================================================================== */

/* ========== USER TOGGLE (BOTÃO) ========== */
.user-toggle {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.user-toggle__button {
  width: var(--size-avatar);
  height: var(--size-avatar);
  min-width: var(--size-avatar);
  min-height: var(--size-avatar);
  border-radius: var(--border-radius-full);
  background: var(--bg-card-primary);
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-base);
  transition: var(--transition-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative; /* Para posicionar badge */
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.user-toggle__button:hover {
  background: var(--bg-card-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--primary-blue);
}

.user-toggle__button:active {
  transform: translateY(0);
}

body.using-keyboard .user-toggle__button:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .user-toggle__button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-base);
}

.user-toggle__button.is-active {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-blue-lg);
}

.user-toggle__button[aria-expanded='true'] {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-blue-lg);
}

.user-toggle__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-full);
}

.user-toggle__icon {
  font-size: var(--font-size-xl);
  color: var(--primary-blue);
}

/* ========== THEME TOGGLE ========== */
.user-toggle__theme-btn {
  width: 44px;
  height: 44px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--border-radius-full);
  background: transparent;
  border: none;
  box-shadow: none;
  transition: var(--transition-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: var(--font-size-lg);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.user-toggle__theme-btn:hover {
  transform: translateY(-1px);
}

.user-toggle__theme-btn:active {
  transform: translateY(0);
}

body.using-keyboard .user-toggle__theme-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .user-toggle__theme-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.user-toggle__theme-icon-shell {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 88%, transparent), color-mix(in srgb, var(--white) 64%, transparent)),
    color-mix(in srgb, var(--white) 36%, transparent);
  border: 1px solid color-mix(in srgb, var(--gray-400) 20%, transparent);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

.user-toggle__theme-btn .loquei-icon {
  --loquei-icon-size: 0.875rem;
  color: var(--text-main);
}

.user-toggle__theme-btn:hover .user-toggle__theme-icon-shell {
  box-shadow: var(--shadow-lg);
}

[data-theme='dark'] .user-toggle__theme-icon-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gray-800) 84%, transparent), color-mix(in srgb, var(--gray-700) 72%, transparent)),
    color-mix(in srgb, var(--white) 10%, transparent);
  border-color: color-mix(in srgb, var(--white) 14%, transparent);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--gray-900) 32%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent);
}

[data-theme='dark'] .user-toggle__theme-btn .loquei-icon {
  color: var(--white);
}

@media (max-width: 480px) {
  .user-toggle__button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .user-toggle__theme-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .user-toggle__theme-icon-shell {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .user-toggle {
    gap: 4px;
  }

  .user-toggle__theme-icon-shell {
    width: 34px;
    height: 34px;
  }
}

/* ========== USER MENU (DROPDOWN) ========== */
.user-menu {
  position: fixed;
  top: calc(72px + env(safe-area-inset-top));
  right: 12px;
  background: color-mix(in srgb, var(--bg-card-primary) 92%, var(--white));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  width: min(320px, calc(100vw - 24px));
  z-index: var(--z-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition-base);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(78vh, 560px);
  overscroll-behavior: contain;
  touch-action: none;
}

.user-menu--visible,
.user-menu[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.user-menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--overlay-black-xs);
  z-index: 1035;
  backdrop-filter: var(--blur-subtle);
  -webkit-backdrop-filter: var(--blur-subtle);
}

/* ========== MENU HEADER ========== */
.user-menu__header {
  padding: var(--space-6);
  background: color-mix(in srgb, var(--bg-card-secondary) 92%, transparent);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.user-menu__header--guest {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-blue) 10%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg-card-secondary) 92%, transparent);
}

.user-menu__header.user-menu__section--hidden,
.user-menu__header[hidden],
.user-menu__list.user-menu__section--hidden,
.user-menu__list[hidden] {
  display: none;
}

.user-menu__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.user-menu__avatar {
  width: var(--size-button-md);
  height: var(--size-button-md);
  border-radius: var(--border-radius-full);
  border: 2px solid var(--border-color);
  object-fit: cover;
  flex-shrink: 0;
}

.user-menu__name {
  font: var(--font-title-tertiary);
  color: var(--text-main);
  margin: 0;
}

.user-menu__email {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.user-menu__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}

.user-menu__list li {
  margin: 0;
}

.user-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  min-height: 46px;
  color: var(--text-main);
  text-decoration: none;
  font: var(--font-ui-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  box-sizing: border-box;
}

.user-menu__link span {
  min-width: 0;
}

.user-menu__link:hover {
  background: var(--primary-blue-overlay-xs);
  color: var(--primary-blue);
  transform: translateX(3px);
}

body.using-keyboard .user-menu__link:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

body.using-pointer .user-menu__link:focus-visible {
  outline: none;
}

.user-menu__icon {
  width: 20px;
  --loquei-icon-size: 1rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.user-menu__link:hover .user-menu__icon {
  color: var(--primary-blue);
}

.user-menu__link[aria-current='page'] {
  background: var(--primary-blue-overlay-xs);
  color: var(--primary-blue);
  font-weight: var(--font-weight-semibold);
}

.user-menu__link[aria-current='page'] .user-menu__icon {
  color: var(--primary-blue);
}

/* ========== MENU DIVIDER ========== */
.user-menu__divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) var(--space-4);
}

/* ========== LOGOUT BUTTON ========== */
.user-menu__logout {
  color: var(--secondary-red);
  margin-top: 0;
}

.user-menu__logout:hover {
  background: var(--secondary-red-light);
  color: var(--secondary-red);
  transform: translateX(3px);
}

body.using-keyboard .user-menu__logout:focus-visible {
  outline: 2px solid var(--secondary-red);
  outline-offset: -2px;
}

body.using-pointer .user-menu__logout:focus-visible {
  outline: none;
}

.user-menu__logout .user-menu__icon {
  color: var(--secondary-red);
}

/* ========== BADGE (NOTIFICAÇÕES) ========== */
.user-menu__badge,
#chat-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: none; /* Escondido por padrão */
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--secondary-red);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--border-radius-full);
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}

.user-menu__badge:not(:empty),
#chat-notification-badge:not(:empty) {
  display: inline-flex; /* Só mostra se tiver conteúdo */
}

#chat-notification-badge[hidden] {
  display: none;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
  body.user-menu-open::before {
    background: var(--overlay-black-sm);
    backdrop-filter: var(--blur-xs);
    -webkit-backdrop-filter: var(--blur-xs);
  }

  .user-menu {
    top: calc(62px + env(safe-area-inset-top));
    right: 16px;
    left: auto;
    width: min(320px, calc(100vw - 32px));
    max-height: min(68dvh, 500px);
  }

  .user-toggle__button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .user-toggle__theme-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .user-menu {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(62dvh, calc(100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius: 22px;
    transform: translateY(12px);
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }

  .user-menu--visible,
  .user-menu[aria-hidden='false'] {
    transform: translateY(0);
  }

  .user-menu__header {
    padding: var(--space-4);
  }

  .user-menu__avatar {
    width: 40px;
    height: 40px;
  }

  .user-menu__link {
    padding: var(--space-4);
  }

  .user-menu__link:hover {
    transform: translateX(2px);
  }
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  .user-menu,
  .user-toggle__button,
  .user-toggle__theme-btn {
    animation: none;
    transition: none;
  }

  body.user-menu-open::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .user-menu--visible {
    transform: translateY(0);
  }
}

/* ========== DARK THEME ========== */
[data-theme='dark'] .user-menu {
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--gray-900));
  border-color: var(--gray-700);
}

[data-theme='dark'] .user-menu__header {
  background: color-mix(in srgb, var(--bg-card-secondary) 86%, transparent);
}

[data-theme='dark'] .user-menu__header--guest {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-blue) 18%, transparent), transparent 74%),
    color-mix(in srgb, var(--bg-card-secondary) 86%, transparent);
}

[data-theme='dark'] .user-menu__avatar {
  border-color: var(--gray-700);
}


/* bundled: assets/css/components/weather.css */
/* ==========================================================================
   WEATHER WIDGET
   Surface compacta de clima com resumo e painel de detalhes.

   Contract:
   - `#weather-widget` e `#weather-details-popup` permanecem para o runtime atual
   - `weather-master-container` concentra as custom properties do bloco
   - estados visuais usam modificadores (`--loading`, `--error`, `--visible`)
     ou `data-weather-state`
   ========================================================================== */

.weather-master-container {
  --weather-widget-min-width: 88px;
  --weather-widget-min-height: 44px;
  --weather-widget-padding-y: 8px;
  --weather-widget-padding-x: 12px;
  --weather-widget-radius: var(--border-radius-full);
  --weather-widget-shadow: 0 10px 24px color-mix(in srgb, var(--gray-900) 14%, transparent);
  --weather-widget-shadow-hover: 0 14px 30px color-mix(in srgb, var(--gray-900) 18%, transparent);
  --weather-widget-border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
  --weather-widget-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card-primary) 88%, transparent), color-mix(in srgb, var(--bg-card-secondary) 58%, transparent)),
    color-mix(in srgb, var(--bg-card-primary) 28%, transparent);
  --weather-widget-bg-hover:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card-primary) 94%, transparent), color-mix(in srgb, var(--bg-card-secondary) 66%, transparent)),
    color-mix(in srgb, var(--bg-card-primary) 34%, transparent);
  --weather-popup-width: min(284px, calc(100vw - 28px));
  --weather-popup-padding: 14px;
  --weather-popup-radius: 22px;
  --weather-popup-bg:
    linear-gradient(160deg, color-mix(in srgb, var(--bg-card-primary) 88%, transparent), color-mix(in srgb, var(--bg-card-secondary) 66%, transparent)),
    color-mix(in srgb, var(--bg-card-primary) 24%, transparent);
  --weather-popup-border: 1px solid color-mix(in srgb, var(--border-color) 56%, transparent);
  --weather-popup-shadow:
    0 18px 42px color-mix(in srgb, var(--gray-900) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--white) 14%, transparent);
  --weather-detail-border: 1px solid color-mix(in srgb, var(--border-color) 54%, transparent);
  --weather-detail-bg: color-mix(in srgb, var(--bg-card-primary) 52%, transparent);
  --weather-detail-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent);
  --weather-detail-icon-bg: color-mix(in srgb, var(--bg-card-secondary) 76%, transparent);
  --weather-popup-divider: 1px solid color-mix(in srgb, var(--border-color) 42%, transparent);
  --weather-detail-label-color: var(--text-secondary);
  --weather-spinner-track: color-mix(in srgb, var(--primary-blue) 28%, transparent);

  position: relative;
  z-index: var(--z-weather);
  width: fit-content;
  max-width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

#weather-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--weather-widget-min-width);
  min-height: var(--weather-widget-min-height);
  padding: var(--weather-widget-padding-y) var(--weather-widget-padding-x);
  border-radius: var(--weather-widget-radius);
  background: var(--weather-widget-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: var(--weather-widget-border);
  box-shadow: var(--weather-widget-shadow);
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base);
}

#weather-widget:hover {
  transform: translateY(-1px);
  box-shadow: var(--weather-widget-shadow-hover);
  background: var(--weather-widget-bg-hover);
}

body.using-keyboard #weather-widget:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
}

body.using-pointer #weather-widget:focus-visible {
  outline: none;
}

#weather-temperature {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -0.03em;
}

#weather-icon,
#weather-popup-condition-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#weather-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#weather-icon i,
#weather-popup-condition-icon i {
  font-size: 1.1rem;
}

.weather-icon-svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#weather-icon .weather-icon-svg {
  width: 22px;
  height: 22px;
}

#weather-details-popup,
.weather-details-popup {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  right: auto;
  width: var(--weather-popup-width);
  padding: var(--weather-popup-padding);
  border-radius: var(--weather-popup-radius);
  background: var(--weather-popup-bg);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  border: var(--weather-popup-border);
  box-shadow: var(--weather-popup-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(0.96);
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base);
  z-index: var(--z-weather-popup, var(--z-panel));
}

#weather-details-popup.weather-details-popup--visible,
.weather-details-popup.weather-details-popup--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.weather-popup-headline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: var(--weather-popup-divider);
}

.weather-popup-condition-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card-secondary) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 12%, transparent);
}

.weather-popup-condition-icon .weather-icon-svg {
  width: 26px;
  height: 26px;
}

.weather-popup-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.weather-location-name,
#weather-popup-location-name {
  width: 100%;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
  text-align: center;
  word-break: break-word;
}

.weather-condition-label {
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  color: var(--weather-detail-label-color);
  text-align: center;
}

.weather-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weather-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 8px;
  text-align: center;
  border-radius: 16px;
  background: var(--weather-detail-bg);
  border: var(--weather-detail-border);
  box-shadow: var(--weather-detail-shadow);
}

.weather-detail-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--weather-detail-icon-bg);
}

.weather-detail .icon {
  --loquei-icon-size: 0.88rem;
  color: var(--primary-blue);
}

.weather-detail-label {
  font-size: 0.66rem;
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--weather-detail-label-color);
}

.weather-detail-value,
#weather-humidity,
#weather-wind,
#weather-feels-like,
#weather-pressure {
  font-size: 0.84rem;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
}

#weather-widget.weather-widget--loading {
  position: relative;
  pointer-events: none;
}

#weather-widget.weather-widget--loading::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid var(--weather-spinner-track);
  border-top-color: var(--primary-blue);
  border-radius: 999px;
  animation: spin 0.6s linear infinite;
}

#weather-widget.weather-widget--loading #weather-temperature,
#weather-widget.weather-widget--loading #weather-icon {
  opacity: 0.2;
}

#weather-widget.weather-widget--error {
  border-color: color-mix(in srgb, var(--secondary-red) 26%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--secondary-red-light) 82%, var(--bg-card-primary)), color-mix(in srgb, var(--secondary-red-light) 48%, var(--bg-card-secondary))),
    color-mix(in srgb, var(--bg-card-primary) 26%, transparent);
}

#weather-widget.weather-widget--error #weather-temperature,
#weather-details-popup.weather-details-popup--error .weather-condition-label {
  color: var(--secondary-red);
}

#weather-widget[data-weather-state='clear-day'],
#weather-details-popup[data-weather-state='clear-day'] {
  color: var(--warning);
}

#weather-widget[data-weather-state='clear-night'],
#weather-details-popup[data-weather-state='clear-night'] {
  color: color-mix(in srgb, var(--text-main) 36%, var(--primary-blue));
}

#weather-widget[data-weather-state='partly-cloudy-day'],
#weather-widget[data-weather-state='partly-cloudy-night'],
#weather-details-popup[data-weather-state='partly-cloudy-day'],
#weather-details-popup[data-weather-state='partly-cloudy-night'] {
  color: color-mix(in srgb, var(--text-main) 18%, var(--primary-blue));
}

#weather-widget[data-weather-state='cloudy'],
#weather-widget[data-weather-state='overcast'],
#weather-details-popup[data-weather-state='cloudy'],
#weather-details-popup[data-weather-state='overcast'] {
  color: var(--gray-500);
}

#weather-widget[data-weather-state='drizzle'],
#weather-widget[data-weather-state='rain'],
#weather-widget[data-weather-state='heavy-rain'],
#weather-details-popup[data-weather-state='drizzle'],
#weather-details-popup[data-weather-state='rain'],
#weather-details-popup[data-weather-state='heavy-rain'] {
  color: var(--primary-blue);
}

#weather-widget[data-weather-state='thunderstorm'],
#weather-details-popup[data-weather-state='thunderstorm'] {
  color: color-mix(in srgb, var(--secondary-red) 28%, var(--primary-blue));
}

#weather-widget[data-weather-state='snow'],
#weather-widget[data-weather-state='sleet'],
#weather-details-popup[data-weather-state='snow'],
#weather-details-popup[data-weather-state='sleet'] {
  color: color-mix(in srgb, var(--text-main) 16%, var(--primary-blue));
}

#weather-widget[data-weather-state='mist'],
#weather-widget[data-weather-state='dust'],
#weather-details-popup[data-weather-state='mist'],
#weather-details-popup[data-weather-state='dust'] {
  color: var(--gray-400);
}

#weather-widget[data-weather-state='wind'],
#weather-widget[data-weather-state='tornado'],
#weather-details-popup[data-weather-state='wind'],
#weather-details-popup[data-weather-state='tornado'] {
  color: var(--gray-600);
}

@media (max-width: 768px) {
  #weather-widget {
    min-width: 96px;
    min-height: 44px;
    padding: 9px 13px;
  }

  #weather-temperature {
    font-size: var(--font-size-lg);
  }

  #weather-icon,
  #weather-icon .weather-icon-svg {
    width: 24px;
    height: 24px;
  }

  #weather-details-popup,
  .weather-details-popup {
    width: min(328px, calc(100vw - 28px));
    padding: 16px;
  }
}

@media (max-width: 480px) {
  #weather-widget {
    min-width: 88px;
    min-height: 44px;
    padding: 8px 12px;
  }

  #weather-temperature {
    font-size: var(--font-size-base);
  }

  #weather-icon,
  #weather-icon .weather-icon-svg {
    width: 22px;
    height: 22px;
  }

  #weather-details-popup,
  .weather-details-popup {
    position: fixed;
    top: auto;
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-height: min(50dvh, 320px);
    overflow-y: auto;
    padding: 12px;
    border-radius: 20px;
    transform: translateY(12px);
  }

  #weather-details-popup.weather-details-popup--visible,
  .weather-details-popup.weather-details-popup--visible {
    transform: translateY(0);
  }

  .weather-popup-headline {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .weather-popup-copy {
    width: 100%;
  }

  .weather-popup-condition-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .weather-popup-condition-icon .weather-icon-svg {
    width: 26px;
    height: 26px;
  }

  .weather-location-name,
  #weather-popup-location-name {
    font-size: 0.9rem;
  }

  .weather-condition-label {
    font-size: 0.75rem;
  }

  .weather-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .weather-detail {
    padding: 10px 6px;
    border-radius: 14px;
    gap: 4px;
  }

  .weather-detail-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .weather-detail .icon {
    font-size: 0.88rem;
  }

  .weather-detail-label {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }

  .weather-detail-value,
  #weather-humidity,
  #weather-wind,
  #weather-feels-like,
  #weather-pressure {
    font-size: 0.82rem;
  }
}

@media (max-width: 320px) {
  #weather-details-popup,
  .weather-details-popup {
    left: 12px;
    right: 12px;
    bottom: 8px;
    padding: 10px;
  }

  .weather-details-grid {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #weather-widget,
  #weather-details-popup,
  .weather-details-popup {
    transition: none;
    animation: none;
  }

  #weather-widget:hover {
    transform: none;
  }
}


/* bundled: assets/css/components/accordions.css */
/* ==========================================================================
   SEMANTIC ACCORDIONS (details/summary)
   Padrão reutilizável para painéis colapsáveis sem JS.
   ========================================================================== */

.accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.accordion + .accordion {
  margin-top: -1px;
}

.accordion__header {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: transparent;
  transition: background-color 0.15s ease;
}

.accordion__header::-webkit-details-marker {
  display: none;
}

.accordion__header::after {
  content: '›';
  font-size: 1.25rem;
  transition: transform 0.25s ease;
}

.accordion[open] > .accordion__header::after {
  transform: rotate(90deg);
}

.accordion__header:hover {
  background: var(--bg-card-secondary);
}

.accordion__body {
  padding: 0 var(--space-4) var(--space-4);
  animation: accordion-reveal 0.2s ease;
}

@keyframes accordion-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme='dark'] .accordion {
  border-color: var(--border-color);
}

[data-theme='dark'] .accordion__header {
  color: var(--text-main);
}

[data-theme='dark'] .accordion__header:hover {
  background: var(--bg-accent);
}

[data-theme='dark'] .accordion__body {
  color: var(--text-secondary);
}


/* Forms - validacao DOM complementar */

/* bundled: assets/css/forms/validator.css */
/* ==========================================================================
   FORM VALIDATOR
   Estados visuais de validação para campos, grupos e mensagens de erro.

   Contract:
   - `.has-error` e `.is-error` permanecem equivalentes
   - `.field-error` é a superfície textual padrão
   - o arquivo evita sobrescrever estilos de formulário fora do estado de erro
   ========================================================================== */

/* ========== ERRO DE CAMPO ========== */
.field-error {
  color: var(--secondary-red);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.field-error::before {
  content: '⚠️';
  font-size: var(--font-size-xs, 0.75rem);
}

/* ========== ESTADOS DE ERRO ========== */
.form-group.has-error input,
.form-group.is-error input,
.form-group.has-error textarea,
.form-group.is-error textarea,
.form-group.has-error select,
.form-group.is-error select,
.input-group.has-error input,
.input-group.is-error input,
.input-group.has-error textarea,
.input-group.is-error textarea,
.input-group.has-error select,
.input-group.is-error select,
.campo.has-error input,
.campo.is-error input,
.campo.has-error textarea,
.campo.is-error textarea,
.campo.has-error select,
.campo.is-error select {
  border-color: var(--secondary-red);
  box-shadow: 0 0 0 2px var(--secondary-red-light);
}

.form-group.has-error label,
.form-group.is-error label,
.input-group.has-error label,
.input-group.is-error label,
.campo.has-error label,
.campo.is-error label {
  color: var(--secondary-red);
}

/* ========== SUPORTE A TEMA ESCURO ========== */
[data-theme='dark'] .form-group.has-error input,
[data-theme='dark'] .form-group.is-error input,
[data-theme='dark'] .form-group.has-error textarea,
[data-theme='dark'] .form-group.is-error textarea,
[data-theme='dark'] .form-group.has-error select,
[data-theme='dark'] .form-group.is-error select,
[data-theme='dark'] .input-group.has-error input,
[data-theme='dark'] .input-group.is-error input,
[data-theme='dark'] .input-group.has-error textarea,
[data-theme='dark'] .input-group.is-error textarea,
[data-theme='dark'] .input-group.has-error select,
[data-theme='dark'] .input-group.is-error select,
[data-theme='dark'] .campo.has-error input,
[data-theme='dark'] .campo.is-error input,
[data-theme='dark'] .campo.has-error textarea,
[data-theme='dark'] .campo.is-error textarea,
[data-theme='dark'] .campo.has-error select,
[data-theme='dark'] .campo.is-error select {
  border-color: var(--secondary-red);
  box-shadow: 0 0 0 2px var(--secondary-red-overlay-15);
}

[data-theme='dark'] .form-group.has-error label,
[data-theme='dark'] .form-group.is-error label,
[data-theme='dark'] .input-group.has-error label,
[data-theme='dark'] .input-group.is-error label,
[data-theme='dark'] .campo.has-error label,
[data-theme='dark'] .campo.is-error label {
  color: var(--secondary-red);
}


/* Filters - sistema de filtros */

/* bundled: assets/css/filters/property-filters.css */
/* ==========================================================================
   PROPERTY FILTERS COMPONENT
   Painel de filtros de busca com versão expandida e compacta.

   Contract:
   - `.property-filters-container` é a superfície principal
   - `.filters-content.is-expanded` e `[aria-hidden='false']` representam o
     mesmo estado aberto
   - estilos de formulário devem permanecer escopados ao bloco
   ========================================================================== */
.property-filters-container {
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--bg-card-secondary) 92%, transparent);
  border-bottom: 1px solid var(--border-color);
}

.filters-title {
  font: var(--font-title-tertiary);
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.filters-content {
  padding: var(--space-8) var(--space-6);
  display: none;
  transition: all var(--transition-base);
}

.filters-content.is-expanded,
.filters-content[aria-hidden='false'] {
  display: block;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

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

.filter-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.filter-input,
.filter-select {
  padding: var(--space-2);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
  background: var(--bg-card-primary);
  color: var(--text-main);
  box-sizing: border-box;
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue-light);
}

.filter-input:focus-visible,
.filter-select:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.search-input {
  width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-10);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
  background: var(--bg-card-primary);
  color: var(--text-main);
  box-sizing: border-box;
}

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

.search-icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.filters-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-primary);
}

/* Action buttons consume the global button contract from components/buttons.css. */

.property-filters-container :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .property-filters-container {
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .filters-row {
    grid-template-columns: 1fr;
  }

  .filters-header {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .filters-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .property-filters-container {
    width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius-2xl) var(--border-radius-2xl) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: min(60dvh, calc(100dvh - env(safe-area-inset-top)));
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .filters-content {
    max-height: calc(60dvh - 120px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

@media (prefers-reduced-motion: reduce) {
  .property-filters-container,
  .filters-content {
    animation: none;
    transition: none;
  }
}

/* Dark theme */
[data-theme='dark'] .property-filters-container {
  background: color-mix(in srgb, var(--bg-card-primary) 95%, var(--gray-900));
  border-color: var(--gray-700);
}

[data-theme='dark'] .filters-header {
  background: var(--bg-hover-dark);
  border-color: var(--border-primary-dark);
}

[data-theme='dark'] .filters-title {
  color: var(--text-primary-dark);
}

[data-theme='dark'] .filter-input,
[data-theme='dark'] .filter-select,
[data-theme='dark'] .search-input {
  background: var(--bg-card-primary-dark);
  border-color: var(--border-primary-dark);
  color: var(--text-primary-dark);
}

[data-theme='dark'] .filter-label {
  color: var(--text-primary-dark);
}

[data-theme='dark'] .search-icon {
  color: var(--text-tertiary-dark);
}

/* Dark button styles remain in components/buttons.css. */

/* ============================================
   SEARCH PAGE-SPECIFIC EXTENSIONS
   ============================================ */

.search-price-range-container {
  margin: var(--space-2) 0;
}

.search-price-range .dual-range-values {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

.search-price-range .dual-range-numeric-inputs {
  margin-top: var(--spacing-xs);
}

.search-price-range .dual-range-numeric-input {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
}

/* Fallback for basic price inputs when the dual-range control is unavailable. */

.price-range-fallback .price-input {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-card-primary);
  color: var(--text-main);
  transition: var(--transition-base);
}

.price-range-fallback .price-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-light);
}

.price-range-fallback .price-separator {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Tema escuro para search */
[data-theme='dark'] .price-range-fallback .price-input {
  background: var(--bg-card-primary-dark);
  border-color: var(--border-primary-dark);
  color: var(--text-primary-dark);
}

[data-theme='dark'] .price-range-fallback .price-separator {
  color: var(--text-tertiary-dark);
}

/* ========== ACESSIBILIDADE - FORCED COLORS MODE ========== */
@media (forced-colors: active) {
  .property-filters-container {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .filter-input,
  .filter-select,
  .search-input,
  .price-input {
    border: 1px solid currentColor;
  }

  .btn--primary,
  .btn--secondary,
  .btn-outline,
  .btn--sm {
    border: 2px solid currentColor;
  }

  .filter-input:focus,
  .filter-input:focus-visible,
  .filter-select:focus,
  .filter-select:focus-visible,
  .search-input:focus,
  .price-input:focus,
  .btn--primary:focus-visible,
  .btn--secondary:focus-visible,
  .btn-outline:focus-visible,
  .btn--sm:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }
}


/* bundled: assets/css/filters/search-filters.css */
/* ==========================================================================
   MAP SEARCH FILTERS
   Superfície de filtros rápidos do mapa público.

   Contract:
   - `.filtros-mapa` é o painel principal
   - `--visible` e `[aria-hidden='false']` representam o mesmo estado aberto
   - aliases em português permanecem porque o DOM e o JS ainda dependem deles
   ========================================================================== */

.filtros-mapa {
  position: fixed;
  top: calc(var(--border-spacing) + 48px + var(--space-4));
  left: var(--border-spacing);
  z-index: var(--z-panel);
  width: min(var(--filtros-width, 440px), calc(100dvw - (var(--border-spacing) * 2)));
  max-height: calc(100dvh - (var(--border-spacing) + 48px + var(--space-4)) - var(--border-spacing));
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--white));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: var(--transition-base);
  touch-action: none;
}

.filtros-mapa.filtros-mapa--mounted {
  display: flex;
}

.filtros-mapa.filtros-mapa--visible,
.filtros-mapa[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filtros-mapa.is-loading {
  cursor: progress;
}

.filtros-mapa.is-loading .filtros-mapa-content {
  opacity: 0.76;
}

/* ========== HEADER ========== */
.filtros-mapa-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-card-secondary) 92%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}

.filtros-mapa-title {
  font: var(--font-title-tertiary);
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1.25;
}

.filtros-mapa-title i {
  color: var(--primary-gray);
  --loquei-icon-size: 1rem;
}

.filtros-mapa-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.filtros-mapa-close {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--border-radius-full);
  background: var(--primary-gray-light);
  color: var(--primary-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: var(--font-size-xl);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.filtros-mapa-close:hover {
  background: var(--primary-gray-hover);
  color: var(--white);
  transform: translateY(-1px);
}

body.using-keyboard .filtros-mapa-close:focus-visible {
  outline: 2px solid var(--primary-gray);
  outline-offset: 2px;
}

/* ========== CONTENT ========== */
.filtros-mapa-content {
  padding: var(--space-4);
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-accent) var(--bg-card-secondary);
}

.filtros-mapa-content::-webkit-scrollbar {
  width: 6px;
}

.filtros-mapa-content::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.filtros-mapa-content::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.filtros-mapa-content::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ========== FORM GROUPS ========== */
.filtro-group {
  margin-bottom: var(--space-3);
}

.filtro-group:last-child {
  margin-bottom: 0;
}

.filtro-group-card {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border: 1px solid color-mix(in srgb, var(--border-primary) 90%, var(--primary-blue));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-blue) 5%, transparent);
}

.filtro-group-card--full {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.filtro-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin-bottom: var(--space-2);
  font-family: var(--font-family-primary);
}

.filtro-label i {
  color: var(--primary-gray);
  margin-right: var(--space-1);
  --loquei-icon-size: 0.95rem;
}

.filtro-group-help {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 56ch;
}

.filtro-section {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-primary) 88%, transparent);
  border-radius: var(--border-radius-xl);
}

.filtro-section--primary {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 4%, var(--bg-card-primary)) 0%, color-mix(in srgb, var(--bg-card-primary) 98%, var(--white)) 100%);
}

.filtro-section--price {
  padding: 0;
  background: transparent;
  border: none;
}

.filtro-section--accordion {
  padding: 0;
  background: transparent;
  border: none;
}

.filtro-section-title {
  margin: 0 0 var(--space-1);
  color: var(--text-main);
  font: var(--font-title-quaternary);
  line-height: 1.25;
}

.filtro-section-copy {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.btn-geolocation .loquei-icon,
.filtro-btn .loquei-icon {
  --loquei-icon-size: 1rem;
}

/* ========== INPUTS ========== */
.filtro-input,
.filtro-select {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--text-main);
  font: var(--font-ui-secondary);
  line-height: 1.2;
  text-align: left;
  transition: var(--transition-fast);
  outline: none;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.filtro-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
}

.filtro-select-wrap {
  position: relative;
}

.filtro-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid color-mix(in srgb, var(--text-secondary) 88%, var(--primary-blue));
  border-bottom: 2px solid color-mix(in srgb, var(--text-secondary) 88%, var(--primary-blue));
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.filtro-input-unit {
  position: relative;
}

.filtro-input-unit .filtro-input {
  padding-right: 54px;
}

.filtro-input-unit-label {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  pointer-events: none;
}

.filtro-input:focus,
.filtro-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px var(--primary-blue-overlay-xs);
}

.filtro-input:hover,
.filtro-select:hover {
  border-color: var(--gray-400);
}

.filtro-input::placeholder {
  color: var(--text-secondary);
  font-weight: var(--font-weight-normal);
}

body.using-keyboard .filtro-input:focus-visible,
body.using-keyboard .filtro-select:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* ========== LOCALIZAÇÃO ========== */
.localizacao-container {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.localizacao-container .filtro-input {
  flex: 1;
}

.btn-geolocation {
  width: var(--size-button-md);
  height: var(--size-button-md);
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
}

.btn-geolocation:hover {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-color: var(--gray-400);
  transform: translateY(-1px);
}

body.using-keyboard .btn-geolocation:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

[data-theme='dark'] .filtros-mapa :is(.filtro-input, .filtro-select, .btn-geolocation) {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme='dark'] .filtro-group-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card-primary) 95%, var(--gray-900)) 0%, color-mix(in srgb, var(--bg-card-secondary) 92%, var(--primary-blue)) 100%);
  border-color: color-mix(in srgb, var(--border-color) 88%, var(--primary-blue));
}

[data-theme='dark'] .filtros-mapa :is(.filtro-input, .filtro-select):hover,
[data-theme='dark'] .filtros-mapa .btn-geolocation:hover {
  border-color: var(--gray-600);
}

[data-theme='dark'] .filtros-mapa .filtro-input::placeholder {
  color: var(--text-secondary);
}

[data-theme='dark'] .filtro-select-wrap::after,
[data-theme='dark'] .filtro-input-unit-label {
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--text-secondary) 86%, var(--primary-blue));
}

/* ========== DUAL RANGE SLIDER ========== */
.price-range-container {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 4%, var(--bg-card-primary)) 0%, var(--bg-card-primary) 100%);
  border: 1px solid color-mix(in srgb, var(--border-primary) 82%, var(--primary-blue));
  border-radius: var(--border-radius-xl);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-blue) 8%, transparent);
}

.price-range-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.price-range-context {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.price-range-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--border-radius-full);
  background: color-mix(in srgb, var(--primary-blue) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--primary-blue) 22%, var(--border-primary));
  color: var(--primary-blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.price-range-slider-stage {
  position: relative;
  padding: 10px 0;
}

.dual-range-track {
  position: relative;
  height: 6px;
  background: color-mix(in srgb, var(--gray-200) 88%, var(--primary-blue));
  border-radius: 3px;
  margin: 0;
}

.dual-range-progress {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-gray));
  border-radius: 3px;
  transition: var(--transition-fast);
}

.dual-range-input {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--border-radius-full);
  background: var(--white);
  border: 2px solid var(--primary-blue);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 6px 18px var(--primary-blue-overlay-xs);
  transition: var(--transition-fast);
}

.dual-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 22px var(--primary-blue-overlay-lg);
}

.dual-range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--border-radius-full);
  background: var(--white);
  border: 2px solid var(--primary-blue);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 6px 18px var(--primary-blue-overlay-xs);
}

.dual-range-values {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
  color: var(--text-main);
}

.price-range-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.price-range-card-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.price-min,
.price-max,
.price-range-container .dual-range-value {
  min-width: 0;
  width: 100%;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--white));
  border: 1px solid color-mix(in srgb, var(--border-primary) 88%, var(--primary-blue));
  border-radius: var(--border-radius-md);
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary-blue) 5%, transparent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.dual-range-separator {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.price-range-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-2xs);
  color: var(--text-secondary);
}

.price-range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.price-preset-chip {
  min-height: var(--size-button-md);
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--border-primary) 86%, var(--primary-blue));
  border-radius: var(--border-radius-full);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  transition: var(--transition-fast);
}

.price-preset-chip:hover,
.price-preset-chip:focus-visible {
  border-color: color-mix(in srgb, var(--primary-blue) 58%, var(--border-primary));
  color: var(--primary-blue);
  transform: translateY(-1px);
}

.price-preset-chip--active,
.price-preset-chip[aria-pressed='true'] {
  background: linear-gradient(135deg, var(--primary-blue), color-mix(in srgb, var(--primary-gray) 82%, var(--primary-blue)));
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-blue) 24%, transparent);
}

/* ========== GRID ROW ========== */
.filtro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filtro-row .filtro-group {
  margin-bottom: 0;
}

.filtro-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.filtro-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 50px;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--gray-50) 88%, var(--white));
  border: 1px solid color-mix(in srgb, var(--border-color) 88%, var(--primary-blue));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  font: var(--font-ui-secondary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-blue) 5%, transparent);
}

.filtro-checkbox-item:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 7%, var(--white)) 0%, color-mix(in srgb, var(--primary-blue) 4%, var(--bg-card-primary)) 100%);
  border-color: color-mix(in srgb, var(--primary-blue) 60%, var(--border-color));
  color: var(--primary-blue);
  transform: translateY(-1px);
}

.filtro-checkbox-item:has(.filtro-checkbox-input:checked) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-blue) 92%, white) 0%, color-mix(in srgb, var(--primary-gray) 84%, var(--primary-blue)) 100%);
  border-color: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-blue) 26%, transparent);
}

.filtro-checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-blue);
  cursor: pointer;
  flex: 0 0 18px;
}

.filtro-checkbox-label {
  cursor: pointer;
  user-select: none;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

/* ========== SEPARATOR ========== */

/* ========== ACCORDION ========== */
.filtro-accordion-btn {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border: 1px solid color-mix(in srgb, var(--border-primary) 88%, var(--primary-blue));
  border-radius: var(--border-radius-xl);
  color: var(--text-main);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-fast);
  line-height: 1.2;
  text-align: left;
  box-sizing: border-box;
}

.filtro-accordion-btn:hover {
  background: color-mix(in srgb, var(--primary-blue) 5%, var(--bg-card-primary));
  border-color: color-mix(in srgb, var(--primary-blue) 55%, var(--border-primary));
}

body.using-keyboard .filtro-accordion-btn:focus-visible {
  outline: 2px solid var(--primary-gray);
  outline-offset: 2px;
}

.filtro-accordion-btn i:first-child {
  color: var(--primary-gray);
  margin-right: var(--space-2);
}

.filtro-accordion-btn i:last-child {
  transition: transform var(--transition-fast);
}

.filtro-accordion-btn[aria-expanded="true"] i:last-child {
  transform: rotate(180deg);
}

.filtro-accordion-content {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg-card-primary) 96%, var(--white));
  border: 1px solid color-mix(in srgb, var(--border-primary) 88%, transparent);
  border-radius: var(--border-radius-xl);
  animation: slideDown var(--transition-base);
}

.filtro-menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-md);
  transition: var(--transition-fast);
}

.filtro-menu-link:hover {
  background: var(--bg-accent, var(--gray-50));
  color: var(--text-main);
}

.filtro-menu-link i {
  color: var(--primary-gray);
  font-size: var(--font-size-xs);
}

/* ========== ACTION BUTTONS ========== */
.filtro-actions {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.filtro-actions--inline {
  margin: 0;
}

.filtro-actions--footer {
  position: sticky;
  bottom: 0;
  padding: var(--space-2) var(--space-4) max(var(--space-2), env(safe-area-inset-bottom));
  margin: 0 calc(-1 * var(--space-4));
  background: var(--bg-card-primary);
  border-top: 1px solid var(--border-color);
}

.filtro-btn {
  flex: 1;
  min-height: var(--size-button-md);
  height: var(--size-button-md);
  padding: 0 var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--border-radius-xl);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.filtro-btn i {
  font-size: var(--font-size-sm);
}

.filtro-btn-primary {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-blue);
}

.filtro-btn-primary:hover {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue-lg);
}

.filtro-btn-primary:active {
  transform: translateY(0);
}

.filtro-btn-secondary {
  background: var(--white);
  color: var(--text-main);
  border: 1.5px solid var(--border-color);
}

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

body.using-keyboard .filtro-btn:focus-visible {
  outline: 2px solid var(--primary-gray);
  outline-offset: 2px;
}

body.using-pointer .filtros-mapa-close:focus-visible,
body.using-pointer .btn-geolocation:focus-visible,
body.using-pointer .filtro-accordion-btn:focus-visible,
body.using-pointer .filtro-btn:focus-visible {
  outline: none;
}

/* ========== LEGAL FOOTER ========== */
.filtro-legal-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.filtro-legal-text {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 58ch;
}

.filtro-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

.filtro-legal-link {
  font-size: var(--font-size-xs);
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.filtro-legal-link:hover {
  text-decoration: underline;
}

[data-theme='dark'] .filtro-checkbox-item {
  background: color-mix(in srgb, var(--bg-card-secondary) 96%, var(--gray-900));
  border-color: color-mix(in srgb, var(--border-color) 88%, var(--primary-blue));
  color: var(--text-main);
}

[data-theme='dark'] .filtro-checkbox-item:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 16%, var(--bg-card-secondary)) 0%, color-mix(in srgb, var(--primary-blue) 9%, var(--bg-card-primary)) 100%);
  border-color: var(--primary-blue);
  color: var(--text-main);
}

[data-theme='dark'] .filtro-checkbox-input {
  accent-color: color-mix(in srgb, var(--white) 82%, var(--primary-blue));
}

[data-theme='dark'] .filtro-group-help {
  color: var(--text-secondary);
}

[data-theme='dark'] .filtro-section {
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--gray-900));
  border-color: var(--border-color);
}

[data-theme='dark'] .filtro-section--price,
[data-theme='dark'] .filtro-section--accordion {
  background: transparent;
  border-color: transparent;
}

[data-theme='dark'] .filtros-mapa-subtitle,
[data-theme='dark'] .filtro-section-copy {
  color: var(--text-secondary);
}

[data-theme='dark'] .price-min,
[data-theme='dark'] .price-max {
  background: var(--bg-card-secondary);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme='dark'] .price-range-container {
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--gray-900));
  border-color: var(--border-primary);
}

[data-theme='dark'] .price-preset-chip {
  background: color-mix(in srgb, var(--bg-card-secondary) 96%, var(--gray-900));
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme='dark'] .price-preset-chip:hover,
[data-theme='dark'] .price-preset-chip:focus-visible {
  border-color: color-mix(in srgb, var(--primary-blue) 58%, var(--border-color));
  color: color-mix(in srgb, var(--white) 84%, var(--primary-blue));
}

[data-theme='dark'] .price-preset-chip--active,
[data-theme='dark'] .price-preset-chip[aria-pressed='true'] {
  color: var(--white);
}

[data-theme='dark'] .price-range-badge {
  background: color-mix(in srgb, var(--primary-blue) 18%, var(--bg-card-secondary));
  border-color: color-mix(in srgb, var(--primary-blue) 40%, var(--border-color));
  color: color-mix(in srgb, var(--white) 84%, var(--primary-blue));
}

[data-theme='dark'] .price-range-card-label,
[data-theme='dark'] .price-range-scale {
  color: var(--text-secondary);
}

[data-theme='dark'] .filtro-separator,
[data-theme='dark'] .filtro-legal-footer {
  border-color: var(--border-color);
}

[data-theme='dark'] .filtro-btn-secondary {
  background: var(--bg-card-secondary);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme='dark'] .filtro-btn-secondary:hover {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border-color: var(--gray-600);
}

[data-theme='dark'] .filtro-accordion-btn,
[data-theme='dark'] .filtro-accordion-content {
  background: color-mix(in srgb, var(--bg-card-secondary) 94%, var(--gray-900));
  border-color: var(--border-color);
}

[data-theme='dark'] .filtro-accordion-btn:hover {
  background: color-mix(in srgb, var(--primary-blue) 12%, var(--bg-card-secondary));
  border-color: color-mix(in srgb, var(--primary-blue) 50%, var(--border-color));
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 1024px) {
  .filtros-mapa {
    width: min(var(--filtros-width-mobile, 420px), calc(100dvw - (var(--border-spacing) * 2)));
    max-height: calc(100dvh - (var(--border-spacing) + 48px + var(--space-4)) - var(--border-spacing));
  }
}

@media (max-width: 768px) {
  .filtros-mapa {
    top: calc(var(--border-spacing-mobile) + 44px + var(--space-2));
    left: max(var(--space-3), env(safe-area-inset-left));
    right: max(var(--space-3), env(safe-area-inset-right));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - (var(--border-spacing-mobile) + 44px + var(--space-2)) - var(--border-spacing-mobile));
  }

  .filtro-input,
  .filtro-select {
    font-size: var(--font-size-base);
  }

  .localizacao-container {
    flex-direction: row;
    align-items: center;
  }

  .btn-geolocation {
    width: 44px;
    height: var(--input-height-md);
    flex: 0 0 44px;
  }

  .filtro-row {
    grid-template-columns: 1fr;
  }

  .filtro-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .price-range-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .filtros-mapa {
    top: calc(env(safe-area-inset-top) + 44px + var(--space-1));
    left: max(var(--space-2), env(safe-area-inset-left));
    right: max(var(--space-2), env(safe-area-inset-right));
    max-height: calc(100dvh - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 20px;
  }

  .filtros-mapa-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .filtros-mapa-title {
    font-size: var(--font-size-base);
  }

  .filtros-mapa-content {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .localizacao-container {
    flex-direction: row;
    align-items: center;
  }

  .btn-geolocation {
    width: 44px;
    height: var(--input-height-md);
    flex: 0 0 44px;
  }

  .filtro-actions {
    flex-direction: column;
    align-items: center;
  }

  .dual-range-values {
    flex-wrap: nowrap;
  }

  .dual-range-separator {
    text-align: center;
  }

  .filtro-btn {
    width: 100%;
    max-width: 280px;
    height: var(--size-button-md);
    font-size: var(--font-size-sm);
  }

  .filtro-legal-footer {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    text-align: center;
  }

  .filtro-legal-links {
    gap: var(--space-2);
    justify-content: center;
  }

  .price-range-header {
    flex-direction: column;
    align-items: stretch;
  }

  .price-range-badge {
    width: fit-content;
  }
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  .filtros-mapa,
  .filtro-btn,
  .btn-geolocation {
    animation: none;
    transition: none;
  }

  .filtros-mapa.filtros-mapa--visible,
  .filtros-mapa[aria-hidden='false'] {
    transform: translateY(0);
  }
}

[data-theme='dark'] .filtros-mapa {
  background: color-mix(in srgb, var(--bg-card-primary) 95%, var(--gray-900));
  border-color: var(--border-color);
}


/* bundled: assets/css/filters/geolocation-search.css */
/* ==========================================================================
   SEARCH GEOLOCATION
   Módulo auxiliar para localização atual, status e limpeza de contexto.

   Contract:
   - `.search-geolocation` é a superfície do bloco
   - `.geolocation-status--*` comunica estado de carregamento/sucesso/erro
   - botões devem manter foco visível explícito
   ========================================================================== */
.search-geolocation {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border-radius: var(--radius-card);
  border: var(--border-light);
  box-shadow: var(--shadow-sm);
}

.geolocation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: var(--size-button-md);
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  font: var(--font-label-md);
  transition: var(--transition-base);
  box-shadow: var(--shadow-blue);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.geolocation-btn:hover:not(:disabled) {
  background: var(--primary-blue-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-lg);
}

.geolocation-btn:disabled {
  background: var(--text-tertiary);
  cursor: not-allowed;
  transform: none;
}

.geolocation-btn:focus-visible,
.geolocation-clear:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.geolocation-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
}

.geolocation-status.geolocation-status--loading {
  background: var(--warning-light);
  color: var(--warning);
}

.geolocation-status.geolocation-status--success {
  background: var(--accent-green-light);
  color: var(--accent-green);
}

.geolocation-status.geolocation-status--error {
  background: var(--secondary-red-light);
  color: var(--secondary-red);
}

.geolocation-info {
  padding: var(--spacing-sm);
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
}

.location-name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  margin-bottom: 4px;
}

.location-details {
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.location-distance {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.geolocation-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--secondary-red);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: all var(--transition-base);
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.geolocation-clear:hover {
  background: var(--danger-dark);
}

/* Responsive */
@media (max-width: 768px) {
  .search-geolocation {
    padding: var(--spacing-sm);
  }

  .geolocation-btn {
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
}

/* Dark theme */
[data-theme='dark'] .search-geolocation {
  background: var(--bg-card-primary-dark);
  border-color: var(--border-primary-dark);
}

[data-theme='dark'] .geolocation-info {
  background: var(--bg-hover-dark);
}

[data-theme='dark'] .location-name {
  color: var(--text-primary-dark);
}

[data-theme='dark'] .location-details {
  color: var(--text-secondary-dark);
}

[data-theme='dark'] .location-distance {
  color: var(--text-tertiary-dark);
}

[data-theme='dark'] .geolocation-btn {
  background: var(--primary-blue);
  color: var(--white);
}

[data-theme='dark'] .geolocation-btn:hover {
  background: var(--primary-blue-dark);
}

[data-theme='dark'] .geolocation-btn:disabled {
  background: var(--text-tertiary-dark);
}


/* Map - OpenLayers e controles */

/* bundled: assets/css/map/map-base.css */
/* ==========================================================================
   MAP BASE
   Camada-base do OpenLayers e do canvas principal do mapa público.

   Contract:
   - `.map-container`, `.mapa` e `#mapa` permanecem equivalentes
   - a folha evita `!important` e usa seletor suficiente para vencer defaults
   - feedback de foco dos marcadores faz parte do contrato de acessibilidade
   ========================================================================== */

.map-container,
.mapa,
#mapa {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  z-index: var(--z-map);
  background:
    radial-gradient(
      circle at top center,
      color-mix(in srgb, var(--primary-blue) 10%, transparent) 0%,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--map-bg-primary) 92%, white 8%) 0%,
      var(--map-bg-primary) 100%
    );
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: none;
  contain: layout style;
}

.map-startup-status {
  position: fixed;
  top: calc(var(--border-spacing) + 48px + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-panel) + 1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--border-radius-full);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--white) 72%, var(--bg-card-primary)) 0%,
    color-mix(in srgb, var(--bg-card-primary) 94%, var(--white)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--overlay-white-lg));
  box-shadow:
    0 18px 34px color-mix(in srgb, var(--primary-blue) 12%, transparent),
    inset 0 1px 0 var(--overlay-white-lg);
  color: var(--text-main);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  touch-action: none;
}

.map-startup-status__label {
  font: inherit;
}

.map-startup-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-blue);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-blue) 28%, transparent);
  animation: map-startup-pulse 1.35s ease-in-out infinite;
}

body.map-runtime-ready .map-startup-status:not(.map-startup-status--visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
}

.map-startup-status--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.map-startup-status--empty {
  width: min(calc(100vw - 32px), 420px);
  justify-content: center;
  text-align: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card-primary) 88%, var(--warning-bg)) 0%,
    color-mix(in srgb, var(--bg-card-primary) 94%, var(--warning-bg)) 100%
  );
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border-color));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--warning) 14%, transparent);
}

.map-startup-status--empty .map-startup-status__label {
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.map-startup-status--empty .map-startup-status__dot {
  background: var(--warning);
}

/* Viewport - Especificidade aumentada */
:is(.map-container, #mapa, .mapa) .ol-viewport {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

:is(.map-container, #mapa, .mapa) :is(.ol-viewport, .ol-layers, .ol-layer) {
  width: 100%;
  height: 100%;
}

:is(.map-container, #mapa, .mapa) canvas,
:is(.map-container, #mapa, .mapa) img {
  display: block;
}

/* Marcadores */
.marker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--map-transition);
  filter: drop-shadow(0 2px 4px var(--map-text-secondary));
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--border-radius-full);
  touch-action: manipulation;
}

.marker-icon:hover {
  transform: scale(1.1);
}

.marker-icon.marker-icon--selected,
.marker-icon[aria-pressed='true'] {
  transform: scale(1.2);
  animation: marker-bounce 0.6s ease-out;
}

/* Popup */
.ol-popup {
  position: absolute;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2xl);
  padding: 0;
  border-radius: var(--radius-card);
  border: var(--glass-border);
  min-width: 300px;
  max-width: 340px;
  width: min(340px, calc(100vw - 32px));
  z-index: var(--z-panel);
  transition: var(--transition-base);
}

.ol-popup-content {
  padding: var(--space-6);
  font: var(--font-ui-secondary);
  color: var(--text-main);
}

/* Mantém a atribuição obrigatória dos provedores discreta, legível e acessível. */
:is(.map-container, #mapa, .mapa) .ol-attribution {
  right: max(8px, env(safe-area-inset-right));
  bottom: max(6px, env(safe-area-inset-bottom));
  max-width: min(62vw, 420px);
  padding: 2px 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card-primary) 78%, transparent);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.25;
  opacity: 0.76;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

:is(.map-container, #mapa, .mapa) .ol-attribution a,
:is(.map-container, #mapa, .mapa) .ol-attribution button {
  color: inherit;
}

:is(.map-container, #mapa, .mapa) .ol-attribution button {
  width: 44px;
  height: 44px;
  margin: -14px -2px -14px 2px;
  border-radius: var(--border-radius-md);
}

/* Os controles nativos de zoom são substituídos pela interface da Loquei. */
:is(.map-container, #mapa, .mapa) :is(.ol-zoom, .ol-rotate) {
  display: none;
}

/* Animações */
@keyframes marker-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes map-startup-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-blue) 30%, transparent);
  }
  70% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary-blue) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-blue) 0%, transparent);
  }
}

/* Performance mode */
:is(.map-container, #mapa, .mapa).performance-mode .marker-icon {
  animation: none;
  transition: none;
}

/* Acessibilidade */
:is(.map-container, #mapa, .mapa):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-blue) 70%, white);
  outline-offset: -4px;
}

:is(.map-container, #mapa, .mapa) .marker-icon:focus-visible {
  outline: 3px solid var(--map-text-link);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .map-startup-status,
  .map-startup-status__dot,
  :is(.map-container, #mapa, .mapa) .marker-icon {
    animation: none;
    transition: none;
  }
}

:is(.map-container, #mapa, .mapa) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsivo */
@media (max-width: 768px) {
  .map-startup-status {
    top: calc(var(--border-spacing-mobile) + 44px + var(--space-2));
    width: min(calc(100vw - 32px), 360px);
    justify-content: center;
  }

  .map-startup-status--empty {
    width: min(calc(100vw - 40px), 320px);
    padding: 10px 12px;
    gap: 10px;
  }

  :is(.map-container, #mapa, .mapa) .ol-popup {
    font-size: var(--font-size-2xs);
    min-width: 0;
    width: min(320px, calc(100vw - 32px));
    max-width: none;
  }

  :is(.map-container, #mapa, .mapa) .ol-popup-content {
    padding: var(--space-4);
  }

  :is(.map-container, #mapa, .mapa) .ol-attribution {
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    max-width: min(82vw, 320px);
  }
}

@media (max-width: 480px) {
  .map-startup-status--empty {
    width: min(calc(100vw - 28px), 280px);
    font-size: var(--font-size-xs);
    line-height: 1.35;
  }

  :is(.map-container, #mapa, .mapa) .ol-popup {
    font-size: var(--font-size-2xs);
    width: min(292px, calc(100vw - 24px));
  }

  :is(.map-container, #mapa, .mapa) .ol-popup-content {
    padding: var(--space-3);
  }
}

/* Tema dark */
[data-theme='dark'] :is(.map-container, #mapa, .mapa) {
  --map-bg-primary: var(--gray-900);
  --map-bg-secondary: var(--gray-800);
  --map-bg-tertiary: var(--gray-700);
  --map-text-primary: var(--white);
  --map-text-secondary: var(--overlay-white-lg);
  --map-text-link: var(--primary-blue-light);
  --map-border-color: var(--overlay-white-xs);
}

[data-theme='dark'] .map-startup-status {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gray-800) 78%, var(--bg-card-primary)) 0%,
    color-mix(in srgb, var(--bg-card-primary) 94%, var(--gray-900)) 100%
  );
  border-color: color-mix(in srgb, var(--border-color) 76%, var(--overlay-white-xs));
  color: var(--text-main);
  box-shadow:
    0 20px 38px color-mix(in srgb, var(--black) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent);
}


/* bundled: assets/css/map/map-controls.css */
/* ==========================================================================
   MAP CONTROLS COMPONENT
   Controles flutuantes do OpenLayers para zoom, geolocalização e filtros.

   Contract:
   - `.map-control-btn` é a base visual compartilhada
   - estados preferem modificadores (`--active`, `--loading`) e `aria-pressed`
   - posicionamento estrutural continua delegado à camada de layout
   ========================================================================== */

/* ========== BOTAO DE CONTROLE ========== */
.map-control-btn {
  width: var(--size-button-md);
  height: var(--size-button-md);
  background: color-mix(in srgb, var(--bg-card-primary) 94%, white 6%);
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
  border-radius: var(--border-radius-full);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--gray-900) 14%, transparent);
  color: var(--text-main);
  font: var(--font-label-md);
  cursor: pointer;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.map-controls .map-control-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.map-control-btn:hover {
  background: color-mix(in srgb, var(--bg-card-secondary) 92%, white 8%);
  box-shadow: 0 12px 22px color-mix(in srgb, var(--gray-900) 16%, transparent);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--text-main) 14%, var(--border-color));
}

body.using-keyboard .map-control-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

body.using-pointer .map-control-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glass);
}

/* Os controles do mapa preservam foco visível mesmo sem o marcador de modalidade. */
.map-controls .map-control-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.map-control-btn--filter.map-control-btn--active,
.map-control-btn--filter[aria-pressed='true'] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 90%, white 10%) 0%, var(--primary-blue) 100%);
  border-color: color-mix(in srgb, var(--primary-blue) 78%, white 22%);
  color: var(--white);
  box-shadow:
    0 18px 32px color-mix(in srgb, var(--primary-blue) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent);
}

.map-control-btn--filter.map-control-btn--active:hover,
.map-control-btn--filter[aria-pressed='true']:hover {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
}

#btn-filter[aria-expanded='true']::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--primary-blue) 28%, transparent);
  pointer-events: none;
}

.map-controls {
  /* Posicionamento centralizado em assets/css/layout/positioning.css */
  display: flex;
  flex-direction: column;
}

/* Elementos BEM dentro do bloco map-controls */
.map-controls__btn {
  position: relative;
  top: auto;
  left: auto;
}

/* Modificadores BEM para botões de controle */
.map-controls__btn--geolocate {
  color: var(--accent-green);
}

.map-controls__btn--geolocate:hover {
  color: var(--accent-green-hover);
  border-color: var(--accent-green);
}

.map-controls__btn--geolocate.map-control-btn--active,
.map-controls__btn--geolocate[aria-pressed='true'] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-green-light) 72%, white 28%) 0%, var(--accent-green-light) 100%);
  border-color: color-mix(in srgb, var(--accent-green) 76%, white 24%);
  color: var(--accent-green);
}

.map-controls__btn--zoom-in,
.map-controls__btn--zoom-out {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.map-controls__btn--layers {
  color: var(--text-secondary);
}

.map-controls__btn--layers:hover,
.map-controls__btn--layers.map-control-btn--active,
.map-controls__btn--layers[aria-pressed='true'] {
  color: var(--primary-blue);
  border-color: color-mix(in srgb, var(--primary-blue) 54%, var(--border-color));
}

.map-layer-panel {
  position: fixed;
  left: calc(max(12px, env(safe-area-inset-left)) + var(--size-button-md) + 12px);
  bottom: calc(30px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-panel) + 1);
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card-primary) 88%, white 12%) 0%, color-mix(in srgb, var(--bg-card-primary) 96%, white 4%) 100%);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--gray-900) 14%, transparent);
  color: var(--text-main);
  pointer-events: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px) scale(0.98);
  transform-origin: left bottom;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast),
    transform var(--transition-fast);
  pointer-events: none;
  touch-action: none;
}

.map-layer-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 2px 2px 10px;
}

.map-layer-panel__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--primary-blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-layer-panel__header h2 {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-base);
  line-height: 1.25;
}

.map-layer-panel__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: var(--border-radius-full);
  background: color-mix(in srgb, var(--bg-card-secondary) 84%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
}

.map-layer-panel__close:hover {
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--primary-blue) 42%, var(--border-color));
}

.map-layer-panel__close:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.map-layer-panel--visible,
.map-layer-panel[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

body.app-runtime-booting .map-layer-panel,
body.app-shell-ready:not(.app-shell-live) .map-layer-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}

.map-layer-panel__modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.map-layer-panel__mode {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-full);
  background: transparent;
  color: var(--text-secondary);
  font: var(--font-label-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  touch-action: manipulation;
}

.map-layer-panel__mode:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.map-layer-panel__mode:hover {
  color: var(--text-main);
  background: color-mix(in srgb, var(--bg-card-secondary) 76%, transparent);
}

.map-layer-panel__mode--active,
.map-layer-panel__mode[aria-pressed='true'] {
  color: var(--white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-blue) 88%, white 12%) 0%, var(--primary-blue) 100%);
  border-color: color-mix(in srgb, var(--primary-blue) 70%, white 30%);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--primary-blue) 22%, transparent);
}

.map-layer-panel__hint {
  margin: 8px 4px 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.map-layer-panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
  padding: 8px 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  line-height: 1.2;
}

.map-layer-panel__legend[hidden] {
  display: none;
}

.map-layer-panel__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.map-layer-panel__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--white) 72%, transparent);
}

.map-layer-panel__swatch--low {
  background: var(--primary-blue);
}

.map-layer-panel__swatch--mid {
  background: color-mix(in srgb, var(--primary-blue) 68%, var(--danger) 32%);
}

.map-layer-panel__swatch--high {
  background: var(--warning);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .map-control-btn {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-base);
  }

  .map-layer-panel {
    left: calc(12px + 44px + 10px);
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    padding: 8px;
  }

  .map-layer-panel__legend {
    display: none;
  }

  .map-layer-panel__hint {
    margin-top: 10px;
    font-size: var(--font-size-2xs);
  }

  .map-layer-panel__mode {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .map-control-btn {
    width: var(--size-button-md);
    height: var(--size-button-md);
    font-size: var(--font-size-sm);
  }

  .map-layer-panel {
    left: calc(12px + 44px + 8px);
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .map-layer-panel__modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 320px) {
  .map-layer-panel {
    left: calc(8px + var(--size-button-md) + 8px);
    right: 8px;
    padding: 6px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .map-controls .map-control-btn:hover {
    transform: none;
  }

  .map-layer-panel__mode {
    min-height: 44px;
  }
}

/* ========== DARK MODE ========== */
[data-theme='dark'] .map-control-btn {
  background: color-mix(in srgb, var(--bg-card-primary) 94%, var(--gray-900) 6%);
  border-color: color-mix(in srgb, var(--gray-600) 78%, var(--overlay-white-xs));
  color: var(--white);
  box-shadow: 0 12px 20px color-mix(in srgb, var(--black) 26%, transparent);
}

[data-theme='dark'] .map-control-btn:hover {
  background: color-mix(in srgb, var(--gray-800) 92%, white 8%);
  border-color: color-mix(in srgb, var(--gray-500) 38%, var(--gray-600));
}

[data-theme='dark'] .map-control-btn--filter.map-control-btn--active,
[data-theme='dark'] .map-control-btn--filter[aria-pressed='true'] {
  background: var(--primary-blue-overlay-base);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

[data-theme='dark'] .map-layer-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gray-900) 84%, var(--bg-card-primary) 16%) 0%, color-mix(in srgb, var(--bg-card-primary) 94%, black 6%) 100%);
  border-color: color-mix(in srgb, var(--gray-600) 78%, var(--overlay-white-xs));
  box-shadow: 0 18px 36px color-mix(in srgb, var(--black) 28%, transparent);
}

[data-theme='dark'] .map-layer-panel__mode--active,
[data-theme='dark'] .map-layer-panel__mode[aria-pressed='true'] {
  color: var(--white);
  background: color-mix(in srgb, var(--primary-blue) 74%, var(--gray-900) 26%);
}

[data-theme='dark'] .map-controls__btn--geolocate.map-control-btn--active,
[data-theme='dark'] .map-controls__btn--geolocate[aria-pressed='true'] {
  background: var(--accent-green-overlay-15);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.map-control-btn.map-control-btn--loading {
  pointer-events: none;
  opacity: 0.9;
  transform: none;
}

.map-control-btn.map-control-btn--loading i {
  animation: spin 0.8s linear infinite;
}

.map-control-btn.map-control-btn--loading,
.map-control-btn.map-control-btn--active,
.map-control-btn[aria-pressed='true'] {
  box-shadow: var(--shadow-lg);
}

.map-control-btn.map-control-btn--loading::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .map-control-btn,
  .map-control-btn:hover,
  .map-control-btn--filter.map-control-btn--active:hover,
  .map-control-btn--filter[aria-pressed='true']:hover {
    transition: none;
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .map-control-btn {
    border-width: 3px;
    border-color: currentColor;
  }
  body.using-keyboard .map-control-btn:focus-visible {
    outline-width: 3px;
  }
}

/* ========== ACCESSIBILITY: FORCED COLORS ========== */
@media (forced-colors: active) {
  .map-control-btn,
  .filter-toggle__btn,
  .map-controls__btn,
  .map-controls__btn--geolocate,
  .map-controls__btn--zoom-in,
  .map-controls__btn--zoom-out,
  .map-control-btn--filter {
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  body.using-keyboard .map-control-btn:focus-visible,
  body.using-keyboard .filter-toggle__btn:focus-visible,
  body.using-keyboard .map-controls__btn:focus-visible,
  body.using-keyboard .map-controls__btn--geolocate:focus-visible,
  body.using-keyboard .map-control-btn--filter:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }
}


/* bundled: assets/css/map/overlay-performance.css */
/* ==========================================================================
   MAP OVERLAY PERFORMANCE
   Suspensão visual do mapa + GPU hints para overlays.
   ========================================================================== */

/* Estado inativo — remove o mapa do ciclo de pintura */
.map-container--inactive {
  visibility: hidden;
  pointer-events: none;
  will-change: auto;
  contain: strict;
}

/* Overlay com backdrop blur (GPU-accelerated) */
.overlay-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: opacity, backdrop-filter;
}

/* GPU promotion para elementos de overlay animados */
.overlay-gpu {
  transform: translateZ(0);
  will-change: transform, opacity;
}


/* Pages - padrões compartilhados de páginas */

/* bundled: assets/css/pages/_common.css */
/* ==========================================================================
   PAGINAS - BASE COMPARTILHADA
   Regras reutilizadas por páginas iframe e superfícies internas.

   Esta folha existe para:
   - layout base de páginas internas
   - loading overlays compartilhados
   - feedback messages semânticos
   - cards estatísticos utilitários

   Esta folha não deve virar outro catálogo de componentes.
   ========================================================================== */

/* ========== BASE IFRAME PAGE ========== */
body.iframe-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-body-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-main);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* ========== DECISION JOURNEY HERO ========== */
.decision-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-5);
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid color-mix(in srgb, var(--primary-blue) 22%, var(--border-color));
  border-radius: var(--border-radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-blue) 10%, transparent), transparent 68%),
    var(--bg-card-primary);
  box-shadow: var(--shadow-xs);
}

.decision-hero > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.decision-hero__eyebrow {
  color: var(--primary-blue);
  font-size: var(--font-size-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.decision-hero h1,
.decision-hero p {
  margin: 0;
}

.decision-hero h1 {
  max-width: 27ch;
  color: var(--text-main);
  font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
  line-height: 1.12;
  text-wrap: balance;
}

.decision-hero p {
  max-width: 64ch;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.decision-hero__assurance {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-full);
  background: var(--bg-card-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .decision-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .decision-hero__assurance {
    justify-self: start;
    white-space: normal;
  }
}

/* ========== SCROLLBAR CUSTOMIZADA ========== */
body.iframe-page::-webkit-scrollbar {
  width: 8px;
}

body.iframe-page::-webkit-scrollbar-track {
  background: var(--bg-card-secondary);
  border-radius: var(--border-radius-base);
}

body.iframe-page::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: var(--border-radius-base);
  transition: background var(--transition-fast);
}

body.iframe-page::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

body.iframe-page {
  scrollbar-width: thin;
  scrollbar-color: var(--text-tertiary) var(--bg-card-secondary);
}

/* ========== PAGE CONTAINER ========== */
.page-container {
  min-height: 100vh;
  height: auto;
  background: var(--bg-body-primary);
  overflow-x: hidden;
  overflow-y: auto;
}

/* ========== PAGE CONTENT ========== */
.page-content {
  padding: var(--spacing-md);
  max-width: var(--container-max-width-xl);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ========== LOADING OVERLAY ========== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--bg-body-primary) 82%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.loading-overlay .spinner {
  width: var(--size-avatar);
  height: var(--size-avatar);
  border: 4px solid var(--gray-100);
  border-top-color: var(--primary-blue);
  border-radius: var(--border-radius-full);
  animation: spin 0.8s var(--ease-smooth) infinite;
}

.loading-overlay p {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========== SECTION DIVIDER ========== */
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  margin: var(--space-8) 0;
}

/* ========== STAT CARDS ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-card-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--primary-blue-overlay-base);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-avatar);
  height: var(--size-avatar);
  background: var(--bg-accent);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-xl);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ========== FEEDBACK MESSAGES ========== */
.success-message {
  padding: var(--space-4);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--border-radius-lg);
  color: var(--success-text);
}

.error-message {
  padding: var(--space-4);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--border-radius-lg);
  color: var(--error-text);
}

.warning-message {
  padding: var(--space-4);
  background: var(--warning-bg);
  border-radius: var(--border-radius-lg);
  color: var(--warning-text);
}

.info-message {
  padding: var(--space-4);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--border-radius-lg);
  color: var(--info-text);
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 1024px) {
  .page-content {
    padding: var(--space-5);
  }

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

@media (max-width: 768px) {
  .page-content {
    padding: var(--space-4);
  }

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

@media (max-width: 480px) {
  .page-content {
    padding: var(--space-3);
  }

  .stat-card {
    padding: var(--space-4);
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }

  .stat-number {
    font-size: var(--font-size-xl);
  }
}

/* ========== TEMA ESCURO ========== */
[data-theme="dark"] body.iframe-page::-webkit-scrollbar-track {
  background: var(--bg-card-secondary);
}

[data-theme="dark"] body.iframe-page::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
}

[data-theme="dark"] .loading-overlay {
  background: var(--overlay-black-80);
}

[data-theme="dark"] .loading-overlay .spinner {
  border-color: var(--gray-600);
  border-top-color: var(--primary-blue);
}

[data-theme="dark"] .loading-overlay p {
  color: var(--text-secondary);
}

[data-theme="dark"] .section-divider {
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

@media (prefers-contrast: high) {
  .stat-card,
  .empty-state,
  .btn,
  .page-number {
    border-width: 2px;
  }
}

/* ========== CONTEXTO IFRAME CONTAINER ========== */
html[data-iframe-context='container'] {
  width: 100%;
  min-height: 100%;
  height: 100%;
}

body[data-iframe-context='container'] {
  width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-body-primary);
  color: var(--text-main);
  overflow-x: hidden;
}

/* ========== MEDIA SAFETY (IFRAME) ========== */
/* Evita webp/imagens em tamanho natural quebrando cards e layouts */
body[data-iframe-context='container']
  :where(.page-container, .page-content, .main-content, .chat-container, .imovel-container, .compliance-container, main)
  img {
  max-width: 100%;
  height: auto;
}

body[data-iframe-context='container'] :is(.card-image, .item-img, .imovel-img, .property-image, .gallery-image) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-iframe-context='container'].iframe-panel-context .page-container {
  min-height: 100%;
  padding: 0;
  background: transparent;
}

body[data-iframe-context='container'].iframe-panel-context .page-content {
  max-width: min(1220px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 30px);
}

body[data-iframe-context='container'].iframe-panel-context .main-content {
  max-width: min(1220px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 30px);
}

body[data-iframe-context='container'].iframe-full-context .page-container,
body[data-iframe-context='container'].iframe-full-context .imovel-container,
body[data-iframe-context='container'].iframe-full-context .chat-container,
body[data-iframe-context='container'].iframe-full-context .compliance-container {
  min-height: 100%;
}

body[data-iframe-context='container'] .loading-overlay {
  position: fixed;
  inset: 0;
}

@media (max-width: 768px) {
  body[data-iframe-context='container'].iframe-panel-context .page-content,
  body[data-iframe-context='container'].iframe-panel-context .main-content {
    padding: 14px 14px 16px;
  }
}


/* UI polish - acabamento global de baixa especificidade */

/* bundled: assets/css/ui/polish.css */
/* ==========================================================================
   UI POLISH - ACABAMENTO GLOBAL DO LOQUEI/

   Camada permanente de baixa especificidade para acabamento visual transversal.

   Regras:
   - nao guardar comportamento especifico de pagina ou componente
   - manter seletores com `:where()` para reduzir disputa de especificidade
   - promover regras maduras para `components/*`, `buttons.css`, `forms.css`
     ou `pages/_common.css` quando o design system estabilizar
   ========================================================================== */

:root {
  --polish-surface-ring: 0 0 0 1px color-mix(in srgb, var(--primary-blue) 8%, transparent);
  --polish-surface-shadow: 0 18px 48px color-mix(in srgb, var(--gray-900) 8%, transparent);
  --polish-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 22%, transparent);
}

body {
  text-rendering: optimizeLegibility;
}

/* ---------- Focus safety net (para elementos sem classe de componente) ---------- */

:where(a, button, input, select, textarea, [role='button'], [tabindex]):focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
  box-shadow: var(--polish-focus-ring);
}

/* ---------- Page entrance animation ---------- */

:where(.page-content, .main-content, .auth-container, .compliance-shell, .search-page, .details-page) {
  animation: loquei-polish-page-enter 220ms var(--ease-smooth, ease-out) both;
}

@keyframes loquei-polish-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.page-content, .main-content, .auth-container, .compliance-shell, .search-page, .details-page) {
    animation: none;
  }
}

/* ---------- Card hover polish (apenas cards sem component-level hover) ---------- */

:where(
  .empty-state,
  .settings-card,
  .profile-card,
  .notification-card,
  .schedule-card,
  .review-card,
  .compliance-card,
  .comparison-card
) {
  border-color: color-mix(in srgb, var(--border-color) 82%, var(--primary-blue) 18%);
}

:where(
  .empty-state,
  .settings-card,
  .profile-card,
  .notification-card,
  .schedule-card,
  .review-card,
  .compliance-card,
  .comparison-card
):hover {
  box-shadow: var(--polish-surface-shadow);
}

/* ---------- Typography micro-ajustes ---------- */

:where(.btn, button, .button) {
  letter-spacing: 0.01em;
}

:where(.badge, .property-card__status-badge, .property-card__price-badge) {
  letter-spacing: 0.02em;
}

/* ---------- Stacking isolation ---------- */

:where(.loading-overlay, .empty-state) {
  isolation: isolate;
}

/* ---------- Safe-area padding mobile ---------- */

/* sm-md: canonical large-phone/phablet boundary */
@media (max-width: 600px) {
  :where(.page-content, .main-content) {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
}


/* Positioning - Último para garantir precedência */

/* bundled: assets/css/layout/positioning.css */
/* ==========================================================================
   POSITIONING
   Fonte única para posicionamento de elementos flutuantes do shell principal.

   Contract:
   - este arquivo define apenas posição, não aparência de componentes
   - precisa ser carregado por último para vencer regras locais de página
   - safe-area e breakpoints móveis são tratados aqui
   ========================================================================== */

/* ========== TOP RAIL, FILTRO, USUÁRIO, CONTROLES, LOGO ========== */

/*
 * touch-action: none nos containers flutuantes impede que gestos de zoom
 * (pinch-to-zoom) passem por eles. O zoom só funciona quando os dedos estão
 * sobre o mapa (que mantém touch-action: pan-x pan-y pinch-zoom).
 * Isso evita que botões, menus e controles escalem com zoom acidental.
 */
.home-top-rail {
  --home-top-rail-padding-inline: 12px;
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: var(--z-floating);
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 0 var(--home-top-rail-padding-inline);
  pointer-events: none;
  isolation: isolate;
  touch-action: none;
}

.home-top-rail > * {
  pointer-events: auto;
}

.filter-toggle {
  position: relative;
  justify-self: start;
  z-index: calc(var(--z-floating) + 1);
  pointer-events: auto;
}

.filter-toggle__btn,
#btn-filter {
  position: relative;
  z-index: calc(var(--z-floating) + 2);
  pointer-events: auto;
}

.user-toggle {
  position: relative;
  justify-self: end;
  z-index: auto;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.map-controls {
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom));
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: var(--z-floating);
  touch-action: none;
}

.logo {
  position: fixed;
  right: 12px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: var(--z-floating);
  padding: var(--space-3);
  transition: var(--transition-base);
  touch-action: none;
}

.logo__image {
  width: 64px;
  height: 64px;
}

body.app-runtime-booting .home-top-rail,
body.app-runtime-booting .map-controls,
body.app-runtime-booting .logo,
body.app-runtime-booting #weather-master-container,
body.app-runtime-booting #btn-aura.aura-floating-btn,
body.app-runtime-booting #btn-contracts-home.contracts-floating-btn,
body.app-runtime-booting #user-menu,
body.app-runtime-booting #popup-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

body.app-shell-ready .home-top-rail,
body.app-shell-ready .map-controls,
body.app-shell-ready .logo,
body.app-shell-ready #weather-master-container,
body.app-shell-ready #btn-aura.aura-floating-btn,
body.app-shell-ready #btn-contracts-home.contracts-floating-btn {
  opacity: 1;
  visibility: visible;
  transition-property: transform, box-shadow;
}

body.app-shell-ready:not(.app-shell-live) .home-top-rail,
body.app-shell-ready:not(.app-shell-live) .map-controls,
body.app-shell-ready:not(.app-shell-live) .logo,
body.app-shell-ready:not(.app-shell-live) #weather-master-container,
body.app-shell-ready:not(.app-shell-live) #btn-aura.aura-floating-btn,
body.app-shell-ready:not(.app-shell-live) #btn-contracts-home.contracts-floating-btn {
  transition: none;
}

/* Estado de popup aberto */
body.popup-card-open .logo {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
}

/* ==========================================================================
   WEATHER - centro absoluto do viewport
   ========================================================================== */
#weather-master-container.weather-master-container {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-weather);
  max-width: clamp(108px, 18vw, 168px);
  pointer-events: auto;
  touch-action: none;
}

/* ==========================================================================
   AURA - Botão flutuante
   ========================================================================== */
#btn-aura.aura-floating-btn {
  position: fixed;
  right: 12px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: var(--z-aura-btn);
  transition: box-shadow var(--transition-base), opacity var(--transition-base);
}

#btn-contracts-home.contracts-floating-btn {
  --contracts-fab-transform: none;
  position: fixed;
  left: 12px;
  bottom: calc(250px + env(safe-area-inset-bottom));
  top: auto;
  right: auto;
  transform: var(--contracts-fab-transform);
  z-index: var(--z-floating);
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

@media (min-width: 1024px) {
  #btn-aura.aura-floating-btn {
    right: 20px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  }

  #btn-aura.aura-floating-btn:hover {
    transform: translateY(calc(-50% - 2px));
    box-shadow: var(--shadow-lg);
  }

  #btn-aura.aura-floating-btn:active {
    transform: translateY(-50%);
  }

  #btn-contracts-home.contracts-floating-btn {
    --contracts-fab-transform: none;
    left: 12px;
    bottom: calc(254px + env(safe-area-inset-bottom));
    right: auto;
    top: auto;
  }
}

#btn-contracts-home.contracts-floating-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

#btn-contracts-home.contracts-floating-btn:active {
  transform: none;
}

/* ==========================================================================
   RESPONSIVO - 768px
   ========================================================================== */
@media (max-width: 768px) {
  .home-top-rail {
    --home-top-rail-padding-inline: 16px;
    top: calc(16px + env(safe-area-inset-top));
  }

  .filter-toggle {
    top: auto;
    left: auto;
  }

  .user-toggle {
    top: auto;
    right: auto;
  }

  .map-controls {
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    gap: 10px;
  }

  .logo {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #weather-master-container.weather-master-container {
    top: calc(16px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    max-width: min(148px, calc(100vw - 168px));
  }

  #btn-aura.aura-floating-btn {
    top: 50%;
    right: 16px;
    bottom: auto;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    transition: opacity var(--transition-base);
  }

  #btn-contracts-home.contracts-floating-btn {
    --contracts-fab-transform: none;
    top: auto;
    left: 16px;
    right: auto;
    bottom: calc(236px + env(safe-area-inset-bottom));
    width: var(--size-button-md);
    height: var(--size-button-md);
  }

  #aura-chat-container.aura-chat-container {
    right: 16px;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    top: auto;
    transform: translateY(12px);
    width: calc(100vw - 32px);
    max-width: 400px;
    margin-left: auto;
    height: min(460px, calc(100dvh - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  #aura-chat-container.aura-chat-container.aura-chat-container--visible {
    transform: translateY(0);
  }
}

/* ==========================================================================
   RESPONSIVO - 480px
   ========================================================================== */
@media (max-width: 480px) {
  .home-top-rail {
    --home-top-rail-padding-inline: 12px;
    top: calc(12px + env(safe-area-inset-top));
  }

  .filter-toggle {
    top: auto;
    left: auto;
  }

  .user-toggle {
    top: auto;
    right: auto;
  }

  .map-controls {
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    gap: var(--space-2);
  }

  .logo {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #weather-master-container.weather-master-container {
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    max-width: min(120px, calc(100vw - 132px));
  }

  #btn-contracts-home.contracts-floating-btn {
    left: 12px;
    right: auto;
    bottom: calc(224px + env(safe-area-inset-bottom));
  }

  #btn-aura.aura-floating-btn {
    top: 50%;
    right: 12px;
    bottom: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    transform: translateY(-50%);
    transition: opacity var(--transition-base);
  }

  #aura-chat-container.aura-chat-container {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    transform: translateY(12px);
    width: calc(100vw - 24px);
    max-width: none;
    margin-left: auto;
    height: min(68dvh, calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
}

@media (max-width: 480px) {
  .home-top-rail {
    --home-top-rail-padding-inline: 10px;
    top: calc(10px + env(safe-area-inset-top));
  }

  .user-toggle {
    gap: 4px;
  }

  #weather-master-container.weather-master-container {
    max-width: min(104px, calc(100vw - 124px));
  }

  .map-controls {
    left: 10px;
  }

  .logo {
    right: 10px;
  }
}

/* ==========================================================================
   RESPONSIVO - 320px
   ========================================================================== */
@media (max-width: 320px) {
  .home-top-rail {
    --home-top-rail-padding-inline: 8px;
  }

  .map-controls {
    left: 8px;
    gap: var(--space-2);
  }

  .logo {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  #weather-master-container.weather-master-container {
    max-width: min(92px, calc(100vw - 118px));
  }

  #btn-aura.aura-floating-btn {
    right: 8px;
    bottom: auto;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    transition: opacity var(--transition-base);
  }

  .home-intro-shell {
    display: none;
  }

  #aura-chat-container.aura-chat-container {
    right: 8px;
    left: 8px;
    width: calc(100vw - 16px);
    height: min(66dvh, calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
}

/* ==========================================================================
   LANDSCAPE - altura reduzida
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .home-top-rail {
    top: calc(12px + env(safe-area-inset-top));
  }

  #weather-master-container.weather-master-container {
    max-width: 180px;
  }

  #btn-aura.aura-floating-btn {
    top: 50%;
    right: 12px;
    bottom: auto;
    transform: translateY(-50%);
    transition: opacity var(--transition-base);
  }

  #aura-chat-container.aura-chat-container {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    transform: translateY(12px);
    width: calc(100vw - 24px);
    height: min(70vh, calc(100vh - 4rem));
    max-height: calc(100vh - 4rem);
  }
}

/* ==========================================================================
   REDUZIR MOVIMENTO - Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #btn-aura.aura-floating-btn,
  #btn-aura.aura-floating-btn:hover,
  #btn-aura.aura-floating-btn:active {
    transition: none;
  }
}

@media (max-width: 768px) {
  body.popup-card-open #btn-aura.aura-floating-btn {
    opacity: 0;
    pointer-events: none;
  }
}