:root{ --brand-primary:#0d6efd; --brand-accent:#6f42c1; --brand-success:#198754; --brand-warning:#ffc107; --brand-danger:#dc3545; --surface:#ffffff; --surface-alt:#f8f9fa; --text:#212529; --text-inverse:#f8f9fa; --muted:#6c757d; --border-color:#dee2e6; --focus-ring:0 0 0 .25rem rgba(13,110,253,.25); --shadow:0 .25rem 1rem rgba(0,0,0,.12); } /* Dark theme variables (aplicado quando [data-theme="dark"] no ) */ [data-theme="dark"]{ --surface:#1e1f22; --surface-alt:#141517; --text:#e9ecef; --text-inverse:#212529; --muted:#adb5bd; --border-color:#343a40; --focus-ring:0 0 0 .25rem rgba(111,66,193,.4); --shadow:0 .25rem 1rem rgba(0,0,0,.5); } /* High contrast accessibility mode (combinar com dark ou light) */ body.accessibility-high-contrast{ --brand-primary:#0b5ed7; --brand-accent:#8b5cf6; --surface:#ffffff; --surface-alt:#ffffff; --text:#000000; --muted:#333333; --border-color:#000000; --focus-ring:0 0 0 .25rem rgba(0,0,0,.75); } /* fim high contrast */ body { background: var(--surface-alt); color: var(--text); } /* Bloqueia scroll de fundo quando painel de acessibilidade estiver aberto */ html.accessibility-panel-open, body.accessibility-panel-open{ overflow: hidden; height:100%; } body.accessibility-high-contrast{letter-spacing:.3px;} .accessibility-high-contrast a{text-decoration:underline;} /* Fonte ampliada para acessibilidade: aumenta base + títulos */ body.accessibility-font-large{font-size:112%; line-height:1.55;} body.accessibility-font-large h1{font-size:2.2rem;} body.accessibility-font-large h2{font-size:1.9rem;} body.accessibility-font-large h3{font-size:1.6rem;} body.accessibility-font-large h4{font-size:1.35rem;} body.accessibility-font-large h5{font-size:1.15rem;} body.accessibility-font-large h6{font-size:1rem;} body.accessibility-font-large .btn, body.accessibility-font-large .form-control{font-size:1rem;} /* Theme transitions (desativadas se prefers-reduced-motion) */ html[data-theme]{transition:background-color .3s ease,color .3s ease;} @media (prefers-reduced-motion: reduce){html[data-theme]{transition:none;}} .navbar { margin-bottom:2rem; } /* Navbar adapta tema */ .navbar.app-gradient{background:linear-gradient(135deg,var(--brand-primary) 0%, var(--brand-accent) 100%);box-shadow:var(--shadow);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);} .navbar, .dropdown-menu{background-color:var(--surface);} .navbar .nav-link, .navbar-brand{color:var(--text-inverse);} .navbar .nav-link:hover{color:#fff;} .navbar .btn-light{background:var(--surface);color:var(--text);border-color:var(--border-color);} [data-theme="dark"] .navbar .btn-light{background:#2b2d31;color:var(--text);border-color:#3a3d41;} /* Global responsive adjustments */ img,svg,video,canvas{max-width:100%;height:auto;} table{width:100%;} .table-responsive-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} /* Utility responsive spacing */ /* (removido bloco redundante de logout mobile de 42px para evitar conflitos) */ /* Layout helpers */ .app-gradient { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%); } .app-hero { color: #fff; border-radius: .75rem; padding: 2rem; box-shadow: var(--shadow); } /* Welcome hero tweaks */ .welcome-hero{ padding: 2.25rem 1.25rem; } @media (min-width: 992px){ .welcome-hero{ padding: 2.75rem 2rem; } } .welcome-hero .h3{ font-weight:700; letter-spacing:.2px; } .welcome-section h2{ font-weight:700; } .welcome-section .btn.btn-lg{ padding:.85rem 1.1rem; } .quick-card { transition: transform .15s ease; } .quick-card:hover { transform: translateY(-2px); } .quick-card--action .fw-bold .bi{ font-size:1.15rem; opacity:.95 } .quick-card--feature .fw-bold .bi{ font-size:1.05rem; opacity:.95 } .quick-card .text-muted{ font-size:.95rem; } @media (max-width: 575.98px){ .welcome-section .d-flex.gap-2{ flex-direction:column; } .welcome-section .btn.btn-lg{ width:100%; } } /* Brand */ .brand-mark { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); color: #fff; } .brand-title { font-weight: 700; letter-spacing: .2px; } .navbar-brand{display:flex;align-items:center;gap:.5rem;padding:.25rem .4rem;border-radius:.5rem;max-width:100%;} .navbar-brand .brand-inner{display:flex;align-items:center;gap:.5rem;min-width:0;} .navbar-brand .brand-logo{height:44px;} @media (max-width:575.98px){ .navbar-brand .brand-logo{height:40px;} .navbar-brand .brand-title{font-size:.85rem;letter-spacing:.15px;max-width:140px;} } @media (max-width:420px){ .navbar-brand .brand-title{display:none !important;} } @media (min-width:992px){ .navbar-brand{padding:.35rem .55rem;} .navbar-brand .brand-logo{height:50px;} } /* Estado ativo / foco explícito da marca */ .navbar-brand:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;} .navbar-brand.active{background:rgba(25,135,84,.18);} /* Auth */ .auth-wrapper { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .auth-card { border: 0; box-shadow: 0 .5rem 2rem rgba(0,0,0,.1); } .form-hint { font-size: .9rem; color: #6c757d; } /* Login / Auth */ .login-left { min-height: 100%; display:flex; flex-direction: column; justify-content: center; } /* Fix for input overflow in login form */ #loginForm { width: 100%; max-width: 100%; } #loginForm .input-group { width: 100%; max-width: 100%; box-sizing: border-box; } #stepIdentifier, #stepPassword { width: 100%; max-width: 100%; } /* Ensure inputs respect container width */ #loginForm .form-control { max-width: 100%; box-sizing: border-box; } /* Fix for input group overflow: allow input to shrink */ #loginForm .input-group .form-control { width: 1%; min-width: 0; flex: 1 1 auto; } @media (max-width: 767.98px){ .auth-wrapper{ padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .auth-card{ box-shadow: 0 .25rem 1rem rgba(0,0,0,.08); } /* Padrão mobile mais legível para login */ .auth-wrapper .auth-mobile-header{ background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%); color:#fff; padding: 1rem 1.25rem; border-radius:.5rem; } /* Fix logo size in mobile header */ .auth-wrapper .auth-mobile-header .brand-logo { height: 40px; width: auto; max-width: 100%; object-fit: contain; } .auth-wrapper .auth-mobile-title{ font-size: 1.6rem; font-weight: 700; margin: .25rem 0 0 0; } .auth-wrapper .auth-mobile-sub{ opacity: .9; } .auth-wrapper .brand-mark{ width:40px; height:40px; } .auth-wrapper .card.auth-card{ border:0; } .auth-wrapper label.form-label{ font-size: 1rem; } .auth-wrapper .form-control{ font-size: 1.05rem; padding: .75rem .9rem; } .auth-wrapper .input-group .btn{ padding: .75rem .9rem; } .auth-wrapper .btn{ font-size: 1.05rem; padding: .75rem 1rem; } } /* Login mobile enhanced UI */ @media (max-width: 575.98px){ .auth-wrapper{ padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .login-form-col{ padding: 0 !important; } .login-form-col .auth-card{ border:0; border-radius:.9rem; box-shadow:0 .75rem 2rem rgba(0,0,0,.12); } [data-theme="dark"] .login-form-col .auth-card{ background:var(--surface); color:var(--text); border:1px solid var(--border-color); } /* Increased padding for mobile card area (+15%) */ .login-form-col .auth-card .card-body{ padding: 1.25rem 1.25rem 1.5rem !important; } .login-form-col h2.h5{ font-size:1.25rem; margin:.5rem 0 1.5rem; text-align:center; font-weight:700; color:var(--brand-primary); } .login-form-col .form-label{ font-size:1rem; } .login-form-col .form-control{ height:38px !important; border-radius:.5rem; font-size:.95rem; } .login-form-col .input-group .btn{ height:38px !important; border-radius:.5rem; } .login-form-col .btn{ padding:.5rem .75rem !important; border-radius:.5rem; font-weight:600; font-size:.9rem; } #stepIdentifier .d-grid, #stepPassword .d-grid{ gap:.5rem; } .login-form-col .form-text{ font-size:.85rem; text-align:center; } /* Botão WhatsApp: reforçar legibilidade */ #stepIdentifier .btn.btn-success{ box-shadow: 0 3px 8px rgba(25,135,84,0.2); padding:.5rem .6rem !important; min-height:38px !important; font-size:.9rem; border-radius:.5rem; background: #198754; color: #fff; border:none; display:flex; align-items:center; justify-content:center; } #stepIdentifier .btn.btn-success:hover{ background: #157347; transform:translateY(-1px); } [data-theme="dark"] #stepIdentifier .btn.btn-success{ background: #198754; color:#fff; } /* Login: grid responsivo sem vazamento */ #loginForm{ max-width:100%; } #loginForm input, #loginForm .btn, #loginForm .input-group, #loginForm .form-text, #loginForm .alert{ max-width:100%; box-sizing:border-box; } /* Step Identifier Mobile Refinements */ #stepIdentifier{ display:flex; flex-direction:column; } #stepIdentifier label{ margin-left: .15rem; margin-bottom: .35rem; font-weight: 600; } #stepIdentifier .form-text{ overflow-wrap:anywhere; margin: .25rem .15rem .5rem; font-size: .85rem; opacity: .85; line-height: 1.4; } #stepIdentifier .d-grid{ margin-top:.5rem; } #stepIdentifier .mt-3 { margin-top: 1rem !important; } #stepPassword{ display:grid; grid-template-columns:1fr; gap:.5rem; } #stepPassword .input-group{ flex-wrap:wrap; } #stepPassword .input-group>.form-control{ flex:1 0 100%; } #stepPassword .input-group>.btn{ width:100%; margin-top:.5rem; } #stepPassword .d-grid{ grid-auto-rows:minmax(44px, auto); } #stepPassword .btn-link{ text-align:center; padding: .75rem; display: block; text-decoration: none; font-size: .95rem; } } /* Admin layout */ .admin-header{ background: var(--surface); border:1px solid #e9ecef; border-radius:.5rem; padding: .75rem 1rem; box-shadow: var(--shadow); } [data-theme="dark"] .admin-header{border-color:var(--border-color);} .admin-header .page-title{ margin:0; font-weight:600; } .admin-toolbar .btn{ border-radius:.4rem; } .admin-toolbar .btn-outline-secondary{ color:#495057; border-color:#ced4da; } .admin-toolbar .btn-outline-primary{ color:var(--brand-primary); border-color: var(--brand-primary); } .admin-toolbar .btn-outline-dark{ color:#343a40; border-color:#343a40; } .admin-toolbar .btn-danger{ box-shadow: none; } .admin-toolbar .btn i { margin-right:.35rem; } .admin-toolbar .btn { font-weight: 500; letter-spacing: .2px; } .admin-toolbar { flex-wrap: wrap; gap: .25rem; } /* Desktop (>=768px): botões em linha horizontal */ .admin-buttons{display:flex;flex-direction:row;gap:.5rem;} @media (min-width: 768px){ .admin-buttons .btn{width:auto;} } /* Admin toolbar responsivo: reorganiza botões em grid no mobile */ @media (max-width: 575.98px){ .admin-toolbar{flex-direction:column;align-items:stretch;} .admin-toolbar .admin-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%;} .admin-toolbar .admin-buttons .btn{width:100%;padding:.6rem .55rem;min-height:48px;font-size:.78rem;letter-spacing:.15px;justify-content:center;} .admin-toolbar .admin-buttons .btn i{margin-right:.25rem;font-size:1.05rem;} .admin-toolbar .admin-notifications{width:100%;margin-top:.5rem;} .admin-toolbar .admin-notifications .dropdown-toggle{width:100%;text-align:left;display:flex;align-items:center;justify-content:flex-start;gap:.4rem;} .admin-toolbar .admin-notifications .dropdown-toggle .bi{font-size:1.05rem;} } @media (min-width:576px) and (max-width: 767.98px){ .admin-toolbar{flex-direction:column;} .admin-toolbar .admin-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%;} .admin-toolbar .admin-buttons .btn{width:100%;padding:.55rem .5rem;min-height:46px;font-size:.75rem;} .admin-toolbar .admin-notifications{width:100%;margin-top:.5rem;} } @media (min-width:576px) and (max-width: 767.98px){ .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } /* Admin buttons enhancements */ .admin-buttons .btn{ display:flex;align-items:center;gap:.35rem; transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease; } .admin-buttons .btn, .action-grid .btn{ white-space: normal; word-break: break-word; } .admin-buttons .btn:hover{ box-shadow:0 .25rem .75rem rgba(0,0,0,.08); transform:translateY(-1px); } .admin-buttons .btn:active{ transform:translateY(0); box-shadow:none; } /* Icon alignment utilities */ /* Default: ícone à esquerda (markup atual). Para ícone à direita, adicione class .icon-right ao . */ .admin-buttons .btn .icon-right{margin-left:auto;} /* Alternativa: inverter ordem sem alterar margem utility (me-1). */ .admin-buttons .btn.icon-right-start{flex-direction:row-reverse;} /* Botão somente ícone centralizado */ .admin-buttons .btn.icon-only{justify-content:center;padding-left:.75rem;padding-right:.75rem;} /* Accessibility: respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce){ .admin-buttons .btn{transition:none !important;} .admin-buttons .btn:hover{transform:none !important;box-shadow:0 .125rem .5rem rgba(0,0,0,.05);} /* mantém leve indicação sem animação */ .admin-buttons .btn:active{transform:none !important;} /* Evitar deslocamentos animados globais */ html:focus-within{scroll-behavior:auto;} } /* Stack admin header blocks on very small screens */ @media (max-width: 575.98px){ .admin-header{display:flex;flex-direction:column;gap:.75rem;} .admin-header .d-flex.gap-2{flex-direction:column;} .stat-card{min-height:auto;} .stat-value{font-size:1.4rem;} .stat-sub{font-size:.75rem;} /* Horizontal slider for stats */ .stats-grid{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:.75rem;padding-bottom:.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} .stats-grid::-webkit-scrollbar{height:6px;} .stats-grid::-webkit-scrollbar-thumb{background:#adb5bd;border-radius:3px;} .stats-grid > div{flex:0 0 75%;scroll-snap-align:start;} .stats-grid .stat-card{min-height:100%;} } /* Tables & cards */ .card.shadow-sm, .card.shadow { box-shadow: var(--shadow) !important; } [data-theme="dark"] .card{background:var(--surface);color:var(--text);border:1px solid var(--border-color);} .table thead th{ white-space: nowrap; } .table-hover tbody tr:hover { background: #f2f5ff; } [data-theme="dark"] .table-hover tbody tr:hover { background:#2b2d31; } [data-theme="dark"] table{color:var(--text);} /* Responsive table wrapping for long lists - Always responsive */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: .5rem; background: var(--surface); } .table-wrap table { margin-bottom: 0; } .table-wrap thead th { white-space: nowrap; } /* Admin Header Responsiveness */ .admin-header { flex-wrap: wrap; gap: 1rem; } @media (max-width: 767.98px) { .admin-header { flex-direction: column; align-items: flex-start !important; } .admin-header .page-title { margin-bottom: 0.5rem; } .admin-header .action-grid, .admin-header .admin-toolbar { width: 100%; justify-content: flex-start; } .admin-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; } .admin-buttons .btn { flex: 1 0 auto; /* Botões crescem para facilitar toque */ } } /* Forms: make input groups full width on narrow viewports */ @media (max-width: 575.98px){ .input-group{flex-wrap:wrap;} .input-group>.form-control{flex:1 0 100%;} .input-group>.btn{width:100%;margin-top:.5rem;} } /* Login: manter botão de mostrar senha inline no mobile (não ocupar linha inteira) */ @media (max-width:575.98px){ .login-form-col #stepPassword .input-group{flex-wrap:nowrap;} .login-form-col #stepPassword .input-group>.form-control{flex:1 1 auto;} .login-form-col #stepPassword .input-group>#togglePass{width:auto;margin-top:0;} #togglePass{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .75rem;} #togglePass i{font-size:1.05rem;} } /* Buttons group stacking */ @media (max-width: 575.98px){ .btn-group.btn-group-sm>.btn{flex:1 0 100%;} .btn-group.btn-group-sm{display:flex;flex-direction:column;width:100%;} } /* Improve tap targets - Adjusted for compact login */ @media (max-width: 575.98px){ .btn, .form-control{min-height:38px;} } /* Hide non-essential columns example (optional: add class .col-hide-sm) */ @media (max-width: 575.98px){ .col-hide-sm{display:none !important;} } /* Dropdown */ .dropdown-menu{ box-shadow: var(--shadow); border:1px solid #e9ecef; } [data-theme="dark"] .dropdown-menu{border-color:var(--border-color);} /* já existia abaixo, preservado */ /* Garantir dropdown acima de overlays como VLibras (z-index 1070) */ .dropdown-menu{ z-index: 1082; } [data-theme="dark"] .dropdown-menu{border-color:var(--border-color);} /* Garantir que o ícone hambúrguer fique clicável acima do painel de acessibilidade */ .navbar .navbar-toggler{ position: relative; z-index: 1081; } .navbar .dropdown-menu{ z-index: 1082; } /* Admin notifications dropdown responsiveness */ .admin-notifications .dropdown-menu{ max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .admin-notifications .dropdown-item{ padding: .55rem .75rem; } .admin-notifications .dropdown-item > span:first-child{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; white-space:normal; } @media (max-width: 575.98px){ /* Override inline min-width on mobile */ .admin-notifications .dropdown-menu{ width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; min-width: 0 !important; max-height: calc(100vh - 16px); right: 10px !important; left: auto !important; } .admin-notifications .dropdown-header{ font-size:.9rem; } } /* Evita rolagem da página quando dropdown admin estiver aberto */ body.admin-dd-open{ overflow: hidden; height: 100%; } /* Badges helpers */ .badge.bg-secondary{ background-color:#5a5f66 !important; } [data-theme="dark"] .badge.bg-secondary{ background-color:#495057 !important; } /* Utility */ .text-muted{ color: var(--muted) !important; } /* Stats grid adaptado usando CSS Grid em telas >=992px */ @media (min-width: 992px){ .stats-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;} .stats-grid > .col-12, .stats-grid > .col-sm-6, .stats-grid > .col-lg-3{width:auto !important;flex:none !important;padding:0 !important;} } /* Botões de toggle tema/acessibilidade */ .theme-toggle-btn,.accessibility-toggle-btn{cursor:pointer;} .theme-toggle-btn.active,.accessibility-toggle-btn.active{outline:2px solid var(--brand-primary);} .libras-toggle-btn{cursor:pointer;} .libras-toggle-btn.active{outline:2px solid var(--brand-primary);} [class*="libras-toggle-btn"], .libras-indicator{display:inline-flex;align-items:center;justify-content:center;} body.accessibility-font-large .btn, body.accessibility-font-large .form-control{font-size:1rem;} body.font-size-2{font-size:118%;} body.font-size-2 .btn, body.font-size-2 .form-control{font-size:1.05rem;} body.font-size-3{font-size:125%;} body.font-size-3 .btn, body.font-size-3 .form-control{font-size:1.1rem;} [vw]{z-index:1070;} /* widget acima de conteúdo, abaixo de toasts (1080) */ [vw].libras-hidden{display:none !important;} /* Reposicionar botão VLibras canto inferior direito */ [vw-access-button]{position:fixed !important;right:1rem !important;bottom:1rem !important;left:auto !important;} [vw-plugin-wrapper]{right:4.25rem !important;bottom:1rem !important;} /* Reception page: evitar sobreposição do botão VLibras com ações (mobile) */ @media (max-width: 575.98px){ .page-reception .container{ padding-bottom: 3.25rem; padding-bottom: calc(3.25rem + env(safe-area-inset-bottom)); } /* Alguns embeds usam [vw-access-button]; outros usam .vp-access-button */ .page-reception [vw-plugin-wrapper]{ right:.5rem !important; bottom: 1rem !important; } .page-reception [vw-access-button]{ right:.5rem !important; bottom: 1rem !important; z-index:1060 !important; } .page-reception .vp-access-button{ position:fixed !important; right:.5rem !important; bottom: 1rem !important; width:44px !important; height:44px !important; z-index:1060 !important; } } /* Acessibilidade avançada feature classes */ body.access-contrast-invert{filter:invert(1) hue-rotate(180deg);} body.access-contrast-dark{background:#000 !important;color:#fff !important;} body.access-contrast-dark a{color:#ffec3d !important;} body.access-contrast-light{background:#fff !important;color:#000 !important;} body.access-highlight-links a:not(.btn){background:#fff9c4;outline:2px solid #ffec3d;box-shadow:0 0 0 2px #ffec3d inset;} body.access-spacing{letter-spacing:.06em;word-spacing:.15em;} body.access-stop-animations *{animation:none !important;transition:none !important;} body.access-hide-images img,body.access-hide-images svg,body.access-hide-images picture{visibility:hidden !important;} @font-face{font-family:'OpenDyslexic';src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/otf/OpenDyslexic-Regular.otf') format('opentype');font-display:swap;} body.access-dyslexia,body.access-dyslexia *{font-family:'OpenDyslexic',system-ui,sans-serif !important;} body.access-lineHeight{line-height:1.75 !important;} body.access-align-center *{text-align:center !important;} body.access-align-justify *{text-align:justify !important;} body.access-saturation-low{filter:saturate(.4);} body.access-saturation-high{filter:saturate(2);} /* Painel acessibilidade */ .accessibility-panel .access-feature.active{background:var(--brand-primary);color:#fff;} .accessibility-panel .access-reset{font-weight:600;} .accessibility-panel .access-feature{ display:flex; align-items:flex-start; gap:.5rem; justify-content:flex-start; } .accessibility-panel .access-feature i{ font-size:1rem; opacity:.9; line-height:1; margin-top:.15rem; } .accessibility-panel{ width: clamp(260px, 88vw, 520px); max-height: calc(100vh - 80px); overflow: auto; overflow-x: hidden; overscroll-behavior: contain; box-sizing: border-box; padding: .25rem !important; } .accessibility-panel .feature-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; } @media (min-width: 576px){ .accessibility-panel .feature-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width: 768px){ /* Desktop: lista vertical sem aumentar dimensões */ .accessibility-panel{ padding:.15rem !important; } .accessibility-panel .feature-grid{ display:flex; flex-direction:column; gap:.1rem; padding-left:.5rem; } /* Redução ~50% no desktop (mantida) */ .accessibility-panel .access-feature{ padding:.15rem .2rem; min-height:18px; } .accessibility-panel .access-feature i{ font-size:.8rem; } .accessibility-panel .access-feature .btn-label{ font-size:.8rem; line-height:1.1; } .accessibility-panel .fw-semibold.small{ font-size:.7rem; margin-bottom:.15rem !important; } /* Ultra compacto (aplicado dinamicamente via JS se ainda não couber) */ .accessibility-panel.accessibility-panel--ultra{ padding:.1rem !important; } .accessibility-panel.accessibility-panel--ultra .feature-grid{ gap:.08rem; padding-left:.4rem; } .accessibility-panel.accessibility-panel--ultra .access-feature{ padding:.12rem .16rem; min-height:16px; } .accessibility-panel.accessibility-panel--ultra .access-feature i{ font-size:.75rem; } .accessibility-panel.accessibility-panel--ultra .access-feature .btn-label{ font-size:.75rem; line-height:1.05; } .accessibility-panel.accessibility-panel--ultra .fw-semibold.small{ display:none !important; } } /* Removido fallback 2-col no desktop: manter fila única */ /* Botões quadrados e mais visíveis dentro do painel */ .accessibility-panel .access-feature{ border-radius:.25rem; border:1px solid var(--border-color); background: var(--surface-alt); color: var(--text); padding:.5rem .6rem; min-height:44px; justify-content:flex-start; min-width:0; width:100%; box-sizing:border-box; } .accessibility-panel .access-feature:hover{ border-color: var(--brand-primary); background: rgba(13,110,253,.06); } .accessibility-panel .access-feature.active{ background: var(--brand-primary); color:#fff; border-color: var(--brand-primary); } .accessibility-panel .access-feature:focus-visible{ box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); } .accessibility-panel .access-feature:active{ transform: scale(.98); } .accessibility-panel .access-feature i{ flex:0 0 auto; } .accessibility-panel .access-feature .btn-label{ display:block; min-width:0; white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; } /* Mobile overrides: garantir botões não circulares e texto legível */ @media (max-width: 575.98px){ .accessibility-panel{ max-width:94vw; width:94vw; } /* Mostrar todos os botões sem rolagem: grid 2 colunas e dimensões compactas */ .accessibility-panel .feature-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; } .accessibility-panel .access-feature{ height:auto !important; border-radius:.25rem !important; /* igual desktop */ padding:.4rem .5rem !important; /* compacto no mobile */ min-height:36px !important; /* compacto no mobile */ /* dimensões mínimas solicitadas */ min-width:84px !important; min-height:21px !important; width:auto !important; } .accessibility-panel .access-feature.btn-sm{ padding:.5rem .6rem !important; } .accessibility-panel .access-feature .btn-label{ white-space: normal !important; word-break: break-word !important; font-size:.9rem; line-height:1.2; } .accessibility-panel .access-feature i{ font-size:.95rem; margin-top:.15rem; } /* Reset: aplicar mesmo design e ocupar linha inteira */ .accessibility-panel .access-reset{ display:flex; align-items:flex-start; gap:.5rem; justify-content:flex-start; border-radius:.25rem !important; padding:.4rem .5rem !important; min-height:36px !important; width:100% !important; grid-column:1 / -1; } .accessibility-panel .access-reset i{ font-size:.95rem; margin-top:.15rem; } .accessibility-panel .access-reset .btn-label{ white-space: normal !important; word-break: break-word !important; font-size:.9rem; line-height:1.2; } .accessibility-panel .fw-semibold.small{ font-size:.75rem; margin-bottom:.25rem !important; } .accessibility-panel{ max-height: calc(100vh - 16px); } } /* Barra utilitária responsiva */ .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;} .utility-bar{max-width:100%;} .utility-bar .btn{display:inline-flex;align-items:center;white-space:nowrap;gap:.35rem;} .utility-bar .btn-icon{justify-content:center;padding:.25rem .5rem;} /* Ícones apenas: ocultar qualquer label textual nas ações utilitárias */ .utility-bar .label-text{display:none !important;} @media (min-width: 992px){ .utility-bar .btn{gap:0;} } @media (max-width:575.98px){ #toastArea.mobile-toast-area{left:0 !important;right:0 !important;width:100% !important;max-width:100% !important;padding:0.5rem 0.5rem 0 0.5rem !important;} #topNav .navbar-nav.ms-lg-auto a.logout-btn{min-height:30px !important;padding:.3rem .4rem !important;font-size:.64rem;} /* Redução visual e mantendo responsividade alinhada aos demais itens */ #topNav .navbar-nav.ms-lg-auto a.logout-btn.logout-compact{min-height:20px !important;padding:.2rem .25rem !important;font-size:.6rem;line-height:1;} #topNav .navbar-nav.ms-lg-auto a.logout-btn .bi{font-size:.9rem;} #topNav .navbar-nav.ms-lg-auto a.logout-btn.logout-compact::before{content:"";position:absolute;inset:0;transform:scale(1.9);/* amplia hit area invisível */} #toastArea.mobile-toast-area .toast .toast-body{font-size:.95rem;line-height:1.35;word-break:break-word;overflow-wrap:anywhere;} } /* General toast and alert styles */ .toast .toast-body{word-break:break-word;overflow-wrap:anywhere;} .alert[role="alert"]{word-break:break-word;overflow-wrap:anywhere;} @media (min-width:992px){ .utility-bar{flex-wrap:wrap;} .utility-bar .btn{flex:0 0 auto;} } /* Logout desktop proporcional (após remoção de .logout-compact) */ @media (min-width:992px){ .navbar .logout-btn{min-height:44px;padding:.55rem .9rem;font-size:.8rem;border-radius:2rem;display:inline-flex;align-items:center;gap:.4rem;} .navbar .logout-btn .bi{font-size:1rem;} } /* Nav links refinement */ .navbar .nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .5rem;} @media (min-width:992px){ .navbar .nav-link{padding:.25rem .55rem;} /* Forçar cabeçalho em uma única linha no desktop */ .navbar .container, .navbar .container-fluid{flex-wrap:nowrap;} .navbar .navbar-collapse{flex-grow:1;} .navbar .navbar-nav{flex-wrap:nowrap;} .utility-bar{flex-wrap:nowrap;gap:.25rem;} /* Mantém texto da marca para legibilidade em telas largas */ .navbar .brand-title{display:inline-block !important;} } .navbar .nav-link .bi{font-size:1rem;opacity:.9;} .navbar .nav-link:hover{background-color:rgba(255,255,255,.08);border-radius:.375rem;} /* Destaque para menu ativo */ /* Verde claro para itens ativos */ .navbar .nav-link.active{background-color:rgba(25,135,84,.18);border-radius:.375rem;color:#fff;} .navbar .navbar-brand.active{background-color:rgba(25,135,84,.18);border-radius:.5rem;color:#fff;padding:.15rem .4rem;} [data-theme="dark"] .navbar .nav-link.active,[data-theme="dark"] .navbar .navbar-brand.active{background-color:rgba(25,135,84,.35);} @media (max-width:575.98px){ .navbar .nav-link{padding:.5rem .5rem;border-radius:.5rem;} .navbar .nav-link .bi{font-size:1.2rem;} } /* Mobile: melhorar UI dos botões do menu (grid + cartões) */ @media (max-width: 575.98px){ /* Links principais em grid, estilo de cores do desktop */ #topNav .navbar-nav.me-auto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:stretch} #topNav .navbar-nav.me-auto .nav-item{width:100%} #topNav .navbar-nav.me-auto .nav-link{ display:flex;flex-direction:column;align-items:center;justify-content:center; background:transparent;color:var(--text-inverse) !important; border:1px solid rgba(255,255,255,.28);border-radius:.75rem; padding:.5rem .45rem !important;min-height:40px;box-shadow:none; gap:.25rem;text-align:center;transition:background-color .25s ease,color .25s ease,border-color .25s ease; } [data-theme="dark"] #topNav .navbar-nav.me-auto .nav-link{color:var(--text-inverse) !important;border-color:rgba(255,255,255,.25)} #topNav .navbar-nav.me-auto .nav-link .bi{font-size:1.15rem;opacity:.9} #topNav .navbar-nav.me-auto .nav-link span{margin-left:0 !important;font-size:.78rem;line-height:1.15} #topNav .navbar-nav.me-auto .nav-link:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45);} #topNav .navbar-nav.me-auto .nav-link.active{background:rgba(25,135,84,.28);border-color:rgba(25,135,84,.55);color:#fff;} [data-theme="dark"] #topNav .navbar-nav.me-auto .nav-link.active{background:rgba(25,135,84,.4);} /* Utilitários (entrar/sair) seguem mesmo padrão */ #topNav .navbar-nav.ms-lg-auto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:stretch} #topNav .navbar-nav.ms-lg-auto .nav-item{width:100%} #topNav .navbar-nav.ms-lg-auto a.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:transparent;color:var(--text-inverse) !important;border:1px solid rgba(255,255,255,.28);border-radius:.75rem;padding:.45rem .4rem;min-height:38px;box-shadow:none;gap:.25rem;text-align:center;transition:background-color .25s ease,color .25s ease,border-color .25s ease;} [data-theme="dark"] #topNav .navbar-nav.ms-lg-auto a.btn{color:var(--text-inverse) !important;border-color:rgba(255,255,255,.25)} #topNav .navbar-nav.ms-lg-auto a.btn .bi{font-size:1.05rem;opacity:.9} #topNav .navbar-nav.ms-lg-auto a.btn:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45);} #topNav .navbar-nav.ms-lg-auto a.logout-btn{min-height:38px !important;padding:.4rem .35rem !important;font-size:.68rem;} #topNav .navbar-nav.ms-lg-auto a.logout-btn .bi{font-size:1rem;} #topNav .navbar-nav.ms-lg-auto a.btn .d-none.d-lg-inline{display:inline !important} .navbar .navbar-collapse{padding-top:.55rem} } @media (min-width: 576px) and (max-width: 767.98px){ /* Em sm/md, 3 colunas para melhor aproveitamento */ #topNav .navbar-nav.me-auto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem} #topNav .navbar-nav.me-auto .nav-link{min-height:60px} } /* Acessibilidade e feedback dos ícones utilitários */ .utility-bar .btn:focus-visible{box-shadow:var(--focus-ring);} .utility-bar .btn:active{transform:scale(.96);} /* Ativo/pressionado em verde claro para botões utilitários */ .utility-bar .btn[aria-pressed="true"], .utility-bar .btn.active{background:rgba(25,135,84,.18);color:#0f5132;border-color:rgba(25,135,84,.35);} [data-theme="dark"] .utility-bar .btn[aria-pressed="true"], [data-theme="dark"] .utility-bar .btn.active{background:rgba(25,135,84,.35);color:#d1e7dd;border-color:rgba(25,135,84,.5);} /* Permite quebra de linha controlada no desktop para caber todos botões */ .navbar-nav{flex-wrap:wrap;row-gap:.25rem;} /* New Reservation page */ /* Modern navbar extra enhancements */ .navbar.navbar-modern{position:relative;} .navbar-modern::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0));pointer-events:none;} .navbar-modern.navbar-shrink{padding-top:.15rem !important;padding-bottom:.15rem !important;transition:padding .3s ease, background-color .3s ease;} .navbar-modern .brand-mark-modern{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;} .navbar-modern .brand-mark-modern::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,var(--brand-accent),var(--brand-primary));-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;} .navbar-modern .brand-title-modern{font-weight:600;letter-spacing:.3px;} .navbar-modern.navbar-shrink .brand-mark-modern{width:50px;height:50px;} .navbar-modern.navbar-shrink .brand-title-modern{font-size:1.05rem;} @media (prefers-reduced-motion: reduce){ .navbar-modern.navbar-shrink{transition:none;} } /* Hide shadow subtly on scroll down */ .navbar-modern.navbar-hide-shadow{box-shadow:0 .125rem .5rem rgba(0,0,0,.08);} /* Animated underline for active items (desktop) */ @media (min-width:992px){ .main-nav .nav-link{position:relative;} .main-nav .nav-link::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-success),var(--brand-primary));transform:scaleX(0);transform-origin:left center;transition:transform .35s ease;} .main-nav .nav-link.active::after,.main-nav .nav-link:focus-visible::after,.main-nav .nav-link:hover::after{transform:scaleX(1);} @media (prefers-reduced-motion: reduce){ .main-nav .nav-link::after{transition:none;} } } /* ================= Compact Desktop Navbar Variant ================= */ @media (min-width:992px){ .navbar.navbar-modern.navbar-tight{padding-top:.275rem !important;padding-bottom:.275rem !important;} /* +10% no bloco da marca (logo + título) */ .navbar.navbar-modern.navbar-tight .brand-mark-modern{width:48px;height:48px;} .navbar.navbar-modern.navbar-tight .brand-mark-modern .brand-logo{height:48px;} .navbar.navbar-modern.navbar-tight .brand-title-modern{font-size:1.01rem;letter-spacing:.16px;} .navbar.navbar-modern.navbar-tight .main-nav{gap:.35rem !important;} /* +30% total (20% anterior + 10% adicional) nos botões principais */ .navbar.navbar-modern.navbar-tight .main-nav .nav-link{padding:.33rem .6rem !important;font-size:.95rem;line-height:1.2;border-radius:.35rem;gap:.4rem;} .navbar.navbar-modern.navbar-tight .main-nav .nav-link .bi{font-size:1.2rem;} .navbar.navbar-modern.navbar-tight .util-nav{gap:.35rem !important;} .navbar.navbar-modern.navbar-tight .util-nav .util-btn{min-width:38px;min-height:38px;padding:.28rem .5rem;font-size:.7rem;} .navbar.navbar-modern.navbar-tight .util-nav .util-btn i{font-size:.95rem;} .navbar.navbar-modern.navbar-tight .logout-btn{min-height:38px;padding:.4rem .6rem;font-size:.68rem !important;} .navbar.navbar-modern.navbar-tight .logout-btn .bi{font-size:.85rem;} .navbar.navbar-modern.navbar-tight .main-nav .nav-link::after{left:.6rem;right:.6rem;} /* Compact underline thickness */ .navbar.navbar-modern.navbar-tight .main-nav .nav-link::after{height:2px;} /* Reduce shadow for tighter look */ .navbar.navbar-modern.navbar-tight{box-shadow:0 .15rem .6rem rgba(0,0,0,.18);} } /* Utility buttons modern states */ .utility-bar .btn{position:relative;overflow:hidden;} .utility-bar .btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 70%);opacity:0;transition:opacity .4s ease;} .utility-bar .btn:hover::after{opacity:.5;} @media (prefers-reduced-motion: reduce){ .utility-bar .btn::after{transition:none;} } /* Focus styles unify */ .main-nav .nav-link:focus-visible,.util-nav .btn:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;} [data-theme="dark"] .main-nav .nav-link:focus-visible,[data-theme="dark"] .util-nav .btn:focus-visible{outline:2px solid rgba(255,255,255,.4);} /* Improve collapse spacing in mobile after modernization */ @media (max-width:575.98px){ .navbar-modern .navbar-collapse{padding-top:.75rem;} } /* Compact automatic mode for medium screens (>=768px <992px) */ @media (min-width:768px) and (max-width:991.98px){ .navbar-modern{padding-top:.35rem !important;padding-bottom:.35rem !important;} .navbar-modern .brand-mark-modern{width:48px;height:48px;} .navbar-modern .brand-title-modern{font-size:1rem;letter-spacing:.15px;} /* Hide textual labels to save horizontal space, rely on tooltips */ .main-nav .nav-link span{display:none;} .main-nav .nav-link{padding:.45rem .6rem;min-width:48px;justify-content:center;} .main-nav .nav-link .bi{font-size:1.15rem;} .util-nav .btn span{display:none;} .util-nav .btn{width:42px;height:42px;padding:0;} } /* Optional explicit class to force compact mode (can be toggled via JS) */ .navbar-modern.navbar-compact{padding-top:.35rem !important;padding-bottom:.35rem !important;} .navbar-modern.navbar-compact .brand-mark-modern{width:40px;height:40px;} .navbar-modern.navbar-compact .brand-title-modern{font-size:1rem;letter-spacing:.15px;} .navbar-modern.navbar-compact .main-nav .nav-link span{display:none;} .navbar-modern.navbar-compact .main-nav .nav-link{padding:.45rem .6rem;min-width:48px;justify-content:center;} .navbar-modern.navbar-compact .main-nav .nav-link .bi{font-size:1.15rem;} .navbar-modern.navbar-compact .util-nav .btn span{display:none;} .navbar-modern.navbar-compact .util-nav .btn{width:42px;height:42px;padding:0;} /* Logout button dedicated styling */ .navbar .logout-btn, .logout-btn{background:linear-gradient(135deg,#dc3545 0%,#ff5f6d 100%) !important;color:#fff !important;border:0 !important;box-shadow:0 .4rem 1rem -0.25rem rgba(220,53,69,.45),0 .15rem .35rem rgba(220,53,69,.3);transition:background .35s ease, box-shadow .35s ease, transform .25s ease;position:relative;overflow:hidden;} .navbar .logout-btn::after,.logout-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 60%);opacity:.35;mix-blend-mode:overlay;transition:opacity .4s ease;pointer-events:none;} .navbar .logout-btn:hover, .logout-btn:hover{transform:translateY(-2px);box-shadow:0 .6rem 1.25rem -0.3rem rgba(220,53,69,.55),0 .25rem .6rem rgba(220,53,69,.35);} .navbar .logout-btn:hover::after,.logout-btn:hover::after{opacity:.55;} .navbar .logout-btn:active, .logout-btn:active{transform:translateY(0);filter:brightness(.92);box-shadow:0 .25rem .7rem rgba(220,53,69,.45);} .navbar .logout-btn:focus-visible, .logout-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 .25rem rgba(255,255,255,.35),0 .4rem 1rem -0.25rem rgba(220,53,69,.5);} [data-theme="dark"] .navbar .logout-btn,[data-theme="dark"] .logout-btn{background:linear-gradient(135deg,#d9485f 0%,#ff6b81 100%) !important;} [data-theme="dark"] .navbar .logout-btn::after,[data-theme="dark"] .logout-btn::after{opacity:.4;} [data-theme="dark"] .navbar .logout-btn:hover,[data-theme="dark"] .logout-btn:hover{filter:brightness(1.05);} .navbar-modern.navbar-shrink .logout-btn{box-shadow:0 .15rem .4rem rgba(220,53,69,.3);} @media (max-width:575.98px){ /* Logout ~40% menor no mobile */ #topNav .navbar-nav.ms-lg-auto a.logout-btn{min-height:30px !important;padding:.3rem .4rem !important;box-shadow:0 .2rem .45rem rgba(220,53,69,.22);} #topNav .navbar-nav.ms-lg-auto a.logout-btn .bi{font-size:.9rem;} } @media (min-width:768px) and (max-width:991.98px){ .navbar-modern.navbar-compact .logout-btn{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;} .navbar-modern.navbar-compact .logout-btn span{display:none;} } .new-reservation #selection-feedback .alert{ margin-bottom: 0; } @media (min-width: 992px){ .new-reservation .sidebar-sticky{ position: sticky; top: 5.5rem; } } /* Compact header spacing inside cards on New Reservation */ .new-reservation .card-header{ background: var(--surface); border-bottom: 1px solid var(--border-color); } .new-reservation .card .form-text{ color: var(--muted); } /* Modern utility buttons (font size / theme) */ .util-btn{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);color:#212529;border:1px solid #dee2e6;box-shadow:0 .25rem .6rem rgba(0,0,0,.08);display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:background .35s ease, box-shadow .35s ease, transform .25s ease, color .25s ease;min-width:40px;min-height:40px;padding:.4rem .65rem;font-size:.85rem;font-weight:500;letter-spacing:.25px;border-radius:999px;} .util-btn .util-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;} .util-btn i{font-size:1.05rem;transition:transform .35s ease, opacity .35s ease;} .util-btn:hover{background:linear-gradient(135deg,#ffffff 0%,#f1f3f5 100%);box-shadow:0 .4rem .9rem -0.25rem rgba(0,0,0,.18);transform:translateY(-2px);} .util-btn:active{transform:translateY(0);box-shadow:0 .25rem .6rem rgba(0,0,0,.15);filter:brightness(.95);} .util-btn:focus-visible{outline:2px solid rgba(13,110,253,.6);outline-offset:2px;} .util-btn.active{background:linear-gradient(135deg,#0d6efd 0%,#4094ff 100%);color:#fff;border-color:#0d6efd;} .util-btn.active i{animation:utilPulse 1.4s ease-in-out infinite;} @keyframes utilPulse{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}} body[data-theme="dark"] .util-btn{background:linear-gradient(135deg,#2d3238 0%,#3b4148 100%);color:#e2e6ea;border-color:#495057;} body[data-theme="dark"] .util-btn:hover{background:linear-gradient(135deg,#343a40 0%,#454d54 100%);} body[data-theme="dark"] .util-btn.active{background:linear-gradient(135deg,#0d6efd 0%,#1a7dff 100%);border-color:#0d6efd;} /* Aumento de 20% para os botões de utilidade (tema e fonte) */ #fontToggleBtn,#themeToggleBtn{min-width:48px;min-height:48px;padding:.48rem .78rem;} #fontToggleBtn i,#themeToggleBtn i{font-size:1.26rem;} @media (max-width:575.98px){ #fontToggleBtn,#themeToggleBtn{min-width:46px;min-height:46px;padding:.44rem .68rem;} #fontToggleBtn i,#themeToggleBtn i{font-size:1.15rem;} } /* Unificar estilo dos botões utilitários com nav-links no cabeçalho */ .navbar .nav-link-util.util-btn{background:transparent;box-shadow:none;border:0;color:var(--text-inverse);padding:.25rem .6rem;min-width:auto;min-height:auto;border-radius:.375rem;font-size:.75rem;font-weight:500;letter-spacing:.25px;} .navbar .nav-link-util.util-btn .util-icon-wrapper i{font-size:1rem;} .navbar .nav-link-util.util-btn:hover{background-color:rgba(255,255,255,.08);color:#fff;transform:none;box-shadow:none;} .navbar .nav-link-util.util-btn:active{background-color:rgba(255,255,255,.12);filter:none;} .navbar .nav-link-util.util-btn.active{background-color:rgba(25,135,84,.18);color:#fff;} [data-theme="dark"] .navbar .nav-link-util.util-btn.active{background-color:rgba(25,135,84,.35);} /* Mobile card estilo segue nav-link grid */ @media (max-width:575.98px){ #topNav .navbar-nav.me-auto .nav-link-util.util-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);color:var(--text) !important;border:1px solid var(--border-color);border-radius:.75rem;padding:.55rem .5rem !important;min-height:60px;box-shadow:var(--shadow);gap:.25rem;text-align:center;font-size:.7rem;} #topNav .navbar-nav.me-auto .nav-link-util.util-btn:hover{background:rgba(13,110,253,.06);} [data-theme="dark"] #topNav .navbar-nav.me-auto .nav-link-util.util-btn{background:var(--surface);color:var(--text) !important;border-color:var(--border-color);} #topNav .navbar-nav.me-auto .nav-link-util.util-btn.active{background:rgba(25,135,84,.18);border-color:rgba(25,135,84,.45);color:#0f5132 !important;} [data-theme="dark"] #topNav .navbar-nav.me-auto .nav-link-util.util-btn.active{background:rgba(25,135,84,.35);color:#d1e7dd !important;} } /* Compactações específicas para mobile (<576px) preservando alvo tátil >=44px total */ @media (max-width:639.98px){ .util-btn{min-width:38px;min-height:38px;padding:.3rem .55rem;font-size:.7rem;} .util-btn i{font-size:.9rem;} /* Logout botão já tinha override para min-height 48; reduzir um pouco mantendo legibilidade */ #topNav .navbar-nav.ms-lg-auto a.logout-btn{min-height:44px !important;padding:.5rem .6rem !important;} /* Nav links em grid principal: diminuir altura e ícone ligeiramente */ #topNav .navbar-nav.me-auto .nav-link{min-height:56px;} #topNav .navbar-nav.me-auto .nav-link .bi{font-size:1.25rem;} /* Espaço vertical menor na barra utilitária */ .utility-bar{gap:.2rem;} } /* Ícones em cabeçalho gradiente: usar tom off-white para reduzir brilho excessivo */ .navbar.app-gradient, .navbar.navbar-modern.app-gradient{ --nav-icon-color: rgba(255,255,255,.85); --nav-icon-color-active:#ffffff; } .navbar.app-gradient .util-btn i, .navbar.app-gradient .logout-btn i, .navbar.app-gradient .nav-link .bi, .navbar.navbar-modern.app-gradient .util-btn i, .navbar.navbar-modern.app-gradient .logout-btn i, .navbar.navbar-modern.app-gradient .nav-link .bi{color:var(--nav-icon-color) !important;filter:drop-shadow(0 0 2px rgba(0,0,0,.25));transition:color .25s ease;} /* Hover: aproxima do branco puro para reforço visual */ .navbar.app-gradient .nav-link:hover .bi, .navbar.app-gradient .util-btn:hover i, .navbar.app-gradient .logout-btn:hover i, .navbar.navbar-modern.app-gradient .nav-link:hover .bi, .navbar.navbar-modern.app-gradient .util-btn:hover i, .navbar.navbar-modern.app-gradient .logout-btn:hover i{color:#fdfdfd !important;} /* Estado ativo mantém branco puro para foco */ .navbar.app-gradient .util-btn.active i, .navbar.app-gradient .nav-link.active .bi, .navbar.navbar-modern.app-gradient .util-btn.active i, .navbar.navbar-modern.app-gradient .nav-link.active .bi{color:var(--nav-icon-color-active) !important;} /* Modo dark: usar mesmo off-white garantindo contraste */ [data-theme="dark"] .navbar.app-gradient .util-btn i,[data-theme="dark"] .navbar.app-gradient .logout-btn i,[data-theme="dark"] .navbar.app-gradient .nav-link .bi{color:var(--nav-icon-color) !important;} /* Brand logo: tamanhos responsivos e contextuais (aumentado ~30%) */ .brand-logo{display:block;height:47px;width:auto;object-fit:contain;} @media (min-width: 576px){ .brand-logo{ height:52px; } } @media (min-width: 992px){ .brand-logo{ height:62px; } } /* Variante maior (ex.: painel lateral do login) */ .brand-logo-lg{display:block;height:62px;width:auto;object-fit:contain;} @media (min-width: 576px){ .brand-logo-lg{ height:73px; } } @media (min-width: 992px){ .brand-logo-lg{ height:83px; } } /* Navbar: ajustar para caber no container circular e no estado shrink (limitado ao container 46/40px) */ .navbar-modern .brand-mark-modern .brand-logo{height:54px;} .navbar-modern.navbar-shrink .brand-mark-modern .brand-logo{height:46px;} /* Header mobile do login: +30% adicional para legibilidade */ .auth-mobile-header .brand-logo{height:66px;} @media (min-width: 576px){ .auth-mobile-header .brand-logo{height:72px;} } /* Login desktop: aumentar somente no contexto do login (não global) */ .login-left .brand-logo-lg{height:96px;} @media (min-width: 576px){ .login-left .brand-logo-lg{height:112px;} } @media (min-width: 992px){ .login-left .brand-logo-lg{height:128px;} } /* Leve sombra para legibilidade em fundo gradiente do navbar */ .navbar .brand-logo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));} /* ===================== Botões de ações de pagamento (Admin Reservas) ===================== */ .admin-payment-actions .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:.4rem;font-weight:600;letter-spacing:.3px;transition:background .35s ease,box-shadow .35s ease,transform .25s ease,color .25s ease,border-color .25s ease;} .admin-payment-actions .btn i{font-size:1rem;opacity:.9;transition:transform .35s ease;} .admin-payment-actions .btn:focus-visible{outline:2px solid rgba(13,110,253,.55);outline-offset:2px;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);} .admin-payment-actions .btn:active{transform:translateY(0);box-shadow:none;} @media (prefers-reduced-motion: reduce){ .admin-payment-actions .btn{transition:none;} .admin-payment-actions .btn:active{transform:none;} } /* Confirmar PIX (verde reforçado com leve gradiente) */ .btn-pix-confirm{background:linear-gradient(135deg,var(--brand-success) 0%, #28c76f 100%);color:#fff;border:0;box-shadow:0 .35rem .9rem -0.35rem rgba(25,135,84,.55),0 .15rem .45rem rgba(25,135,84,.35);} .btn-pix-confirm:hover{background:linear-gradient(135deg,#28a745 0%, #34d27a 100%);box-shadow:0 .55rem 1.15rem -0.35rem rgba(25,135,84,.6),0 .25rem .65rem rgba(25,135,84,.4);transform:translateY(-2px);} .btn-pix-confirm:active{filter:brightness(.92);box-shadow:0 .25rem .6rem rgba(25,135,84,.45);} @media (prefers-reduced-motion: reduce){ .btn-pix-confirm:hover{transform:none;} } /* PIX não confirmado (tom de perigo porém não totalmente sólido, para diferenciar de exclusões definitivas) */ /* Versão vermelha sólida do botão de PIX não confirmado (mesmas dimensões do confirmar) */ .btn-pix-unconfirmed{background:linear-gradient(135deg,#dc3545 0%,#ff5f6d 100%);color:#fff;border:0;box-shadow:0 .35rem .9rem -0.35rem rgba(220,53,69,.55),0 .15rem .45rem rgba(220,53,69,.35);padding:.4rem .75rem;} .btn-pix-unconfirmed:hover{background:linear-gradient(135deg,#d32f3f 0%,#ff6f7b 100%);box-shadow:0 .55rem 1.15rem -0.35rem rgba(220,53,69,.6),0 .25rem .65rem rgba(220,53,69,.4);transform:translateY(-2px);} .btn-pix-unconfirmed:active{filter:brightness(.92);box-shadow:0 .25rem .6rem rgba(220,53,69,.45);} .btn-pix-unconfirmed:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 .25rem rgba(255,255,255,.35),0 .35rem .9rem -0.25rem rgba(220,53,69,.5);} @media (prefers-reduced-motion: reduce){ .btn-pix-unconfirmed:hover{transform:none;} } @media (prefers-reduced-motion: reduce){ .btn-pix-unconfirmed:hover{transform:none;} } /* === Refinamentos de dimensão e responsividade (redução solicitada) === */ /* Base: diminuir padding, fonte e altura visual sem comprometer área de clique */ .btn-pix-unconfirmed{padding:.35rem .6rem;font-size:.7rem;line-height:1.15;} .btn-pix-unconfirmed i{font-size:.9rem;} /* Em telas >=576px: remover largura forçada caso use w-100 no markup */ @media (min-width:576px){ .admin-payment-actions .btn-pix-unconfirmed{width:auto;} } /* Mobile <576px: reduzir min-height herdado (48px) para algo mais compacto mantendo acessibilidade (>40px) */ @media (max-width:575.98px){ .admin-payment-actions .btn-pix-unconfirmed{min-height:42px;padding:.35rem .55rem;font-size:.7rem;} } /* Telas grandes >=992px: ainda mais compacto para densidade de dados */ @media (min-width:992px){ .admin-payment-actions .btn-pix-unconfirmed{padding:.3rem .5rem;font-size:.7rem;} } /* Layout vertical compacto em telas estreitas */ @media (max-width:575.98px){ .admin-payment-actions{gap:.5rem !important;} .admin-payment-actions .btn{min-height:48px;font-size:.85rem;} } /* Modo dark: ajustes de contraste */ [data-theme="dark"] .btn-pix-unconfirmed{background:linear-gradient(135deg,#d9485f 0%,#ff6b81 100%);color:#fff;border:0;} [data-theme="dark"] .btn-pix-unconfirmed:hover{background:linear-gradient(135deg,#e2556f 0%,#ff7a8e 100%);} [data-theme="dark"] .btn-pix-confirm{background:linear-gradient(135deg,#198754 0%,#2ba563 100%);} [data-theme="dark"] .btn-pix-confirm:hover{background:linear-gradient(135deg,#1d9560 0%,#31b26d 100%);} /* Compact Table for Desktop to prevent scrolling */ @media screen and (min-width: 993px) { .table-responsive table { font-size: 0.85rem; /* Reduce font size */ } .table-responsive table th, .table-responsive table td { padding: 0.4rem 0.5rem; /* Reduce padding */ white-space: nowrap; /* Prevent wrapping where possible, but might cause overflow if too strict. Let's try to keep it compact. */ } /* Allow wrapping for specific columns if needed, or truncate */ .table-responsive table td { white-space: normal; /* Allow wrapping to fit content */ vertical-align: middle; } .table-responsive table .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.75rem; } .table-responsive table img.img-thumbnail { width: 60px !important; /* Smaller QR code on desktop */ height: 60px !important; } } /* Responsive Table (Card View) for Mobile/Tablet */ @media screen and (max-width: 992px) { .table-responsive table { border: 0; } .table-responsive table caption { font-size: 1.3em; } .table-responsive table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .table-responsive table tr { border: 1px solid var(--border-color); border-bottom: 3px solid var(--border-color); display: block; margin-bottom: 1rem; background: var(--surface); border-radius: 8px; box-shadow: var(--shadow); } .table-responsive table td { border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 0.75rem; font-size: 0.95rem; } .table-responsive table td:last-child { border-bottom: 0; } .table-responsive table td::before { content: attr(data-label); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); text-align: left; flex-shrink: 0; margin-right: 1rem; } /* Fix for complex content columns */ .table-responsive table td[data-label="Pagamento"], .table-responsive table td[data-label="Ações"] { flex-direction: column; align-items: stretch; text-align: center; } .table-responsive table td[data-label="Pagamento"]::before, .table-responsive table td[data-label="Ações"]::before { margin-bottom: 0.5rem; align-self: flex-start; } .table-responsive table td .btn { width: 100%; margin-bottom: 0.25rem; } .table-responsive table td img { margin: 0 auto; } } /* Aumentar fonte dos botões do menu em 20% no desktop e +10% no texto interno */ @media (min-width: 992px) { .navbar-nav.main-nav { gap: 0.2rem !important; /* Reduz gap para compensar largura */ } .navbar-nav.main-nav .nav-link { font-size: 1.2rem !important; /* Base aumentada */ padding-left: 0.35rem !important; /* Padding lateral reduzido */ padding-right: 0.35rem !important; } .navbar-nav.main-nav .nav-link span { font-size: 1.1em; /* +10% no texto interno */ white-space: nowrap; } .navbar-nav.main-nav .nav-link .bi { font-size: 1.4rem !important; } }