/* ═══════════════════════════════════════════════ HikariHome ✨ — isolado dentro de .hh-scope para nunca colidir com o resto do painel EstudioPiercing. Todas as classes/ids têm prefixo "hh-". Fonte kawaii (Baloo 2 / Quicksand) mantida por pedido. ═══════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap'); /* ---------- Tema "rosa" (padrão) ---------- Nota: .hh-modal-fundo entra em todos os seletores de variáveis porque os modais são inseridos no , FORA de .hh-scope — sem isto abririam sem cores nem tipografia. */ .hh-scope, .hh-modal-fundo { --rosa-100: #fff0f6; --rosa-200: #ffe4ef; --rosa-300: #ffc9de; --rosa-400: #ffb6d1; --rosa-500: #ff8fb8; --rosa-600: #e86a9d; --rosa-700: #d94f7f; --hh-branco: #ffffff; --hh-texto: #5c4a52; --hh-texto-suave: #a88a97; --hh-fundo: linear-gradient(160deg, #fff6fa 0%, #ffe9f2 45%, #fff 100%); --hh-card-fundo: rgba(255, 255, 255, 0.85); --hh-sombra: 0 8px 24px rgba(255, 143, 184, 0.18); --hh-sombra-forte: 0 12px 32px rgba(255, 143, 184, 0.30); --hh-borda: 1.5px solid #ffd6e6; --hh-raio: 22px; --hh-raio-p: 14px; --hh-fonte-titulo: 'Baloo 2', cursive; --hh-fonte-corpo: 'Quicksand', sans-serif; } /* ---------- Tema "claro" (neutro, sem cor forte) ---------- */ .hh-scope[data-hh-theme="claro"], .hh-modal-fundo[data-hh-theme="claro"] { --rosa-100: #f5f3f4; --rosa-200: #ece8ea; --rosa-300: #d8d0d4; --rosa-400: #c3b7bd; --rosa-500: #9c8890; --rosa-600: #7d6b72; --rosa-700: #5f5158; --hh-texto: #4a4448; --hh-texto-suave: #948b8f; --hh-fundo: linear-gradient(160deg, #fbfafb 0%, #f2eff0 45%, #fff 100%); --hh-sombra: 0 8px 24px rgba(0,0,0,.08); --hh-sombra-forte: 0 12px 32px rgba(0,0,0,.14); --hh-borda: 1.5px solid #e6e1e3; } /* ---------- Tema "escuro" ---------- */ .hh-scope[data-hh-theme="escuro"], .hh-modal-fundo[data-hh-theme="escuro"] { --rosa-100: #3a2a33; --rosa-200: #46313d; --rosa-300: #5c3b4c; --rosa-400: #7a4a63; --rosa-500: #e884ad; --rosa-600: #f49dbf; --rosa-700: #ffb6d1; --hh-branco: #2b2027; --hh-texto: #f7e5ee; --hh-texto-suave: #c9a3b6; --hh-fundo: linear-gradient(160deg, #241a20 0%, #33212b 55%, #241a20 100%); --hh-card-fundo: rgba(58, 42, 51, 0.88); --hh-sombra: 0 8px 24px rgba(0,0,0,.35); --hh-sombra-forte: 0 12px 32px rgba(0,0,0,.5); --hh-borda: 1.5px solid #5c3b4c; } /* ---------- Tema "escuro com rosa" (mais vívido que o escuro simples) ---------- */ .hh-scope[data-hh-theme="escuro-rosa"], .hh-modal-fundo[data-hh-theme="escuro-rosa"] { --rosa-100: #3a1c2a; --rosa-200: #4d2236; --rosa-300: #6e2a49; --rosa-400: #99315e; --rosa-500: #ff4f93; --rosa-600: #ff7ab0; --rosa-700: #ffa8cb; --hh-branco: #241119; --hh-texto: #ffe9f2; --hh-texto-suave: #e0a8c0; --hh-fundo: linear-gradient(160deg, #1c0e15 0%, #2c1220 55%, #1c0e15 100%); --hh-card-fundo: rgba(44, 18, 32, 0.88); --hh-sombra: 0 8px 24px rgba(255,79,147,.25); --hh-sombra-forte: 0 12px 32px rgba(255,79,147,.4); --hh-borda: 1.5px solid #6e2a49; } /* ---------- Tema "turquesa" ---------- */ .hh-scope[data-hh-theme="turquesa"], .hh-modal-fundo[data-hh-theme="turquesa"] { --rosa-100: #e6fbfa; --rosa-200: #c8f5f2; --rosa-300: #9de8e3; --rosa-400: #6dd8d1; --rosa-500: #2cc2b8; --rosa-600: #1f9d95; --rosa-700: #177a74; --hh-texto: #294946; --hh-texto-suave: #7fa8a4; --hh-fundo: linear-gradient(160deg, #f2fdfc 0%, #dff8f6 45%, #fff 100%); --hh-sombra: 0 8px 24px rgba(44,194,184,.18); --hh-sombra-forte: 0 12px 32px rgba(44,194,184,.3); --hh-borda: 1.5px solid #b8ece7; } /* ---------- Tema "castanho" ---------- */ .hh-scope[data-hh-theme="castanho"], .hh-modal-fundo[data-hh-theme="castanho"] { --rosa-100: #f9f1ea; --rosa-200: #f0e0d0; --rosa-300: #e0c3a5; --rosa-400: #c9a374; --rosa-500: #a97a4c; --rosa-600: #8a5f38; --rosa-700: #6b482a; --hh-texto: #4a3b2f; --hh-texto-suave: #a08b74; --hh-fundo: linear-gradient(160deg, #fdf8f3 0%, #f5e9db 45%, #fff 100%); --hh-sombra: 0 8px 24px rgba(169,122,76,.18); --hh-sombra-forte: 0 12px 32px rgba(169,122,76,.3); --hh-borda: 1.5px solid #e8d5bd; } /* ---------- Tema "amarelo" ---------- */ .hh-scope[data-hh-theme="amarelo"], .hh-modal-fundo[data-hh-theme="amarelo"] { --rosa-100: #fefae6; --rosa-200: #fcf0bf; --rosa-300: #f8e18a; --rosa-400: #f0cb4d; --rosa-500: #dcae1f; --rosa-600: #b28a17; --rosa-700: #8a6a10; --hh-texto: #4a4020; --hh-texto-suave: #a3945a; --hh-fundo: linear-gradient(160deg, #fffdf5 0%, #fbf3d9 45%, #fff 100%); --hh-sombra: 0 8px 24px rgba(220,174,31,.18); --hh-sombra-forte: 0 12px 32px rgba(220,174,31,.3); --hh-borda: 1.5px solid #f2e2a3; } /* ---------- Tema "verde" ---------- */ .hh-scope[data-hh-theme="verde"], .hh-modal-fundo[data-hh-theme="verde"] { --rosa-100: #eefaf0; --rosa-200: #d5f2da; --rosa-300: #aee3ba; --rosa-400: #7ccb90; --rosa-500: #45ab63; --rosa-600: #328b4d; --rosa-700: #256b3b; --hh-texto: #28402f; --hh-texto-suave: #83a88e; --hh-fundo: linear-gradient(160deg, #f4fdf6 0%, #e0f5e4 45%, #fff 100%); --hh-sombra: 0 8px 24px rgba(69,171,99,.18); --hh-sombra-forte: 0 12px 32px rgba(69,171,99,.3); --hh-borda: 1.5px solid #c2e8ca; } /* ---------- Base ---------- */ .hh-scope { position: relative; overflow: hidden; border-radius: var(--hh-raio); min-height: 78vh; font-family: var(--hh-fonte-corpo); color: var(--hh-texto); background: var(--hh-fundo); transition: color .4s ease, background .4s ease; } .hh-scope [hidden] { display: none !important; } .hh-scope h1, .hh-scope h2, .hh-scope h3, .hh-modal-fundo h1, .hh-modal-fundo h2, .hh-modal-fundo h3 { font-family: var(--hh-fonte-titulo); color: var(--rosa-700); } .hh-scope button, .hh-modal-fundo button { font-family: var(--hh-fonte-corpo); cursor: pointer; } .hh-scope input, .hh-scope select, .hh-scope textarea, .hh-modal-fundo input, .hh-modal-fundo select, .hh-modal-fundo textarea { font-family: var(--hh-fonte-corpo); font-size: 0.95rem; color: var(--hh-texto); background: var(--hh-branco, #fff); border: var(--hh-borda); border-radius: var(--hh-raio-p); padding: 10px 14px; width: 100%; outline: none; transition: border-color .25s, box-shadow .25s; } .hh-scope input:focus, .hh-scope select:focus, .hh-scope textarea:focus, .hh-modal-fundo input:focus, .hh-modal-fundo select:focus, .hh-modal-fundo textarea:focus { border-color: var(--rosa-500); box-shadow: 0 0 0 4px rgba(255, 143, 184, 0.2); } .hh-scope textarea, .hh-modal-fundo textarea { resize: vertical; } .hh-scope button:focus-visible, .hh-scope .hh-nav-link:focus-visible { outline: 3px solid var(--rosa-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .hh-scope *, .hh-scope *::before, .hh-scope *::after { animation: none !important; transition: none !important; } } /* ---------- Pétalas de cerejeira (contidas, não fixas ao ecrã todo) ---------- */ .hh-sakura-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .hh-petala { position: absolute; top: -40px; font-size: 18px; opacity: 0.7; animation: hh-cair linear infinite; } @keyframes hh-cair { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 100% { transform: translateY(110vh) translateX(60px) rotate(340deg); } } /* ═══════════════ LOCK SCREEN (senha extra) ═══════════════ */ .hh-lock-screen { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 20px; } .hh-login-card { background: var(--hh-card-fundo); backdrop-filter: blur(8px); border: var(--hh-borda); border-radius: 32px; box-shadow: var(--hh-sombra-forte); padding: 44px 36px; width: 100%; max-width: 380px; text-align: center; animation: hh-aparecer .6s ease both; } .hh-login-mascote { font-size: 3.2rem; display: inline-block; animation: hh-flutuar 3s ease-in-out infinite; } @keyframes hh-flutuar { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } } .hh-login-titulo { font-size: 2.2rem; margin-top: 6px; } .hh-login-sub { color: var(--hh-texto-suave); margin: 6px 0 24px; font-size: 0.95rem; } .hh-campo-senha { position: relative; margin-bottom: 12px; } .hh-campo-senha input { padding-right: 46px; } .hh-toggle-senha { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.1rem; } .hh-login-erro { color: #e05575; font-size: 0.85rem; margin-bottom: 10px; animation: hh-tremer .4s; } @keyframes hh-tremer { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* ═══════════════ BOTÕES ═══════════════ */ .hh-btn { border: none; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 0.92rem; transition: transform .2s ease, box-shadow .2s ease, background .25s; } .hh-btn:hover { transform: translateY(-2px) scale(1.03); } .hh-btn:active { transform: scale(0.97); } .hh-btn-primario { background: linear-gradient(135deg, var(--rosa-500), var(--rosa-400)); color: #fff; box-shadow: var(--hh-sombra); } .hh-btn-primario:hover { box-shadow: var(--hh-sombra-forte); } .hh-btn-grande { width: 100%; padding: 13px; font-size: 1rem; } .hh-btn-suave { background: var(--rosa-200); color: var(--rosa-700); } .hh-btn-perigo { background: #ffd9dd; color: #c14a5e; } .hh-scope[data-hh-theme="escuro"] .hh-btn-perigo, .hh-scope[data-hh-theme="escuro-rosa"] .hh-btn-perigo, .hh-modal-fundo[data-hh-theme="escuro"] .hh-btn-perigo, .hh-modal-fundo[data-hh-theme="escuro-rosa"] .hh-btn-perigo { background: #5a3038; color: #ffb3bd; } .hh-btn-redondo { width: 40px; height: 40px; border-radius: 50%; background: var(--rosa-200); color: var(--rosa-700); font-size: 1.3rem; display: grid; place-items: center; } .hh-btn-mini { background: none; border: none; font-size: 0.95rem; padding: 4px; border-radius: 8px; transition: transform .15s; } .hh-btn-mini:hover { transform: scale(1.25); } /* ═══════════════ NAVEGAÇÃO INTERNA ═══════════════ */ .hh-navbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px; background: var(--hh-card-fundo); backdrop-filter: blur(10px); border-bottom: var(--hh-borda); border-radius: var(--hh-raio) var(--hh-raio) 0 0; } .hh-nav-marca { display: flex; align-items: center; gap: 8px; } .hh-nav-logo { font-size: 1.6rem; animation: hh-flutuar 4s ease-in-out infinite; } .hh-nav-nome { font-family: var(--hh-fonte-titulo); font-size: 1.35rem; font-weight: 700; color: var(--rosa-700); } .hh-nav-links { display: flex; gap: 6px; flex-wrap: wrap; } .hh-nav-link { background: none; border: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; color: var(--hh-texto-suave); font-size: 0.9rem; transition: background .25s, color .25s, transform .2s; } .hh-nav-link:hover { background: var(--rosa-200); color: var(--rosa-700); transform: translateY(-2px); } .hh-nav-link.hh-ativo { background: linear-gradient(135deg, var(--rosa-500), var(--rosa-400)); color: #fff; box-shadow: var(--hh-sombra); } /* ═══════════════ PÁGINAS ═══════════════ */ .hh-conteudo { position: relative; z-index: 2; width: 100%; padding: 28px 20px 40px; } .hh-pagina { display: none; animation: hh-aparecer .45s ease both; } .hh-pagina.hh-ativa { display: block; } @keyframes hh-aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hh-pagina-cabecalho { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .hh-pagina-cabecalho h1 { font-size: 1.8rem; } .hh-dica { width: 100%; color: var(--hh-texto-suave); font-size: 0.88rem; } .hh-hero { text-align: center; margin: 18px 0 30px; } .hh-hero h1 { font-size: 2.3rem; } .hh-hero p { color: var(--hh-texto-suave); margin-top: 6px; } .hh-brilho { display: inline-block; animation: hh-brilhar 1.8s ease-in-out infinite; } @keyframes hh-brilhar { 0%,100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.25) rotate(12deg); opacity: .75; } } /* ═══════════════ CARDS ═══════════════ */ .hh-card { background: var(--hh-card-fundo); backdrop-filter: blur(6px); border: var(--hh-borda); border-radius: var(--hh-raio); box-shadow: var(--hh-sombra); padding: 20px; transition: transform .25s ease, box-shadow .25s ease; } .hh-card:hover { transform: translateY(-3px); box-shadow: var(--hh-sombra-forte); } .hh-card-titulo { font-size: 1.1rem; margin-bottom: 12px; } .hh-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .hh-vazio { text-align: center; color: var(--hh-texto-suave); padding: 40px 10px; font-size: 1rem; } /* ═══════════════ DASHBOARD ═══════════════ */ .hh-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 22px; } .hh-dash-card { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; } .hh-dash-icone { font-size: 1.8rem; } .hh-dash-numero { font-family: var(--hh-fonte-titulo); font-size: 2.2rem; font-weight: 700; color: var(--rosa-600); } .hh-dash-label { color: var(--hh-texto-suave); font-size: 0.88rem; font-weight: 600; } .hh-dash-progresso { justify-content: center; } .hh-dash-percent { font-family: var(--hh-fonte-titulo); color: var(--rosa-600); font-weight: 700; } .hh-dash-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .hh-lista-simples { list-style: none; display: flex; flex-direction: column; gap: 8px; } .hh-lista-simples li { background: var(--rosa-100); border-radius: var(--hh-raio-p); padding: 10px 14px; font-size: 0.92rem; display: flex; gap: 10px; align-items: center; } .hh-lista-simples .hh-quando { font-weight: 700; color: var(--rosa-600); white-space: nowrap; } /* ═══════════════ OBJETIVOS ═══════════════ */ .hh-card-objetivo { display: flex; flex-direction: column; gap: 10px; } .hh-obj-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .hh-obj-nome { font-size: 1.15rem; } .hh-obj-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; } .hh-etiqueta { font-size: 0.75rem; font-weight: 700; background: var(--rosa-200); color: var(--rosa-700); padding: 4px 10px; border-radius: 999px; } .hh-obj-descricao { font-size: 0.9rem; color: var(--hh-texto-suave); } .hh-obj-datas { font-size: 0.8rem; color: var(--hh-texto-suave); display: flex; flex-direction: column; gap: 2px; } .hh-barra-externa { width: 100%; height: 14px; background: var(--rosa-200); border-radius: 999px; overflow: hidden; } .hh-barra-interna { height: 100%; width: 0%; background: linear-gradient(90deg, var(--rosa-400), var(--rosa-500)); border-radius: 999px; transition: width .5s ease; } .hh-obj-progresso-linha { display: flex; align-items: center; gap: 10px; } .hh-obj-progresso-linha input[type="range"] { flex: 1; padding: 0; border: none; accent-color: var(--rosa-500); background: transparent; } .hh-obj-progresso-num { font-weight: 700; color: var(--rosa-600); font-size: 0.85rem; min-width: 40px; text-align: right; } .hh-obj-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } /* ═══════════════ CONQUISTAS ═══════════════ */ .hh-card-conquista { position: relative; overflow: hidden; } .hh-card-conquista::after { content: "🏆"; position: absolute; right: -6px; bottom: -10px; font-size: 4rem; opacity: 0.12; } .hh-conq-info { font-size: 0.85rem; color: var(--hh-texto-suave); margin-top: 8px; display: flex; flex-direction: column; gap: 3px; } /* ═══════════════ HÁBITOS ═══════════════ */ .hh-habito-linha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--rosa-100); border-radius: var(--hh-raio-p); margin-bottom: 8px; } .hh-habito-nome { flex: 1; font-weight: 600; } .hh-habito-streak { font-size: 0.8rem; color: var(--rosa-600); font-weight: 700; white-space: nowrap; } .hh-habito-dias { display: flex; gap: 4px; } .hh-habito-dia { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--rosa-300); background: var(--hh-branco, #fff); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--hh-texto-suave); cursor: pointer; transition: transform .15s, background .2s, color .2s; } .hh-habito-dia:hover { transform: scale(1.1); } .hh-habito-dia.hh-feito { background: linear-gradient(135deg, var(--rosa-500), var(--rosa-400)); color: #fff; border-color: transparent; } /* ═══════════════ HORÁRIO SEMANAL ═══════════════ */ .hh-grade-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .hh-coluna-dia { background: var(--hh-card-fundo); border: var(--hh-borda); border-radius: var(--hh-raio); box-shadow: var(--hh-sombra); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .hh-coluna-dia h3 { text-align: center; font-size: 1.05rem; } .hh-coluna-dia.hh-dia-hoje { border-color: var(--rosa-500); box-shadow: 0 0 0 3px rgba(255,143,184,.25), var(--hh-sombra); } .hh-coluna-dia.hh-dia-hoje h3::after { content: " 🌟"; } .hh-item-horario { background: var(--rosa-100); border-radius: var(--hh-raio-p); padding: 9px 12px; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: grab; transition: transform .2s, box-shadow .2s; } .hh-item-horario:hover { transform: scale(1.02); box-shadow: var(--hh-sombra); } .hh-item-horario.hh-arrastando { opacity: 0.4; } .hh-item-horario .hh-hora { font-weight: 700; color: var(--rosa-600); white-space: nowrap; } .hh-item-horario .hh-atividade { flex: 1; } .hh-item-horario .hh-acoes { display: flex; gap: 2px; } .hh-btn-add-horario { border: 2px dashed var(--rosa-300); background: none; color: var(--rosa-600); border-radius: var(--hh-raio-p); padding: 8px; font-weight: 700; transition: background .25s, transform .2s; } .hh-btn-add-horario:hover { background: var(--rosa-100); transform: scale(1.02); } /* ═══════════════ CALENDÁRIO PESSOAL ═══════════════ */ .hh-calendario-card:hover { transform: none; } .hh-cal-controles { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .hh-cal-controles h2 { font-size: 1.3rem; text-transform: capitalize; } .hh-cal-dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 700; font-size: 0.8rem; color: var(--hh-texto-suave); margin-bottom: 6px; } .hh-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .hh-cal-dia { min-height: 76px; border-radius: var(--hh-raio-p); background: var(--rosa-100); padding: 6px; font-size: 0.8rem; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: transform .2s, box-shadow .2s, background .25s; border: 1.5px solid transparent; } .hh-cal-dia:hover { transform: scale(1.04); box-shadow: var(--hh-sombra); background: var(--rosa-200); } .hh-cal-dia.hh-fora { opacity: 0.35; } .hh-cal-dia.hh-cal-hoje { border-color: var(--rosa-500); background: var(--rosa-200); } .hh-cal-dia .hh-num { font-weight: 700; color: var(--rosa-700); } .hh-cal-evento-pill { border-radius: 6px; padding: 1px 6px; font-size: 0.68rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hh-cal-evento-pill.hh-feito { text-decoration: line-through; opacity: 0.6; } .hh-lista-eventos { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .hh-lista-eventos li { border-radius: var(--hh-raio-p); padding: 10px 12px; display: flex; align-items: center; gap: 8px; background: var(--rosa-100); border-left: 6px solid var(--rosa-500); font-size: 0.88rem; } .hh-lista-eventos .hh-evt-texto { flex: 1; } .hh-lista-eventos .hh-evt-nome { font-weight: 700; } .hh-lista-eventos .hh-evt-detalhe { font-size: 0.78rem; color: var(--hh-texto-suave); } .hh-lista-eventos li.hh-feito .hh-evt-nome { text-decoration: line-through; opacity: .6; } .hh-ponto-evento { width: 7px; height: 7px; border-radius: 50%; } /* ═══════════════ PERFIL / CONFIGURAÇÕES ═══════════════ */ .hh-config-bloco { margin-bottom: 18px; max-width: 520px; } .hh-form-vertical { display: flex; flex-direction: column; gap: 12px; } .hh-form-vertical label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; font-weight: 700; color: var(--hh-texto-suave); } .hh-linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hh-botoes-config { display: flex; flex-direction: column; gap: 10px; } .hh-tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .hh-tema-opcao { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--hh-raio-p); border: 2px solid transparent; background: var(--rosa-100); cursor: pointer; transition: transform .15s, border-color .2s; } .hh-tema-opcao:hover { transform: translateY(-2px); } .hh-tema-opcao.hh-tema-ativo { border-color: var(--rosa-600); } .hh-tema-swatch { width: 32px; height: 32px; border-radius: 50%; box-shadow: var(--hh-sombra); } .hh-tema-label { font-size: 0.72rem; font-weight: 700; color: var(--hh-texto); text-align: center; } /* ═══════════════ MODAIS ═══════════════ */ .hh-modal-fundo { position: fixed; inset: 0; background: rgba(90, 50, 70, 0.35); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 20px; font-family: var(--hh-fonte-corpo); color: var(--hh-texto); } .hh-modal { background: var(--hh-card-fundo); border: var(--hh-borda); border-radius: 26px; box-shadow: var(--hh-sombra-forte); padding: 26px; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; animation: hh-modalEntrar .35s ease both; } @keyframes hh-modalEntrar { from { opacity: 0; transform: scale(0.9) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .hh-modal h2 { margin-bottom: 16px; font-size: 1.3rem; } .hh-modal-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } /* ═══════════════ TOAST ═══════════════ */ .hh-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--rosa-500), var(--rosa-400)); color: #fff; font-weight: 700; padding: 12px 24px; border-radius: 999px; box-shadow: var(--hh-sombra-forte); z-index: 400; animation: hh-toastEntrar .4s ease both; font-size: 0.92rem; max-width: 90vw; text-align: center; } @keyframes hh-toastEntrar { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ═══════════════ RODAPÉ ═══════════════ */ .hh-rodape { position: relative; z-index: 2; text-align: center; padding: 18px; color: var(--hh-texto-suave); font-size: 0.85rem; } /* ═══════════════ RESPONSIVO ═══════════════ */ @media (max-width: 640px) { .hh-nav-link span { display: none; } .hh-nav-link { font-size: 1.1rem; padding: 8px 12px; } .hh-hero h1 { font-size: 1.7rem; } .hh-pagina-cabecalho h1 { font-size: 1.45rem; } .hh-linha-dupla { grid-template-columns: 1fr; } .hh-cal-dia { min-height: 58px; font-size: 0.7rem; } .hh-cal-evento-pill { display: none; } .hh-cal-dia .hh-pontos { display: flex; gap: 2px; flex-wrap: wrap; } .hh-conteudo { padding: 20px 14px 32px; } } @media (min-width: 641px) { .hh-cal-dia .hh-pontos { display: none; } }