/* Tsuru Theme Pack Drop into: static/css/tsuru_theme.css Assets: static/img/tsuru_pattern.svg, tsuru_noise.png, mascote_tsuru_multiplica.jpeg Scope: add class "theme-tsuru" on to enable */ :root{ --tsuru-navy: #2B2E6B; /* deep */ --tsuru-blue: #86A6CF; /* mid */ --tsuru-sky: #BEE3FA; /* light */ --tsuru-red: #B2262C; /* accent */ --tsuru-red2: #C14655; /* soft accent */ --tsuru-ink: #111827; /* text */ --tsuru-muted:#6B7280; /* secondary text */ --tsuru-surface: rgba(255,255,255,.78); --tsuru-border: rgba(43,46,107,.14); --tsuru-radius: 16px; --tsuru-radius-sm: 12px; --tsuru-shadow-1: 0 10px 30px rgba(17,24,39,.08); --tsuru-shadow-2: 0 18px 48px rgba(17,24,39,.12); /* Fundo matizado (origami/3D): azul frio + leve rubor vermelho */ --tsuru-grad-hero: radial-gradient(1100px 520px at 18% 0%, rgba(190,227,250,.90) 0%, rgba(255,255,255,1) 62%); --tsuru-grad-matte: linear-gradient(120deg, rgba(190,227,250,.55) 0%, rgba(255,255,255,1) 46%, rgba(193,70,85,.10) 100% ); --tsuru-grad-vignette: radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,0) 35%, rgba(43,46,107,.06) 100%); --tsuru-grad-accent: linear-gradient(135deg, var(--tsuru-navy) 0%, #1C1F53 55%, rgba(178,38,44,.95) 120%); --tsuru-grad-accent-soft: linear-gradient(135deg, rgba(43,46,107,.10), rgba(190,227,250,.35)); } body.theme-tsuru{ color: var(--tsuru-ink); background: var(--tsuru-grad-hero), var(--tsuru-grad-matte), var(--tsuru-grad-vignette), url("/static/img/tsuru_pattern.svg"); background-attachment: fixed, fixed, fixed, fixed; background-size: auto, auto, auto, 520px 520px; background-position: center top, center, center, center; } /* subtle texture/noise overlay */ body.theme-tsuru::before{ content:""; position: fixed; inset: 0; pointer-events: none; background-image: url("/static/img/tsuru_noise.png"); background-size: 420px 420px; opacity: .07; mix-blend-mode: multiply; z-index: 0; } /* ensure app content stays above overlay */ /* Importante: NÃO pode atingir elementos que precisam ficar fixed (rodapé flutuante, chatbot, modais etc). Se a regra pegar o footer, ele vira "relative" e passa a descer junto da página em algumas telas. */ body.theme-tsuru > :not(.modal):not(.tsuru-fab):not(.chatbot-fab):not(.chatbot-panel):not(.app-footer){ position: relative; z-index: 1; } /* Garantia: modais continuam suspensos (evita "modal preso no rodapé") */ body.theme-tsuru .modal{ position: fixed !important; inset: 0 !important; z-index: 1000 !important; } body.theme-tsuru .modal .modal-content{ position: relative; } /* Generic containers/cards */ body.theme-tsuru .card, body.theme-tsuru .panel, body.theme-tsuru .container-card, body.theme-tsuru .modal-content, body.theme-tsuru .box, body.theme-tsuru .content-box{ background: var(--tsuru-surface); border: 1px solid var(--tsuru-border); border-radius: var(--tsuru-radius); box-shadow: var(--tsuru-shadow-1); backdrop-filter: blur(10px); } /* Header / topbar */ body.theme-tsuru header, body.theme-tsuru .topbar, body.theme-tsuru .navbar{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); border-bottom: 1px solid var(--tsuru-border); backdrop-filter: blur(10px); } /* Primary buttons */ body.theme-tsuru .btn-primary, body.theme-tsuru button.btn-primary, body.theme-tsuru .btn.btn-primary{ background: var(--tsuru-grad-accent); border: 1px solid rgba(43,46,107,.25); color: white; border-radius: 14px; box-shadow: 0 10px 22px rgba(43,46,107,.18); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } body.theme-tsuru .btn-primary:hover, body.theme-tsuru button.btn-primary:hover, body.theme-tsuru .btn.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(43,46,107,.24); filter: saturate(1.05); } body.theme-tsuru .btn-primary:active{ transform: translateY(0); box-shadow: 0 10px 22px rgba(43,46,107,.16); } /* Secondary buttons */ body.theme-tsuru .btn-secondary, body.theme-tsuru .btn.btn-secondary{ background: rgba(255,255,255,.72); border: 1px solid rgba(43,46,107,.18); color: var(--tsuru-navy); border-radius: 14px; box-shadow: 0 10px 22px rgba(17,24,39,.06); } body.theme-tsuru .btn-danger, body.theme-tsuru .btn.btn-danger{ background: linear-gradient(135deg, rgba(178,38,44,.95), rgba(193,70,85,.95)); border: 1px solid rgba(178,38,44,.35); color: white; } /* Inputs */ body.theme-tsuru input, body.theme-tsuru select, body.theme-tsuru textarea{ border-radius: 12px; border: 1px solid rgba(17,24,39,.12); background: rgba(255,255,255,.86); transition: box-shadow .12s ease, border-color .12s ease; } body.theme-tsuru input:focus, body.theme-tsuru select:focus, body.theme-tsuru textarea:focus{ outline: none; border-color: rgba(43,46,107,.38); box-shadow: 0 0 0 4px rgba(190,227,250,.65); } /* Tables (clean, modern) */ body.theme-tsuru table{ border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--tsuru-radius); } /* DataTables (quando presente) */ body.theme-tsuru .dataTables_wrapper{ background: transparent; } body.theme-tsuru .dataTables_wrapper .dataTables_filter input, body.theme-tsuru .dataTables_wrapper .dataTables_length select{ border-radius: 12px; } body.theme-tsuru .dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius: 12px !important; border: 1px solid rgba(43,46,107,.16) !important; background: rgba(255,255,255,.70) !important; margin: 0 2px; } body.theme-tsuru .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.theme-tsuru .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background: var(--tsuru-grad-accent) !important; color: #fff !important; border: 1px solid rgba(43,46,107,.22) !important; } /* Floating Tsuru (assistente/mascote) — puro CSS (sem JS) */ body.theme-tsuru .tsuru-fab{ position: fixed; right: 18px; bottom: 18px; z-index: 9999; } body.theme-tsuru .tsuru-help-toggle{ display:none; } body.theme-tsuru .tsuru-fab-btn{ width: 86px; height: 86px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.78); border: 1px solid rgba(43,46,107,.18); box-shadow: 0 18px 40px rgba(17,24,39,.14); backdrop-filter: blur(10px); transition: transform .14s ease, box-shadow .14s ease; } body.theme-tsuru .tsuru-fab-btn:hover{ transform: translateY(-2px); box-shadow: 0 24px 54px rgba(17,24,39,.18); } body.theme-tsuru .tsuru-fab-btn img{ width: 62px; height: 62px; object-fit: cover; border-radius: 16px; filter: drop-shadow(0 10px 18px rgba(17,24,39,.18)); } body.theme-tsuru .tsuru-fab-panel{ position: absolute; right: 0; bottom: 98px; width: min(320px, calc(100vw - 32px)); background: rgba(255,255,255,.82); border: 1px solid rgba(43,46,107,.16); border-radius: 18px; box-shadow: 0 26px 70px rgba(17,24,39,.18); backdrop-filter: blur(12px); padding: 14px 14px 12px; transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; } body.theme-tsuru .tsuru-help-toggle:checked ~ .tsuru-fab-panel{ opacity: 1; transform: translateY(0); pointer-events: auto; } body.theme-tsuru .tsuru-fab-title{ display:flex; align-items:center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } body.theme-tsuru .tsuru-fab-title strong{ font-size: 14px; color: var(--tsuru-navy); } body.theme-tsuru .tsuru-fab-sub{ font-size: 12px; color: var(--tsuru-muted); margin-top: 2px; } body.theme-tsuru .tsuru-fab-actions{ display:flex; flex-wrap: wrap; gap: 8px; } body.theme-tsuru .tsuru-fab-actions a{ text-decoration: none; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(43,46,107,.14); background: rgba(190,227,250,.30); color: var(--tsuru-navy); font-size: 13px; } body.theme-tsuru .tsuru-fab-actions a:hover{ background: rgba(134,166,207,.26); } body.theme-tsuru thead th{ background: rgba(43,46,107,.06); border-bottom: 1px solid rgba(43,46,107,.12); color: var(--tsuru-navy); } body.theme-tsuru tbody tr:nth-child(even){ background: rgba(190,227,250,.18); } body.theme-tsuru tbody tr:hover{ background: rgba(134,166,207,.18); } /* Badges / chips */ body.theme-tsuru .badge, body.theme-tsuru .chip{ background: rgba(190,227,250,.55); border: 1px solid rgba(43,46,107,.12); color: var(--tsuru-navy); border-radius: 999px; } /* Mascot helper (optional) */ body.theme-tsuru .tsuru-mascot{ width: 120px; height: auto; filter: drop-shadow(0 18px 26px rgba(17,24,39,.18)); } /* Subtle section titles */ body.theme-tsuru h1, body.theme-tsuru h2, body.theme-tsuru h3{ letter-spacing: .2px; } body.theme-tsuru h1{ background: linear-gradient(90deg, var(--tsuru-navy), rgba(178,38,44,.92)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Em telas pequenas, reduz um pouco o FAB */ @media (max-width: 520px){ body.theme-tsuru .tsuru-fab{ right: 12px; bottom: 12px; } body.theme-tsuru .tsuru-fab-btn{ width: 74px; height: 74px; } body.theme-tsuru .tsuru-fab-btn img{ width: 56px; height: 56px; } body.theme-tsuru .tsuru-fab-panel{ width: 250px; bottom: 86px; } } /* ========================= STEP 3 – PREMIUM POLISH Hero header + Auth hero + Chatbot glass ========================= */ /* Hero header (index) */ body.theme-tsuru .app-header.tsuru-hero, body.theme-tsuru header.app-header.tsuru-hero{ background: linear-gradient(135deg, rgba(43,46,107,.88) 0%, rgba(28,31,83,.82) 55%, rgba(178,38,44,.82) 120%); color: #fff; border-bottom: 1px solid rgba(255,255,255,.16); position: sticky; top: 0; z-index: 50; } body.theme-tsuru .app-header.tsuru-hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(900px 420px at 18% 0%, rgba(190,227,250,.28) 0%, rgba(255,255,255,0) 58%), url("/static/img/tsuru_pattern.svg"); background-size: auto, 520px 520px; background-position: left top, center; opacity: .68; mix-blend-mode: screen; pointer-events:none; } body.theme-tsuru .app-header.tsuru-hero::after{ content:""; position:absolute; inset:0; background-image:url("/static/img/tsuru_noise.png"); background-size:420px 420px; opacity:.06; pointer-events:none; mix-blend-mode: overlay; } body.theme-tsuru .app-header.tsuru-hero .header-content{ position: relative; z-index: 1; gap: 14px; } /* "SITE DE APOIO" (texto leve, azul-claro) */ body.theme-tsuru .app-header.tsuru-hero .site-apoio-text{ display:flex; align-items:center; justify-content:center; /* Sempre discreto (evita herdar tamanho de H1/H2/etc.) */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px !important; line-height: 1.05 !important; white-space: nowrap; margin: 0 !important; width: fit-content; max-width: 180px; padding: 6px 10px; border-radius: 12px; color: rgba(190,227,250,.95) !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; user-select:none; background: transparent; border: 1px solid rgba(190,227,250,.25); box-shadow: 0 10px 26px rgba(17,24,39,.10); text-shadow: none !important; -webkit-text-stroke: 0 !important; filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal; isolation: isolate; } /* Força o estilo mesmo se o texto estiver em outro nó/estrutura */ body.theme-tsuru [data-site-apoio="1"]{ color: rgba(190,227,250,.95) !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 12px !important; line-height: 1.05 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; max-width: 180px; white-space: nowrap !important; padding: 6px 10px !important; border-radius: 12px !important; border: 1px solid rgba(190,227,250,.25) !important; background: transparent !important; margin: 0 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; filter: none !important; } /* Aviso (modal) com estética igual às telas de autenticação (login) */ body.theme-tsuru #aviso-modal-content{ /* Mantém as cores editáveis via variáveis CSS (paleta do admin) */ background: var(--aviso-bg, rgba(255,255,255,.84)) !important; border: 1px solid var(--aviso-border, rgba(43,46,107,.18)) !important; border-radius: 22px !important; box-shadow: 0 32px 90px rgba(17,24,39,.28) !important; backdrop-filter: blur(14px); overflow: hidden; position: relative; } body.theme-tsuru #aviso-modal-content::before{ content:""; position:absolute; inset:-40px; background: radial-gradient(700px 360px at 20% 10%, rgba(190,227,250,.60) 0%, rgba(255,255,255,0) 60%), radial-gradient(560px 280px at 92% 30%, rgba(193,70,85,.22) 0%, rgba(255,255,255,0) 60%), url("/static/img/tsuru_pattern.svg"); background-size: auto, auto, 520px 520px; opacity: .70; pointer-events:none; } body.theme-tsuru #aviso-modal-content > *{ position: relative; z-index: 1; } body.theme-tsuru #aviso-modal-content .close-button{ background: rgba(17,24,39,.06) !important; border: 1px solid rgba(43,46,107,.18) !important; border-radius: 12px; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; } body.theme-tsuru #aviso-modal-content .aviso-topo{ color: var(--aviso-topo, var(--tsuru-navy)) !important; font-weight: 800; } body.theme-tsuru #aviso-modal-content #aviso-modal-texto-principal{ color: var(--aviso-principal, rgba(17,24,39,.74)) !important; } body.theme-tsuru #aviso-modal-content .aviso-rodape-verde{ color: var(--aviso-rodape-verde, #166534) !important; font-weight: 800; } body.theme-tsuru #aviso-modal-content .aviso-rodape-final{ color: var(--aviso-rodape-final, rgba(17,24,39,.58)) !important; } /* Rodapé flutuante (todas as páginas) - tom suave */ body.theme-tsuru .app-footer{ background: rgba(255,255,255,.62); border: 1px solid rgba(43,46,107,.12); color: rgba(17,24,39,.55); } body.theme-tsuru .app-header.tsuru-hero h1, body.theme-tsuru .app-header.tsuru-hero h1 p{ color:#fff !important; -webkit-text-fill-color: #fff; background: none !important; margin: 0; } body.theme-tsuru .tsuru-header-right{ margin-left: auto; display:flex; align-items:center; gap: 12px; } body.theme-tsuru .tsuru-header-mascot{ width: 54px; height: 54px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 18px 40px rgba(17,24,39,.20); filter: drop-shadow(0 10px 16px rgba(17,24,39,.18)); transition: transform .14s ease; } body.theme-tsuru .tsuru-header-mascot:hover{ transform: translateY(-1px) rotate(-1deg); } /* Global edição select on hero (polimento: texto sempre visível) */ body.theme-tsuru .app-header.tsuru-hero .global-edicao-wrap label{ color: rgba(255,255,255,.92) !important; } body.theme-tsuru .app-header.tsuru-hero #global-edicao-select{ background: rgba(255,255,255,.88) !important; color: #0b1220 !important; border: 1px solid rgba(255,255,255,.34) !important; border-radius: 14px !important; padding: 10px 12px !important; backdrop-filter: blur(10px); box-shadow: 0 16px 34px rgba(17,24,39,.14); } body.theme-tsuru .app-header.tsuru-hero #global-edicao-select option{ color: #111827; } body.theme-tsuru .app-header.tsuru-hero #global-edicao-select:focus{ outline: none; box-shadow: 0 0 0 4px rgba(190,227,250,.28), 0 18px 38px rgba(17,24,39,.16); } /* Chatbot: manter ícone visível (canto inferior direito) */ body.theme-tsuru .chatbot-fab{ position: fixed !important; right: 18px !important; bottom: 18px !important; left: auto !important; top: auto !important; z-index: 99999 !important; } body.theme-tsuru .chatbot-panel{ position: fixed !important; right: 18px !important; bottom: 92px !important; left: auto !important; top: auto !important; z-index: 100000 !important; } /* Navigation tabs (glass strip) */ body.theme-tsuru .navigation-tabs{ background: rgba(255,255,255,.68); border: 1px solid rgba(43,46,107,.14); border-radius: 18px; box-shadow: 0 16px 38px rgba(17,24,39,.08); backdrop-filter: blur(12px); margin: 12px 14px; padding: 10px; } body.theme-tsuru .navigation-tabs .tab-button{ border-radius: 14px; border: 1px solid rgba(43,46,107,.12); background: rgba(255,255,255,.72); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } body.theme-tsuru .navigation-tabs .tab-button:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(17,24,39,.10); filter: saturate(1.05); } body.theme-tsuru .navigation-tabs .tab-button.active{ background: var(--tsuru-grad-accent); color: #fff; border: 1px solid rgba(255,255,255,.14); } /* Auth pages (login/forgot/reset/register) */ body.theme-tsuru.tsuru-auth{ display:flex; align-items:center; justify-content:center; min-height: 100vh; } body.theme-tsuru .tsuru-auth-wrap{ width: min(980px, 94vw); display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; } @media (max-width: 860px){ body.theme-tsuru .tsuru-auth-wrap{ grid-template-columns: 1fr; } } body.theme-tsuru .tsuru-auth-hero{ background: rgba(255,255,255,.72); border: 1px solid rgba(43,46,107,.14); border-radius: 22px; box-shadow: 0 22px 56px rgba(17,24,39,.12); backdrop-filter: blur(12px); padding: 22px 22px 18px; position: relative; overflow: hidden; } body.theme-tsuru .tsuru-auth-hero::before{ content:""; position:absolute; inset:-40px; background: radial-gradient(700px 360px at 20% 10%, rgba(190,227,250,.65) 0%, rgba(255,255,255,0) 60%), radial-gradient(560px 280px at 92% 30%, rgba(193,70,85,.22) 0%, rgba(255,255,255,0) 60%), url("/static/img/tsuru_pattern.svg"); background-size: auto, auto, 520px 520px; opacity: .85; pointer-events:none; } body.theme-tsuru .tsuru-auth-hero-inner{ position: relative; z-index: 1; display:flex; gap: 16px; align-items:center; } body.theme-tsuru .tsuru-auth-hero-title{ font-size: 22px; line-height: 1.15; margin: 0 0 6px; color: var(--tsuru-navy); } body.theme-tsuru .tsuru-auth-hero-sub{ margin: 0; color: rgba(17,24,39,.70); } body.theme-tsuru .tsuru-auth-mascot{ width: 96px; height: 96px; border-radius: 22px; object-fit: cover; border: 1px solid rgba(43,46,107,.14); box-shadow: 0 20px 50px rgba(17,24,39,.16); filter: drop-shadow(0 10px 16px rgba(17,24,39,.14)); } body.theme-tsuru .login-container{ background: rgba(255,255,255,.78) !important; border: 1px solid rgba(43,46,107,.14); border-radius: 22px !important; box-shadow: 0 22px 56px rgba(17,24,39,.12) !important; backdrop-filter: blur(12px); } /* Chatbot: glass + gradient header (mantém funcionalidade) */ body.theme-tsuru .chatbot-fab{ background: rgba(255,255,255,.78) !important; border: 1px solid rgba(43,46,107,.18) !important; box-shadow: 0 18px 40px rgba(17,24,39,.14) !important; backdrop-filter: blur(12px); } body.theme-tsuru .chatbot-fab-avatar{ filter: drop-shadow(0 12px 18px rgba(17,24,39,.16)); } body.theme-tsuru .chatbot-panel{ background: rgba(255,255,255,.82) !important; border: 1px solid rgba(43,46,107,.16) !important; box-shadow: 0 26px 70px rgba(17,24,39,.18) !important; backdrop-filter: blur(14px); } body.theme-tsuru .chatbot-header{ background: var(--tsuru-grad-accent) !important; color: #fff !important; } body.theme-tsuru .chatbot-title{ color:#fff !important; } body.theme-tsuru .chatbot-subtitle{ color: rgba(255,255,255,.85) !important; } body.theme-tsuru .chatbot-close{ background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.22) !important; color:#fff !important; border-radius: 12px; } body.theme-tsuru .chatbot-input input{ background: rgba(255,255,255,.86) !important; } body.theme-tsuru .chatbot-input button{ background: var(--tsuru-grad-accent) !important; color: #fff !important; border: 1px solid rgba(43,46,107,.25) !important; border-radius: 14px !important; } /* Sistema Pausado: overlay com estética Tsuru (modal centralizado) */ body.theme-tsuru .system-paused-overlay{ background: transparent; /* o escurecimento vem do ::before no style.css */ backdrop-filter: none; } body.theme-tsuru .system-paused-overlay::before{ background: radial-gradient(900px 520px at 20% 10%, rgba(43,46,107,.42) 0%, rgba(12,16,38,.35) 40%, rgba(0,0,0,.35) 75%), radial-gradient(720px 480px at 90% 20%, rgba(193,70,85,.26) 0%, rgba(0,0,0,.25) 65%), rgba(6,10,22,.28); backdrop-filter: blur(3px); } body.theme-tsuru .system-paused-overlay .spo-card{ background: rgba(255,255,255,.84); border: 1px solid rgba(43,46,107,.18); box-shadow: 0 32px 90px rgba(17,24,39,.42); backdrop-filter: blur(14px); overflow: hidden; } body.theme-tsuru .system-paused-overlay .spo-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(520px 300px at 20% 10%, rgba(190,227,250,.55) 0%, rgba(255,255,255,0) 62%), radial-gradient(420px 260px at 90% 20%, rgba(193,70,85,.25) 0%, rgba(255,255,255,0) 62%), url("/static/img/tsuru_pattern.svg"); background-size: auto, auto, 520px 520px; opacity: .65; pointer-events:none; } body.theme-tsuru .system-paused-overlay .spo-card > *{ position: relative; z-index: 1; } body.theme-tsuru .system-paused-overlay .spo-title{ color: var(--tsuru-navy); } /* ========================= STEP 4 – FINISHING TOUCHES - Tint presets (blue vs red) - Section cards consistency - Modal polish - Micro-interactions + reduced motion ========================= */ /* Tint presets: basta adicionar uma classe no - tsuru-tint-blue (padrão) - tsuru-tint-red (mais rubor/acentos no fundo) */ body.theme-tsuru.tsuru-tint-blue{ --tsuru-grad-matte: linear-gradient(120deg, rgba(190,227,250,.62) 0%, rgba(255,255,255,1) 48%, rgba(193,70,85,.07) 100% ); --tsuru-grad-vignette: radial-gradient(1200px 800px at 50% 18%, rgba(255,255,255,0) 36%, rgba(43,46,107,.055) 100%); } body.theme-tsuru.tsuru-tint-red{ --tsuru-grad-matte: linear-gradient(120deg, rgba(190,227,250,.52) 0%, rgba(255,255,255,1) 46%, rgba(193,70,85,.18) 100% ); --tsuru-grad-vignette: radial-gradient(1200px 800px at 52% 16%, rgba(255,255,255,0) 34%, rgba(178,38,44,.07) 100%); } /* Section cards (form-section) – consistente com glass */ body.theme-tsuru .form-section{ background: rgba(255,255,255,.80); border: 1px solid rgba(43,46,107,.14); border-radius: 18px; box-shadow: 0 14px 42px rgba(17,24,39,.08); backdrop-filter: blur(12px); } @media (hover:hover){ body.theme-tsuru .form-section{ transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } body.theme-tsuru .form-section:hover{ transform: translateY(-1px); box-shadow: 0 22px 60px rgba(17,24,39,.12); border-color: rgba(43,46,107,.18); } } body.theme-tsuru .form-section h3{ color: var(--tsuru-navy); border-bottom: 1px dashed rgba(43,46,107,.18); } body.theme-tsuru h2{ color: var(--tsuru-navy); border-bottom: 2px solid rgba(43,46,107,.10); } /* Modal polish */ body.theme-tsuru .modal{ background-color: rgba(17,24,39,.38); backdrop-filter: blur(8px); } body.theme-tsuru .modal-content{ background: rgba(255,255,255,.84); border: 1px solid rgba(43,46,107,.16); border-radius: 20px; box-shadow: 0 30px 90px rgba(17,24,39,.22); backdrop-filter: blur(14px); } body.theme-tsuru .modal-content h3{ color: var(--tsuru-navy); border-bottom: 1px solid rgba(43,46,107,.14); } body.theme-tsuru .modal-content .close-button{ color: rgba(255,255,255,.92); background: rgba(43,46,107,.35); border: 1px solid rgba(255,255,255,.20); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; top: 14px; right: 14px; line-height: 1; } body.theme-tsuru .modal-content .close-button:hover{ filter: brightness(1.05); } /* Buttons + links micro-polish */ body.theme-tsuru a{ color: var(--tsuru-navy); text-decoration-color: rgba(43,46,107,.30); text-underline-offset: 3px; } body.theme-tsuru a:hover{ text-decoration-color: rgba(178,38,44,.55); } body.theme-tsuru button, body.theme-tsuru .btn, body.theme-tsuru .tab-button{ transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; } body.theme-tsuru button:focus-visible, body.theme-tsuru .btn:focus-visible, body.theme-tsuru .tab-button:focus-visible, body.theme-tsuru input:focus-visible, body.theme-tsuru select:focus-visible, body.theme-tsuru textarea:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(190,227,250,.65); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ body.theme-tsuru *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Rodapé flutuante (todas as páginas) – centralizado e suave */ body.theme-tsuru .app-footer{ position: fixed; left: 0; right: 0; width: fit-content; margin-left: auto; margin-right: auto; transform: none; /* "flutua" como o chatbot (sempre visível após login) */ bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900; /* abaixo de modais (1000+) */ text-align: center; font-size: 12px; line-height: 1.25; color: rgba(17,24,39,.56); opacity: .96; pointer-events: none; /* não bloqueia interações */ /* “Pill” suave (igual ao login) */ max-width: min(980px, 94vw); padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.62); border: 1px solid rgba(43,46,107,.12); backdrop-filter: blur(10px); box-shadow: 0 16px 36px rgba(0,0,0,.10); transition: transform .14s ease, opacity .14s ease; } body.theme-tsuru .app-footer a{ pointer-events: auto; color: inherit; text-decoration: underline; } /* Reserva espaço para o rodapé fixo (evita sobreposição) */ :root{ --app-footer-safe: 56px; } body.theme-tsuru{ padding-bottom: var(--app-footer-safe); } /* Centralização: mantém os blocos principais alinhados (sem mexer em lógica) */ body.theme-tsuru .app-header.tsuru-hero .header-content, body.theme-tsuru .navigation-tabs, body.theme-tsuru #system-paused-banner .system-paused-banner-inner, body.theme-tsuru #superadmin-toggle-container, body.theme-tsuru .section{ width: min(1400px, 96vw); margin-left: auto; margin-right: auto; } /* Tabs com moldura (mais “centralizado” visualmente) */ body.theme-tsuru .navigation-tabs{ border-radius: 18px; } /* Login: bloco "Apoio Chatbot" dentro do fundo texturizado (canto inferior esquerdo) */ body.theme-tsuru .tsuru-auth-hero{ position: relative; } body.theme-tsuru .tsuru-login-chatbot{ position: absolute; left: 18px; bottom: 18px; width: min(340px, calc(100% - 36px)); background: rgba(255,255,255,.86); border: 1px solid rgba(43,46,107,.14); border-radius: 16px; box-shadow: 0 22px 56px rgba(17,24,39,.14); backdrop-filter: blur(12px); padding: 12px 12px 10px; } body.theme-tsuru .tsuru-login-chatbot .tlc-head{ display:flex; gap: 10px; align-items: center; margin-bottom: 6px; } body.theme-tsuru .tsuru-login-chatbot .tlc-avatar{ width: 42px; height: 42px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(43,46,107,.14); } body.theme-tsuru .tsuru-login-chatbot .tlc-title{ font-weight: 800; color: var(--tsuru-navy); line-height: 1.1; } body.theme-tsuru .tsuru-login-chatbot .tlc-sub{ color: rgba(17,24,39,.62); font-size: 12px; } body.theme-tsuru .tsuru-login-chatbot .tlc-body{ color: rgba(17,24,39,.72); font-size: 13px; line-height: 1.25; } /* ========================= MOBILE/TABLET: evitar sobreposição no login - Em telas pequenas, o card "Apoio Chatbot" não pode ficar absoluto por cima do texto. - Passa a fazer parte do fluxo (position: relative) e reduz espaçamentos. ========================= */ @media (max-width: 520px){ body.theme-tsuru.tsuru-auth{ align-items: flex-start; padding-top: 14px; } body.theme-tsuru .tsuru-auth-wrap{ width: min(980px, 94vw); gap: 14px; } body.theme-tsuru .tsuru-auth-hero{ padding: 18px 18px 14px; } body.theme-tsuru .tsuru-auth-hero-inner{ align-items: flex-start; } /* Card do chatbot: deixa de ser absoluto e vira um bloco abaixo do texto */ body.theme-tsuru .tsuru-login-chatbot{ position: relative; left: auto; bottom: auto; width: 100%; margin-top: 12px; } /* Ajustes finos de tipografia para não estourar */ body.theme-tsuru .tsuru-auth-hero-title{ font-size: 20px; } body.theme-tsuru .tsuru-auth-hero-sub{ font-size: 14px; } } @media (max-width: 520px){ /* Reserva maior para o rodapé flutuante não cobrir botões/links no mobile */ :root{ --app-footer-safe: 84px; } body.theme-tsuru .app-footer{ font-size: 11px; padding: 7px 12px; } } /* Botão de navegação: Monitoramento de evasão (vermelho intenso, com sombra) */ body.theme-tsuru .navigation-tabs .tab-button[data-section-id="evasao-monitoramento"]{ color: #b0181e !important; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(176,24,30,.22); font-weight: 800; } body.theme-tsuru .navigation-tabs .tab-button[data-section-id="evasao-monitoramento"]:hover{ background: rgba(176,24,30,.08); } body.theme-tsuru .navigation-tabs .tab-button[data-section-id="evasao-monitoramento"].active{ background: #b0181e !important; color: #fff !important; text-shadow: none !important; box-shadow: 0 16px 34px rgba(176,24,30,.26) !important; border: 1px solid rgba(255,255,255,.12) !important; } /* === HEADER RESPONSIVE PATCH v1 === */ /* v219 - "SITE DE APOIO" (DESKTOP/PC) - no PC, o texto deve ficar pequeno e discreto no canto superior esquerdo - no mobile/tablet, mantém exatamente como está (regras @media max-width) */ @media (min-width: 981px){ /* v220: se algum título legado surgir como filho direto do header, esconda no DESKTOP */ body.theme-tsuru .app-header.tsuru-hero > :not(.header-content){ display: none !important; } body.theme-tsuru .app-header.tsuru-hero .site-apoio-text, body.theme-tsuru .app-header.tsuru-hero [data-site-apoio="1"]{ position: absolute !important; top: 10px !important; left: 12px !important; z-index: 5 !important; /* tamanho máximo 14px */ font-size: clamp(11px, 0.9vw, 14px) !important; line-height: 1.05 !important; padding: 5px 8px !important; border-radius: 12px !important; max-width: 220px; white-space: nowrap !important; } } /* Header: evitar sobreposição em tablet/celular */ @media (max-width: 980px){ body.theme-tsuru .app-header.tsuru-hero{ position: sticky; } body.theme-tsuru .app-header.tsuru-hero .header-content{ flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 14px; min-height: 92px; } body.theme-tsuru .app-header.tsuru-hero .app-logo{ max-height: 44px; width: auto; order: 1; } body.theme-tsuru .app-header.tsuru-hero .site-apoio-text, body.theme-tsuru .app-header.tsuru-hero [data-site-apoio="1"]{ order: 0; font-size: 12px; padding: 6px 10px; } body.theme-tsuru .app-header.tsuru-hero h1{ order: 2; width: 100%; margin: 0; padding: 0; display: flex; justify-content: center; } body.theme-tsuru .app-header.tsuru-hero h1 p{ margin: 0; font-size: 30px; line-height: 1.05; text-align: center; text-wrap: balance; } body.theme-tsuru .app-header.tsuru-hero .global-edicao-wrap{ order: 3 !important; width: 100%; justify-content: center !important; } body.theme-tsuru .app-header.tsuru-hero .global-edicao-select{ max-width: min(320px, 92vw); } body.theme-tsuru .app-header.tsuru-hero .tsuru-header-right{ order: 4; margin-left: auto; } } @media (max-width: 520px){ body.theme-tsuru .app-header.tsuru-hero .header-content{ padding: 10px 10px; } body.theme-tsuru .app-header.tsuru-hero h1 p{ font-size: 24px; } body.theme-tsuru .app-header.tsuru-hero .tsuru-header-mascot{ width: 42px; height: 42px; } } /* Login/auth: evitar texto sobreposto e garantir respiro */ @media (max-width: 520px){ body{ background-attachment: scroll; } .login-container, .register-container, .auth-container{ width: calc(100vw - 28px) !important; max-width: 520px !important; padding: 22px 18px !important; border-radius: 14px !important; } .login-container h1, .register-container h1, .auth-container h1{ font-size: 1.6em !important; } } /* Garante que qualquer texto no header não “vaze” */ body.theme-tsuru .app-header.tsuru-hero *{ max-width: 100%; } /* login two-panel responsive */ @media (max-width: 900px){ .login-wrapper, .login-grid, .login-layout{ display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important; } } @media (max-width: 520px){ .login-left, .login-right, .login-panel{ width: 100% !important; max-width: 100% !important; } .login-wrapper{ padding: 14px !important; } .login-left .card, .login-right .card{ border-radius: 16px !important; } } /* ========================================================= v237 - Remover texturas na navegação (fundo azul sólido) Ativado via body.no-texture (index.html) ========================================================= */ body.no-texture.theme-tsuru{ background: #f3f6fb !important; background-image: none !important; } body.no-texture.theme-tsuru .tsuru-hero, body.no-texture.theme-tsuru .app-header{ background: #1f2a6b !important; background-image: none !important; } body.no-texture.theme-tsuru .tsuru-auth-hero, body.no-texture.theme-tsuru .tsuru-auth-wrap{ background-image: none !important; }