:root { /* Paleta Oficial Oscar's Club */ --navy: #061A40; --navy-light: #151B49; --pool: #5ED3F3; --pool-dark: #3BBCE2; --bg: #F4F8FC; --white: #FFFFFF; --text: #0B1736; --muted: #6F7C91; /* Cores de Estado / Feedback */ --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --purple: #7C3AED; --border: #E2E8F0; /* Sombras, Raios e Espaçamentos Refinados */ --shadow-soft: 0 4px 15px rgba(6, 26, 64, 0.04); --shadow-card: 0 8px 20px rgba(6, 26, 64, 0.03); --shadow-hover: 0 12px 28px rgba(94, 211, 243, 0.15); --radius-xl: 20px; --radius-lg: 14px; --radius-md: 8px; --radius-sm: 6px; --spacing-layout: 28px; --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Reset & Base - Evitar Scrolling Duplo */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Barlow', 'Inter', 'Segoe UI', Arial, sans-serif; } html, body { height: 100vh; width: 100vw; overflow: hidden; background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 14px; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; } input, select, textarea { font-family: inherit; font-size: 14px; } .hidden { display: none !important; } .permission-disabled { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none !important; } /* Preloader de arranque e autenticação */ .app-preloader { position: fixed; inset: 0; z-index: 12000; background: linear-gradient(165deg, rgba(6, 26, 64, 0.96) 0%, rgba(21, 27, 73, 0.95) 45%, rgba(59, 188, 226, 0.90) 100%); display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0.35s ease; } .app-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .app-preloader-card { width: min(340px, calc(100vw - 2rem)); border-radius: 20px; padding: 30px 24px; text-align: center; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 20px 50px rgba(6, 26, 64, 0.28); backdrop-filter: blur(10px); } .app-preloader-logo { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 14px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 30px rgba(6, 26, 64, 0.20); } .app-preloader-spinner { width: 42px; height: 42px; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; border-radius: 50%; margin: 0 auto 12px; animation: preloaderSpin 0.9s linear infinite; } .app-preloader-text { color: #FFFFFF; font-size: 13px; letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; } @keyframes preloaderSpin { to { transform: rotate(360deg); } } /* Acessibilidade: Focus State */ *:focus-visible { outline: 2px solid var(--pool-dark); outline-offset: 2px; } /* Typography */ h1, h2, h3, h4 { color: var(--navy); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 16px; } p { line-height: 1.5; } .text-muted { color: var(--muted); } .text-primary { color: var(--pool-dark); } .text-danger { color: var(--danger); } /* Layout Utilities */ .flex { display: flex; } .grid { display: grid; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .w-full { width: 100%; } .h-full { height: 100%; } .text-center { text-align: center; } /* Componentes Básicos */ .card { background: var(--white); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-card); border: 1px solid var(--border); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-hover); } /* Botões Compactos & Profissionais */ .btn { padding: 0 1.2rem; height: 44px; border-radius: var(--radius-md); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition); font-size: 14px; border: 1px solid transparent; letter-spacing: 0.02em; white-space: nowrap; } .btn-sm { padding: 0 0.8rem; height: 36px; font-size: 13px; } .btn-primary { background: var(--navy); color: var(--white); box-shadow: 0 4px 12px rgba(6, 26, 64, 0.15); } .btn-primary:hover { background: var(--navy-light); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 26, 64, 0.25); } .btn-secondary { background: var(--white); color: var(--navy); border-color: var(--border); } .btn-secondary:hover { background: var(--bg); border-color: #cbd5e1; } .btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-outline:hover { background: rgba(94, 211, 243, 0.1); border-color: var(--pool-dark); color: var(--pool-dark); } /*Badges Elegantes*/ .badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .badge-nova, .badge-pendente { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; } .badge-contactado, .badge-aguardando { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; } .badge-convertida, .badge-confirmada, .badge-activa { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; } .badge-cancelada, .badge-suspensa { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .badge-arquivada { background: #F8FAFC; color: var(--muted); border: 1px solid var(--border); } /* Formulários Melhorados */ .form-group { margin-bottom: 1rem; } .form-label { display: block; margin-bottom: 0.4rem; font-weight: 500; color: var(--navy); font-size: 13px; cursor: pointer; } .form-control { width: 100%; height: 44px; padding: 0 1rem; border: 1px solid #cbd5e1; border-radius: var(--radius-md); transition: var(--transition); background: var(--white); color: var(--text); } textarea.form-control { height: auto; padding: 0.75rem 1rem; resize: vertical; } .form-control:focus { outline: none; border-color: var(--pool); box-shadow: 0 0 0 3px rgba(94, 211, 243, 0.2); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } /* Tabelas Compactas & Limpas */ .table-container { width: 100%; overflow-x: auto; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; min-width: 900px; text-align: left; } th { background: #F8FAFC; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; color: var(--text); } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(94, 211, 243, 0.05); } td.id-col { white-space: nowrap; font-family: monospace; font-size: 12px; color: var(--muted); } .table-actions { display: flex; gap: 6px; justify-content: flex-end; } .action-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--white); border: 1px solid #cbd5e1; transition: var(--transition); font-size: 16px; } .action-btn:hover { color: var(--pool-dark); border-color: var(--pool); background: #F0F9FF; transform: translateY(-1px); } /* Modais */ .modal-overlay { position: fixed; inset: 0; background: rgba(6, 26, 64, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: var(--transition); } .modal-overlay.active { opacity: 1; pointer-events: all; } .modal-content { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); transform: scale(0.95) translateY(10px); transition: var(--transition); margin: 16px; } .modal-overlay.active .modal-content { transform: scale(1) translateY(0); } .modal-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-header h3 { font-size: 18px; margin: 0; } .modal-body { padding: 24px; overflow-y: auto; flex: 1; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 12px; background: #F8FAFC; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Layout Login & Public (Identidade Fortalecida) */ .layout-split { display: flex; min-height: 100vh; overflow-y: auto; } .split-left { flex: 1; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: var(--white); padding: 4rem; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .split-left::before { content: ''; position: absolute; bottom: -20%; left: -10%; width: 150%; height: 50%; background: radial-gradient(ellipse at center, rgba(94, 211, 243, 0.15) 0%, transparent 70%); z-index: 0; pointer-events: none; } .split-content { position: relative; z-index: 1; max-width: 550px; text-align: center; } .split-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: linear-gradient(180deg, var(--bg) 0%, rgba(94, 211, 243, 0.03) 100%); } .auth-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 440px; box-shadow: var(--shadow-card); } /* Login Moderno */ .login-modern .split-left { padding: 4rem 3rem; } .login-modern .split-content { max-width: 100%; } .login-modern .brand-logo-login { width: 200px; height: 200px; margin-bottom: 1.5rem; } .login-waves { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: url('data:image/svg+xml,') repeat-x; z-index: 1; } .auth-card-modern { background: var(--white); border-radius: var(--radius-lg); padding: 48px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(6, 26, 64, 0.08); border: 1px solid rgba(94, 211, 243, 0.1); } .login-input { border: 1.5px solid #E0E8F0; transition: all 0.3s ease; background: #F9FAFB; } .login-input:focus { border-color: var(--pool-dark); background: var(--white); box-shadow: 0 0 0 4px rgba(94, 211, 243, 0.15) !important; } .login-input::placeholder { color: #A0A9B5; font-weight: 500; } .login-btn { border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(94, 211, 243, 0.3); } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(94, 211, 243, 0.4); } .login-eye-toggle { width: 40px; height: 40px; border-radius: 8px; } .login-eye-toggle:hover { color: var(--pool-dark); background: rgba(94, 211, 243, 0.12) !important; } .login-eye-toggle:focus-visible { outline: 3px solid rgba(94, 211, 243, 0.35); outline-offset: 1px; } .genesis-credit { margin-top: 1rem; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.45; } .genesis-credit strong { color: var(--navy); font-weight: 700; } .genesis-credit a { color: var(--pool-dark); font-weight: 700; text-decoration: none; } .genesis-credit a:hover { text-decoration: underline; } /* Logotipo oficial (imagem) */ .brand-logo { display: block; object-fit: contain; margin-bottom: 24px; filter: drop-shadow(0 10px 24px rgba(6, 26, 64, 0.18)); } .brand-logo-login { width: 180px; height: 180px; padding: 16px; border-radius: 28px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); } .brand-logo-public { width: 84px; height: 84px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16); } /* O Layout Administrativo - Viewport Constrained */ .layout-admin { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg); } /* Sidebar (260px Fixed) */ .sidebar { width: 260px; flex-shrink: 0; overflow: hidden; background: var(--navy); color: var(--white); display: flex; flex-direction: column; transition: width .24s ease, transform .24s ease, opacity .18s ease; z-index: 100; box-shadow: 4px 0 15px rgba(0,0,0,0.05); } .layout-admin.sidebar-collapsed .sidebar { width: 0; transform: translateX(-100%); opacity: 0; pointer-events: none; box-shadow: none; } .sidebar-header { padding: 10px 20px; display: flex; align-items: center; gap: 10px; height: 60px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .sidebar-logo-icon { display: flex; align-items: center; justify-content: center; } .sidebar-logo-img { width: 50px; height: 50px; object-fit: contain; display: block; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); } .print-logo { width: 40px; height: 40px; object-fit: contain; display: block; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 14px rgba(6, 26, 64, 0.12); } .sidebar-menu { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .sidebar-menu::-webkit-scrollbar { width: 4px; } .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } .menu-category { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin: 16px 0 8px 12px; font-weight: 600; } .menu-item { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-md); color: rgba(255,255,255,0.7); transition: var(--transition); font-weight: 500; font-size: 14px; text-decoration: none; cursor: pointer; height: 42px; } .menu-item:hover { background: rgba(255,255,255,0.05); color: var(--white); } .menu-item.active { background: rgba(94, 211, 243, 0.1); color: var(--pool); border-left: 3px solid var(--pool); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .menu-item-left { display: flex; align-items: center; gap: 12px; } .menu-item i { font-size: 20px; opacity: 0.8; } .menu-item.active i { opacity: 1; } .badge-soon { background: rgba(255,255,255,0.1); font-size: 9px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); letter-spacing: 0.5px; } /* Área Principal */ .main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Header Superior */ .top-header { height: 60px; flex-shrink: 0; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 20; box-shadow: 0 2px 10px rgba(0,0,0,0.02); } .search-container { position: relative; width: 300px; transition: var(--transition); } .search-input { width: 100%; height: 36px; padding: 0 1rem 0 2.5rem; background: #F8FAFC; border: 1px solid var(--border); border-radius: 99px; transition: var(--transition); font-size: 13px; } .search-input:focus { background: var(--white); border-color: var(--pool); outline: none; box-shadow: 0 0 0 3px rgba(94, 211, 243, 0.15); } .search-container > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px;} .search-results { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background: var(--white); border-radius: var(--radius-md); box-shadow: 0 10px 40px rgba(6, 26, 64, 0.1); border: 1px solid var(--border); display: none; z-index: 100; max-height: 350px; overflow-y: auto; } .search-results.active { display: block; } .search-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--transition); display: flex; justify-content: space-between; align-items: center; } .search-item:hover { background: #F8FAFC; } .header-profile { display: flex; align-items: center; gap: 16px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--pool); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; border: 2px solid var(--white); box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* Centro de avisos inteligente */ .notification-center { position: relative; } .notification-panel[hidden], .notification-count[hidden], .notification-mark-all[hidden], .notification-empty[hidden], .smart-notification-popup[hidden] { display: none !important; } .notification-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); font-size: 21px; transition: var(--transition); position: relative; } .notification-button:hover, .notification-button[aria-expanded="true"] { color: var(--navy); background: #F3FBFE; } .notification-button.has-unread { color: var(--navy); } .notification-button.has-unread i { animation: notificationBell 0.55s ease 1; } .notification-count { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--danger); border: 2px solid var(--white); font-size: 9px; font-weight: 700; line-height: 1; } .notification-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(390px, calc(100vw - 24px)); max-height: min(570px, calc(100vh - 84px)); overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 22px 55px rgba(6, 26, 64, 0.18); z-index: 500; } .notification-panel-header { padding: 16px 18px 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); } .notification-panel-header span { display: block; color: var(--pool-dark); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .notification-panel-header h2 { margin-top: 2px; font-size: 18px; } .notification-mark-all { color: var(--pool-dark); font-size: 11px; font-weight: 700; padding: 6px 0; } .notification-mark-all:hover { color: var(--navy); text-decoration: underline; } .notification-list { max-height: 405px; overflow-y: auto; overscroll-behavior: contain; } .notification-item { position: relative; border-bottom: 1px solid var(--border); background: var(--white); } .notification-item.is-unread { background: #F8FCFE; } .notification-item.is-unread::before { content: ''; position: absolute; top: 18px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--pool-dark); } .notification-item-main { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 15px 42px 15px 18px; text-align: left; } .notification-item-main:hover { background: rgba(94, 211, 243, .07); } .notification-item-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #EAF8FD; color: #0284C7; font-size: 18px; } .notification-item.is-warning .notification-item-icon { background: #FFF7E8; color: #B86B00; } .notification-item.is-critical .notification-item-icon { background: #FEF0F2; color: #D92D4A; } .notification-item.is-success .notification-item-icon { background: #ECFDF3; color: #15803D; } .notification-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .notification-item-copy strong { color: var(--navy); font-size: 13px; line-height: 1.25; } .notification-item-copy small { color: var(--muted); font-size: 11.5px; line-height: 1.4; } .notification-dismiss { position: absolute; top: 12px; right: 10px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #94A3B8; } .notification-dismiss:hover { color: var(--danger); background: #FEF2F2; } .notification-empty { min-height: 190px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); } .notification-empty i { color: var(--success); font-size: 32px; margin-bottom: 8px; } .notification-empty strong { color: var(--navy); font-size: 14px; } .notification-empty span { margin-top: 3px; font-size: 12px; } .notification-panel footer { padding: 10px 16px; display: flex; align-items: center; gap: 7px; background: #F8FAFC; color: var(--muted); font-size: 10.5px; border-top: 1px solid var(--border); } .smart-notification-popup { position: fixed; top: 76px; right: 24px; width: min(370px, calc(100vw - 32px)); padding: 18px; z-index: 3000; display: grid; grid-template-columns: 42px 1fr; gap: 11px 13px; background: rgba(255, 255, 255, .98); border: 1px solid var(--border); border-top: 3px solid var(--pool-dark); border-radius: 15px; box-shadow: 0 20px 48px rgba(6, 26, 64, .18); opacity: 0; transform: translateY(-12px); transition: opacity .18s ease, transform .18s ease; } .smart-notification-popup.is-visible { opacity: 1; transform: translateY(0); } .smart-notification-popup.is-critical { border-top-color: var(--danger); } .smart-notification-popup.is-warning { border-top-color: var(--warning); } .smart-notification-popup.is-success { border-top-color: var(--success); } .smart-popup-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 8px; } .smart-popup-close:hover { background: #F1F5F9; color: var(--navy); } .smart-popup-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #EAF8FD; color: #0284C7; font-size: 22px; } .is-critical .smart-popup-icon { background: #FEF0F2; color: #D92D4A; } .is-warning .smart-popup-icon { background: #FFF7E8; color: #B86B00; } .is-success .smart-popup-icon { background: #ECFDF3; color: #15803D; } .smart-popup-copy { min-width: 0; padding-right: 22px; } .smart-popup-copy > span { color: var(--pool-dark); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .smart-popup-copy strong { display: block; margin-top: 2px; color: var(--navy); font-size: 15px; line-height: 1.25; } .smart-popup-copy p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.42; } .smart-popup-actions { grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-ghost { color: var(--muted); background: transparent; } .btn-ghost:hover { color: var(--navy); background: #F1F5F9; } @keyframes notificationBell { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } } @media (prefers-reduced-motion: reduce) { .notification-button.has-unread i { animation: none; } .smart-notification-popup, .toast { transition: none; } } /* Área de Conteúdo Scrollable Principal */ .content-area { flex: 1; overflow-y: auto; padding: var(--spacing-layout); } .page-header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .page-title h2 { margin-bottom: 4px; font-size: 24px; color: var(--navy); letter-spacing: -0.5px; } /* Dashboard Bento Grid Compactado */ .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; } /* Row 1: Stats */ .bento-stat { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; min-height: 120px; height: auto; border-bottom: 3px solid var(--pool); position: relative; overflow: hidden; transition: var(--transition); } .bento-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .bento-stat::after { content: '\223F'; font-family: sans-serif; position: absolute; right: -10px; bottom: -25px; font-size: 80px; color: rgba(94, 211, 243, 0.05); z-index: 0; pointer-events: none; } .stat-card-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .stat-value { font-size: 32px; font-weight: 700; color: var(--navy); margin-top: 2px; line-height: 1; letter-spacing: -1px; } .stat-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; } /* Row 2: Charts */ .bento-chart { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border); grid-column: span 2; display: flex; flex-direction: column; min-height: 300px; height: auto; } .chart-container { position: relative; width: 100%; flex: 1; margin-top: 16px; min-height: 220px; max-height: 280px; } /* Row 3: Quick Actions & Feed */ .bento-actions { grid-column: span 1; } .bento-feed { grid-column: span 3; background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border); } .quick-actions-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .quick-action-item { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--navy); font-weight: 500; text-align: left; transition: var(--transition); width: 100%; font-size: 13.5px; box-shadow: 0 2px 5px rgba(0,0,0,0.02);} .quick-action-item:hover { border-color: var(--pool); box-shadow: var(--shadow-hover); transform: translateX(2px); color: var(--navy); } .quick-action-item i { font-size: 20px; color: var(--pool); background: rgba(94, 211, 243, 0.15); padding: 6px; border-radius: 6px; } .activity-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; } .activity-item { padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); border-left: 3px solid var(--border); display: flex; flex-direction: column; gap: 6px; background: #F8FAFC;} .activity-item.type-pre { border-left-color: var(--pool); } .activity-item.type-reg { border-left-color: var(--success); } .activity-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); } .activity-text { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; } /* Kanban */ .kanban-board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; min-height: 400px;} .kanban-col { background: #F8FAFC; border-radius: var(--radius-lg); min-width: 280px; width: 280px; display: flex; flex-direction: column; border: 1px solid var(--border); overflow: hidden; } .kanban-header { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--white); font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; } .kanban-body { padding: 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .kanban-card { background: var(--white); border-radius: var(--radius-md); padding: 14px; box-shadow: 0 2px 6px rgba(6,26,64,0.03); border: 1px solid var(--border); cursor: pointer; transition: var(--transition); border-left: 3px solid var(--pool); } .kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--pool); } /* Multi-step Form Indicator */ .step-indicator { display: flex; justify-content: space-between; position: relative; margin-bottom: 24px; padding: 0 10px; } .step-indicator::before { content: ''; position: absolute; top: 16px; left: 30px; right: 30px; height: 2px; background: var(--border); z-index: 1; } .step-item { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; } .step-circle { width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--muted); transition: var(--transition); font-size: 13px; } .step-item.active .step-circle { border-color: var(--navy); background: var(--navy); color: var(--white); box-shadow: 0 0 0 4px rgba(6, 26, 64, 0.1); } .step-item.completed .step-circle { border-color: var(--pool); background: var(--pool); color: var(--navy); } .step-label { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em;} .step-item.active .step-label { color: var(--navy); } .step-content { display: none; animation: fadeIn 0.3s ease; } .step-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Toasts */ #toast-container { position: fixed; bottom: 32px; right: 32px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; } .toast { background: var(--navy); color: var(--white); padding: 12px 12px 12px 16px; border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(6,26,64,0.2); display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--pool); transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); min-width: 280px; max-width: 390px; } .toast.show { transform: translateX(0); } .toast.error { border-left-color: var(--danger); } .toast.warning { border-left-color: var(--warning); } .toast.success { border-left-color: var(--success); } .toast.info { border-left-color: var(--pool); } .toast .toast-icon { flex: 0 0 auto; font-size: 21px; color: var(--pool); } .toast.error .toast-icon { color: #FCA5A5; } .toast.warning .toast-icon { color: #FCD34D; } .toast.success .toast-icon { color: #86EFAC; } .toast > span { flex: 1; font-weight: 500; font-size: 13px; line-height: 1.35; } .toast-close { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: rgba(255,255,255,.7); } .toast-close:hover { color: #FFFFFF; background: rgba(255,255,255,.1); } /* Mensalidades Inputs Compactos */ .fee-input-wrapper { position: relative; width: 100px; } .fee-input { width: 100%; height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--navy); background: #F8FAFC; } .fee-input:focus { outline: none; border-color: var(--pool); background: var(--white); } .fee-currency { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); pointer-events: none; font-weight: 600;} /* Controlo Mensal Styles */ .progress-wrapper { background: var(--border); height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; width: 100%; } .progress-bar { height: 100%; transition: width 0.4s ease, background-color 0.4s ease; border-radius: 4px;} .badge-emdia { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; } .badge-dentro { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; } .badge-multa { background: #FFF7ED; color: #C2410C; border: 1px solid #FFEDD5; } .badge-atrasocri { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(6, 26, 64, 0.6); backdrop-filter: blur(2px); z-index: 90; display: none; } .sidebar-overlay.active { display: block; } .menu-toggle { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--white); color: var(--navy); font-size: 22px; transition: var(--transition); } .menu-toggle:hover { border-color: var(--pool); background: #F3FBFE; box-shadow: 0 4px 12px rgba(6, 26, 64, .08); } .menu-toggle:focus-visible { outline: 3px solid rgba(94, 211, 243, .35); outline-offset: 2px; } /* SEO Article Styling */ .seo-article { margin-top: 2.5rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.2); } .seo-article h2 { color: var(--white); font-size: 1.25rem; margin-bottom: 0.75rem; letter-spacing: 0; } .seo-article p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } /* Grid Responsivo com Mesma Altura */ .grid-cols-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; } .grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid-cols-1 > *, .grid-cols-2 > *, .grid-cols-3 > * { min-height: 100%; } /* Responsividade Extrema */ @media (max-width: 1440px) { .bento-grid { gap: 16px; } :root { --spacing-layout: 24px; } } @media (max-width: 1200px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-chart { grid-column: span 2; } .bento-actions { grid-column: span 2; } .bento-feed { grid-column: span 2; } .bento-mensal { grid-column: span 2 !important; } } @media (max-width: 992px) { .layout-split { flex-direction: column; } .split-left { padding: 40px 24px; min-height: 280px; flex: none; justify-content: center; } .split-left::before { display: none; } .auth-card { padding: 32px 24px; margin: 0 auto; } .auth-card-modern { padding: 40px 28px; } .login-modern .brand-logo-login { width: 140px; height: 140px; margin-bottom: 1rem; } .login-modern .split-content h1 { font-size: 2.8rem !important; } .split-right { padding: 2rem; } :root { --spacing-layout: 20px; } .chart-container { min-height: 200px; } .grid-cols-2 { grid-template-columns: 1fr; } .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } .sidebar { position: fixed; left: -270px; top: 0; height: 100vh; box-shadow: 4px 0 24px rgba(0,0,0,0.15); width: 260px; } .sidebar.open { left: 0; } .menu-toggle { width: 44px; height: 44px; flex-basis: 44px; margin-right: 4px; } } @media (max-width: 768px) { .search-container { width: 150px; flex-shrink: 1; } .header-profile { gap: 6px; } .header-profile > button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; } .header-profile .flex { gap: 8px; padding-left: 8px !important; } .header-profile .flex > div:first-child { display: none !important; } .header-profile .flex > .avatar { display: flex !important; } .bento-grid { grid-template-columns: 1fr; gap: 16px; } .bento-stat, .bento-chart, .bento-actions, .bento-feed, .bento-mensal { grid-column: span 1 !important; } .form-row { grid-template-columns: 1fr; } .grid-cols-3 { grid-template-columns: 1fr; } .grid-cols-2 { grid-template-columns: 1fr; } .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } .header-actions { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; } .step-label { display: none; } .modal-content { margin: 10px; max-height: calc(100vh - 20px); width: calc(100% - 20px); } .modal-body { padding: 16px; } .table-container table { min-width: 750px; } .table-actions { gap: 8px; } .action-btn { width: 40px; height: 40px; } .kanban-board { flex-direction: column; min-height: auto; gap: 12px; } .kanban-col { width: 100%; min-width: unset; } .kanban-body { max-height: 400px; overflow-y: auto; } .login-modern .brand-logo-login { width: 120px; height: 120px; margin-bottom: 0.8rem; } .login-modern .split-content h1 { font-size: 2.2rem !important; } .login-modern .split-content p { font-size: 0.9rem !important; } .auth-card-modern { padding: 32px 20px; } .form-label { font-size: 12px !important; } .login-input { font-size: 14px; } } @media (max-width: 576px) { .top-header { padding: 0 16px; } .content-area { padding: 16px; } .split-left h1 { font-size: 2rem; } .split-left { min-height: 220px; padding: 32px 16px; } .login-modern .brand-logo-login { width: 100px; height: 100px; margin-bottom: 0.5rem; } .login-modern .split-content h1 { font-size: 1.8rem !important; } .auth-card-modern { padding: 28px 16px; max-width: 100%; } .stat-value { font-size: 26px; } .search-input { width: 120px; font-size: 12px; padding-left: 2rem; } .search-container > i { font-size: 14px; } .step-indicator::before { left: 15px; right: 15px; } .modal-footer { flex-direction: column; gap: 8px; } .modal-footer .btn { width: 100%; margin: 0; } #btn-prev-step { order: 3; } .notification-panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; max-height: calc(100vh - 72px); } .notification-list { max-height: calc(100vh - 210px); } .notification-panel-header { padding: 14px; } .smart-notification-popup { top: 66px; right: 10px; left: 10px; width: auto; } #toast-container { right: 10px; left: 10px; bottom: 14px; } .toast { min-width: 0; max-width: none; width: 100%; } } /* Print Styles */ #print-area { display: none; } #print-area .print-doc { width: min(210mm, 100%); margin: 0 auto; background: #FFFFFF; color: #0B1736; border: 1px solid #D8E1EE; border-radius: 10px; box-shadow: 0 10px 28px rgba(6, 26, 64, 0.08); padding: 14mm 12mm 10mm; } #print-area .print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; border-bottom: 2px solid #061A40; padding-bottom: 8px; margin-bottom: 10px; } #print-area .print-brand { display: flex; align-items: center; gap: 8px; } #print-area .print-header h1 { font-size: 20pt; line-height: 1.1; margin: 0; color: #061A40; } #print-area .print-subtitle { margin: 2px 0 0; font-size: 10.5pt; color: #4A5870; } #print-area .print-epoch { text-align: right; min-width: 120px; } #print-area .print-epoch strong { display: block; font-size: 13.5pt; color: #061A40; margin-top: 2px; } #print-area .print-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } #print-area .print-meta > div { border: 1px solid #D8E1EE; border-radius: 6px; background: #F6FAFF; padding: 7px 9px; min-height: 34px; display: flex; flex-direction: row; align-items: baseline; gap: 4px; justify-content: flex-start; } #print-area .print-sections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #print-area .print-section { margin-bottom: 0; break-inside: avoid; page-break-inside: avoid; border: 1px solid #DCE5F2; border-radius: 7px; overflow: hidden; background: #FFFFFF; } #print-area .print-section h3 { margin: 0; padding: 6px 9px; font-size: 10.5pt; font-weight: 700; color: #FFFFFF; background: #061A40; border-left: 0; border-radius: 0; display: flex; align-items: center; gap: 6px; letter-spacing: 0.01em; } #print-area .print-title-icon { font-size: 11pt; color: #8DDCF3; line-height: 1; } #print-area .print-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 7px; } #print-area .print-cell { min-height: 28px; border: 1px solid #E6EDF7; border-radius: 6px; padding: 5px 6px; display: block; break-inside: avoid; page-break-inside: avoid; background: #FFFFFF; } #print-area .print-cell.span-2 { grid-column: span 2; } #print-area .print-label { display: inline; font-size: 8.4pt; color: #5B6A82; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; line-height: 1.2; } #print-area .print-label::after { content: ':'; margin-left: 2px; margin-right: 4px; } #print-area .print-val { display: inline; font-size: 10pt; color: #0B1736; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } #print-area .print-declaration { margin-top: 8px; border: 1px solid #D8E1EE; border-radius: 6px; padding: 8px 10px; background: #F6FAFF; font-size: 8.9pt; color: #243349; text-align: justify; line-height: 1.35; break-inside: avoid; page-break-inside: avoid; } #print-area .print-signature { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 42mm; gap: 10mm; align-items: end; break-inside: avoid; page-break-inside: avoid; } #print-area .print-sign-item { text-align: center; } #print-area .print-sign-item .print-line { border-top: 1px solid #061A40; margin-top: 22mm; } #print-area .print-sign-item p { margin-top: 4px; font-size: 9pt; font-weight: 600; color: #243349; } #print-area .print-sign-item small { display: block; margin-top: 3px; font-size: 7.8pt; color: #5B6A82; font-weight: 500; } #print-area .print-stamp-box { height: 42mm; border: 2px dashed #9FB3CF; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #5B6A82; font-size: 10pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: #FCFEFF; } #print-area .print-footer { margin-top: 10px; border-top: 1px solid #D8E1EE; padding-top: 5px; text-align: center; font-size: 8pt; color: #5B6A82; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } @media (max-width: 820px) { #print-area .print-doc { width: 100%; border-radius: 0; border: none; box-shadow: none; padding: 12px; } #print-area .print-meta, #print-area .print-sections-grid, #print-area .print-grid, #print-area .print-signature { grid-template-columns: 1fr; } #print-area .print-cell.span-2 { grid-column: span 1; } #print-area .print-header { flex-direction: column; } #print-area .print-epoch { text-align: left; } #print-area .print-footer { grid-template-columns: 1fr; } } @media print { @page { size: A4; margin: 8mm; } html, body { background: #FFFFFF !important; width: auto; height: auto; overflow: visible !important; font-family: 'Barlow', 'Segoe UI', Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .layout-admin, .layout-split, #toast-container, .modal-overlay, .sidebar-overlay, .app-preloader, .no-print { display: none !important; } #print-area { display: block !important; position: static; width: 100%; padding: 0; margin: 0; } #print-area .print-doc { width: 100%; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } #print-area .print-sections-grid { gap: 6px; } #print-area .print-section, #print-area .print-cell, #print-area .print-meta, #print-area .print-signature, #print-area .print-declaration, #print-area .print-footer { break-inside: avoid; page-break-inside: avoid; } #print-area .print-header, #print-area .print-subtitle, #print-area .print-meta > div, #print-area .print-declaration, #print-area .print-cell, #print-area .print-stamp-box { background: #FFFFFF !important; } #print-area .print-section h3 { background: #061A40 !important; color: #FFFFFF !important; } #print-area .print-title-icon { color: #8DDCF3 !important; } } /* ========================================================================== Inscrição e Tesouraria ========================================================================== */ .treasury-eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--pool); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .treasury-indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .treasury-indicator { position: relative; display: flex; min-height: 112px; align-items: center; justify-content: space-between; overflow: hidden; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); } .treasury-indicator::after { position: absolute; right: -26px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; background: currentColor; content: ""; opacity: .06; } .treasury-indicator span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; } .treasury-indicator strong { color: var(--navy); font-size: 24px; line-height: 1.1; } .treasury-indicator > i { z-index: 1; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: currentColor; color: inherit; font-size: 23px; } .treasury-indicator > i::before { color: white; } .treasury-indicator.is-revenue { color: #0F9F6E; } .treasury-indicator.is-debt { color: #E04F5F; } .treasury-indicator.is-registration { color: #1286A8; } .treasury-indicator.is-pending { color: #D79210; } .treasury-filter-card { margin-bottom: 14px; padding: 16px; } .treasury-filter-grid { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(145px, 1fr)); gap: 12px; align-items: end; } .treasury-filter-grid label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } .treasury-search-field { position: relative; } .treasury-search-field i { position: absolute; left: 12px; bottom: 11px; color: var(--muted); } .treasury-search-field input { padding-left: 36px; } .treasury-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 11px 14px; border: 1px solid #C9EAF5; border-radius: var(--radius-md); background: #F2FBFE; } .treasury-selection-bar strong { margin-right: 8px; color: var(--navy); font-size: 13px; } .treasury-selection-bar span { color: var(--muted); font-size: 12px; } .treasury-grid-wrap { position: relative; overflow: auto; max-width: 100%; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); } .treasury-grid { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .treasury-grid th, .treasury-grid td { min-width: 112px; border-right: 1px solid #EDF1F7; border-bottom: 1px solid #EDF1F7; padding: 10px; vertical-align: middle; white-space: nowrap; } .treasury-grid th { position: sticky; z-index: 2; top: 0; background: #F6F9FC; color: #52617A; font-size: 10px; letter-spacing: .04em; text-align: center; text-transform: uppercase; } .treasury-grid th small { display: block; margin-top: 2px; color: #8A96A9; font-size: 9px; } .treasury-grid .treasury-sticky { position: sticky; z-index: 3; left: 0; background: var(--white); } .treasury-grid thead .treasury-sticky { z-index: 4; background: #F6F9FC; } .treasury-grid .treasury-select-cell { left: 0; min-width: 46px; width: 46px; text-align: center; } .treasury-grid .treasury-member-cell { left: 46px; min-width: 230px; max-width: 230px; box-shadow: 8px 0 12px -12px rgba(6, 26, 64, .45); white-space: normal; } .treasury-member-cell strong, .treasury-member-cell span, .treasury-member-cell small { display: block; } .treasury-member-cell strong { color: var(--navy); font-size: 13px; } .treasury-member-cell span, .treasury-member-cell small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .treasury-charge-button, .treasury-month-cell { display: flex; width: 100%; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .treasury-charge-button:hover, .treasury-month-cell:hover { box-shadow: 0 5px 14px rgba(6, 26, 64, .12); transform: translateY(-1px); } .treasury-month-cell span { font-size: 10px; font-weight: 800; text-transform: uppercase; } .treasury-month-cell small, .treasury-charge-button small { color: inherit; font-size: 10px; } .treasury-month-cell.is-paid { border-color: #B7E8D4; background: #EFFAF5; color: #087A54; } .treasury-month-cell.is-partial { border-color: #F6D78A; background: #FFF8E7; color: #9B6500; } .treasury-month-cell.is-pending { border-color: #C8D9ED; background: #F3F7FC; color: #53657E; } .treasury-month-cell.is-overdue { border-color: #F0B9C0; background: #FFF1F3; color: #B5293B; } .treasury-month-cell.is-exempt { border-color: #D5CCF5; background: #F6F3FF; color: #6550A5; } .treasury-status { display: inline-flex; min-width: 78px; align-items: center; justify-content: center; border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; } .treasury-status.is-compact { min-width: 62px; padding: 4px 8px; font-size: 9px; } .treasury-status.is-paid { background: #DDF6EB; color: #087A54; } .treasury-status.is-partial { background: #FFF0C7; color: #8A5B00; } .treasury-status.is-pending { background: #E9F0F8; color: #52617A; } .treasury-status.is-overdue { background: #FCE1E5; color: #B5293B; } .treasury-status.is-exempt { background: #ECE6FC; color: #6550A5; } .treasury-status.is-cancelled { background: #E5E9F0; color: #657186; text-decoration: line-through; } .treasury-subline { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; } .treasury-money-positive { color: #087A54; font-weight: 700; } .treasury-money-negative { color: #B5293B; font-weight: 700; } .treasury-all-clear { color: #087A54; font-size: 11px; font-weight: 700; } .treasury-empty { color: #B2BBC8; } .treasury-history-card { padding: 0; overflow: hidden; } .treasury-history-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .treasury-history-card h3 { color: var(--navy); font-size: 17px; } .treasury-payment-modal { width: 100%; max-width: 680px; } .treasury-member-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px; border: 1px solid #D7E6F1; border-radius: var(--radius-md); background: #F7FBFD; } .treasury-member-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: var(--navy); color: white; font-size: 20px; } .treasury-member-summary h4 { color: var(--navy); font-size: 15px; } .treasury-member-summary p { margin-top: 3px; color: var(--muted); font-size: 11px; } .treasury-payment-calculation, .treasury-payment-total { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 18px; padding: 14px 16px; border-radius: var(--radius-md); } .treasury-payment-calculation { border: 1px solid #D8E4F0; background: #F7F9FC; } .treasury-payment-total { background: var(--navy); color: white; } .treasury-payment-calculation span, .treasury-payment-total span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .treasury-payment-total span { color: rgba(255,255,255,.65); } .treasury-payment-calculation strong { color: var(--navy); font-size: 13px; } .treasury-payment-total strong { color: var(--pool); font-size: 20px; } .treasury-bulk-notice { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #CBEAF4; border-radius: var(--radius-md); background: #F2FBFE; color: var(--navy); font-size: 12px; } .treasury-bulk-notice i { color: var(--pool-dark); font-size: 20px; } .treasury-bulk-notice span { color: var(--muted); } .treasury-plan-config { overflow: hidden; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); } .treasury-plan-config > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #F6F9FC; } .treasury-plan-config > header span { color: var(--muted); font-size: 11px; } .treasury-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--border); } .treasury-plan-row label { color: var(--navy); font-size: 13px; font-weight: 700; } .treasury-plan-row label small { margin-left: 6px; color: var(--muted); font-weight: 400; } .treasury-plan-row > div { display: flex; align-items: center; gap: 7px; } .treasury-plan-row input[type="number"] { width: 76px; } .treasury-plan-row span { color: var(--muted); font-size: 11px; } #treasury-receipt-print { display: none; } .treasury-receipt-document { width: 190mm; margin: 0 auto; padding: 14mm; border: 1px solid #D8E1EE; background: white; color: #17213A; font-family: 'Barlow', 'Segoe UI', Arial, sans-serif; } .treasury-receipt-document header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 10mm; border-bottom: 2px solid #061A40; } .treasury-receipt-document header p { color: #1286A8; font-size: 12pt; font-weight: 800; text-transform: uppercase; } .treasury-receipt-document header h1 { margin-top: 2mm; color: #061A40; font-size: 24pt; } .treasury-receipt-paid { border: 2px solid #0F9F6E; padding: 3mm 6mm; color: #0F9F6E; font-size: 14pt; font-weight: 900; letter-spacing: .15em; transform: rotate(-3deg); } .treasury-receipt-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 4mm; margin: 9mm 0; } .treasury-receipt-meta div { padding: 4mm; border: 1px solid #D8E1EE; } .treasury-receipt-meta span, .treasury-receipt-meta strong, .treasury-receipt-meta small { display: block; } .treasury-receipt-meta span { color: #657186; font-size: 8pt; text-transform: uppercase; } .treasury-receipt-meta strong { margin-top: 2mm; color: #061A40; font-size: 11pt; } .treasury-receipt-meta small { margin-top: 1mm; color: #657186; font-size: 8pt; } .treasury-receipt-value { padding: 8mm; background: #061A40; color: white; text-align: center; } .treasury-receipt-value span, .treasury-receipt-value strong, .treasury-receipt-value small { display: block; } .treasury-receipt-value span { color: #B5C0D0; font-size: 9pt; text-transform: uppercase; } .treasury-receipt-value strong { margin: 2mm 0; color: #8DDCF3; font-size: 28pt; } .treasury-receipt-value small { font-size: 9pt; } .treasury-receipt-details { margin: 8mm 0; } .treasury-receipt-details p { display: flex; justify-content: space-between; gap: 10mm; padding: 3mm 0; border-bottom: 1px solid #E4EAF1; font-size: 9pt; } .treasury-receipt-details span { color: #657186; } .treasury-receipt-document footer { display: flex; justify-content: space-between; gap: 4mm; padding-top: 5mm; border-top: 1px solid #D8E1EE; color: #657186; font-size: 8pt; } @media (max-width: 1180px) { .treasury-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treasury-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } } @media (max-width: 720px) { .treasury-page-header { align-items: flex-start; } .treasury-indicators, .treasury-filter-grid, .treasury-payment-calculation, .treasury-payment-total { grid-template-columns: 1fr; } .treasury-selection-bar, .treasury-history-card > header, .treasury-plan-config > header, .treasury-plan-row { align-items: stretch; flex-direction: column; } .treasury-indicator { min-height: 94px; } .treasury-grid .treasury-member-cell { min-width: 190px; max-width: 190px; } } @media print { #treasury-receipt-print { display: none !important; } body.printing-treasury #print-area { display: none !important; } body.printing-treasury #treasury-receipt-print { display: block !important; position: static; width: 100%; } body.printing-treasury .treasury-receipt-document { width: 100%; border: 0; padding: 0; } } /* Promoções e Descontos */ .promotion-page-header { align-items: flex-end; } .promotion-indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .promotion-indicator { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-card); } .promotion-indicator > i { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 14px; font-size: 22px; } .promotion-indicator span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } .promotion-indicator strong { color: var(--navy); font-size: 23px; line-height: 1; } .promotion-indicator.is-active > i { background: #EAFBF4; color: #0F9F6E; } .promotion-indicator.is-scheduled > i { background: #EEF5FF; color: #3478D4; } .promotion-indicator.is-beneficiary > i { background: #F2F0FF; color: #6957C8; } .promotion-indicator.is-savings > i { background: #FFF6E4; color: #B67509; } .promotion-filter-card { margin-bottom: 18px; padding: 16px; } .promotion-filter-grid { display: grid; grid-template-columns: minmax(250px, 2fr) repeat(2, minmax(170px, 1fr)); gap: 14px; } .promotion-filter-grid label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .promotion-campaign-card, .promotion-beneficiary-card, .promotion-history-card { overflow: hidden; margin-bottom: 18px; padding: 0; } .promotion-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; border-bottom: 1px solid var(--border); } .promotion-section-header h3 { margin-top: 3px; color: var(--navy); font-size: 17px; } .promotion-section-header > span, .promotion-section-header > i { color: var(--muted); font-size: 12px; } .promotion-section-header > i { font-size: 24px; } .promotion-section-header select { max-width: 230px; } .promotion-table-wrap { overflow-x: auto; } .promotion-table { min-width: 1120px; } .promotion-table td { vertical-align: top; } .promotion-target-type { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .promotion-target-value { display: block; max-width: 190px; color: var(--navy); } .promotion-price-stack { display: grid; gap: 4px; min-width: 190px; } .promotion-price-stack span { color: var(--muted); font-size: 11px; } .promotion-price-stack del { margin-left: 4px; } .promotion-price-stack b { color: #B67509; } .promotion-price-stack > strong { color: #0B895F; font-size: 15px; } .promotion-status, .promotion-override-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; } .promotion-status.is-active { background: #EAFBF4; color: #087B55; } .promotion-status.is-scheduled { background: #EEF5FF; color: #2C67B8; } .promotion-status.is-expired { background: #F0F2F5; color: #657186; } .promotion-status.is-suspended { background: #FFF0F0; color: #B43D3D; } .promotion-override-badge { background: #FFF6E4; color: #9A6205; } .promotion-apply-action { background: #EDF9FD; color: #1286A8; } .promotion-lower-grid { display: grid; grid-template-columns: 1fr; gap: 0; } .promotion-beneficiary-card table, .promotion-history-card table { min-width: 760px; } .promotion-editor-modal { max-width: 840px; } .promotion-apply-modal { max-width: 900px; } .promotion-calculation-preview { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; align-items: center; gap: 12px; margin: 8px 0 18px; padding: 15px; border: 1px solid #D9E4EF; border-radius: var(--radius-md); background: #F8FAFD; } .promotion-calculation-preview > i { color: #93A0B3; font-size: 18px; } .promotion-calculation-preview span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .promotion-calculation-preview strong { color: var(--navy); font-size: 16px; } .promotion-calculation-preview .is-final { padding: 10px 12px; border-radius: 10px; background: var(--navy); } .promotion-calculation-preview .is-final span { color: rgba(255,255,255,.65); } .promotion-calculation-preview .is-final strong { color: var(--pool); font-size: 21px; } .promotion-apply-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 14px; margin-bottom: 14px; } .promotion-select-all { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: 12px; font-weight: 700; } .promotion-apply-toolbar > strong { color: var(--pool-dark); font-size: 12px; } .promotion-applicant-table { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); } .promotion-applicant-table table { min-width: 720px; } .promotion-member-conflict { color: #A56705; font-weight: 600; } .promotion-override-control { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 14px; border: 1px solid #F0D49D; border-radius: var(--radius-md); background: #FFF9ED; } .promotion-override-control input { margin-top: 3px; } .promotion-override-control span, .promotion-override-control small { display: block; } .promotion-override-control strong { color: #80530B; font-size: 12px; } .promotion-override-control small { margin-top: 3px; color: #8E7449; font-size: 11px; line-height: 1.4; } .treasury-month-cell.has-promotion { min-width: 132px; padding: 8px; border-color: #B9E4F0; background: #F2FBFE; } .treasury-promotion-name { display: flex !important; align-items: center; justify-content: center; gap: 3px; max-width: 118px; overflow: hidden; color: #116F89 !important; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; } .treasury-promotion-values { display: flex !important; justify-content: center; gap: 5px; margin-top: 3px; } .treasury-promotion-values del { color: #8B97A9; font-size: 9px; } .treasury-promotion-values strong { color: #087B55; font-size: 10px; } .treasury-promotion-summary { display: flex; align-items: flex-start; gap: 11px; margin-top: -4px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #B9E4F0; border-radius: var(--radius-md); background: #F2FBFE; } .treasury-promotion-summary > i { color: #1286A8; font-size: 20px; } .treasury-promotion-summary strong, .treasury-promotion-summary span { display: block; } .treasury-promotion-summary strong { color: var(--navy); font-size: 12px; } .treasury-promotion-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; } .treasury-promotion-summary.hidden { display: none; } @media (max-width: 1180px) { .promotion-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .promotion-page-header { align-items: flex-start; } .promotion-indicators, .promotion-filter-grid, .promotion-calculation-preview, .promotion-apply-toolbar { grid-template-columns: 1fr; } .promotion-calculation-preview > i { transform: rotate(90deg); } .promotion-section-header { align-items: stretch; flex-direction: column; } .promotion-section-header select { max-width: none; } } /* ========================================================================== Workspace financeiro compacto — Tesouraria e Promoções ========================================================================== */ #sec-mensal, #sec-promocoes { --finance-navy: #071B3F; --finance-cyan: #18B8E6; --finance-soft: #F4F8FC; --finance-line: #DCE6F1; } #sec-mensal .page-header, #sec-promocoes .page-header { margin-bottom: 14px; } #sec-mensal .page-title h2, #sec-promocoes .page-title h2 { font-size: clamp(24px, 2vw, 31px); } .treasury-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 14px; padding: 5px; border: 1px solid var(--finance-line); border-radius: 13px; background: #FFFFFF; box-shadow: 0 7px 22px rgba(7, 27, 63, .05); scrollbar-width: thin; } .treasury-tab { display: inline-flex; min-width: max-content; flex: 1 0 auto; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #65758C; cursor: pointer; font-size: 11px; font-weight: 750; transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .treasury-tab i { font-size: 16px; } .treasury-tab:hover { background: #F3F8FC; color: var(--finance-navy); } .treasury-tab.is-active { background: var(--finance-navy); box-shadow: 0 7px 15px rgba(7, 27, 63, .18); color: #FFFFFF; } .treasury-tab.is-active i { color: var(--finance-cyan); } .treasury-workspace { min-height: 380px; } .treasury-view.is-active { animation: finance-view-in .18s ease-out; } @keyframes finance-view-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .treasury-view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .treasury-view-header h3 { color: var(--finance-navy); font-size: 18px; } .treasury-view-header p { margin-top: 3px; color: var(--muted); font-size: 11px; } .treasury-view-header .treasury-eyebrow { margin-bottom: 3px; } .treasury-indicators { gap: 10px; margin-bottom: 12px; } .treasury-indicator { min-height: 88px; padding: 15px 16px; border-radius: 13px; box-shadow: 0 7px 20px rgba(7, 27, 63, .055); } .treasury-indicator span { margin-bottom: 4px; font-size: 10px; text-transform: uppercase; } .treasury-indicator strong { display: block; font-size: 21px; } .treasury-indicator small { display: block; margin-top: 4px; color: #8996A9; font-size: 9px; } .treasury-indicator > i { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; } .treasury-overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 12px; } .treasury-operation-card, .treasury-quick-card { padding: 16px; } .treasury-operation-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; } .treasury-operation-card h3, .treasury-quick-card h3 { color: var(--finance-navy); font-size: 16px; } .treasury-operation-card > header > span { padding: 5px 8px; border-radius: 999px; background: #ECF9FD; color: #0E7897; font-size: 9px; font-weight: 800; text-transform: uppercase; } .treasury-operation-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--finance-line); border-radius: 11px; } .treasury-operation-list > div { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 0 9px; padding: 13px; border-right: 1px solid var(--finance-line); } .treasury-operation-list > div:last-child { border-right: 0; } .treasury-operation-list i { grid-row: span 2; color: var(--finance-cyan); font-size: 21px; } .treasury-operation-list span { color: var(--muted); font-size: 10px; } .treasury-operation-list strong { color: var(--finance-navy); font-size: 18px; } .treasury-quick-card > .treasury-eyebrow { margin-bottom: 2px; } .treasury-quick-actions { display: grid; gap: 6px; margin-top: 11px; } .treasury-quick-actions button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--finance-line); border-radius: 10px; background: #FFFFFF; color: var(--finance-navy); cursor: pointer; text-align: left; } .treasury-quick-actions button:hover { border-color: #9EDCEF; background: #F5FCFE; } .treasury-quick-actions button > i:first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #EAF8FC; color: #1188AA; font-size: 17px; } .treasury-quick-actions button > i:last-child { color: #9BA8B8; } .treasury-quick-actions span, .treasury-quick-actions strong, .treasury-quick-actions small { display: block; } .treasury-quick-actions strong { font-size: 11px; } .treasury-quick-actions small { margin-top: 2px; color: var(--muted); font-size: 9px; } .treasury-filter-card { margin-bottom: 9px; padding: 11px; } .treasury-filter-grid { grid-template-columns: minmax(190px, 1.4fr) repeat(6, minmax(105px, 1fr)); gap: 8px; } .treasury-filter-grid label { margin-bottom: 3px; font-size: 9px; } .treasury-filter-grid .form-control { min-height: 36px; height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 11px; } .treasury-search-field i { bottom: 10px; } .treasury-selection-bar { margin-bottom: 8px; padding: 8px 11px; border-radius: 10px; } .treasury-selection-bar strong { font-size: 11px; } .treasury-selection-bar span { font-size: 10px; } .treasury-grid-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin: 0 2px 7px; } .treasury-grid-legend span { display: inline-flex; align-items: center; gap: 4px; color: #6B788D; font-size: 9px; font-weight: 700; } .treasury-grid-legend i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .treasury-grid-legend .is-paid { color: #13916B; } .treasury-grid-legend .is-partial { color: #C78A0B; } .treasury-grid-legend .is-pending { color: #718198; } .treasury-grid-legend .is-overdue { color: #D1485A; } .treasury-grid-legend .is-exempt { color: #735CC1; } .treasury-grid-legend .is-discount { color: #0B91B8; } .treasury-grid-wrap { max-height: min(62vh, 620px); margin-bottom: 0; border-radius: 12px; box-shadow: 0 7px 22px rgba(7, 27, 63, .05); } .treasury-grid th, .treasury-grid td { min-width: 110px; padding: 7px; } .treasury-grid th { height: 42px; background: #F1F6FA; color: #52627A; font-size: 9px; } .treasury-grid .treasury-select-cell { min-width: 42px; width: 42px; } .treasury-grid .treasury-member-cell { left: 42px; min-width: 244px; max-width: 244px; padding: 9px 11px; } .treasury-member-cell strong { font-size: 12px; } .treasury-member-cell span, .treasury-member-cell small { font-size: 9px; } .treasury-member-actions { display: flex; gap: 5px; margin-top: 7px; } .treasury-member-actions button { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #D7E3EE; border-radius: 7px; background: #FFFFFF; color: #167F9E; cursor: pointer; font-size: 13px; } .treasury-member-actions button:hover { border-color: #8DDCF3; background: #EDF9FD; } .treasury-month-cell { min-height: 65px; gap: 2px; padding: 6px; border-radius: 8px; } .treasury-month-cell > span { font-size: 8px; letter-spacing: .02em; } .treasury-month-cell > strong { color: inherit; font-size: 10px; } .treasury-month-cell > small { font-size: 8px; opacity: .83; } .treasury-month-cell.has-promotion { min-width: 0; padding: 6px; border-color: #8DDCF3; background: #EFFBFE; } .treasury-cell-discount { display: inline-flex !important; align-items: center; gap: 3px; margin-top: 2px; color: #0D7F9F !important; font-size: 8px !important; font-weight: 800; } .treasury-status.is-discount { background: #E6F8FD; color: #0C7D9E; } .treasury-register-card, .treasury-history-card { overflow: hidden; padding: 0; } .treasury-register-card table, .treasury-history-card table { min-width: 980px; } .treasury-register-card th, .treasury-history-card th { background: #F3F7FB; font-size: 9px; } .treasury-register-card td, .treasury-history-card td { padding-top: 10px; padding-bottom: 10px; font-size: 11px; } .treasury-inline-search { width: min(100%, 310px); } .treasury-inline-search input { height: 36px; font-size: 11px; } .treasury-receipts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .treasury-receipt-card { overflow: hidden; border: 1px solid var(--finance-line); border-radius: 12px; background: #FFFFFF; box-shadow: 0 7px 20px rgba(7, 27, 63, .05); } .treasury-receipt-card > header { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 11px 12px; border-bottom: 1px solid var(--finance-line); background: #F7FAFD; } .treasury-receipt-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--finance-navy); color: var(--finance-cyan); font-size: 17px; } .treasury-receipt-card header span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; } .treasury-receipt-card header strong { color: var(--finance-navy); font-size: 11px; } .treasury-receipt-member { padding: 11px 12px 7px; } .treasury-receipt-member strong, .treasury-receipt-member span { display: block; } .treasury-receipt-member strong { color: var(--finance-navy); font-size: 12px; } .treasury-receipt-member span { margin-top: 2px; color: var(--muted); font-size: 9px; } .treasury-receipt-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 12px 10px; overflow: hidden; border: 1px solid var(--finance-line); border-radius: 8px; background: var(--finance-line); } .treasury-receipt-card dl > div { min-width: 0; padding: 8px; background: #FFFFFF; } .treasury-receipt-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; } .treasury-receipt-card dd { overflow: hidden; margin-top: 2px; color: var(--finance-navy); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .treasury-receipt-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--finance-line); color: var(--muted); font-size: 9px; } .treasury-empty-state, .promotion-empty-state { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 5px; padding: 24px; color: var(--muted); text-align: center; } .treasury-empty-state i, .promotion-empty-state i { color: #91D7EA; font-size: 34px; } .treasury-empty-state strong, .promotion-empty-state strong { color: var(--finance-navy); font-size: 13px; } .treasury-empty-state span, .promotion-empty-state span { font-size: 10px; } .treasury-settings-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap: 12px; } .treasury-season-card { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 17px; } .treasury-settings-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: var(--finance-navy); color: var(--finance-cyan); font-size: 23px; } .treasury-season-card span, .treasury-season-card strong, .treasury-season-card small { display: block; } .treasury-season-card span { color: var(--muted); font-size: 9px; text-transform: uppercase; } .treasury-season-card strong { margin-top: 3px; color: var(--finance-navy); font-size: 15px; } .treasury-season-card small { margin-top: 3px; color: var(--muted); font-size: 9px; } .treasury-season-fee { padding-left: 14px; border-left: 1px solid var(--finance-line); text-align: right; } .treasury-season-fee strong { color: #0E8B69; font-size: 17px; } .treasury-plans-card { padding: 15px; } .treasury-plans-card > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 11px; } .treasury-plans-card h4 { color: var(--finance-navy); font-size: 15px; } .treasury-plans-card > header > i { color: #22A8CE; font-size: 22px; } .treasury-config-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .treasury-config-plans > div { padding: 9px; border: 1px solid var(--finance-line); border-radius: 9px; background: #F9FBFD; } .treasury-config-plans span, .treasury-config-plans strong, .treasury-config-plans small { display: block; } .treasury-config-plans span { color: var(--finance-navy); font-size: 10px; font-weight: 800; } .treasury-config-plans strong { margin-top: 4px; color: #1487A8; font-size: 11px; } .treasury-config-plans small { margin-top: 2px; color: var(--muted); font-size: 8px; } .treasury-config-plans .is-inactive { opacity: .55; } .treasury-drawer-overlay { align-items: stretch; justify-content: flex-end; padding: 0; background: rgba(7, 27, 63, .48); } .treasury-drawer-overlay .treasury-payment-modal { width: min(100%, 530px); max-width: 530px; max-height: 100vh; height: 100vh; margin: 0; border-radius: 18px 0 0 18px; box-shadow: -24px 0 55px rgba(7, 27, 63, .24); transform: translateX(100%); } .treasury-drawer-overlay.active .treasury-payment-modal { transform: translateX(0); } .treasury-drawer-overlay .modal-header { padding: 14px 18px; border-radius: 18px 0 0; } .treasury-drawer-overlay .modal-body { padding: 16px 18px; } .treasury-drawer-overlay .modal-footer { padding: 12px 18px; border-radius: 0; } .treasury-drawer-overlay .treasury-member-summary { margin-bottom: 13px; padding: 11px; } .treasury-drawer-overlay .form-row { gap: 10px; } .treasury-drawer-overlay .form-group { margin-bottom: 12px; } .treasury-drawer-overlay .treasury-payment-calculation, .treasury-drawer-overlay .treasury-payment-total { margin-bottom: 13px; padding: 11px 12px; } #sec-promocoes .promotion-indicators { gap: 10px; margin-bottom: 12px; } #sec-promocoes .promotion-indicator { min-height: 82px; padding: 14px; border-radius: 12px; box-shadow: 0 7px 20px rgba(7, 27, 63, .05); } #sec-promocoes .promotion-indicator > i { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 19px; } #sec-promocoes .promotion-indicator span { margin-bottom: 3px; font-size: 9px; } #sec-promocoes .promotion-indicator strong { font-size: 20px; } #sec-promocoes .promotion-filter-card { margin-bottom: 12px; padding: 11px; } #sec-promocoes .promotion-filter-grid { gap: 9px; } #sec-promocoes .promotion-filter-grid label { margin-bottom: 3px; font-size: 9px; } #sec-promocoes .promotion-filter-grid .form-control { min-height: 36px; height: 36px; font-size: 11px; } .promotion-campaign-card, .promotion-beneficiary-card, .promotion-history-card { margin-bottom: 12px; } .promotion-section-header { padding: 13px 15px; } .promotion-section-header h3 { font-size: 15px; } .promotion-section-header > span { font-size: 10px; } .promotion-campaign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; background: #F5F8FB; } .promotion-campaign-item { position: relative; overflow: hidden; border: 1px solid var(--finance-line); border-top: 3px solid #22A8CE; border-radius: 12px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(7, 27, 63, .045); } .promotion-campaign-item.is-suspended { border-top-color: #CB5962; } .promotion-campaign-item.is-expired { border-top-color: #97A2B1; } .promotion-campaign-item.is-scheduled { border-top-color: #537FC5; } .promotion-campaign-item > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 13px 10px; } .promotion-campaign-item h4 { margin-top: 3px; color: var(--finance-navy); font-size: 15px; line-height: 1.2; } .promotion-campaign-item header small { display: block; margin-top: 3px; color: #91A0B2; font-size: 8px; } .promotion-campaign-item .promotion-target-type { overflow: hidden; max-width: 330px; margin: 0; color: #1184A5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .promotion-price-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: 7px; margin: 0 13px; padding: 10px; border: 1px solid var(--finance-line); border-radius: 10px; background: #F8FAFC; } .promotion-price-flow > i { color: #A7B2C0; font-size: 13px; } .promotion-price-flow span, .promotion-price-flow strong, .promotion-price-flow del, .promotion-price-flow small { display: block; } .promotion-price-flow span { margin-bottom: 3px; color: var(--muted); font-size: 8px; text-transform: uppercase; } .promotion-price-flow del { color: #6E7C91; font-size: 11px; font-weight: 700; } .promotion-price-flow strong { color: #B17809; font-size: 12px; } .promotion-price-flow small { margin-top: 2px; color: var(--muted); font-size: 8px; } .promotion-price-flow .is-final { padding: 8px; border-radius: 8px; background: var(--finance-navy); } .promotion-price-flow .is-final span { color: #AAB8CA; } .promotion-price-flow .is-final strong { color: var(--finance-cyan); font-size: 15px; } .promotion-campaign-meta { display: grid; grid-template-columns: .8fr 1.4fr .9fr; gap: 1px; margin: 10px 13px; overflow: hidden; border: 1px solid var(--finance-line); border-radius: 9px; background: var(--finance-line); } .promotion-campaign-meta > div { min-width: 0; padding: 8px; background: #FFFFFF; } .promotion-campaign-meta dt { color: var(--muted); font-size: 8px; text-transform: uppercase; } .promotion-campaign-meta dt i { margin-right: 3px; color: #1B9BC0; } .promotion-campaign-meta dd { overflow: hidden; margin-top: 3px; color: var(--finance-navy); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .promotion-campaign-meta small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; } .promotion-campaign-item > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--finance-line); background: #FBFCFD; } .promotion-campaign-item > footer > span { color: var(--muted); font-size: 8px; } .promotion-campaign-item > footer > span i { margin-right: 3px; color: #22A8CE; } .promotion-campaign-item > footer > div { display: flex; gap: 6px; } .promotion-lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .promotion-lower-grid .promotion-beneficiary-card, .promotion-lower-grid .promotion-history-card { min-width: 0; } @media (max-width: 1280px) { .treasury-filter-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); } .treasury-receipts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promotion-lower-grid { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 1060px) { .treasury-overview-grid, .treasury-settings-grid { grid-template-columns: 1fr; } .promotion-campaign-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .treasury-tabs { justify-content: flex-start; } .treasury-tab { flex: 0 0 auto; padding: 0 11px; } .treasury-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treasury-overview-grid { grid-template-columns: 1fr; } .treasury-operation-list { grid-template-columns: 1fr; } .treasury-operation-list > div { border-right: 0; border-bottom: 1px solid var(--finance-line); } .treasury-operation-list > div:last-child { border-bottom: 0; } .treasury-view-header, .treasury-view-header-search { align-items: stretch; flex-direction: column; } .treasury-inline-search { width: 100%; } .treasury-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treasury-grid .treasury-member-cell { min-width: 190px; max-width: 190px; } .treasury-receipts-grid { grid-template-columns: 1fr; } .treasury-season-card { grid-template-columns: 42px 1fr; } .treasury-season-fee { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid var(--finance-line); border-left: 0; text-align: left; } .treasury-config-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treasury-drawer-overlay .treasury-payment-modal { width: 100%; max-width: 100%; border-radius: 0; } .treasury-drawer-overlay .modal-header { border-radius: 0; } .promotion-campaign-grid { padding: 8px; } .promotion-price-flow { grid-template-columns: 1fr; text-align: center; } .promotion-price-flow > i { transform: rotate(90deg); } .promotion-campaign-meta { grid-template-columns: 1fr; } .promotion-campaign-item > footer { align-items: stretch; flex-direction: column; } .promotion-campaign-item > footer > div { justify-content: flex-end; } } @media (max-width: 480px) { .treasury-indicators, .treasury-filter-grid { grid-template-columns: 1fr; } .treasury-tab span { display: none; } .treasury-tab { min-width: 42px; } .treasury-tab i { font-size: 18px; } .treasury-selection-bar { align-items: stretch; flex-direction: column; } .treasury-grid .treasury-member-cell { min-width: 168px; max-width: 168px; } } /* Dashboard: densidade elevada sem alterar componentes ou identidade visual. */ #sec-dashboard { width: 100%; max-width: 1680px; margin: 0 auto; } #sec-dashboard .page-header { min-height: 42px; margin-bottom: 14px; gap: 12px; } #sec-dashboard .page-title h2 { margin-bottom: 2px; font-size: 21px; line-height: 1.15; } #sec-dashboard .page-title p { font-size: 12px; line-height: 1.3; } #sec-dashboard .bento-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch; gap: 16px; margin-bottom: 0; } #sec-dashboard .bento-stat { grid-column: span 3; min-height: 0; height: 88px; padding: 13px 14px; } #sec-dashboard .bento-stat:hover { transform: translateY(-2px); } #sec-dashboard .bento-stat::after { right: -7px; bottom: -23px; font-size: 66px; } #sec-dashboard .stat-card-inner { gap: 12px; } #sec-dashboard .stat-icon { width: 42px; height: 42px; font-size: 21px; } #sec-dashboard .stat-value { margin-top: 1px; font-size: 25px; letter-spacing: -.6px; } #sec-dashboard .stat-label { font-size: 10px; line-height: 1.15; } #sec-dashboard .bento-chart { grid-column: span 6; min-height: 0; height: 242px; padding: 14px 16px; } #sec-dashboard .bento-chart h3, #sec-dashboard .bento-actions h3, #sec-dashboard .bento-feed h3, #sec-dashboard .bento-mensal h3 { margin: 0; font-size: 14px; line-height: 1.25; } #sec-dashboard .bento-chart .badge { padding: 3px 8px; font-size: 9px; } #sec-dashboard .chart-container { min-height: 0; max-height: none; height: 184px; margin-top: 8px; } #sec-dashboard .bento-actions, #sec-dashboard .bento-feed, #sec-dashboard .bento-mensal { min-width: 0; height: 188px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); overflow: hidden; } #sec-dashboard .bento-actions { grid-column: span 3; } #sec-dashboard .bento-feed { grid-column: span 6; } #sec-dashboard .bento-mensal { grid-column: span 3; } #sec-dashboard .quick-actions-grid { gap: 7px; margin-top: 8px; } #sec-dashboard .quick-action-item { height: 40px; gap: 9px; padding: 0 11px; font-size: 12px; } #sec-dashboard .quick-action-item i { padding: 4px; font-size: 17px; } #sec-dashboard .activity-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; } #sec-dashboard .activity-item { min-width: 0; padding: 7px 10px; gap: 3px; } #sec-dashboard .activity-header { font-size: 9px; } #sec-dashboard .activity-text { display: -webkit-box; overflow: hidden; font-size: 11.5px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #sec-dashboard .bento-panel-heading { margin-bottom: 7px; } #sec-dashboard .bento-panel-heading > i { font-size: 17px; } #sec-dashboard #dash-mensal-resumo { gap: 0; } #sec-dashboard #dash-mensal-resumo > .flex { min-height: 21px; margin-bottom: 2px !important; } #sec-dashboard #dash-mensal-resumo > .flex span:first-child { font-size: 11px !important; } #sec-dashboard #dash-mensal-resumo .badge { padding: 2px 7px; font-size: 9px; } #sec-dashboard .bento-mensal-action { min-height: 32px; margin-top: 7px; } @media (max-width: 1200px) { #sec-dashboard .bento-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } #sec-dashboard .bento-stat { grid-column: span 3; } #sec-dashboard .bento-chart { grid-column: span 6; } #sec-dashboard .bento-actions, #sec-dashboard .bento-mensal { grid-column: span 3; } #sec-dashboard .bento-feed { grid-column: span 6; } } @media (max-width: 768px) { .top-header { height: 56px; } .search-input { height: 36px; } #sec-dashboard .bento-grid { grid-template-columns: minmax(0, 1fr); } #sec-dashboard .bento-stat, #sec-dashboard .bento-chart, #sec-dashboard .bento-actions, #sec-dashboard .bento-feed, #sec-dashboard .bento-mensal { grid-column: 1 / -1; height: auto; } #sec-dashboard .bento-stat { min-height: 82px; } #sec-dashboard .bento-chart { min-height: 232px; } #sec-dashboard .bento-actions, #sec-dashboard .bento-feed, #sec-dashboard .bento-mensal { min-height: 176px; } } @media (max-width: 480px) { #sec-dashboard .activity-feed { grid-template-columns: minmax(0, 1fr); } } /* Dashboard: controlos operacionais, navegação contextual e estados. */ #sec-dashboard .dashboard-controls { align-items: flex-end; flex-wrap: wrap; } .dashboard-period-control { display: grid; gap: 3px; color: #52617A; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .dashboard-period-control .form-control { width: 126px; height: 34px; min-height: 34px; padding: 0 30px 0 10px; color: var(--navy); font-size: 12px; font-weight: 600; text-transform: none; } #sec-dashboard .dashboard-controls > .btn { min-height: 34px; height: 34px; } #sec-dashboard .bento-stat { width: 100%; color: inherit; text-align: left; cursor: pointer; } #sec-dashboard .bento-stat:not(.permission-disabled):hover { border-color: #9CDCEB; } #sec-dashboard .bento-stat:not(.permission-disabled):focus-visible { outline: 3px solid rgba(42, 184, 223, .28); outline-offset: 2px; } .dashboard-feedback { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid #D7E1EC; border-radius: 10px; background: #FFFFFF; color: #53637A; } .dashboard-feedback[hidden] { display: none; } .dashboard-feedback > i { color: #1598BE; font-size: 20px; } .dashboard-feedback > div { display: grid; gap: 1px; min-width: 0; } .dashboard-feedback strong { color: var(--navy); font-size: 12px; } .dashboard-feedback span { font-size: 11px; } .dashboard-feedback .btn { margin-left: auto; } .dashboard-feedback.is-error { border-color: #F5C2C7; background: #FFF8F8; } .dashboard-feedback.is-error > i { color: var(--danger); } .dashboard-feedback.is-empty { border-color: #CFE4EC; background: #F7FCFE; } .dashboard-feedback.is-loading > i, #btn-refresh-dashboard.is-loading i { animation: dashboard-spin .8s linear infinite; } #dashboard-content.is-loading { opacity: .55; pointer-events: none; } @keyframes dashboard-spin { to { transform: rotate(360deg); } } .dashboard-inline-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 112px; color: #607087; font-size: 11px; font-weight: 600; } .dashboard-inline-empty i { color: #1598BE; font-size: 18px; } #sec-dashboard .dashboard-monthly-link { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 5px; width: 100%; min-height: 20px; padding: 0 2px; border-radius: 5px; color: #53637A; font-size: 11px; font-weight: 500; text-align: left; } #sec-dashboard .dashboard-monthly-link:hover { background: #F3F7FB; color: var(--navy); } #sec-dashboard .dashboard-monthly-link > i { color: #8B99AB; font-size: 11px; } #sec-dashboard .dashboard-monthly-link .badge { justify-self: end; } .student-filter-card { display: flex; align-items: center; gap: 12px; width: fit-content; min-width: 310px; margin-bottom: 16px; padding: 10px 12px; } .student-filter-card label { color: #52617A; font-size: 11px; font-weight: 700; } .student-filter-card .form-control { width: 210px; height: 38px; } /* Diretório de alunos: famílias, pesquisa e modalidades expansíveis. */ #sec-alunos { width: 100%; max-width: 1600px; margin: 0 auto; } .student-directory-total { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid #CAD7E5; border-radius: 999px; background: #FFFFFF; color: #36506F; font-size: 12px; font-weight: 700; } .student-directory-toolbar { margin-bottom: 16px; padding: 14px 16px; border-color: #D7E1EC; } .student-directory-filters { display: grid; grid-template-columns: minmax(300px, 1fr) 230px; gap: 12px; align-items: end; } .student-directory-filters label, .student-family-label { display: block; margin-bottom: 5px; color: #52617A; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .student-directory-filters .form-control { height: 40px; } .student-search-field { position: relative; } .student-search-field > i { position: absolute; left: 13px; bottom: 11px; color: #75849A; font-size: 17px; } .student-search-field .form-control { padding-left: 40px; } .student-family-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; align-items: end; margin-top: 13px; padding-top: 12px; border-top: 1px solid #E1E8F0; } .student-family-label { grid-column: 1 / -1; margin: 0; } .student-family-switch { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: thin; } .student-family-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 11px; border: 1px solid #CBD7E5; border-radius: 9px; background: #FFFFFF; color: #37506F; font-size: 12px; font-weight: 700; white-space: nowrap; } .student-family-switch button:hover { border-color: #8CCFE0; background: #F3FAFC; } .student-family-switch button.is-active { border-color: #0A5273; background: #0A5273; color: #FFFFFF; box-shadow: 0 5px 12px rgba(8, 56, 86, .14); } .student-family-switch button > i { font-size: 16px; } .student-family-switch button > span { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: #EDF2F7; color: #53637A; font-size: 9px; } .student-family-switch button.is-active > span { background: rgba(255,255,255,.16); color: #FFFFFF; } .student-filter-status { margin: 0 0 4px; color: #5A6980; font-size: 11px; font-weight: 600; text-align: right; white-space: nowrap; } .student-directory-groups { display: grid; gap: 10px; } .student-modality-section { overflow: hidden; border: 1px solid #D7E1EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 7px 20px rgba(7, 27, 63, .04); } .student-modality-toggle { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px 14px; color: var(--navy); text-align: left; } .student-modality-toggle:hover { background: #F8FBFD; } .student-modality-toggle[aria-expanded="true"] { background: #F5FAFC; } .student-modality-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: #EAF7FB; color: #1688AA; font-size: 19px; } .student-modality-toggle > span:nth-child(2) { display: grid; gap: 2px; } .student-modality-toggle strong { font-size: 14px; font-weight: 700; } .student-modality-toggle small { color: #65748A; font-size: 10px; font-weight: 600; } .student-modality-state { color: #607087; font-size: 10px; font-weight: 700; } .student-modality-caret { color: #75849A; font-size: 14px; } .student-modality-panel { border-top: 1px solid #DCE5EF; } .student-modality-table { border: 0; border-radius: 0; box-shadow: none; } .student-modality-table table { min-width: 760px; } /* Inscrições oficiais: leitura completa sem deslocamento horizontal em desktop. */ .registrations-table-container { overflow-x: hidden; } .registrations-table { min-width: 0; table-layout: fixed; } .registrations-table th, .registrations-table td { padding-left: 12px; padding-right: 12px; } .registrations-table th:nth-child(1) { width: 120px; } .registrations-table th:nth-child(2) { width: 18%; } .registrations-table th:nth-child(3) { width: 20%; } .registrations-table th:nth-child(4) { width: 90px; } .registrations-table th:nth-child(7) { width: 115px; } .registrations-table th:nth-child(8) { width: 118px; } .registration-modality-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .registrations-table .table-actions { flex-wrap: nowrap; } @media (max-width: 1200px) { .registrations-table .registration-col-secondary { display: none; } .registrations-table th:nth-child(2) { width: 24%; } .registrations-table th:nth-child(3) { width: 26%; } } @media (max-width: 760px) { .registrations-table-container { overflow: visible; border: 0; box-shadow: none; background: transparent; } .registrations-table, .registrations-table tbody, .registrations-table tr, .registrations-table td { display: block; width: 100%; min-width: 0; } .registrations-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .registrations-table tbody { display: grid; gap: 12px; } .registrations-table tr { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); } .registrations-table td, .registrations-table td.registration-col-secondary { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 0; border: 0; white-space: normal; } .registrations-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .registrations-table td.id-col { font-size: 12px; } .registrations-table .registration-modality-cell { white-space: normal; overflow: visible; } .registrations-table .table-actions { justify-content: flex-start; } .registrations-table .action-btn { width: 38px; height: 38px; } } .student-modality-table th { height: 40px; padding: 9px 13px; font-size: 10px; } .student-modality-table td { height: 54px; padding: 9px 13px; font-size: 12px; } .student-name { display: block; color: var(--navy); font-size: 12px; font-weight: 700; } .student-contact-subline { display: none; margin-top: 2px; color: #6B798D; font-size: 9px; } .student-mobile-list { display: none; } .student-directory-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 28px; border: 1px dashed #C8D6E5; border-radius: 12px; background: #F8FAFC; color: #607087; text-align: center; } .student-directory-empty > i { margin-bottom: 8px; color: #1688AA; font-size: 31px; } .student-directory-empty strong { color: var(--navy); font-size: 15px; } .student-directory-empty span { margin: 5px 0 14px; font-size: 12px; } #sec-dashboard .dashboard-insights-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 16px; min-width: 0; } .dashboard-finance-panel, .dashboard-alerts-panel { min-width: 0; height: 146px; padding: 13px 15px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); } .dashboard-finance-panel > header, .dashboard-alerts-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .dashboard-finance-panel h3, .dashboard-alerts-panel h3 { margin-top: 1px; font-size: 14px; line-height: 1.2; } .dashboard-panel-kicker { display: block; color: #1688AA; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .dashboard-panel-link { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: #37506F; font-size: 10px; font-weight: 700; } .dashboard-panel-link:hover { background: #F3F7FB; color: var(--navy); } .dashboard-finance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .dashboard-finance-metric { display: grid; grid-template-columns: 26px minmax(0, 1fr) 10px; align-items: center; gap: 6px; min-width: 0; min-height: 72px; padding: 7px 8px; border: 1px solid #DCE5EF; border-radius: 8px; background: #F8FAFC; color: #607087; text-align: left; } .dashboard-finance-metric:hover { border-color: #A9DCE8; background: #F4FBFD; } .dashboard-finance-metric > i:first-child { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #EAF7FB; color: #1688AA; font-size: 15px; } .dashboard-finance-metric > i:last-child { color: #93A1B3; font-size: 10px; } .dashboard-finance-metric > span { min-width: 0; font-size: 9px; font-weight: 600; line-height: 1.2; } .dashboard-finance-metric strong { display: block; margin-top: 4px; overflow: hidden; color: var(--navy); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .dashboard-finance-metric.is-negative > i:first-child { background: #FEF2F2; color: #C24141; } .dashboard-finance-metric.is-warning > i:first-child { background: #FFF7ED; color: #C26B12; } .dashboard-finance-metric.is-positive > i:first-child { background: #F0FDF4; color: #16854C; } .dashboard-alert-count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 999px; background: #EFF3F7; color: #607087; font-size: 10px; font-weight: 700; } .dashboard-alert-count.has-alerts { background: #FFF1E8; color: #B55315; } .dashboard-operational-alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .dashboard-alert-item, .dashboard-alert-empty { display: grid; grid-template-columns: 26px minmax(0, 1fr) 10px; align-items: center; gap: 7px; min-width: 0; min-height: 72px; padding: 7px 8px; border: 1px solid #DCE5EF; border-left: 3px solid #E1A15E; border-radius: 8px; background: #FBFCFE; color: #53637A; text-align: left; } .dashboard-alert-item:hover { background: #F8FAFC; border-color: #C6D5E3; } .dashboard-alert-item > i:first-child, .dashboard-alert-empty > i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #FFF4EA; color: #B85B1D; font-size: 15px; } .dashboard-alert-item > i:last-child { color: #93A1B3; font-size: 10px; } .dashboard-alert-item span, .dashboard-alert-empty span { min-width: 0; } .dashboard-alert-item strong, .dashboard-alert-empty strong { display: -webkit-box; overflow: hidden; color: var(--navy); font-size: 10px; font-weight: 700; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dashboard-alert-item small, .dashboard-alert-empty small { display: block; margin-top: 3px; font-size: 8px; font-weight: 600; } .dashboard-alert-item.is-critical { border-left-color: #D65353; } .dashboard-alert-item.is-critical > i:first-child { background: #FEF2F2; color: #C24141; } .dashboard-alert-item.is-warning { border-left-color: #E5A135; } .dashboard-alert-item.is-attention { border-left-color: #2AA7C8; } .dashboard-alert-item.is-attention > i:first-child { background: #EAF7FB; color: #1688AA; } .dashboard-alert-empty { grid-template-columns: 30px minmax(0, 1fr); grid-column: 1 / -1; border-left-color: #3BA66B; } .dashboard-alert-empty > i { background: #F0FDF4; color: #16854C; } @media (max-width: 768px) { #sec-dashboard .dashboard-controls { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, auto); align-items: end; } .dashboard-period-control .form-control { width: 100%; } #sec-dashboard .dashboard-period-control .form-control, #sec-dashboard .dashboard-controls > .btn { min-height: 44px; height: 44px; } #sec-dashboard .dashboard-monthly-link { min-height: 44px; padding: 0 8px; } .dashboard-feedback { align-items: flex-start; flex-wrap: wrap; } .dashboard-feedback .btn { width: 100%; margin-left: 0; } .student-filter-card { width: 100%; min-width: 0; } .student-filter-card .form-control { flex: 1; width: auto; } .student-directory-total { min-height: 38px; } .student-directory-toolbar { padding: 12px; } .student-directory-filters { grid-template-columns: minmax(0, 1fr); } .student-directory-filters .form-control { min-height: 44px; height: 44px; } .student-search-field > i { bottom: 13px; } .student-family-navigation { grid-template-columns: minmax(0, 1fr); } .student-family-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; } .student-family-switch button { width: 100%; min-height: 44px; } .student-family-switch #student-family-all { grid-column: 1 / -1; } .student-filter-status { text-align: left; white-space: normal; } .student-modality-toggle { grid-template-columns: 38px minmax(0, 1fr) 15px; min-height: 60px; padding: 10px 12px; } .student-modality-state { display: none; } .student-modality-table { display: none; } .student-mobile-list { display: grid; gap: 9px; padding: 10px; background: #F4F7FA; } .student-mobile-card { padding: 12px; border: 1px solid #D8E2ED; border-radius: 10px; background: #FFFFFF; } .student-mobile-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .student-mobile-card > header span:first-child { color: #1688AA; font-size: 9px; font-weight: 700; } .student-mobile-card h4 { margin-top: 2px; font-size: 14px; } .student-mobile-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 11px 0; } .student-mobile-card dl > div { min-width: 0; padding: 7px; border-radius: 7px; background: #F6F8FB; } .student-mobile-card dt { color: #6A788C; font-size: 8px; font-weight: 700; text-transform: uppercase; } .student-mobile-card dd { margin-top: 3px; overflow: hidden; color: var(--navy); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .student-mobile-card > .btn { width: 100%; min-height: 44px; } #sec-dashboard .dashboard-insights-row { grid-template-columns: minmax(0, 1fr); } .dashboard-finance-panel, .dashboard-alerts-panel { height: auto; min-height: 176px; } .dashboard-finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-finance-metric { min-height: 52px; } .dashboard-operational-alerts { grid-template-columns: minmax(0, 1fr); } .dashboard-alert-item, .dashboard-alert-empty { min-height: 52px; } .dashboard-panel-link, .dashboard-finance-metric, .dashboard-alert-item { min-height: 44px; } } @media (max-width: 480px) { #sec-dashboard .dashboard-controls { grid-template-columns: 1fr 1fr; } #sec-dashboard .dashboard-period-control { grid-column: 1 / -1; } #sec-dashboard .dashboard-controls > .btn { width: 100%; } } /* ================================================================ UI CLARITY — hierarquia, contraste e leitura operacional ================================================================ */ .skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed; top: 10px; left: 50%; z-index: 10000; width: auto; height: auto; min-height: 42px; margin: 0; padding: 10px 16px; overflow: visible; border-radius: 8px; background: #FFFFFF; color: #071B3F; clip: auto; font-weight: 700; outline: 3px solid #2AB8DF; outline-offset: 2px; box-shadow: 0 8px 24px rgba(7, 27, 63, .22); transform: translateX(-50%); white-space: normal; } .page-title h2[tabindex="-1"]:focus { outline: none; } html, body { font-size: 15px; font-weight: 500; } body, input, select, textarea, button { color: var(--text); } h1, h2, h3, h4, .page-title h2 { font-weight: 700; } .text-muted { color: #58677D; } .page-title p { font-size: 15px; font-weight: 500; line-height: 1.45; } .form-label, .promotion-filter-grid label { font-weight: 700; } .form-control, .search-input { font-weight: 500; } .menu-item { font-weight: 600; } th { color: #52617A; font-weight: 700; } td { font-weight: 500; } #sec-promocoes, #sec-mensalidades { width: 100%; max-width: 1600px; margin: 0 auto; } #sec-promocoes .page-header, #sec-mensalidades .page-header { margin-bottom: 22px; } #sec-promocoes .page-title h2, #sec-mensalidades .page-title h2 { margin: 5px 0 5px; font-size: clamp(27px, 2.1vw, 32px); line-height: 1.1; } #sec-promocoes .treasury-eyebrow, #sec-mensalidades .treasury-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; } /* Promoções: resumo legível antes dos detalhes. */ #sec-promocoes .promotion-indicators { gap: 14px; margin-bottom: 16px; } #sec-promocoes .promotion-indicator { min-height: 94px; padding: 17px 18px; border-color: #D8E1EC; box-shadow: 0 8px 22px rgba(7, 27, 63, .055); } #sec-promocoes .promotion-indicator > i { width: 46px; height: 46px; flex-basis: 46px; font-size: 22px; } #sec-promocoes .promotion-indicator span { margin-bottom: 5px; color: #5D6C82; font-size: 11px; font-weight: 700; letter-spacing: .045em; } #sec-promocoes .promotion-indicator strong { font-size: 27px; font-weight: 700; } #sec-promocoes .promotion-filter-card { margin-bottom: 16px; padding: 16px; border-color: #D8E1EC; } #sec-promocoes .promotion-filter-grid { gap: 13px; } #sec-promocoes .promotion-filter-grid label { margin-bottom: 6px; color: #52617A; font-size: 11px; letter-spacing: .045em; } #sec-promocoes .promotion-filter-grid .form-control { min-height: 44px; height: 44px; border-color: #C7D3E2; font-size: 14px; } .promotion-campaign-card, .promotion-beneficiary-card, .promotion-history-card { margin-bottom: 16px; border-color: #D8E1EC; box-shadow: 0 9px 25px rgba(7, 27, 63, .05); } .promotion-section-header { min-height: 72px; padding: 16px 19px; gap: 18px; } .promotion-section-header h3 { margin-top: 4px; font-size: 19px; font-weight: 700; } .promotion-section-header > span, .promotion-section-header > i, .promotion-section-note { color: #5B6980; font-size: 12px; font-weight: 500; line-height: 1.4; } .promotion-section-note { display: inline-flex; align-items: center; gap: 7px; max-width: 390px; } .promotion-section-note i { color: #1598BE; font-size: 17px; } .promotion-section-header select { min-height: 44px; font-size: 14px; } .promotion-campaign-grid { grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 16px; padding: 18px; background: #F3F7FB; } .promotion-campaign-item { border-color: #CFDBE8; border-top-width: 4px; border-radius: 14px; box-shadow: 0 8px 22px rgba(7, 27, 63, .055); } .promotion-campaign-item > header { padding: 17px 18px 14px; } .promotion-campaign-item h4 { margin-top: 7px; font-size: 21px; font-weight: 700; } .promotion-campaign-item header small { display: flex; align-items: center; gap: 3px; margin-top: 5px; color: #718098; font-size: 10px; font-weight: 600; } .promotion-campaign-item .promotion-target-type { max-width: 520px; color: #087A9D; font-size: 11px; font-weight: 700; letter-spacing: .025em; } .promotion-status { padding: 7px 11px; font-size: 11px; font-weight: 700; } .promotion-price-flow { gap: 11px; margin: 0 18px; padding: 13px 14px; border-color: #D4DFEB; background: #F7F9FC; } .promotion-price-flow > i { font-size: 17px; } .promotion-price-flow span { margin-bottom: 5px; color: #607087; font-size: 10px; font-weight: 600; letter-spacing: .035em; } .promotion-price-flow del { color: #56657A; font-size: 14px; } .promotion-price-flow strong { color: #9A6507; font-size: 16px; font-weight: 700; } .promotion-price-flow small { margin-top: 4px; color: #65748A; font-size: 10px; font-weight: 500; } .promotion-price-flow .is-final { padding: 12px 13px; } .promotion-price-flow .is-final span { color: #C0CAD7; } .promotion-price-flow .is-final strong { font-size: 23px; } .promotion-campaign-meta { margin: 14px 18px; border-color: #D4DFEB; background: #D4DFEB; } .promotion-campaign-meta > div { padding: 12px; } .promotion-campaign-meta dt { color: #607087; font-size: 10px; font-weight: 600; letter-spacing: .035em; } .promotion-campaign-meta dd { margin-top: 5px; color: var(--finance-navy); font-size: 13px; font-weight: 700; } .promotion-campaign-meta small { margin-top: 4px; color: #607087; font-size: 10px; font-weight: 500; } .promotion-campaign-item > footer { padding: 13px 18px; } .promotion-campaign-item > footer > span { color: #607087; font-size: 11px; font-weight: 500; } .promotion-campaign-item > footer > div { gap: 8px; } .promotion-campaign-item > footer .btn { min-height: 40px; height: 40px; font-size: 14px; font-weight: 700; } .promotion-lower-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .promotion-beneficiary-card .table-container, .promotion-history-card .table-container { border: 0; border-top: 1px solid #D8E1EC; border-radius: 0; box-shadow: none; } .promotion-beneficiary-card th, .promotion-history-card th { padding: 13px 16px; font-size: 11px; } .promotion-beneficiary-card td, .promotion-history-card td { padding: 14px 16px; font-size: 14px; } .promotion-empty-state { min-height: 180px; gap: 7px; } .promotion-empty-state strong { font-size: 15px; font-weight: 700; } .promotion-empty-state span { color: #607087; font-size: 12px; font-weight: 500; } .promotion-table-empty { padding: 30px 16px !important; color: #607087; font-size: 14px; font-weight: 600; text-align: center; } .table-scroll-hint { display: none; } /* Preçário: uma área de configuração orientada e fácil de percorrer. */ .fees-page-header { align-items: flex-end; } .fees-panel { overflow: hidden; padding: 0; border-color: #D7E1EC; box-shadow: 0 12px 30px rgba(7, 27, 63, .055); } .fees-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 94px; padding: 19px 22px; border-bottom: 1px solid #D7E1EC; background: #FFFFFF; } .fees-section-kicker { color: #1688AA; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .fees-panel-header h3 { margin-top: 4px; font-size: 19px; font-weight: 700; } .fees-panel-header p { margin-top: 4px; color: #5A6980; font-size: 13px; font-weight: 500; } .fees-legend { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .fees-legend span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid #D7E1EC; border-radius: 999px; background: #F7F9FC; color: #52617A; font-size: 11px; font-weight: 600; } .fees-legend i { color: #1688AA; font-size: 15px; } .fees-view-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 14px 22px; border-bottom: 1px solid #D7E1EC; background: #FBFCFE; } .fees-view-label { display: block; margin-bottom: 7px; color: #506078; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .fees-view-switch { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .fees-view-switch button, .section-disclosure-toggle { min-height: 40px; padding: 0 14px; border: 1px solid #CBD7E5; border-radius: 9px; background: #FFFFFF; color: #1A2E50; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .fees-view-switch button:hover, .section-disclosure-toggle:hover { border-color: #7FC8DC; background: #F2FAFC; } .fees-view-switch button:focus-visible, .section-disclosure-toggle:focus-visible { outline: 3px solid rgba(35, 169, 207, .25); outline-offset: 2px; } .fees-view-switch button.is-active, .fees-view-switch button[aria-pressed="true"] { border-color: #0A5273; background: #0A5273; color: #FFFFFF; box-shadow: 0 5px 12px rgba(8, 56, 86, .15); } .fees-filter-status { margin: 0 0 3px; color: #5A6980; font-size: 12px; font-weight: 600; text-align: right; } .fees-empty-view { height: 92px !important; color: #5A6980; font-weight: 600; text-align: center !important; } .fees-table-wrap { border: 0; border-radius: 0; box-shadow: none; } .table-fees { min-width: 900px; } .table-fees th { height: 52px; padding: 13px 18px; background: #F3F6FA; color: #506078; font-size: 12px; text-align: center; } .table-fees th:first-child { text-align: left; } .table-fees td { height: 76px; padding: 13px 18px; text-align: center; } .table-fees td:first-child { text-align: left; } .table-fees tbody tr:nth-child(even) td { background: #FBFCFE; } .table-fees tbody tr:hover td { background: #F2FAFD; } .fee-category { color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.25; } .fee-input-wrapper { width: 132px; margin: 0 auto; } .fee-input { height: 44px; padding: 0 38px 0 13px; border-color: #CBD7E5; border-radius: 9px; background: #F7F9FC; font-size: 16px; font-weight: 700; } .fee-input:hover { border-color: #8BCDE0; background: #FFFFFF; } .fee-input:focus { box-shadow: 0 0 0 3px rgba(94, 211, 243, .18); } .fee-currency { right: 11px; color: #56667D; font-size: 11px; font-weight: 700; } .fee-unavailable { display: inline-flex; align-items: center; gap: 5px; color: #65748A; font-size: 12px; font-weight: 700; } .fee-unavailable i { color: #94A1B2; } .fee-fixed-cell { text-align: left !important; } .fee-fixed-cell .fee-input-wrapper { display: inline-block; margin: 0; vertical-align: middle; } .fee-fixed-cell > small { margin-left: 12px; color: #5D6C82; font-size: 12px; font-weight: 500; } .fee-input-fixed { width: 150px !important; } /* Divulgação progressiva: dados secundários aparecem apenas quando solicitados. */ .section-disclosure-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; } .section-disclosure-toggle[aria-expanded="true"] { border-color: #9BCDDD; background: #EFF9FC; color: #075C79; } .section-disclosure-toggle i { font-size: 15px; } .section-disclosure-panel[hidden] { display: none !important; } .promotion-panel-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 18px; border-top: 1px solid #D8E1EC; background: #FBFCFE; } .promotion-panel-tools label { color: #506078; font-size: 12px; font-weight: 700; } .promotion-panel-tools .form-control { width: min(320px, 100%); min-height: 40px; } .registration-promotion-context { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #B9E6F4; border-radius: 12px; background: linear-gradient(135deg, #F0FBFE 0%, #F7FCFF 100%); color: var(--navy); } .registration-promotion-context > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; background: var(--pool); color: var(--navy); font-size: 21px; } .registration-promotion-context div { display: grid; gap: 3px; } .registration-promotion-context strong { font-size: 14px; font-weight: 800; } .registration-promotion-context span { color: #52647C; font-size: 12px; font-weight: 600; line-height: 1.45; } #modal-reg select:disabled { border-color: #CFE3EC; background: #F0F8FB; color: #183A58; opacity: 1; cursor: not-allowed; } .promotion-school-enroll-action { min-width: 172px; } .promotion-school-class-picker { display: grid; min-width: 190px; gap: 3px; text-align: left; } .promotion-school-class-picker > span { color: #63738A; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .promotion-school-class-picker .form-control { min-height: 40px; padding: 8px 34px 8px 11px; font-size: 12px; font-weight: 700; } .promotion-school-class-picker .form-control:disabled { border-color: #D7E5EC; background: #F5F9FB; color: #344A61; opacity: 1; } .promotion-campaign-actions.is-school-enrollment { align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; } .promotion-delete-action { border-color: #F5C2C7; color: #B42318; } .promotion-delete-action:hover { border-color: #E5484D; background: #FFF1F2; color: #8F151A; } .family-fixed-modality > div { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #CFE3EC; border-radius: var(--radius-md); background: #F0F8FB; color: var(--navy); } .family-fixed-modality i { color: var(--pool-dark); font-size: 19px; } .family-fixed-modality strong { font-size: 13px; font-weight: 750; } #modal-reg .form-control.is-fixed-service-value:disabled, .form-control.is-fixed-service-value:disabled { border-color: #CFE3EC; background: #F0F8FB; color: var(--navy); font-weight: 700; opacity: 1; } @media (max-width: 620px) { .promotion-school-class-picker, .promotion-school-enroll-action { width: 100%; min-width: 0; } } @media (max-width: 760px) { html, body { font-size: 14px; } #sec-promocoes .page-title h2, #sec-mensalidades .page-title h2 { font-size: 26px; } #sec-promocoes .promotion-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sec-promocoes .promotion-indicator { min-height: 88px; padding: 13px; } #sec-promocoes .promotion-indicator > i { width: 40px; height: 40px; flex-basis: 40px; } #sec-promocoes .promotion-indicator span { font-size: 10px; } #sec-promocoes .promotion-indicator strong { font-size: 23px; } #sec-promocoes .promotion-filter-grid { grid-template-columns: 1fr; } .promotion-section-header { align-items: stretch; min-height: auto; } .promotion-section-note { max-width: none; } .promotion-campaign-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; } .promotion-campaign-item > header { padding: 14px; } .promotion-campaign-item h4 { font-size: 19px; } .promotion-price-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 14px; padding: 9px; text-align: left; } .promotion-price-flow > i { display: none; } .promotion-price-flow .is-final { padding: 9px; } .promotion-price-flow .is-final strong { font-size: 18px; } .promotion-campaign-meta { margin: 12px 14px; } .promotion-campaign-item > footer { padding: 12px 14px; } .fees-page-header { align-items: stretch; } .fees-page-header .btn { width: 100%; } .fees-panel-header { align-items: flex-start; flex-direction: column; padding: 16px; } .fees-view-controls { align-items: stretch; flex-direction: column; padding: 14px 16px; } .fees-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fees-view-switch button { width: 100%; min-height: 44px; padding: 0 9px; } .fees-filter-status { margin: 0; text-align: left; } .section-disclosure-toggle { width: 100%; min-height: 44px; } .promotion-panel-tools { align-items: stretch; flex-direction: column; padding: 12px 16px; } .promotion-panel-tools .form-control { width: 100%; } .table-scroll-hint { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 16px; border-top: 1px solid #E1E8F0; background: #F8FAFC; color: #53637A; font-size: 12px; font-weight: 600; } .table-scroll-hint i { color: #1598BE; font-size: 16px; } .promotion-beneficiary-card .table-container.is-empty table { width: 100%; min-width: 0; } .fees-legend { width: 100%; } .table-fees { min-width: 780px; } .table-fees th:first-child, .table-fees td:first-child { position: sticky; left: 0; z-index: 2; width: 170px !important; min-width: 170px; background: #FFFFFF; box-shadow: 7px 0 12px rgba(7, 27, 63, .04); } .table-fees th:first-child { z-index: 3; background: #F3F6FA; } .table-fees tbody tr:nth-child(even) td:first-child { background: #FBFCFE; } .fee-fixed-cell > small { display: block; margin: 7px 0 0; } } @media (max-width: 480px) { #sec-promocoes .promotion-indicators { gap: 9px; } #sec-promocoes .promotion-indicator { align-items: flex-start; min-height: 104px; flex-direction: column; gap: 9px; } .promotion-price-flow span { font-size: 8px; } .promotion-price-flow del, .promotion-price-flow strong { font-size: 13px; } .promotion-price-flow small { font-size: 8px; } .promotion-campaign-item > footer > div { width: 100%; } .promotion-campaign-item > footer .btn { flex: 1; } } .registration-annual-fee-summary { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #CFE8F3; border-radius: 10px; background: #F4FBFE; color: var(--navy); } .registration-annual-fee-summary strong { font-size: 18px; font-weight: 750; } .registration-annual-fee-summary small, .form-help { color: var(--muted); font-size: 12px; font-weight: 550; line-height: 1.4; } .form-help { display: block; margin-top: 6px; } .family-member-tabs { display: flex; gap: 8px; margin: 4px 0 12px; } .family-member-tab { min-height: 36px; padding: 7px 14px; border: 1px solid #BFD9E7; border-radius: 9px; background: var(--white); color: var(--navy); font-size: 12px; font-weight: 700; } .family-member-tab.is-active { border-color: var(--navy); background: var(--navy); color: var(--white); } .family-member-tab:focus-visible { outline: 3px solid rgba(94, 211, 243, 0.45); outline-offset: 2px; } .treasury-receipt-family { margin: 14px 0; padding: 14px; border: 1px solid #CFE8F3; border-radius: 10px; background: #F4FBFE; } .treasury-receipt-family-title { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid #DCEAF2; } .treasury-receipt-family-title div, .treasury-receipt-family-members p { display: flex; flex-direction: column; gap: 2px; } .treasury-receipt-family span, .treasury-receipt-family small { color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; } .treasury-receipt-family-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding-top: 10px; } /* Gestão incremental: inscrições, serviços e interações tácteis intencionais. */ .registration-management-bar { display: grid; gap: 12px; padding: 14px 16px; margin-bottom: 16px; } .registration-view-tabs, .registration-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .registration-view-tabs button { min-height: 38px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-weight: 700; background: var(--white); } .registration-view-tabs button.is-active { color: var(--white); border-color: var(--navy); background: var(--navy); } .registration-view-tabs button span { display: inline-grid; min-width: 22px; min-height: 22px; margin-left: 5px; place-items: center; border-radius: 999px; background: rgba(148, 163, 184, .18); font-size: 11px; } .registration-filters input { flex: 1 1 320px; } .registration-filters select { flex: 0 1 220px; } .registration-validity strong, .registration-validity small { display: block; } .registration-validity small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; } .service-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .service-catalog-card { display: flex; min-height: 112px; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); } .service-catalog-card > i { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; color: var(--pool-dark); background: #EAF9FD; font-size: 22px; } .service-catalog-card span { color: var(--pool-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .service-catalog-card h3 { margin: 3px 0 6px; color: var(--navy); font-size: 16px; } .service-catalog-card p { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; } .family-clinic-row { padding-top: 10px; border-top: 1px dashed var(--border); } button, [role="button"], .menu-item, .action-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (pointer: coarse) { button, [role="button"], .menu-item, .action-btn { min-height: 44px; user-select: none; -webkit-user-select: none; } .action-btn { min-width: 44px; } } @media (max-width: 900px) { .service-catalog-grid { grid-template-columns: 1fr; } .registration-filters > * { width: 100%; flex-basis: 100%; } } /* Revisão 2026-08-10: mais espaço, inscrições familiares consolidadas e filtros claros. */ .pre-registration-toolbar { display: grid; gap: 16px; margin-bottom: 22px; padding: 18px 20px; } .pre-registration-filter-row { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(220px, 280px); gap: 16px; align-items: end; } .pre-registration-search { position: relative; } .pre-registration-search > i { position: absolute; left: 15px; top: 50%; color: var(--muted); font-size: 18px; transform: translateY(-50%); } .pre-registration-search .form-control { min-height: 46px; padding-left: 44px; font-size: 13px; } .pre-registration-select label { display: block; margin-bottom: 6px; color: #53627A; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .pre-registration-select .form-control { min-height: 46px; font-size: 13px; } .pre-status-tabs { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; } .pre-status-tabs button { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; border: 1px solid #D7E2ED; border-radius: 10px; background: #F8FAFC; color: #52627A; font-size: 12px; font-weight: 750; text-align: left; } .pre-status-tabs button strong { display: grid; min-width: 26px; height: 26px; padding: 0 7px; place-items: center; border-radius: 999px; background: #E8EEF5; color: var(--navy); font-size: 11px; } .pre-status-tabs button.is-active { border-color: var(--navy); background: var(--navy); color: #FFFFFF; box-shadow: 0 8px 18px rgba(6, 26, 64, .14); } .pre-status-tabs button.is-active strong { background: rgba(255,255,255,.18); color: #FFFFFF; } .pre-filter-help { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: #68778D; font-size: 11px; font-weight: 600; line-height: 1.5; } .pre-filter-help i { margin-top: 2px; color: var(--pool-dark); font-size: 14px; } #pre-view-table .table-container { overflow-x: auto; } #pre-view-table table { min-width: 980px; } #pre-view-table th { white-space: nowrap; } #sec-inscricoes .page-header { margin-bottom: 22px; } .registration-management-bar { gap: 16px; margin-bottom: 20px; padding: 18px 20px; } .registration-view-tabs, .registration-filters { gap: 10px; } .registration-view-tabs button { min-height: 42px; padding: 9px 14px; } .registration-filters .form-control { min-height: 44px; font-size: 13px; } .registrations-table-container { overflow-x: auto; } .registrations-table { width: 100%; min-width: 1180px; table-layout: auto; } .registrations-table th, .registrations-table td { height: auto; padding: 15px 16px; line-height: 1.4; vertical-align: middle; } .registrations-table th { white-space: nowrap; font-size: 10px; letter-spacing: .045em; } .registrations-table th:nth-child(1) { width: 145px; } .registrations-table th:nth-child(2) { width: 205px; } .registrations-table th:nth-child(3) { width: 215px; } .registrations-table th:nth-child(4) { width: 105px; } .registrations-table th:nth-child(5) { width: 130px; } .registrations-table th:nth-child(6) { width: 105px; } .registrations-table th:nth-child(7) { width: 145px; } .registrations-table th:nth-child(8) { width: 130px; } .registrations-table th:nth-child(9) { width: 150px; } .registration-modality-cell { overflow: visible; text-overflow: clip; white-space: normal; } .registrations-table .action-btn { width: 42px; height: 42px; } .registration-family-row > td { padding: 12px !important; background: #F6FBFD; } .registration-family-card { display: grid; grid-template-columns: 52px minmax(360px, 1fr) minmax(150px, auto) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid #BFE5F1; border-left: 5px solid var(--pool); border-radius: 14px; background: linear-gradient(135deg, #FFFFFF 0%, #F2FBFE 100%); box-shadow: 0 8px 20px rgba(17, 126, 158, .07); } .registration-family-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 14px; background: #DFF5FB; color: #0E82A4; font-size: 25px; } .registration-family-heading { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .registration-family-heading > span { padding: 4px 8px; border-radius: 999px; background: #DDF6FB; color: #087C9D; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .registration-family-heading > strong { color: #53627A; font-family: monospace; font-size: 12px; } .registration-family-main h3 { margin: 5px 0 3px; color: var(--navy); font-size: 17px; } .registration-family-main > p { margin: 0; color: #5F6F85; font-size: 11px; } .registration-family-members { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .registration-family-members > span { display: inline-grid; grid-template-columns: auto auto; column-gap: 5px; align-items: center; padding: 6px 9px; border: 1px solid #D7E9F0; border-radius: 9px; background: #FFFFFF; color: var(--navy); font-size: 10px; font-weight: 750; } .registration-family-members > span i { color: #168AAC; font-size: 14px; } .registration-family-members > span small { grid-column: 2; color: #77859A; font-size: 8px; font-weight: 650; } .registration-family-meta { display: grid; gap: 12px; } .registration-family-meta > div > span { display: block; margin-bottom: 4px; color: #7A8799; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .registration-family-meta small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; } .registration-family-actions { flex-wrap: nowrap; justify-content: flex-end; } /* Fluxo institucional de Escolinhas: progressivo, compacto e sem formulário familiar. */ .school-program-card { grid-column: 1 / -1; overflow: hidden; padding: 0; border-top-color: var(--pool); } .school-program-summary { display: grid; grid-template-columns: 48px minmax(250px, 1fr) auto auto auto 42px; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .school-program-icon, .school-institution-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #EAF8FC; color: #118AAE; font-size: 21px; } .school-program-summary h4 { margin: 2px 0; color: var(--navy); font-size: 19px; } .school-program-summary p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; } .school-program-counts { display: flex; gap: 8px; } .school-program-counts span { display: grid; min-width: 92px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 9px; font-weight: 700; text-align: center; } .school-program-counts strong { color: var(--navy); font-size: 16px; } .school-institution-list { display: grid; gap: 10px; padding: 12px; background: #F7FAFD; } .school-institution-card { display: grid; grid-template-columns: minmax(300px, 1fr) 170px auto; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid #D7E3EF; border-radius: 13px; background: #FFF; } .school-institution-card.is-inactive { opacity: .65; } .school-institution-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .school-institution-main h5 { margin: 0; color: var(--navy); font-size: 15px; } .school-institution-main p { overflow: hidden; margin: 3px 0 0; color: #627087; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .school-institution-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; } .school-institution-tags span { padding: 3px 7px; border-radius: 999px; background: #F0F5FA; color: #53627A; font-size: 9px; font-weight: 700; } .school-institution-finance { display: grid; gap: 2px; } .school-institution-finance span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; } .school-institution-finance strong { color: var(--navy); font-size: 16px; } .school-institution-finance small { color: #627087; font-size: 9px; } .school-institution-actions { display: flex; gap: 6px; } .school-institution-empty { display: grid; min-height: 130px; place-items: center; align-content: center; gap: 5px; color: #617188; text-align: center; } .school-institution-empty i { color: #65C7DF; font-size: 30px; } .school-institution-empty strong { color: var(--navy); } .school-institution-empty span { font-size: 11px; } .school-institution-modal { max-width: 760px; } .school-manager-modal { width: min(1180px, calc(100vw - 36px)); max-width: 1180px; } .school-small-modal { max-width: 620px; } .school-manager-header p { margin: 3px 0 0; font-size: 11px; } .school-manager-toolbar { display: grid; grid-template-columns: minmax(170px, 1fr) 180px auto auto; align-items: center; gap: 9px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #F8FBFD; } .school-manager-toolbar > div { display: grid; } .school-manager-toolbar span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; } .school-manager-toolbar strong { color: var(--navy); font-size: 13px; } .school-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 2px 0 12px; } .school-section-heading h4, .school-active-class-title h4 { margin: 3px 0 0; color: var(--navy); font-size: 17px; } .school-section-heading small, .school-active-class-title small { color: #617188; font-size: 11px; line-height: 1.45; } .school-class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .school-class-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 132px; padding: 16px; border: 1px solid #D8E3EE; border-radius: 14px; background: #FFFFFF; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .school-class-card:hover, .school-class-card:focus-visible { border-color: #58C7E4; box-shadow: 0 12px 28px rgba(6, 26, 64, .09); outline: none; transform: translateY(-1px); } .school-class-card-icon { display: grid; width: 44px; height: 44px; border-radius: 12px; background: #E5F8FC; color: #1189AA; font-size: 21px; place-items: center; } .school-class-card-main { display: grid; gap: 3px; min-width: 0; } .school-class-card-main strong { overflow: hidden; color: var(--navy); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .school-class-card-main small { color: #64748A; font-size: 10px; font-weight: 600; } .school-class-card-metrics { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #E3EAF2; border-radius: 10px; background: #F8FAFC; } .school-class-card-metrics > span, .school-class-stats > span { display: grid; gap: 1px; padding: 7px 9px; border-right: 1px solid #E3EAF2; } .school-class-card-metrics > span:last-child, .school-class-stats > span:last-child { border-right: 0; } .school-class-card-metrics strong, .school-class-stats strong { color: var(--navy); font-size: 13px; } .school-class-card-metrics small, .school-class-stats small { color: #708098; font-size: 8px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; } .school-class-card-metrics .is-paid strong, .school-class-stats .is-paid strong { color: #078052; } .school-class-card-metrics .is-pending strong, .school-class-stats .is-pending strong { color: #B77800; } .school-class-card-metrics .is-warning strong, .school-class-stats .is-warning strong { color: #B54755; } .school-class-card-action { display: inline-flex; align-items: center; gap: 5px; justify-self: end; color: #087F9F; font-size: 10px; font-weight: 800; } .school-class-empty { display: grid; grid-column: 1 / -1; min-height: 210px; padding: 28px; border: 1px dashed #C9D9E8; border-radius: 14px; background: #FAFCFE; color: #64748A; text-align: center; place-items: center; align-content: center; gap: 8px; } .school-class-empty > i { color: #58C7E4; font-size: 34px; } .school-class-empty strong { color: var(--navy); font-size: 15px; } .school-class-empty span { font-size: 11px; } .school-class-empty .btn { margin-top: 6px; } .school-class-workspace { outline: none; } .school-class-workspace-header { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(310px, auto) auto; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid #D8E4EE; border-radius: 13px; background: linear-gradient(135deg, #FFFFFF, #F6FBFD); } .school-class-back { min-height: 38px; } .school-active-class-title { display: grid; min-width: 0; } .school-class-stats { display: grid; grid-template-columns: repeat(4, minmax(68px, 1fr)); overflow: hidden; border: 1px solid #E0E8F0; border-radius: 10px; background: #FFFFFF; } .school-class-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .school-class-actions .btn { min-height: 38px; } .school-quick-enrollment { margin-bottom: 12px; padding: 12px; border: 1px solid #CFE8F0; border-radius: 12px; background: #F4FBFD; } .school-quick-enrollment header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .school-quick-enrollment h4 { margin: 2px 0 0; color: var(--navy); font-size: 14px; } .school-quick-enrollment header small { color: #617188; font-size: 10px; } .school-quick-fields { display: grid; grid-template-columns: 1.5fr 130px 110px 140px 1fr auto; align-items: end; gap: 8px; } .school-quick-fields .form-group { margin: 0; min-width: 0; } .school-quick-fields .form-label { margin-bottom: 3px; font-size: 9px; } .school-quick-fields .form-control { min-height: 38px; height: 38px; padding: 8px 10px; font-size: 11px; } .school-beneficiary-table { max-height: 390px; border: 1px solid var(--border); border-radius: 12px; } .school-beneficiary-table table { min-width: 680px; } .school-beneficiary-table th { padding: 10px 12px; font-size: 9px; } .school-beneficiary-table td { padding: 10px 12px; font-size: 11px; } .school-billing-status { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; } .school-billing-status.is-paid { background: #E9F9F1; color: #087A51; } .school-billing-status.is-partial { background: #FFF5D9; color: #986400; } .school-billing-status.is-pending { background: #EEF3F8; color: #5F6F84; } .school-billing-status.is-overdue { background: #FFEDEF; color: #B33A4A; } .school-billing-status.is-exempt { background: #EEEAFE; color: #6451B8; } .school-health-pending, .school-health-ready { font-size: 10px; font-weight: 700; } .school-health-pending { color: #A86B08; } .school-health-ready { color: #0B815B; } .school-manager-note, .school-payment-help { margin: 10px 0 0; color: #617188; font-size: 10px; } .school-manager-note i, .school-payment-help i { margin-right: 4px; color: #1598BE; } .registration-institution-card { border-color: #C9E7EF; background: linear-gradient(135deg, #FFFFFF, #F2FBFD); } .registration-institution-card .registration-family-icon { background: #DFF5FA; color: #0D85A8; } @media (max-width: 1100px) { .school-program-summary { grid-template-columns: 48px minmax(220px, 1fr) auto auto; } .school-program-counts { grid-column: 2 / 4; } .school-institution-card { grid-template-columns: minmax(240px, 1fr) auto; } .school-institution-finance { grid-column: 1; margin-left: 56px; } .school-institution-actions { grid-column: 2; grid-row: 1 / span 2; } .school-class-workspace-header { grid-template-columns: auto minmax(180px, 1fr) auto; } .school-class-stats { grid-column: 2 / 4; } .school-class-actions { grid-column: 1 / -1; } .school-quick-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .school-quick-fields .btn { min-height: 38px; } } @media (max-width: 720px) { .school-program-summary, .school-institution-card, .school-manager-toolbar { grid-template-columns: 1fr; align-items: stretch; } .school-program-summary { padding: 14px; } .school-program-counts { grid-column: auto; } .school-program-summary > .promotion-status { position: absolute; right: 18px; } .school-institution-finance, .school-institution-actions { grid-column: auto; grid-row: auto; margin-left: 0; } .school-institution-actions .btn { flex: 1; } .school-section-heading { align-items: flex-start; flex-direction: column; } .school-class-grid { grid-template-columns: 1fr; } .school-class-card { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 13px; } .school-class-card-action { font-size: 0; } .school-class-card-action i { font-size: 17px; } .school-class-workspace-header { grid-template-columns: 1fr; align-items: stretch; } .school-class-stats, .school-class-actions { grid-column: auto; } .school-class-actions { display: grid; grid-template-columns: 1fr; } .school-class-back { justify-self: start; } .school-quick-enrollment header { align-items: flex-start; flex-direction: column; } .school-quick-fields { grid-template-columns: 1fr 1fr; } .school-quick-fields .school-quick-notes { grid-column: 1 / -1; } .school-quick-fields .btn { grid-column: 1 / -1; } } .treasury-grid-wrap { max-height: none; border-radius: 14px; } .treasury-grid th, .treasury-grid td { min-width: 126px; padding: 11px; } .treasury-grid th { height: 48px; font-size: 10px; } .treasury-grid .treasury-select-cell { min-width: 48px; width: 48px; } .treasury-grid .treasury-member-cell { left: 48px; min-width: 290px; max-width: 290px; padding: 14px 16px; } .treasury-member-cell strong { font-size: 14px; line-height: 1.35; } .treasury-member-cell span, .treasury-member-cell small { font-size: 10px; line-height: 1.4; } .treasury-member-actions { gap: 7px; margin-top: 10px; } .treasury-member-actions button { width: 34px; height: 34px; font-size: 15px; } .treasury-month-cell { min-height: 76px; gap: 4px; padding: 8px; } .treasury-month-cell > span { font-size: 9px; } .treasury-month-cell > strong { font-size: 12px; } .treasury-month-cell > small { font-size: 9px; } .treasury-family-row .treasury-sticky { background: #F0FAFD; } .treasury-family-row td { background: #F8FCFE; } .treasury-family-label { color: #087F9F !important; font-weight: 800; } .treasury-family-label i { margin-right: 4px; font-size: 13px; } #print-family-section { grid-column: 1 / -1; } .print-family-note { margin: 0 0 10px; color: #56657A; font-size: 9px; line-height: 1.45; } .print-family-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .print-family-member { padding: 8px; border: 1px solid #D7E0EA; border-radius: 5px; background: #FAFCFE; } .print-family-member strong, .print-family-member span, .print-family-member small { display: block; } .print-family-member strong { color: #061A40; font-size: 9px; } .print-family-member span { margin-top: 2px; color: #3E5067; font-size: 8px; } .print-family-member small { margin-top: 2px; color: #6D7B8F; font-size: 7px; } @media (max-width: 1100px) { .pre-status-tabs { grid-template-columns: repeat(3, minmax(140px, 1fr)); } .registration-family-card { grid-template-columns: 48px minmax(260px, 1fr) auto; } .registration-family-meta { grid-column: 2; grid-template-columns: repeat(2, minmax(120px, 1fr)); } .registration-family-actions { grid-column: 3; grid-row: 1 / span 2; } } @media (max-width: 760px) { .pre-registration-toolbar { padding: 15px; } .pre-registration-filter-row { grid-template-columns: 1fr; } .pre-status-tabs { display: flex; overflow-x: auto; padding-bottom: 4px; } .pre-status-tabs button { min-width: 155px; } .registrations-table { min-width: 0; } .registration-family-row { display: block; } .registration-family-row > td { display: block !important; padding: 0 !important; } .registration-family-row > td::before { display: none; } .registration-family-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 15px; } .registration-family-icon { width: 44px; height: 44px; font-size: 21px; } .registration-family-main { min-width: 0; } .registration-family-main h3 { font-size: 15px; } .registration-family-meta { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .registration-family-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; } .treasury-grid .treasury-member-cell { min-width: 220px; max-width: 220px; } .print-family-members { grid-template-columns: 1fr; } }