/* ========================================================================== 1. VARIÁVEIS DE TEMA (DARK / LIGHT) ========================================================================== */ /* Tema Escuro (Padrão) */ :root { /* Fundos Principais */ --bg-app: #0b0e14; --bg-card: rgba(18, 24, 38, 0.75); --bg-card-header: rgba(15, 23, 42, 0.8); --bg-header: rgba(15, 23, 42, 0.9); --bg-hover: rgba(30, 41, 59, 0.6); /* Cores de Texto */ --text-main: #f8fafc; --text-muted: #94a3b8; --text-subtle: #64748b; /* Bordas e Divisores */ --border-main: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); /* Elementos de Destaque / Ações */ --color-primary: #06b6d4; --color-primary-hover: #0891b2; --color-success: #10b981; --color-success-hover: #059669; --color-danger: #f43f5e; --color-danger-hover: #e11d48; --color-warning: #f59e0b; --color-neutral: #1e293b; --color-neutral-hover: #334155; /* Badges e Destaques (Dark Mode) */ --bg-badge-emerald: rgba(16, 185, 129, 0.1); --border-badge-emerald: rgba(16, 185, 129, 0.25); --bg-badge-amber: rgba(245, 158, 11, 0.1); --border-badge-amber: rgba(245, 158, 11, 0.25); --bg-badge-rose: rgba(244, 63, 94, 0.1); --border-badge-rose: rgba(244, 63, 94, 0.25); --bg-badge-neutral: rgba(148, 163, 184, 0.08); --border-badge-neutral: rgba(148, 163, 184, 0.15); --bg-badge-cyan: rgba(6, 182, 212, 0.1); --border-badge-cyan: rgba(6, 182, 212, 0.25); --bg-badge-purple: rgba(168, 85, 247, 0.15); --border-badge-purple: rgba(168, 85, 247, 0.3); --text-badge-purple: #c084fc; /* Destaques de Modais, Tabelas e Callouts */ --bg-highlight-cyan: rgba(6, 182, 212, 0.12); --border-highlight-cyan: rgba(6, 182, 212, 0.3); --bg-highlight-amber: rgba(245, 158, 11, 0.12); --border-highlight-amber: rgba(245, 158, 11, 0.3); --text-callout-amber: #fef08a; /* Modais Específicos */ --bg-modal-emerald: rgba(6, 78, 59, 0.4); --border-modal-emerald: rgba(16, 185, 129, 0.3); --bg-modal-cyan: rgba(22, 78, 99, 0.4); --border-modal-cyan: rgba(6, 182, 212, 0.3); /* Overlay de Modais */ --overlay-bg: rgba(2, 6, 23, 0.85); /* Sombras e Efeitos Especiais */ --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5); --shadow-glow-cyan: 0 0 20px -5px rgba(6, 182, 212, 0.35); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.7); } /* Tema Claro (Injetado via JavaScript no ) */ html.theme-light { /* Fundos Principais */ --bg-app: #f8fafc; --bg-card: rgba(255, 255, 255, 0.9); --bg-card-header: #f1f5f9; --bg-header: #ffffff; --bg-hover: #f1f5f9; /* Cores de Texto */ --text-main: #0f172a; --text-muted: #475569; --text-subtle: #64748b; /* Bordas e Divisores */ --border-main: #e2e8f0; --border-subtle: #cbd5e1; /* Elementos de Destaque / Ações */ --color-primary: #0284c7; --color-primary-hover: #0369a1; --color-success: #059669; --color-success-hover: #047857; --color-danger: #e11d48; --color-danger-hover: #be123c; --color-warning: #d97706; --color-neutral: #f1f5f9; --color-neutral-hover: #e2e8f0; /* Badges e Destaques (Light Mode) */ --bg-badge-emerald: #ecfdf5; --border-badge-emerald: #a7f3d0; --bg-badge-amber: #fffbeb; --border-badge-amber: #fde68a; --bg-badge-rose: #fff1f2; --border-badge-rose: #fecdd3; --bg-badge-neutral: #f1f5f9; --border-badge-neutral: #cbd5e1; --bg-badge-cyan: #f0f9ff; --border-badge-cyan: #bae6fd; --bg-badge-purple: #faf5ff; --border-badge-purple: #e9d5ff; --text-badge-purple: #7e22ce; /* Destaques de Modais, Tabelas e Callouts */ --bg-highlight-cyan: #ecfeff; --border-highlight-cyan: #a5f3fc; --bg-highlight-amber: #fffbeb; --border-highlight-amber: #fde68a; --text-callout-amber: #854d0e; /* Modais Específicos */ --bg-modal-emerald: #ecfdf5; --border-modal-emerald: #a7f3d0; --bg-modal-cyan: #ecfeff; --border-modal-cyan: #a5f3fc; /* Overlay de Modais */ --overlay-bg: rgba(15, 23, 42, 0.6); /* Sombras e Efeitos Especiais */ --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.05); --shadow-glow-cyan: 0 0 15px -3px rgba(2, 132, 199, 0.2); --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* ========================================================================== 2. REGRAS BASE GLOBAIS ========================================================================== */ html { scrollbar-gutter: stable; } html, body { background-color: var(--bg-app); color: var(--text-main); transition: background-color 0.25s ease, color 0.25s ease; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; } /* Transição suave para elementos interativos */ input, select, textarea, button, a { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== 3. COMPONENTES REUTILIZÁVEIS E DESIGN SYSTEM ========================================================================== */ /* -------------------------------------------------------------------------- 3.1. Cards e Contêineres -------------------------------------------------------------------------- */ .glass-card, .app-card { background-color: var(--bg-card); border: 1px solid var(--border-main); border-radius: 1rem; /* Rounded-2XL */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .app-card-header { background-color: var(--bg-card-header); border-color: var(--border-main); padding: 1rem 1.5rem; border-bottom-width: 1px; display: flex; align-items: center; justify-content: space-between; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .app-card-title { color: var(--text-main); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; } .app-card:hover { border-color: var(--border-highlight-cyan); box-shadow: 0 12px 35px -10px rgba(6, 182, 212, 0.18), var(--shadow-glow-cyan); transform: translateY(-2px); } /* Card específico para atalhos de navegação */ .nav-card { box-shadow: var(--shadow-card); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 1rem; } .nav-card:hover { background-color: var(--bg-hover); border-color: var(--border-highlight-cyan); transform: translateY(-2px); box-shadow: var(--shadow-glow-cyan); } .nav-card-action { font-size: 0.75rem; font-weight: 700; margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; transition: transform 0.2s ease; } .nav-card:hover .nav-card-action { transform: translateX(0.375rem); } .border-app-line { border-color: var(--border-main); } .vinculo-box { background-color: var(--bg-card-header); border: 1px solid var(--border-main); padding: 1rem; border-radius: 0.75rem; } /* -------------------------------------------------------------------------- 3.2. Utilitários de Texto, Títulos e Elementos Genéricos -------------------------------------------------------------------------- */ .page-title { color: var(--text-main); font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em; } .page-subtitle { color: var(--text-muted); margin-top: 0.25rem; font-size: 0.875rem; } .text-main { color: var(--text-main); } .text-muted { color: var(--text-muted); } .text-primary { color: var(--color-primary); } .text-warning { color: var(--color-warning); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-purple { color: var(--text-badge-purple); } .bg-accent { background: linear-gradient(135deg, var(--color-primary) 0%, #0284c7 50%, #3b82f6 100%); } .info-card { background-color: var(--bg-hover); border: 1px solid var(--border-main); padding: 0.75rem; border-radius: 0.75rem; } .info-box-compact { background-color: var(--bg-hover); border: 1px solid var(--border-main); color: var(--text-muted); border-radius: 0.75rem; padding: 0.75rem; font-size: 0.75rem; } .callout-amber, .info-callout-amber { background-color: var(--bg-highlight-amber); border: 1px solid var(--border-highlight-amber); color: var(--text-callout-amber); padding: 1rem; border-radius: 0.75rem; white-space: pre-wrap; font-size: 0.875rem; backdrop-filter: blur(8px); } .box-highlight-cyan, .highlighted-box-cyan { background-color: var(--bg-highlight-cyan); border: 1px solid var(--border-highlight-cyan); padding: 0.875rem; border-radius: 0.75rem; backdrop-filter: blur(8px); } .box-highlight-neutral { background-color: var(--bg-hover); border: 1px solid var(--border-main); padding: 0.875rem; border-radius: 0.75rem; } .bg-highlight-amber { background-color: var(--bg-highlight-amber); } .bg-overlay { background-color: var(--overlay-bg); backdrop-filter: blur(8px); } .bg-surface { background-color: var(--bg-card-header); } .border-highlight-amber { border-color: var(--border-highlight-amber); } /* -------------------------------------------------------------------------- 3.3. Botões de Ação -------------------------------------------------------------------------- */ .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--color-success); color: #ffffff; border: 1px solid transparent; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); } .btn-success:hover { background-color: var(--color-success-hover); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35); transform: translateY(-1px); } .btn-success:active { transform: scale(0.97); } .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1.125rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--color-danger); color: #ffffff; border: 1px solid transparent; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25); } .btn-danger:hover { background-color: var(--color-danger-hover); box-shadow: 0 6px 16px rgba(244, 63, 94, 0.35); transform: translateY(-1px); } .btn-danger:active { transform: scale(0.97); } .btn-neutral { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1.125rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--color-neutral); border: 1px solid var(--border-main); color: var(--text-main); backdrop-filter: blur(8px); } .btn-neutral:hover { background-color: var(--color-neutral-hover); border-color: var(--border-highlight-cyan); color: var(--text-main); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .btn-neutral:active { transform: scale(0.97); } .btn-neutral-accent { background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1.125rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-glow-cyan); } .btn-neutral-accent:hover { background: linear-gradient(135deg, #22d3ee 0%, #0369a1 100%); box-shadow: 0 8px 20px -4px rgba(6, 182, 212, 0.5); transform: translateY(-1px); } .btn-neutral-accent:active { transform: scale(0.97); } /* -------------------------------------------------------------------------- 3.4. Inputs e Formulários -------------------------------------------------------------------------- */ .app-input { background-color: rgba(15, 23, 42, 0.85); border: 1px solid var(--border-main); color: var(--text-main); width: 100%; padding: 0.625rem 0.875rem; border-radius: 0.75rem; font-size: 0.875rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; } html.theme-light .app-input { background-color: #ffffff; } .app-input::placeholder { color: var(--text-subtle); } .app-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2); } .app-label, .form-label { color: var(--text-muted); display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.375rem; letter-spacing: 0.05em; } .app-label-sm { color: var(--text-muted); display: block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .form-radio-label { color: var(--text-main); display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; } .search-input { padding-left: 2.75rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.875rem; border-radius: 0.75rem; } .search-icon { color: var(--text-muted); position: absolute; left: 1rem; } .label-cyan { color: var(--color-primary); } .input-highlight-success { border-color: var(--border-badge-emerald); color: var(--color-success); font-weight: 600; } .input-highlight-success:focus { border-color: var(--color-success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } .input-highlight-danger { border-color: var(--border-badge-rose); color: var(--color-danger); font-weight: 600; } .input-highlight-danger:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2); } .app-form-actions { border-top: 1px solid var(--border-main); padding-top: 1rem; display: flex; justify-content: flex-end; gap: 0.75rem; } .app-input-accent-cyan { background-color: var(--bg-card); border-color: var(--border-highlight-cyan); color: var(--color-primary); } .app-input-accent-cyan:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25); } /* -------------------------------------------------------------------------- 3.5. Tabelas -------------------------------------------------------------------------- */ .app-table { width: 100%; text-align: left; border-collapse: separate; border-spacing: 0; } .app-table thead tr { background-color: var(--bg-card-header); border-bottom: 1px solid var(--border-main); color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; } .app-table th { padding: 0.875rem 1.25rem; } .app-table tbody { font-size: 0.875rem; color: var(--text-muted); } .app-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background-color 0.2s ease; } .app-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border-subtle); transition: all 0.2s ease; color: var(--text-main); } .table-row-clickable, .table-row-interactive, .app-table tbody tr:hover td { background-color: var(--bg-hover); cursor: pointer; } .app-table tbody tr:last-child td { border-bottom: none; } .table-loading, .empty-state { color: var(--text-muted); padding: 2rem 1.5rem; text-align: center; font-size: 0.875rem; font-weight: 500; } /* -------------------------------------------------------------------------- 3.6. Estruturas de Modal, Dropdowns e Overlays -------------------------------------------------------------------------- */ .modal-backdrop, .app-modal-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background-color: var(--overlay-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .app-modal-overlay:not(.hidden) { display: flex; align-items: center; justify-content: center; } .app-modal-container, .app-modal-content { background-color: var(--bg-card); border: 1px solid var(--border-main); width: 100%; max-width: 32rem; /* max-w-lg */ overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-modal); transform: scale(1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .modal-header, .app-modal-header { background-color: var(--bg-card-header); border-bottom: 1px solid var(--border-main); color: var(--text-main); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .modal-header-emerald { background-color: var(--bg-modal-emerald); border-bottom: 1px solid var(--border-modal-emerald); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .modal-header-cyan { background-color: var(--bg-modal-cyan); border-bottom: 1px solid var(--border-modal-cyan); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .modal-title, .app-modal-title { color: var(--text-main); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; } .modal-close-btn, .app-modal-close { color: var(--text-muted); font-size: 1.5rem; font-weight: 400; line-height: 1; cursor: pointer; transition: color 0.2s ease; } .modal-close-btn:hover, .app-modal-close:hover { color: var(--text-main); } .modal-footer, .app-modal-footer { background-color: var(--bg-card-header); border-top: 1px solid var(--border-main); padding: 1rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.625rem; } /* Autocomplete e Dropdowns dinâmicos */ .app-dropdown, [id^="dropdown_"] { background-color: rgba(15, 23, 42, 0.95); border: 1px solid var(--border-main); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5); position: absolute; left: 0; right: 0; margin-top: 0.375rem; max-height: 12rem; overflow-y: auto; border-radius: 0.75rem; z-index: 50; border-color: var(--border-main); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html.theme-light .app-dropdown, html.theme-light [id^="dropdown_"] { background-color: #ffffff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } .dropdown-item, [id^="dropdown_"] > div { color: var(--text-muted); padding: 0.625rem 1rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; border-bottom: 1px solid var(--border-subtle); } .dropdown-item:last-child, [id^="dropdown_"] > div:last-child { border-bottom: none; } .dropdown-item:hover, [id^="dropdown_"] > div:hover { background-color: var(--bg-highlight-cyan); color: var(--color-primary); } /* -------------------------------------------------------------------------- 3.7. Badges, Métricas e Alertas -------------------------------------------------------------------------- */ .app-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; } .badge-success { background-color: var(--bg-badge-emerald); border: 1px solid var(--border-badge-emerald); color: var(--color-success); } .badge-warning { background-color: var(--bg-badge-amber); border: 1px solid var(--border-badge-amber); color: var(--color-warning); } .badge-danger { background-color: var(--bg-badge-rose); border: 1px solid var(--border-badge-rose); color: var(--color-danger); } .badge-cyan { background-color: var(--bg-badge-cyan); border: 1px solid var(--border-badge-cyan); color: var(--color-primary); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; display: inline-block; transition: all 0.2s ease; } .badge-cyan:hover { background-color: var(--bg-highlight-cyan); border-color: var(--border-highlight-cyan); box-shadow: var(--shadow-glow-cyan); } .badge-purple { background-color: var(--bg-badge-purple); border: 1px solid var(--border-badge-purple); color: var(--text-badge-purple); display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .badge-slate { background-color: var(--bg-badge-neutral); border: 1px solid var(--border-badge-neutral); color: var(--text-muted); display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .stat-box, .stat-badge { background-color: var(--bg-card); border: 1px solid var(--border-main); padding: 1rem; border-radius: 0.75rem; text-align: center; transition: all 0.2s ease; backdrop-filter: blur(12px); } .stat-label { color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.01em; } .stat-value { font-size: 1.5rem; font-weight: 900; margin-top: 0.5rem; } .stat-emerald { background-color: var(--bg-badge-emerald); border-color: var(--border-badge-emerald); color: var(--color-success); } .stat-amber { background-color: var(--bg-badge-amber); border-color: var(--border-badge-amber); color: var(--color-warning); } .stat-rose { background-color: var(--bg-badge-rose); border-color: var(--border-badge-rose); color: var(--color-danger); } .stat-neutral { background-color: var(--bg-badge-neutral); border-color: var(--border-badge-neutral); color: var(--text-main); } .alert-danger { padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--border-badge-rose); font-size: 0.875rem; font-weight: 500; background-color: var(--bg-badge-rose); color: var(--color-danger); backdrop-filter: blur(8px); } .alert-success { padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--border-badge-emerald); font-size: 0.875rem; font-weight: 500; background-color: var(--bg-badge-emerald); color: var(--color-success); backdrop-filter: blur(8px); } .bg-primary { background-color: var(--color-primary); } .bg-success { background-color: var(--color-success); } /* -------------------------------------------------------------------------- 3.8. Topbar / Navegação -------------------------------------------------------------------------- */ .app-topbar { background-color: var(--bg-header); border-bottom: 1px solid var(--border-main); position: relative; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .topbar-status-text { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; } .topbar-status-name { color: var(--text-main); font-weight: 700; } .topbar-level-badge { background-color: var(--bg-hover); color: var(--text-muted); font-size: 0.75rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; margin-left: 0.25rem; font-weight: 600; } .topbar-link { color: var(--text-muted); padding-bottom: 0.25rem; transition: color 0.2s ease; } .topbar-link:hover { color: var(--text-main); } .topbar-link-active { color: var(--color-primary); border-color: var(--color-primary); border-bottom-width: 2px; padding-bottom: 0.25rem; font-weight: 700; } .topbar-link-mobile { color: var(--text-muted); padding: 0.5rem 0.75rem; border-radius: 0.375rem; transition: all 0.2s ease; } .topbar-link-mobile:hover { background-color: var(--bg-hover); color: var(--text-main); } .topbar-link-mobile-active { background-color: var(--bg-highlight-cyan); color: var(--color-primary); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-weight: 700; } .topbar-icon-btn { background-color: var(--bg-hover); border: 1px solid var(--border-main); color: var(--text-muted); padding: 0.375rem 0.625rem; border-radius: 0.5rem; transition: all 0.2s ease; cursor: pointer; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.25rem; } .topbar-icon-btn:hover { color: var(--text-main); border-color: var(--border-highlight-cyan); box-shadow: var(--shadow-glow-cyan); } .topbar-logout-btn { background-color: var(--bg-badge-rose); border: 1px solid var(--border-badge-rose); color: var(--color-danger); font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 0.5rem; transition: all 0.2s ease; cursor: pointer; } .topbar-logout-btn:hover { background-color: var(--color-danger); color: #ffffff; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3); } .topbar-mobile-menu { background-color: var(--bg-header); border-top: 1px solid var(--border-main); padding: 0.75rem 1rem; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); } /* -------------------------------------------------------------------------- 3.9. Página de Login -------------------------------------------------------------------------- */ .login-page { background-color: var(--bg-app); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; } .login-card { background-color: var(--bg-card); border: 1px solid var(--border-main); width: 100%; max-width: 28rem; padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow-modal); backdrop-filter: blur(16px); } .login-title { color: var(--text-main); font-size: 1.5rem; font-weight: 700; } .login-subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem; }