:root { --portal-bg: radial-gradient(circle at 20% 0%, #fff3e8 0%, #ffe8d4 28%, #f8d4b0 58%, #f4f0eb 100%); --portal-surface: #ffffff; --portal-text: #1f2937; --portal-muted: #6b7280; --portal-primary: #c2410c; --portal-primary-strong: #9a3412; --portal-primary-soft: #fff7ed; --portal-border: #fed7aa; --portal-shadow: 0 20px 40px rgba(194, 65, 12, 0.12); --orange: #FF5E1F; --blue: #003380; --white: #ffffff; --bg-color: #f4f0eb; --text-dark: #333; /* Cores por jogador (tokens/peões) */ --p1-color: #111827; --p2-color: #d61f2a; --p3-color: #1fb554; /* Cor ativa (jogador da vez) */ --active-player-color: var(--blue); /* Tamanho base dos cards (responsivo com clamp) */ --card-min-height: clamp(100px, 11vh, 140px); --card-padding-y: clamp(8px, 1.2vh, 12px); --card-padding-x: clamp(8px, 1vw, 12px); --card-number-size: clamp(1.5rem, 2.2vw, 1.9rem); --card-title-size: clamp(0.72rem, 0.95vw, 0.85rem); --card-desc-size: clamp(0.6rem, 0.8vw, 0.72rem); --card-special-size: clamp(1.4rem, 2vw, 1.7rem); /* Mobile (padrão: pequeno) */ --card-min-height-mobile: 110px; --card-padding-mobile: 14px; --card-number-size-mobile: 1.85rem; /* Largura relativa do card na linha */ --card-flex-grow: 1; /* Token (peão de tabuleiro) - também responsivo */ --token-size: clamp(32px, 4vw, 45px); /* Quebra de linha (wrap) - ajuste fluido */ --card-wrap-basis: clamp(150px, calc((100% - 60px) / 5), 320px); /* Ajuste automático para caber na viewport (evita rolagem vertical) */ --board-fit-scale: 1; } /* Compact mode: ajustes adicionais quando a classe compact estiver aplicada no (reduz dimensões para maior densidade) */ html.compact .board-card { --card-min-height: clamp(80px, 11vh, 110px); --card-padding-y: 8px; --card-padding-x: 8px; --card-number-size: var(--card-number-size-mobile); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; } /* Diminui ainda mais a marca d'água em compact */ html.compact body::before { opacity: 0.14; } /* Ajustes tipográficos para compact (facilita leitura em telas pequenas) */ html.compact h1 { font-size: clamp(1.2rem, 3vw, 1.6rem); } /* Esconde o título do card em modo compacto (mobile) */ html.compact .card-title { display: block; /* Garante que o título seja mostrado */ } /* Tooltip do título no hover/focus em qualquer card */ .board-card[data-card-title]:not([data-card-title=""]) { position: relative; } .board-card[data-card-title]:not([data-card-title=""]):hover::after, .board-card[data-card-title]:not([data-card-title=""]):focus-within::after, .board-card[data-card-title]:not([data-card-title=""]).is-tooltip-open::after { content: attr(data-card-title); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); max-width: min(220px, 90vw); padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.82); color: #fff; font-weight: 800; font-size: 0.78rem; line-height: 1.2; text-align: center; white-space: normal; z-index: 12; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); } /* Estilos para o número do card no modo compacto: foco e ativo/touch */ html.compact .card-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: white; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12); pointer-events: auto; left: 50%; right: auto; bottom: 10px; top: auto; transform: translateX(-50%); } html.compact .card-number:active { transform: translateX(-50%) scale(0.96); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.18); } html.compact .card-number:focus { outline: 3px solid rgba(255, 255, 255, 0.18); outline-offset: 4px; } /* Mixin-like helper for snake layout directions */ .board-row.reverse { direction: rtl; } .board-row.reverse > * { direction: ltr; /* Reset text direction for children */ } /* Tablet pequeno: 2 cards por linha */ @media (min-width: 521px) and (max-width: 680px) { :root { --card-wrap-basis: calc((100% - 15px) / 2); --card-min-height: clamp(100px, 14vh, 135px); --card-padding-y: clamp(10px, 1.8vh, 14px); } .board-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.8vh, 14px); width: 100%; } .board-row .board-card { width: 100%; min-width: 0; } .board-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tablet: 3 cards por linha */ @media (min-width: 681px) and (max-width: 920px) { :root { --card-wrap-basis: calc((100% - 30px) / 3); --card-min-height: clamp(105px, 13vh, 140px); --card-padding-y: clamp(10px, 1.6vh, 14px); } .board-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vh, 14px); width: 100%; } .board-row .board-card { width: 100%; min-width: 0; } .board-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Desktop pequeno: 4 cards por linha */ @media (min-width: 921px) and (max-width: 1200px) { :root { --card-wrap-basis: calc((100% - 45px) / 4); --card-min-height: clamp(110px, 12vh, 145px); --card-padding-y: clamp(10px, 1.5vh, 14px); } .board-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.5vh, 14px); width: 100%; } .board-row .board-card { width: 100%; min-width: 0; } .board-container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Desktop: 5 cards por linha (padrão já definido) */ @media (min-width: 1201px) { :root { --card-min-height: clamp(115px, 11vh, 150px); } .board-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: 100%; } .board-container { grid-template-columns: repeat(5, minmax(0, 1fr)); } } html[data-active-player="1"] { --active-player-color: var(--p1-color); } html[data-active-player="2"] { --active-player-color: var(--p2-color); } html[data-active-player="3"] { --active-player-color: var(--p3-color); } /* Tamanho por card (sobrescreve o global quando definido) */ .board-card[data-card-size="xs"] { --card-min-height: clamp(95px, 12vh, 140px); --card-padding-y: clamp(7px, 1.2vh, 12px); --card-padding-x: 7px; --card-number-size: clamp(1.45rem, 2.35vw, 2.05rem); --card-title-size: clamp(0.68rem, 1.1vw, 0.82rem); --card-desc-size: clamp(0.6rem, 0.92vw, 0.76rem); --card-special-size: clamp(1.25rem, 2.4vw, 1.9rem); --card-min-height-mobile: clamp(75px, 9vh, 110px); --card-padding-mobile: clamp(7px, 1.1vh, 10px); --card-number-size-mobile: clamp(1.4rem, 6vw, 1.9rem); } .board-card[data-card-size="md"] { --card-min-height: clamp(160px, 18vh, 230px); --card-padding-y: clamp(14px, 1.8vh, 22px); --card-padding-x: 12px; --card-number-size: clamp(2.3rem, 3.2vw, 3.2rem); --card-title-size: clamp(0.9rem, 1.45vw, 1.1rem); --card-desc-size: clamp(0.72rem, 1.05vw, 0.88rem); --card-special-size: clamp(2rem, 2.8vw, 2.6rem); --card-min-height-mobile: clamp(110px, 12vh, 170px); --card-padding-mobile: clamp(12px, 1.6vh, 18px); --card-number-size-mobile: clamp(2.1rem, 8vw, 2.7rem); } .board-card[data-card-size="sm"] { --card-min-height: clamp(108px, 14vh, 180px); --card-padding-y: clamp(9px, 1.4vh, 16px); --card-padding-x: 9px; --card-number-size: clamp(1.7rem, 2.6vw, 2.6rem); --card-title-size: clamp(0.76rem, 1.2vw, 0.96rem); --card-desc-size: clamp(0.64rem, 0.92vw, 0.8rem); --card-special-size: clamp(1.55rem, 2.5vw, 2.25rem); --card-min-height-mobile: clamp(85px, 11vh, 135px); --card-padding-mobile: clamp(8px, 1.2vh, 14px); --card-number-size-mobile: clamp(1.65rem, 7vw, 2.25rem); } .board-card[data-card-size="lg"] { --card-min-height: clamp(185px, 22vh, 290px); --card-padding-y: clamp(16px, 2.1vh, 26px); --card-padding-x: 14px; --card-number-size: clamp(2.6rem, 3.6vw, 3.8rem); --card-title-size: clamp(0.98rem, 1.65vw, 1.25rem); --card-desc-size: clamp(0.78rem, 1.15vw, 0.92rem); --card-special-size: clamp(2.2rem, 3.1vw, 2.9rem); --card-min-height-mobile: clamp(120px, 14vh, 195px); --card-padding-mobile: clamp(14px, 1.8vh, 20px); --card-number-size-mobile: clamp(2.3rem, 9vw, 3rem); } /* Largura por card (relativa dentro da linha) */ .board-card[data-card-width="sm"] { --card-flex-grow: 0.75; } .board-card[data-card-width="md"] { --card-flex-grow: 1; } .board-card[data-card-width="lg"] { --card-flex-grow: 1.35; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } /* Esconde barras de rolagem (mantém rolagem funcionando) */ html { -ms-overflow-style: none; /* IE/Edge antigo */ overflow-x: hidden; overflow-y: auto; /* Permite rolagem por padrão */ } html::-webkit-scrollbar { width: 0; height: 0; } @supports (scrollbar-width: none) { html { scrollbar-width: none; /* Firefox */ } } body { font-family: 'Montserrat', sans-serif; background-color: var(--bg-color); background-image: radial-gradient(#dfe4ea 1px, transparent 1px); background-size: 20px 20px; padding: 0; color: var(--text-dark); /* Compensa o header fixo para não criar scroll vertical "de sobra" */ min-height: calc(100vh - var(--header-offset, 0px)); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; /* Permite rolagem por padrão */ -webkit-tap-highlight-color: transparent; /* Remove highlight azul no iOS */ -webkit-touch-callout: none; /* Remove callout no iOS */ position: relative; } /* Marca d'água da Câmara Municipal de Maricá */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url('./assets/camara-marica-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0.5; z-index: 0; pointer-events: none; } body>* { position: relative; z-index: 1; } body { padding-top: 0; } h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--blue); text-transform: uppercase; font-weight: 900; letter-spacing: -1px; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); } .header-subtitle { margin-top: 4px; font-weight: 800; color: rgba(0, 51, 128, 0.85); letter-spacing: -0.2px; font-size: 0.95rem; } /* Container Principal do Tabuleiro */ .board-container { max-width: none; width: 100%; margin: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.5vw, 18px); padding-top: clamp(56px, 7vh, 72px); padding-left: max(clamp(80px, 8vw, 100px), env(safe-area-inset-left)); padding-right: max(clamp(80px, 8vw, 100px), env(safe-area-inset-right)); padding-bottom: max(clamp(20px, 3vh, 28px), env(safe-area-inset-bottom)); flex: 1 0 auto; transform: scale(var(--board-fit-scale, 1)); transform-origin: top center; } .site-footer { width: 100%; padding: 18px 20px 26px; text-align: center; font-weight: 800; color: rgba(0, 0, 0, 0.62); margin-top: auto; } .site-footer .strong { font-weight: 900; color: var(--blue); } /* Layout para Desktop / Tablets (Grade de 4 colunas em zigue-zague conforme pedido na imagem) */ @media (min-width: 1201px) { /* Estilos das Linhas (Snake Layout) */ .board-row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 20px; width: 100%; margin-bottom: 12px; direction: ltr; /* Normal na 1ª linha */ } /* Alternância de direção para linhas reversas */ .board-row.reverse { direction: rtl; /* Reverte ordem das colunas no grid */ } .board-row.reverse > * { direction: ltr; /* Reseta direção do conteúdo */ } .board-row .board-card { width: 100%; min-width: 0; } /* Mantém o conteúdo do card lido da esquerda para a direita */ .board-row .board-card>* { direction: ltr; } /* Reversão para efeito "serpente" no desktop */ /* A reversão é tratada no .board-row.reverse acima */ } /* Estilo do Cartão (Casa do Tabuleiro) */ .board-card { --card-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.18)); flex: var(--card-flex-grow, 1) 1 var(--card-wrap-basis); /* Permite wrap com largura mínima */ min-height: var(--card-min-height); height: var(--card-min-height); min-width: clamp(140px, 18vw, 240px); /* Evita cards muito estreitos */ padding: var(--card-padding-y) var(--card-padding-x); /* Padding lateral menor para dar espaço ao texto */ border-radius: clamp(10px, 1.2vw, 14px); color: white; position: relative; cursor: pointer; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27), box-shadow 0.3s ease; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; /* Garante que os cartões não fiquem minúsculos nem gigantes */ align-self: flex-start; isolation: isolate; will-change: transform; --card-glow: rgba(255, 255, 255, 0.22); background-image: var(--card-overlay); background-size: cover; background-position: center; background-repeat: no-repeat; } .board-card::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0.55; transform: translateY(0) scale(1); transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1); background: radial-gradient(120px 86px at 16% 12%, rgba(255, 255, 255, 0.26), transparent 62%), radial-gradient(160px 120px at 92% 88%, rgba(0, 0, 0, 0.18), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 45%); } /* Drag & drop */ .board-card[draggable="true"] { cursor: grab; } html[data-cards-locked="true"] .board-card[draggable="false"] { cursor: pointer; } .board-card.dragging { opacity: 0.55; transform: scale(0.98); cursor: grabbing; } .board-card.drag-over { outline: 3px dashed rgba(255, 255, 255, 0.65); outline-offset: -6px; } /* Jogador / destaque */ .board-card.player { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.75), 0 18px 32px rgba(0, 0, 0, 0.22), 0 10px 34px var(--card-glow); } .player-token { position: fixed; left: 0; top: 0; z-index: 1900; display: inline-block; pointer-events: none; transform: translate(-9999px, -9999px); transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1); filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.15)) drop-shadow(0 2px 0 rgba(255, 255, 255, 0.08)); } .player-token::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--token-size) + 18px); height: calc(var(--token-size) + 18px); transform: translate(-50%, -50%); border-radius: 4px; background: rgba(255, 255, 255, 0.55); filter: blur(10px); opacity: 0; z-index: -1; } html[data-active-player="1"] .player-token[data-player="1"], html[data-active-player="2"] .player-token[data-player="2"], html[data-active-player="3"] .player-token[data-player="3"] { filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.18)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.15)); } .player-token.walking { animation: token-bob 0.45s ease-in-out infinite; } @keyframes token-bob { 0% { transform: translate(var(--tx), var(--ty)) translate(-50%, -100%) rotate(-1deg); } 50% { transform: translate(var(--tx), var(--ty)) translate(-50%, -104%) rotate(1deg); } 100% { transform: translate(var(--tx), var(--ty)) translate(-50%, -100%) rotate(-1deg); } } .player-token img { width: var(--token-size); height: var(--token-size); border-radius: 0; background: transparent; border: none; object-fit: cover; } .player-token[data-player="1"] img { filter: grayscale(1) brightness(0.22) contrast(1.35); } .player-token[data-player="2"] img { filter: brightness(0) saturate(100%) invert(14%) sepia(98%) saturate(7400%) hue-rotate(359deg) brightness(1.08) contrast(1.26); } .player-token[data-player="3"] img { filter: brightness(0) saturate(100%) invert(33%) sepia(78%) saturate(886%) hue-rotate(85deg) brightness(0.78) contrast(1.35); } .player-token .token-badge { display: none; position: absolute; right: -6px; top: -8px; width: 22px; height: 22px; border-radius: 999px; font-weight: 900; font-size: 0.72rem; color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18); background: linear-gradient(135deg, rgba(0, 51, 128, 0.95), rgba(58, 134, 255, 0.92)); } .player-token[data-player="1"] .token-badge { color: #111827; border: 2px solid rgba(0, 0, 0, 0.18); background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(229, 231, 235, 0.98)); text-shadow: none; } .player-token[data-player="2"] .token-badge { background: linear-gradient(135deg, rgba(214, 31, 42, 0.95), rgba(255, 128, 136, 0.92)); } .player-token[data-player="3"] .token-badge { background: linear-gradient(135deg, rgba(31, 181, 84, 0.92), rgba(128, 240, 174, 0.90)); } .board-card.step-flash { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 10px 18px rgba(0, 0, 0, 0.18), 0 12px 28px var(--card-glow); } .card-controls { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 5; } .card-controls button { width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.48); background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.95); font-weight: 900; cursor: pointer; line-height: 1; display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 0.72rem; letter-spacing: -0.02em; } .card-controls button:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.75); } /* Botão do dado */ .dice-fab { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 999px; border: 2px solid rgba(0, 51, 128, 0.18); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); margin: 0; width: fit-content; } .dice-fab button { border: none; background: var(--active-player-color); color: white; border-radius: 999px; padding: 6px 8px; font-weight: 900; cursor: pointer; display: flex; align-items: center; gap: 10px; } .dice-fab .btn-secondary { background: white; color: var(--blue); border: 2px solid rgba(0, 51, 128, 0.22); padding: 10px 12px; } .dice-fab .btn-secondary:hover { border-color: rgba(0, 51, 128, 0.38); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12); } .dice-fab button:disabled { opacity: 0.6; cursor: not-allowed; } .dice-value { min-width: 70px; text-align: center; font-weight: 900; color: var(--blue); } .die { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, #ffffff 0%, #f2f4f7 55%, #e8ebf1 100%); border: 2px solid rgba(0, 0, 0, 0.14); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -6px 12px rgba(0, 0, 0, 0.06), 0 10px 22px rgba(0, 0, 0, 0.22); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px; transform: perspective(300px) rotateX(8deg) rotateY(-10deg); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Botão de reset no card final */ .btn-reset-final { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: none; background: linear-gradient(135deg, #FF5E1F 0%, #ff7f3f 100%); color: #fff; cursor: pointer; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(255, 94, 31, 0.3); padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-reset-final:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 94, 31, 0.4); } @supports (background: color-mix(in srgb, #fff 50%, #000)) { .die { background: linear-gradient(145deg, color-mix(in srgb, var(--active-player-color), #ffffff 88%) 0%, color-mix(in srgb, var(--active-player-color), #f2f4f7 84%) 55%, color-mix(in srgb, var(--active-player-color), #e8ebf1 86%) 100%); border-color: rgba(0, 0, 0, 0.14); } } .dice-fab button:hover .die { transform: perspective(300px) rotateX(10deg) rotateY(-14deg) translateY(-1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -6px 12px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.26); } .die .pip { width: 6px; height: 6px; border-radius: 50%; background: #b10f1a; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); opacity: 0; justify-self: center; align-self: center; } .die.rolling { animation: die-shake 0.22s linear infinite; } /* Dado flutuante que “rola” pelo tabuleiro */ .die-runner { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; transform: translate(-9999px, -9999px); transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.15s ease; opacity: 1; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.25)); } .die-runner.hidden { opacity: 0; } .die-runner.no-transition { transition: none; } /* Ocultar/mostrar controles de ajuste dos cards */ html[data-hide-card-controls="true"] .card-controls { display: none !important; } /* Menu lateral (Sumário) */ .sidebar-toggle { position: fixed; top: 20px; left: 20px; width: 40px; height: 40px; border-radius: 14px; border: 2px solid rgba(0, 51, 128, 0.18); background: rgba(255, 255, 255, 0.92); color: var(--blue); font-weight: 900; font-size: 1.2rem; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.10); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; z-index: 2045; } .sidebar-toggle:active { transform: translateY(1px); } html[data-sidebar-open="true"] #sidebarToggle { opacity: 0; pointer-events: none; transform: translateX(-10px); transition: opacity 0.16s ease, transform 0.2s ease; } .sidebar-toggle.dice { left: 70px; border-color: rgba(255, 94, 31, 0.22); color: var(--orange); font-size: 1.5rem; z-index: 2045; } .sidebar-toggle.dice:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(100%); } .sidebar-toggle.right { left: auto; right: 20px; } .sidebar-toggle.auth { left: auto; right: 70px; width: auto; min-width: 40px; padding: 0 10px; gap: 6px; border-color: rgba(46, 204, 113, 0.22); color: #2ecc71; } .sidebar-toggle.auth .auth-toggle-icon { font-size: 16px; line-height: 1; display: flex; align-items: center; flex-shrink: 0; } .sidebar-toggle.auth .auth-toggle-name { font-size: 12px; font-weight: 700; white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; line-height: 1; } .sidebar-toggle.auth[data-logged-in="true"] { border-color: rgba(46, 204, 113, 0.5); background: rgba(46, 204, 113, 0.08); } .sidebar-toggle.right:not(.weather):not(.alert) { border-color: rgba(255, 94, 31, 0.22); color: var(--orange); } .sidebar-toggle.right .toggle-icon { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .sidebar-toggle.right .toggle-icon svg { width: 18px; height: 18px; display: block; } /* Botão de serviços: somente ícone */ html[data-sidebar-right-open="true"] .sidebar-toggle.right { opacity: 0; pointer-events: none; transform: translateX(10px); transition: opacity 0.16s ease, transform 0.2s ease; } /* Botão de tempo: ao lado do botão de serviços */ .sidebar-toggle.weather { left: auto; right: 70px; top: 20px; border-color: rgba(52, 152, 219, 0.22); color: #3498db; } .sidebar-toggle.weather .toggle-icon { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .sidebar-toggle.weather:hover { background: rgba(52, 152, 219, 0.1); border-color: rgba(52, 152, 219, 0.4); transform: scale(1.05); } /* Estilo para conteúdo do modal de tempo */ .weather-content { padding: 1rem; } .weather-weekly { margin-top: 1.5rem; text-align: left; } .weather-weekly-title { font-size: 1rem; font-weight: 700; color: #2c5aa0; margin-bottom: 0.6rem; } .weather-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; font-size: 0.8rem; color: #555; margin-bottom: 0.5rem; } .weather-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } .weather-legend-line { width: 18px; height: 3px; border-radius: 999px; display: inline-block; background: #ff6f61; } .weather-legend-line.min { background: #3a86ff; } .weather-legend-bar { width: 12px; height: 8px; border-radius: 2px; display: inline-block; background: rgba(30, 144, 255, 0.5); } .weather-chart { width: 100%; background: #f7fbff; border: 1px solid rgba(44, 90, 160, 0.15); border-radius: 10px; padding: 0.6rem 0.8rem; } .weather-chart svg { width: 100%; height: auto; display: block; } .weather-chart-grid { stroke: rgba(44, 90, 160, 0.15); stroke-width: 1; } .weather-temp-line { fill: none; stroke: #ff6f61; stroke-width: 2.5; } .weather-temp-line.min { stroke: #3a86ff; } .weather-precip-bar { fill: rgba(30, 144, 255, 0.5); } .weather-weekly-labels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-top: 0.5rem; font-size: 0.75rem; color: #666; text-align: center; } /* Estilos para botão de alertas */ .sidebar-toggle.alert { left: auto; right: 130px; top: 20px; border-color: rgba(255, 107, 107, 0.22); color: #ff6b6b; animation: pulse-alert 2s infinite; position: relative; z-index: 2046; } .sidebar-toggle.alert .toggle-icon { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .sidebar-toggle.alert:hover { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.4); transform: scale(1.05); animation: none; } /* Badge de notificação ativa */ .sidebar-toggle.alert.has-notifications::after { content: '●'; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background: #66bb6a; border-radius: 50%; border: 2px solid white; animation: pulse-badge 1.5s infinite; } @keyframes pulse-alert { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); } } @keyframes pulse-badge { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } } /* Estilo para conteúdo do modal de alertas */ .alert-content { padding: 1rem; max-height: 70vh; overflow-y: auto; } .sidebar-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.32); z-index: 2050; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: min(360px, 86vw); background: rgba(255, 255, 255, 0.98); z-index: 2060; transform: translateX(-104%); transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.2, 1); border-right: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 18px 0 40px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sidebar.right { left: auto; right: 0; transform: translateX(104%); border-right: none; border-left: 1px solid rgba(0, 0, 0, 0.08); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.18); } html[data-sidebar-open="true"] #sidebar { transform: translateX(0); } html[data-sidebar-right-open="true"] .sidebar.right { transform: translateX(0); } html[data-sidebar-open="true"] .sidebar-backdrop { opacity: 1; pointer-events: auto; } html[data-sidebar-right-open="true"] .sidebar-backdrop { opacity: 1; pointer-events: auto; } html[data-sidebar-open="true"] body { overflow: hidden; } html[data-sidebar-right-open="true"] body { overflow: hidden; } .sidebar-header { padding: 18px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .sidebar-title { font-weight: 900; color: var(--blue); letter-spacing: -0.3px; text-transform: uppercase; font-size: 1.02rem; } .sidebar-close { width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(0, 51, 128, 0.14); background: rgba(255, 255, 255, 0.92); color: var(--blue); font-weight: 900; font-size: 1.2rem; cursor: pointer; } .sidebar-content { padding: 10px 10px 14px; overflow: auto; flex: 1; min-height: 0; } .sidebar-footer { padding: 10px 10px 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .sidebar-item { width: 100%; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; background: #ffffff; padding: 10px 10px; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; cursor: pointer; text-align: left; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); } .sidebar-item:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.10); } .sidebar-item.group { position: relative; padding-right: 38px; } .sidebar-item.group::after { content: '›'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(0deg); color: rgba(0, 0, 0, 0.45); font-weight: 900; font-size: 18px; transition: transform 0.18s ease; } .sidebar-item.group.open::after { transform: translateY(-50%) rotate(90deg); } .sidebar-item.sub { margin-left: 12px; width: calc(100% - 12px); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.05); } .sidebar-badge { width: 44px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, rgba(0, 51, 128, 0.95), rgba(0, 51, 128, 0.78)); } .sidebar-badge svg { width: 18px; height: 18px; display: block; } .sidebar-badge.orange { background: linear-gradient(135deg, rgba(255, 94, 31, 0.95), rgba(255, 94, 31, 0.78)); } .sidebar-badge.red { background: linear-gradient(135deg, rgba(214, 31, 42, 0.95), rgba(214, 31, 42, 0.78)); } .health-list { margin-top: 10px; display: grid; gap: 10px; } .health-tabs { margin-top: 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .health-tabs .btn-secondary.active { outline: 3px solid rgba(214, 31, 42, 0.18); border-color: rgba(214, 31, 42, 0.22); } .health-pressure { margin-top: 12px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.95); padding: 14px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); } .health-pressure .title { font-weight: 900; color: var(--blue); font-size: 1.05rem; } .health-pressure .note { margin-top: 6px; color: rgba(0, 0, 0, 0.62); font-weight: 800; font-size: 0.9rem; line-height: 1.25; } .health-form { margin-top: 12px; display: grid; gap: 10px; } .health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .health-field { display: grid; gap: 6px; } .health-field label { font-weight: 900; color: rgba(0, 0, 0, 0.72); font-size: 0.86rem; } .health-field input { height: 44px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.12); padding: 0 12px; font-weight: 900; outline: none; } .health-field input:focus { border-color: rgba(214, 31, 42, 0.35); box-shadow: 0 0 0 4px rgba(214, 31, 42, 0.12); } .health-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; } .health-result { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(0, 0, 0, 0.16); background: rgba(255, 255, 255, 0.75); font-weight: 900; color: rgba(0, 0, 0, 0.72); text-align: center; } .health-result.success { border-color: rgba(46, 204, 113, 0.5); background: rgba(46, 204, 113, 0.12); color: #1a9b54; } .health-result.error { border-color: rgba(231, 76, 60, 0.5); background: rgba(231, 76, 60, 0.1); color: #c0392b; } .health-history { margin-top: 12px; display: grid; gap: 10px; } .health-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06); } .health-row .main { min-width: 0; } .health-row .line1 { font-weight: 900; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .health-row .line2 { margin-top: 2px; font-weight: 800; color: rgba(0, 0, 0, 0.62); font-size: 0.86rem; } .health-row .mini-btn { border: 1px solid rgba(0, 0, 0, 0.10); background: #fff; border-radius: 12px; padding: 8px 10px; font-weight: 900; cursor: pointer; } .water-progress { margin-top: 10px; border-radius: 999px; height: 14px; background: rgba(0, 0, 0, 0.08); overflow: hidden; } .water-progress>div { height: 100%; width: 0; background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(59, 130, 246, 0.72)); transition: width 0.25s ease; } .water-kpis { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .water-kpi { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06); } .water-kpi .k { font-weight: 900; color: rgba(0, 0, 0, 0.62); font-size: 0.84rem; } .water-kpi .v { margin-top: 4px; font-weight: 900; color: var(--blue); font-size: 1.05rem; } .water-quick { margin-top: 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .water-quick .mini-btn { padding: 10px 12px; } .upa-marker { background: transparent; border: none; } .upa-pin { width: 46px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; color: #fff; background: linear-gradient(135deg, rgba(214, 31, 42, 0.98), rgba(214, 31, 42, 0.78)); border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18); letter-spacing: 0.4px; font-size: 0.82rem; } .calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .calendar-title { font-weight: 900; color: var(--blue); letter-spacing: -0.2px; } .calendar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } #calendarModal .modal-content { max-width: 680px; padding: 26px; max-height: calc(100vh - 40px); overflow: auto; } .calendar-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendar-dow { font-size: 0.72rem; font-weight: 900; color: rgba(0, 51, 128, 0.7); text-transform: uppercase; letter-spacing: 0.6px; text-align: center; padding: 6px 0; } .calendar-day { position: relative; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.85); min-height: 44px; padding: 7px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .calendar-day:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); } .calendar-day.muted { opacity: 0.45; } .calendar-day.selected { outline: 3px solid rgba(255, 94, 31, 0.35); border-color: rgba(255, 94, 31, 0.4); } .calendar-day.holiday-national { border-color: rgba(0, 51, 128, 0.28); background: linear-gradient(180deg, rgba(0, 51, 128, 0.06), rgba(255, 255, 255, 0.86)); } .calendar-day.holiday-municipal { border-color: rgba(214, 31, 42, 0.28); background: linear-gradient(180deg, rgba(214, 31, 42, 0.06), rgba(255, 255, 255, 0.86)); } .calendar-badge { position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 11px; letter-spacing: 0.4px; color: #fff; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14); border: 1px solid rgba(255, 255, 255, 0.7); } .calendar-badge.national { background: linear-gradient(135deg, rgba(0, 51, 128, 0.95), rgba(0, 51, 128, 0.78)); } .calendar-badge.municipal { background: linear-gradient(135deg, rgba(214, 31, 42, 0.95), rgba(214, 31, 42, 0.78)); } .calendar-num { font-weight: 900; color: rgba(0, 0, 0, 0.75); font-size: 0.9rem; } .calendar-dot { position: absolute; right: 10px; bottom: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--orange); box-shadow: 0 6px 10px rgba(255, 94, 31, 0.35); } .calendar-panel { margin-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 12px; } .calendar-field label { display: block; font-weight: 900; font-size: 0.78rem; margin-bottom: 6px; color: rgba(0, 0, 0, 0.7); } .calendar-field input, .calendar-field textarea { width: 100%; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.14); padding: 10px 12px; font-family: inherit; outline: none; background: rgba(255, 255, 255, 0.9); } .calendar-field textarea { min-height: 72px; resize: vertical; } .calendar-list { margin-top: 10px; } @media (max-width: 520px) { .water-kpis { grid-template-columns: 1fr; } } @media (max-width: 520px) { .health-grid { grid-template-columns: 1fr; } } .health-item { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; padding: 12px 12px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); } .health-item .h { font-weight: 900; color: var(--blue); font-size: 0.98rem; line-height: 1.1; } .health-item .s { margin-top: 4px; color: rgba(0, 0, 0, 0.60); font-weight: 800; font-size: 0.86rem; } .sidebar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sidebar-text .t { font-weight: 800; color: var(--text-dark); font-size: 0.92rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-text .s { color: rgba(0, 0, 0, 0.55); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-item.active { outline: 3px solid rgba(0, 51, 128, 0.20); border-color: rgba(0, 51, 128, 0.18); } @media (max-width: 900px) { .sidebar-toggle { width: 42px; height: 42px; border-radius: 14px; } .sidebar-toggle.auth { width: auto; min-width: 42px; } } @keyframes die-shake { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(1px, -1px) rotate(-6deg); } 50% { transform: translate(-1px, 1px) rotate(6deg); } 75% { transform: translate(1px, 1px) rotate(-3deg); } 100% { transform: translate(0, 0) rotate(0deg); } } /* Mapeamento das faces do dado */ .die[data-value="1"] .p5 { opacity: 1; } .die[data-value="2"] .p1, .die[data-value="2"] .p9 { opacity: 1; } .die[data-value="3"] .p1, .die[data-value="3"] .p5, .die[data-value="3"] .p9 { opacity: 1; } .die[data-value="4"] .p1, .die[data-value="4"] .p3, .die[data-value="4"] .p7, .die[data-value="4"] .p9 { opacity: 1; } .die[data-value="5"] .p1, .die[data-value="5"] .p3, .die[data-value="5"] .p5, .die[data-value="5"] .p7, .die[data-value="5"] .p9 { opacity: 1; } .die[data-value="6"] .p1, .die[data-value="6"] .p4, .die[data-value="6"] .p7, .die[data-value="6"] .p3, .die[data-value="6"] .p6, .die[data-value="6"] .p9 { opacity: 1; } /* =========================== .board-card — versão refatorada e consolidada =========================== */ .board-card { /* Base */ box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; /* Comportamento como flex-item */ flex: var(--card-flex-grow, 1) 1 var(--card-wrap-basis, 220px); /* Dimensões mínimas */ min-width: clamp(140px, 18vw, 240px); min-height: var(--card-min-height, 115px); height: auto; /* Espaçamento */ padding: var(--card-padding-y, 10px) var(--card-padding-x, 10px); /* Aparência */ color: #fff; border-radius: clamp(10px, 1.2vw, 14px); background-image: var(--card-overlay); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.10); transition: transform 0.28s cubic-bezier(.175, .885, .32, 1.27), box-shadow 0.2s ease; /* Overflow visible para não cortar elementos absolutamente posicionados */ overflow: visible; isolation: isolate; will-change: transform; -webkit-tap-highlight-color: transparent; } .board-card:hover { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14); } /* Variantes de Cor */ .bg-orange { --card-overlay: linear-gradient(135deg, rgba(255, 94, 31, 0.82), rgba(255, 122, 63, 0.62)); border-bottom: 5px solid #cc4008; --card-glow: rgba(255, 94, 31, 0.42); } .bg-blue { --card-overlay: linear-gradient(135deg, rgba(0, 51, 128, 0.82), rgba(58, 134, 255, 0.60)); border-bottom: 5px solid #002255; --card-glow: rgba(58, 134, 255, 0.34); } /* Conteúdo do Cartão */ .card-number { font-size: var(--card-number-size); font-weight: 900; color: rgba(255, 255, 255, 0.22); position: absolute; bottom: 15px; right: 15px; line-height: 1; z-index: 1; pointer-events: none; text-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); } .card-content-wrapper { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; min-height: 0; overflow: visible; position: relative; z-index: 2; } .card-title { font-size: var(--card-title-size); font-weight: 800; text-transform: uppercase; margin-bottom: 4px; line-height: 1.15; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Evita estourar o card em títulos longos */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; word-break: break-word; } .card-desc { font-size: var(--card-desc-size); font-weight: 400; opacity: 0.95; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } /* Casos Especiais (Início e Fim) */ .card-special { font-size: var(--card-special-size); text-align: center; align-items: center; text-transform: uppercase; } /* Controle absoluto (ex.: .card-controls) */ .board-card .card-controls { position: absolute; top: 8px; right: 8px; z-index: 5; pointer-events: auto; } /* MODAL */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 35, 80, 0.9); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 6200; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); overflow-y: auto; pointer-events: none; /* Permite scroll em modais grandes */ } .modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } body.modal-open { overflow: hidden !important; touch-action: none; } .modal-content { background: white; padding: 40px; border-radius: 20px; max-width: 900px; width: 100%; position: relative; transform: scale(0.8); transition: transform 0.3s ease; text-align: center; border: 4px solid var(--blue); max-height: calc(100vh - 80px); overflow-y: auto; } #modalDemo .modal-title { font-weight: 900; color: var(--blue); letter-spacing: -0.4px; text-transform: uppercase; font-size: 1.05rem; } #modalDemo .modal-body { font-size: 0.92rem; line-height: 1.4; } #modalDemo h6 { font-weight: 900; font-size: 0.9rem; letter-spacing: 0.3px; margin-bottom: 6px; text-transform: uppercase; } #modalDemo ul { margin: 0; padding-left: 1.1rem; font-weight: 800; font-size: 0.86rem; } /* Modal maior (Símbolos de Maricá) */ .symbols-modal-content { max-width: 1120px; padding: 26px; max-height: calc(100vh - 40px); overflow: auto; text-align: left; } .symbols-modal-content .modal-title, .symbols-modal-content .modal-text { text-align: center; } .symbols-video { position: sticky; top: 0; /* Stays at the top of the content area (within padding) */ z-index: 100; background: white; padding-top: 10px; padding-bottom: 10px; margin-top: 0; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; } .symbols-video video, .symbols-video iframe { width: 100%; height: min(62vh, 520px); border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16); background: #000; } .modal-overlay.active .modal-content { transform: scale(1); } /* MODAL MAPA (Pontos Turísticos) */ .map-modal-content { max-width: 980px; padding: 26px; } .map-frame { width: 100%; height: min(62vh, 520px); border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16); } .map-frame.leaflet-container { background: #e5e7eb; } .map-actions { margin-top: 14px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* MODAL ORGANOGRAMA (Vereadores) */ .organogram-modal-content { max-width: 1080px; padding: 26px; text-align: left; max-height: calc(100vh - 40px); overflow: auto; } .organogram-modal-content .modal-title, .organogram-modal-content .modal-text { text-align: center; } .org-note { margin-top: 10px; text-align: center; font-weight: 800; font-size: 0.92rem; opacity: 0.78; } .org-note a { color: var(--blue); text-decoration: none; font-weight: 900; } .org-section { margin-top: 18px; } .org-section-title { margin: 12px 0 10px; font-size: 1.08rem; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: -0.3px; } .org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .council-card { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.98); padding: 14px 12px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-height: 220px; } .council-photo { width: 86px; height: 86px; border-radius: 999px; overflow: hidden; border: 3px solid rgba(0, 51, 128, 0.18); background: radial-gradient(circle at 30% 20%, rgba(58, 134, 255, 0.18), rgba(0, 0, 0, 0) 60%), #f3f4f6; display: grid; place-items: center; } .council-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .council-name { font-weight: 900; color: #111827; font-size: 0.95rem; line-height: 1.15; } .council-meta { font-weight: 900; color: rgba(0, 0, 0, 0.6); font-size: 0.78rem; line-height: 1.2; } .council-aka { margin-top: -2px; font-weight: 900; color: rgba(0, 0, 0, 0.55); font-size: 0.78rem; line-height: 1.2; } .council-link { margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 999px; border: 2px solid rgba(0, 51, 128, 0.14); background: rgba(255, 255, 255, 0.92); color: var(--blue); font-weight: 900; font-size: 0.82rem; text-decoration: none; width: 100%; } button.council-link { cursor: pointer; -webkit-appearance: none; appearance: none; } .council-link:hover { border-color: rgba(0, 51, 128, 0.28); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10); } .council-card.officer { border-color: rgba(255, 94, 31, 0.22); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10); } .council-card.officer .council-photo { border-color: rgba(255, 94, 31, 0.22); } /* MODAL PERFIL (Vereador) */ .profile-modal-content { max-width: 920px; padding: 26px; text-align: left; } .profile-header { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin-bottom: 8px; } .profile-photo { width: 110px; height: 110px; border-radius: 999px; overflow: hidden; border: 4px solid rgba(0, 51, 128, 0.18); background: #f3f4f6; display: grid; place-items: center; box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12); } .profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-title { font-size: 1.55rem; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.1; } .profile-aka { margin-top: 6px; font-weight: 900; color: rgba(0, 0, 0, 0.6); } .profile-meta { margin-top: 4px; font-weight: 900; color: rgba(0, 0, 0, 0.65); } .profile-actions { margin-top: 10px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .profile-full-title { margin-top: 6px; font-weight: 900; color: rgba(0, 0, 0, 0.72); text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.92rem; } .profile-full-note { margin-top: 6px; color: rgba(0, 0, 0, 0.60); font-weight: 700; font-size: 0.95rem; } .profile-iframe { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.10); background: #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10); } .profile-iframe iframe { width: 100%; height: clamp(260px, 52vh, 520px); border: 0; display: block; } .profile-divider { margin: 14px 0; height: 1px; background: rgba(0, 0, 0, 0.08); } .modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; cursor: pointer; color: white; font-weight: bold; z-index: 1001; background: rgba(0, 0, 0, 0.1); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .modal-close:hover { background: rgba(0, 0, 0, 0.2); } /* Específico para modais de auth */ .auth-modal .modal-close { color: white !important; background: rgba(0, 0, 0, 0.3) !important; border: 2px solid rgba(255, 255, 255, 0.5) !important; } .auth-modal .modal-close:hover { background: rgba(0, 0, 0, 0.5) !important; border-color: white !important; } .modal-number { font-size: 4rem; font-weight: 900; color: #eee; margin-bottom: -20px; display: block; } .modal-title { font-size: 1.8rem; color: var(--blue); margin-bottom: 20px; text-transform: uppercase; font-weight: 800; } .modal-text { font-size: 1.1rem; color: #444; line-height: 1.6; } .modal-extra { margin-top: 16px; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.10); background: rgba(0, 51, 128, 0.04); text-align: left; } .modal-extra h3 { margin: 10px 0 8px; font-size: 1.05rem; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: -0.2px; } .modal-extra p { margin: 6px 0; color: rgba(0, 0, 0, 0.70); font-weight: 700; line-height: 1.5; } .modal-extra ul { margin: 8px 0 0; padding-left: 18px; } .modal-extra li { margin: 6px 0; color: rgba(0, 0, 0, 0.72); font-weight: 700; line-height: 1.45; } .modal-extra .modal-note { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 94, 31, 0.22); background: rgba(255, 94, 31, 0.08); color: rgba(120, 55, 0, 0.92); font-weight: 800; font-size: 0.98rem; line-height: 1.35; } .modal-hint { margin-top: 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0, 51, 128, 0.14); background: rgba(0, 51, 128, 0.06); color: rgba(0, 51, 128, 0.88); font-weight: 800; font-size: 0.98rem; line-height: 1.35; } .modal-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } .btn-action { background: var(--orange); color: white; padding: 12px 30px; border: none; border-radius: 50px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.2s; min-height: 44px; /* Tamanho mínimo para touch */ touch-action: manipulation; /* Melhora performance em touch */ } .btn-action:hover { background: #e04b12; } .btn-secondary { background: white; color: var(--blue); border: 2px solid rgba(0, 51, 128, 0.22); padding: 12px 22px; border-radius: 50px; font-size: 1rem; font-weight: 900; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; min-height: 44px; /* Tamanho mínimo para touch */ touch-action: manipulation; /* Melhora performance em touch */ } .btn-secondary:hover { border-color: rgba(0, 51, 128, 0.38); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } /* RESPONSIVIDADE */ @media (max-width: 900px) { .modal-content { padding: 24px 18px; } .modal-title { font-size: 1.4rem; } .modal-text { font-size: 1rem; } .symbols-modal-content, .map-modal-content, .organogram-modal-content, .profile-modal-content { padding: 18px; } .profile-header { grid-template-columns: 90px 1fr; gap: 12px; } .profile-photo { width: 90px; height: 90px; } .profile-title { font-size: 1.3rem; } .org-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .board-row { width: 100%; gap: clamp(12px, 2vw, 18px); } .board-container { gap: clamp(12px, 2vw, 18px); } .board-row.reverse { flex-direction: row; } .board-card { min-height: var(--card-min-height-mobile); /* Mantém o card dentro da célula do grid em tablets (evita overflow/encostar) */ min-width: 0; width: 100%; flex-direction: column; align-items: flex-start; text-align: left; padding: var(--card-padding-mobile); touch-action: manipulation; justify-content: center; } .card-number { position: absolute; bottom: 10px; right: 12px; top: auto; font-size: var(--card-number-size-mobile); margin-right: 0; width: auto; text-align: right; color: rgba(255, 255, 255, 0.22); text-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); } .card-controls { top: 6px; left: 6px; gap: 4px; } .card-controls button { width: 20px; height: 20px; font-size: 0.68rem; } :root { --token-size: 32px; } .card-content-wrapper { flex: 1; } .card-title { margin-bottom: 0; line-height: 1.3; } /* Ajuste para Início e Fim */ .card-special { justify-content: center; } .card-special::after { content: ''; } } /* Classes utilitárias de espaçamento */ .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } /* Classes para popups do mapa */ .map-popup-title { font-weight: 900; } .map-popup-subtitle { opacity: 0.85; font-weight: 700; margin-top: 4px; font-size: 12px; } .map-popup-photo { width: 100%; max-width: 280px; border-radius: 12px; margin-top: 10px; display: block; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); } .map-popup-photo-credit { margin-top: 8px; font-size: 12px; font-weight: 800; opacity: 0.85; } .map-popup-photo-credit a { color: #003380; text-decoration: none; } .map-popup-no-photo { margin-top: 10px; font-size: 12px; font-weight: 800; opacity: 0.75; } .map-popup-tag-upa { margin-top: 6px; font-size: 12px; font-weight: 900; color: #d61f2a; } /* MOBILE OVERRIDES (FINAL) */ /* Garantia de empilhamento vertical em telas pequenas */ @media (max-width: 520px) { :root { --card-wrap-basis: 100%; --card-min-height: clamp(95px, 15vh, 130px); --card-padding-y: clamp(10px, 2vh, 14px); } html, body { display: block !important; height: auto !important; min-height: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: auto !important; } html::-webkit-scrollbar { width: 6px !important; height: 6px !important; } html::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 10px; } .board-container { display: block !important; height: auto !important; min-height: 100% !important; flex: none !important; transform: none !important; padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; padding-top: clamp(30px, 8vh, 54px) !important; padding-bottom: 40px !important; } .board-row, .board-row.reverse { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 12px !important; direction: ltr !important; width: 100% !important; } .board-row .board-card, .board-card { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; height: auto !important; position: relative !important; } .card-number { position: absolute !important; bottom: 12px !important; right: 15px !important; left: auto !important; text-align: right !important; font-size: var(--card-number-size-mobile) !important; } /* Sidebars: comportamento overlay em telas pequenas */ #sidebar, #sidebarRight { position: fixed; top: 0; bottom: 0; width: min(360px, 88%); max-width: 360px; background: #fff; color: var(--text-dark); transform: translateX(-110%); transition: transform 0.28s ease; z-index: 2200; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); overflow-y: auto; } #sidebarRight { right: 0; left: auto; transform: translateX(110%); } /* Garantir que as sidebars abram no mobile (sobrescrevendo o transform acima) */ html[data-sidebar-open="true"] #sidebar, html[data-sidebar-right-open="true"] #sidebarRight { transform: translateX(0) !important; } /* Backdrop visível no mobile */ html[data-sidebar-open="true"] #sidebarBackdrop, html[data-sidebar-right-open="true"] #sidebarBackdrop { display: block !important; opacity: 1 !important; pointer-events: auto !important; } .sidebar-toggle { position: fixed !important; top: 12px !important; left: 12px !important; z-index: 5000 !important; /* Valor bem alto para ficar acima de tudo */ width: 44px !important; height: 44px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; visibility: visible !important; color: var(--blue) !important; } /* Centraliza o botão do dado no topo em mobile */ .sidebar-toggle.dice { left: 50% !important; transform: translateX(-50%) !important; } .sidebar-toggle.right { left: auto !important; right: 12px !important; color: var(--orange) !important; } .site-footer { padding: 14px 12px 18px; font-size: 0.92rem; } } /* Estilos para os novos módulos */ .module-section { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--bg-color); padding: 20px; z-index: 1000; overflow-y: auto; } .module-section h2 { color: var(--blue); margin-bottom: 20px; } .module-section form { margin-top: 20px; } .module-section input, .module-section textarea { display: block; width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .module-section input[type="file"] { padding: 10px; background: #fff; } .talento-public-photo-preview-box { margin: 8px 0 14px; padding: 12px; border: 1px dashed rgba(0, 51, 128, 0.2); border-radius: 10px; background: rgba(0, 51, 128, 0.03); } .talento-public-photo-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); } .talento-public-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 14px; border: 1px solid rgba(0, 51, 128, 0.12); border-radius: 12px; background: #ffffff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .talento-public-head { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #003380, #ff5e1f); color: #fff; font-weight: 800; } .talento-public-head img { width: 100%; height: 100%; object-fit: cover; display: block; } .talento-public-body { min-width: 0; } .talento-public-body h3, .talento-public-body p, .talento-public-body small { margin: 0; } .talento-public-body p, .talento-public-body small { margin-top: 4px; } .module-section button { background: var(--orange); color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; } .module-section button:hover { background: var(--blue); } /* =========================================== ESTILOS PARA PÁGINA ADMIN =========================================== */ .admin-header { background: var(--blue); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .header-logo { display: flex; align-items: center; gap: 1rem; } .header-logo img { height: 50px; width: auto; } .header-logo h1 { margin: 0; font-size: 1.5rem; } .header-actions { display: flex; align-items: center; gap: 1rem; } /* Controles de visualização (Cards/Lista) */ .view-controls { display: flex; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; background: #f8f9fa; } .view-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; background: transparent; color: #6c757d; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; } .view-btn:hover { background: #e9ecef; color: #495057; } .view-btn.active { background: var(--blue); color: white; } .view-btn .material-icons { font-size: 1.1rem; } /* Modal de preview de imagem */ .image-preview-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; } .image-preview-overlay { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem; } .image-preview-content { background: white; border-radius: 12px; max-width: 90vw; max-height: 90vh; width: auto; height: auto; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .image-preview-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid #e9ecef; } .image-preview-header h3 { margin: 0; color: var(--blue); font-size: 1.25rem; } .btn-close { background: none; border: none; color: #6c757d; cursor: pointer; padding: 0.5rem; border-radius: 6px; transition: background-color 0.3s ease; } .btn-close:hover { background: #f8f9fa; color: #495057; } .image-preview-body { padding: 1.5rem; display: flex; justify-content: center; align-items: center; max-height: 70vh; overflow: auto; } .image-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .admin-container { display: flex; min-height: calc(100vh - 80px); } .admin-nav { width: 250px; background: #f8f9fa; border-right: 1px solid #dee2e6; padding: 2rem 0; } .admin-nav ul { list-style: none; margin: 0; padding: 0; } .admin-nav li { margin: 0; } .admin-nav a { display: block; padding: 1rem 2rem; color: #495057; text-decoration: none; border-left: 3px solid transparent; transition: all 0.3s ease; } .admin-nav a:hover, .admin-nav a.active { background: #e9ecef; border-left-color: var(--blue); color: var(--blue); } .admin-content { flex: 1; padding: 2rem; background: white; } .admin-section { display: none; } .admin-section.active { display: block; } .admin-section h2 { color: var(--blue); margin-bottom: 1rem; font-size: 2rem; } .admin-section p { color: #6c757d; margin-bottom: 2rem; font-size: 1.1rem; } .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .config-item { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border: 1px solid #dee2e6; } .config-item h3 { margin: 0 0 1rem 0; color: var(--blue); font-size: 1.2rem; } .config-item input[type="file"] { margin-bottom: 1rem; width: 100%; } .config-item button { background: var(--blue); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .config-item button:hover { background: #002244; } .config-form { background: #f8f9fa; padding: 2rem; border-radius: 8px; border: 1px solid #dee2e6; margin-bottom: 2rem; } .form-row { margin-bottom: 1rem; } .form-row label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #495057; } .form-row input, .form-row textarea, .form-row select { width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem; } .form-row textarea { min-height: 100px; resize: vertical; } .config-list { margin-top: 2rem; } .config-list h3 { color: var(--blue); margin-bottom: 1rem; } .config-item-display { background: #f8f9fa; padding: 1rem; border-radius: 4px; border: 1px solid #dee2e6; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .config-item-media { display: flex; align-items: center; gap: 0.9rem; min-width: 0; } .config-item-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: #ffffff; border: 1px solid #dbe3ec; padding: 0.35rem; flex-shrink: 0; } .config-item-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .config-item-meta span { color: #6b7280; font-size: 0.9rem; } .white-label-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .white-label-image-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 160px; padding: 1rem; border: 1px solid #dee2e6; border-radius: 12px; background: #f8fafc; } .white-label-image-label { font-weight: 700; color: var(--blue); } .white-label-image-preview { max-width: 100%; max-height: 96px; object-fit: contain; border-radius: 10px; background: #ffffff; border: 1px solid #dbe3ec; padding: 0.4rem; } .white-label-image-preview-favicon { width: 72px; height: 72px; } .white-label-image-empty { color: #6b7280; font-size: 0.92rem; text-align: center; } .white-label-image-status { color: #64748b; font-size: 0.82rem; text-align: center; line-height: 1.4; } .white-label-file-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; } .btn-delete { background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; } .btn-delete:hover { background: #c82333; } .btn-action { background: var(--orange); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 600; } .btn-action:hover { background: #e55a1a; } .btn-secondary { background: #6c757d; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.9rem; } .btn-secondary:hover { background: #5a6268; } /* Responsividade (legado - .admin-nav) */ @media (max-width: 768px) { .admin-nav { width: 100%; border-right: none; border-bottom: 1px solid #dee2e6; } .admin-nav ul { display: flex; overflow-x: auto; } .admin-nav li { flex-shrink: 0; } .admin-nav a { padding: 1rem; white-space: nowrap; } .config-grid { grid-template-columns: 1fr; gap: 1rem; } } /* ========== ESTILOS MODERNOS PARA PAINEL ADMIN ========== */ /* Layout principal */ .admin-wrapper { min-height: 100vh; background: #f8f9fa; } .admin-container { display: flex; min-height: calc(100vh - 80px); } .admin-sidebar { width: 280px; background: white; border-right: 1px solid #e9ecef; padding: 2rem 0; box-shadow: 2px 0 10px rgba(0,0,0,0.05); } .admin-content { flex: 1; padding: 2rem; background: #f8f9fa; } .main-content { flex: 1; padding: 2rem; max-width: none; margin: 0; display: flex; flex-direction: column; } /* Header */ .admin-header { background: var(--blue); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; } .header-left { display: flex; align-items: center; gap: 1rem; } .header-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; font-weight: 600; } .header-right { display: flex; align-items: center; gap: 1rem; } .user-info { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); border-radius: 8px; } /* Sidebar Navigation */ .admin-sidebar { width: 280px; background: white; border-right: 1px solid #e9ecef; padding: 2rem 0; box-shadow: 2px 0 10px rgba(0,0,0,0.05); } .nav-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem; cursor: pointer; transition: all 0.3s ease; border-left: 3px solid transparent; color: #6c757d; } .nav-item:hover { background: #f8f9fa; border-left-color: var(--blue); color: var(--blue); } .nav-item.active { background: rgba(0, 51, 128, 0.05); border-left-color: var(--blue); color: var(--blue); font-weight: 600; } .nav-item.nav-separator { margin-top: 0.75rem; border-top: 1px solid #e1e8ed; padding-top: 0.75rem; } .nav-mobile-only { display: none; } /* Seções */ .admin-section { display: none; } .admin-section.active { display: block; } .section-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #e9ecef; } .section-header h1 { color: var(--blue); margin-bottom: 0.5rem; font-size: 2.5rem; font-weight: 700; } .section-header p { color: #6c757d; font-size: 1.1rem; margin: 0; } /* Cards de conteúdo */ .content-card { background: white; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e9ecef; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #f8f9fa; } .card-header h3 { margin: 0; color: var(--blue); font-size: 1.5rem; font-weight: 600; } /* Utilitários de layout para telas administrativas */ .hidden-display { display: none; } .d-block { display: block; } .flex-grow-1 { flex: 1; } .ml-auto { margin-left: auto; } .inline-flex-center-gap-6 { display: inline-flex; align-items: center; gap: 6px; } .inline-flex-center-gap-8 { display: inline-flex; align-items: center; gap: 8px; } .inline-flex-center-gap-10 { display: inline-flex; align-items: center; gap: 0.6rem; } .inline-flex-wrap-center-gap-14 { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; } .relative-box { position: relative; } .grid-two-cols-gap-10 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hint-muted { color: #6c757d; } .mt-4 { margin-top: 0.25rem; } .mt-5 { margin-top: 5px; } .mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; } .mb-0 { margin-bottom: 0; } .min-h-18 { min-height: 18px; } .min-h-38 { min-height: 38px; } .video-preview-compact { max-width: 300px; max-height: 200px; } .capa-preview-compact { max-width: 200px; max-height: 150px; border: 1px solid #ddd; padding: 5px; } .img-preview-200 { max-width: 200px; max-height: 200px; } .bordered-rounded { border: 1px solid #ddd; border-radius: 4px; } .btn-mini { font-size: 0.8rem; padding: 0.25rem 0.5rem; } .input-inline-compact { padding: 0.25rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; } .card-preview-box { margin-top: 2rem; padding: 1rem; border: 1px solid #e9ecef; border-radius: 8px; background: #f8f9fa; } .card-preview-element-static { margin: 0; cursor: default; } .content-card-column-tight { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .access-header { padding: 1rem 1.5rem; flex-shrink: 0; flex-wrap: wrap; gap: 0.6rem; } .access-search-icon { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: #aaa; pointer-events: none; } .access-search-input { padding: 0.4rem 0.6rem 0.4rem 2rem; border: 1.5px solid #e1e8ed; border-radius: 8px; font-size: 0.84rem; width: 220px; outline: none; } .access-list-scroll { flex: 1; overflow-y: auto; max-height: calc(100vh - 340px); padding: 0 1.5rem 0.5rem; } .access-footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.5rem; background: #fffbeb; border-top: 2px solid #f59e0b; flex-shrink: 0; } .access-pending-count { font-size: 0.88rem; color: #92400e; font-weight: 600; } .mt-8 { margin-top: 8px; } .mt-1rem { margin-top: 1rem; } .mb-1rem { margin-bottom: 1rem; } .max-w-180 { max-width: 180px; } .fs-18 { font-size: 18px; } .fs-14 { font-size: 14px; } .fs-09 { font-size: 0.9rem; } .fs-08 { font-size: 0.8rem; } .text-muted-666 { color: #666; } .no-wrap { white-space: nowrap; } .inline-flex-wrap-center-gap-1rem { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; width: 100%; } .inline-flex-wrap-center-gap-075 { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; width: 100%; } .admin-search-input { flex: 1; min-width: 220px; padding: 0.7rem 1rem; border: 2px solid #e1e8ed; border-radius: 10px; font-size: 0.95rem; } .admin-filter-select { padding: 0.65rem 0.75rem; border: 2px solid #e1e8ed; border-radius: 10px; } .admin-filter-select.compact-padding { padding: 0.6rem; } .overflow-x-auto { overflow-x: auto; } .table-loading-cell { text-align: center; padding: 2rem; color: #aaa; } .pagination-center-gap { display: flex; gap: 0.5rem; justify-content: center; } .pagination-center-align-gap10 { display: flex; align-items: center; justify-content: center; gap: 10px; } .detail-reply-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee; } .label-strong { font-weight: 600; } .mb-05 { margin-bottom: 0.5rem; } .textarea-admin-reply { width: 100%; padding: 0.75rem; border: 2px solid #e1e8ed; border-radius: 10px; resize: vertical; } .reply-actions-wrap { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.75rem; flex-wrap: wrap; } .icon-inline-middle { vertical-align: middle; } .mr-8 { margin-right: 8px; } .fs-16 { font-size: 16px; } .text-muted-888 { color: #888; } .mt-15 { margin-top: 1.5rem; } .mb-15 { margin-bottom: 1.5rem; } .grid-two-cols-gap-15 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .inline-flex-center-gap-04 { display: inline-flex; align-items: center; gap: 0.4rem; } .clickable-label { cursor: pointer; } /* Formulários */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { font-weight: 600; color: #495057; font-size: 0.95rem; } .form-group input, .form-group textarea, .form-group select { padding: 0.75rem; border: 2px solid #e9ecef; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; background: white; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 51, 128, 0.1); } .form-group textarea { resize: vertical; min-height: 100px; } .form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #f8f9fa; } /* Botões */ .btn-primary { background: var(--blue); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary:hover { background: #002244; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 51, 128, 0.3); } .btn-secondary { background: #6c757d; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-secondary:hover { background: #5a6268; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3); } .btn-danger { background: #dc3545; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: background 0.3s ease; } .btn-danger:hover { background: #c82333; } /* Dashboard */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .stat-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e9ecef; display: flex; align-items: center; gap: 1.5rem; transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .stat-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue), #0056b3); color: white; font-size: 1.5rem; } .stat-info h3 { margin: 0 0 0.5rem 0; font-size: 2rem; font-weight: 700; color: var(--blue); } .stat-info p { margin: 0; color: #6c757d; font-weight: 500; } /* Ações rápidas */ .quick-actions { margin-top: 3rem; } .quick-actions h2 { color: var(--blue); margin-bottom: 1.5rem; font-size: 1.8rem; } .actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .action-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e9ecef; display: flex; flex-direction: column; align-items: center; gap: 1rem; cursor: pointer; transition: all 0.3s ease; text-align: center; } .action-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: var(--blue); } .action-card span:first-child { font-size: 2rem; color: var(--blue); } .action-card span:last-child { font-weight: 600; color: #495057; } /* Listas */ .items-list { display: flex; flex-direction: column; gap: 1rem; } .video-item, .card-item { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; transition: all 0.3s ease; cursor: grab; position: relative; } .card-item:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); } .card-item.dragging { opacity: 0.5; transform: rotate(5deg); cursor: grabbing; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; width: 100%; } .card-header h4 { margin: 0; color: var(--blue); font-size: 1.2rem; flex: 1; } .card-order { background: var(--blue); color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; } .card-content { flex: 1; margin: 0.5rem 0; } .card-content p { margin: 0.25rem 0; color: #6c757d; line-height: 1.4; } .card-content img { max-width: 100px; max-height: 100px; border: 1px solid #ddd; border-radius: 4px; margin: 0.5rem 0; } .card-footer { font-size: 0.8rem; color: #6c757d; margin-top: 0.5rem; } .card-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .card-actions button { padding: 0.25rem 0.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8rem; transition: all 0.2s ease; } .btn-edit { background: #ffc107; color: #212529; } .btn-edit:hover { background: #e0a800; } .btn-danger { background: #dc3545; color: white; } .btn-danger:hover { background: #c82333; } .btn-secondary { background: #6c757d; color: white; } .btn-secondary:hover { background: #5a6268; } /* Drag and drop indicators */ .card-item::before { content: "⋮⋮"; position: absolute; left: 10px; top: 10px; color: #ccc; font-size: 12px; line-height: 1; pointer-events: none; } .card-item:hover::before { color: var(--blue); } /* Formulário de cards */ #card-form-container { margin-top: 2rem; } #card-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } #card-form .form-group { margin-bottom: 1rem; } #card-form .form-group.full-width { grid-column: 1 / -1; } #card-form textarea { resize: vertical; min-height: 80px; } #card-form .form-actions { grid-column: 1 / -1; display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1rem; } /* Preview da imagem */ #imagem-preview { text-align: center; margin-top: 1rem; } #preview-img { max-width: 200px; max-height: 200px; border: 2px solid #e9ecef; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Placeholder para drag and drop */ .card-item.placeholder { background: #f8f9fa !important; border: 2px dashed #ccc !important; color: #6c757d !important; text-align: center; padding: 2rem !important; margin-bottom: 1rem !important; opacity: 0.7; } .card-item.placeholder .material-icons { font-size: 2rem; display: block; margin-bottom: 0.5rem; } /* Melhorias na responsividade */ @media (max-width: 768px) { .card-item { flex-direction: column; align-items: stretch; padding: 1rem; } .card-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .card-order { align-self: flex-end; font-size: 0.7rem; } #card-form { grid-template-columns: 1fr; gap: 0.75rem; } #card-form .form-group { margin-bottom: 0.75rem; } .card-actions { flex-direction: column; gap: 0.5rem; } .card-actions button { width: 100%; justify-content: center; } } /* Animações suaves */ .card-item { transition: all 0.3s ease; } .card-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); } .card-item.dragging { transform: rotate(2deg) scale(1.02); z-index: 1000; } /* Loading states */ button:disabled { opacity: 0.6; cursor: not-allowed; } button:disabled .material-icons { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Melhorias no preview */ #card-preview-container { border: 1px solid #e9ecef; border-radius: 8px; background: #f8f9fa; margin-top: 1rem; } #card-preview-element { margin: 0; cursor: default !important; transform: none !important; } #card-preview-element::before { display: none; } /* Formulários modernos */ .modern-form { background: #f8f9fa; padding: 2rem; border-radius: 12px; border: 1px solid #e9ecef; } /* Configurações */ .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .config-item { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border: 1px solid #dee2e6; } .config-item h3 { margin: 0 0 1rem 0; color: var(--blue); font-size: 1.2rem; } .config-item input[type="file"] { margin-bottom: 1rem; width: 100%; } .config-item button { background: var(--blue); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .config-item button:hover { background: #002244; } .config-form { background: #f8f9fa; padding: 2rem; border-radius: 8px; border: 1px solid #dee2e6; margin-bottom: 2rem; } .form-row { margin-bottom: 1rem; } .form-row label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #495057; } .form-row input, .form-row textarea, .form-row select { width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem; } .form-row textarea { min-height: 100px; resize: vertical; } .config-list { margin-top: 2rem; } .config-list h3 { color: var(--blue); margin-bottom: 1rem; } .config-item-display { background: #f8f9fa; padding: 1rem; border-radius: 4px; border: 1px solid #dee2e6; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .btn-delete { background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; } .btn-delete:hover { background: #c82333; } .btn-action { background: var(--orange); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 600; } .btn-action:hover { background: #e55a1a; } .btn-secondary { background: #6c757d; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.9rem; } .btn-secondary:hover { background: #5a6268; } /* ========== MENU HAMBURGUER MOBILE/TABLET ========== */ /* Botão hamburguer (oculto no desktop) */ .hamburger-btn { display: none; background: none; border: none; color: white; cursor: pointer; padding: 0.4rem; border-radius: 8px; align-items: center; justify-content: center; transition: background 0.2s; margin-right: 0.5rem; flex-shrink: 0; } .hamburger-btn:hover { background: rgba(255,255,255,0.18); } .hamburger-btn .material-icons { font-size: 1.8rem; } /* Overlay escuro atrás do sidebar */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 149; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* Cabeçalho interno do drawer (oculto no desktop) */ .sidebar-drawer-header { display: none; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #e9ecef; background: var(--blue); color: white; position: sticky; top: 0; z-index: 1; } .sidebar-drawer-title { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.1rem; } .sidebar-close-btn { background: none; border: none; color: rgba(255,255,255,0.85); cursor: pointer; padding: 0.4rem; border-radius: 8px; display: flex; align-items: center; transition: background 0.2s; } .sidebar-close-btn:hover { background: rgba(255,255,255,0.2); color: white; } .sidebar-close-btn .material-icons { font-size: 1.5rem; } /* ======= RESPONSIVIDADE DO ADMIN (TABLET E MOBILE) ======= */ @media (max-width: 1024px) { /* Mostrar hamburguer */ .hamburger-btn { display: flex; } /* Mostrar cabeçalho do drawer */ .sidebar-drawer-header { display: flex; } /* Sidebar vira drawer fixo fora da tela */ .admin-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; z-index: 150; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; padding-top: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.18); border-right: 1px solid #e9ecef; } /* Drawer aberto */ .admin-sidebar.open { transform: translateX(0); } /* Container principal ocupa 100% da largura */ .admin-container { flex-direction: column; } /* Header fica em linha única */ .admin-header { flex-direction: row; padding: 0.75rem 1.25rem; gap: 0; } /* Remove menus/ações superiores no mobile/tablet */ .header-right { display: none; } .nav-mobile-only { display: flex; } /* Ocultar texto do usuário em tablets */ .user-info #user-info { display: none; } /* Conteúdo principal */ .main-content { padding: 1.25rem; } /* Remover barra lateral do layout do grid-acessors ao navegar */ .admin-content { padding: 1.25rem; } } @media (max-width: 768px) { /* Header mais compacto */ .admin-header { padding: 0.6rem 1rem; } /* Ocultar texto "Sair" no botão de logout */ .logout-text { display: none; } /* Formulários: coluna única */ .form-grid { grid-template-columns: 1fr; gap: 1rem; } .stats-grid { grid-template-columns: 1fr; gap: 1rem; } .actions-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .content-card { padding: 1rem; } .card-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; } .section-header h1 { font-size: 1.8rem; } /* Gráficos lado a lado colapsam para coluna */ .admin-section > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ========== BACKGROUND IMAGE CONFIGURATION ========== */ /* Background image upload section */ .background-config { margin-top: 2rem; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e9ecef; } .background-config h3 { color: var(--blue); margin-bottom: 1.5rem; font-size: 1.3rem; } .background-upload { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; margin-bottom: 2rem; } .background-upload .form-group { margin-bottom: 0; } .background-preview { margin-top: 1rem; padding: 1rem; border: 2px dashed #e9ecef; border-radius: 8px; text-align: center; background: #f8f9fa; } .background-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .background-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1rem; } /* Aplicar background ao body quando configurado */ body[data-background-image] { background-image: var(--background-image-url); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } body[data-background-image] .admin-wrapper { background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* ========== MENSAGENS ========== */ .admin-message { position: fixed; top: 20px; right: 20px; padding: 1rem 1.5rem; border-radius: 8px; color: white; font-weight: 500; z-index: 1000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); max-width: 400px; } .admin-message.success { background-color: #28a745; } .admin-message.error { background-color: #dc3545; } .admin-message.info { background-color: #007bff; } .notif-regiao-fields-hidden { display: none; } /* Campos da seção de notificações do admin */ #notificacoes .label-strong { display: inline-block; margin-bottom: 0.4rem; font-size: 0.95rem; } #notificacoes .input-admin-form { width: 100%; min-height: 46px; padding: 0.72rem 0.9rem; border: 1.5px solid #d5d9e4; border-radius: 10px; background: #ffffff; color: #1f2937; font-family: "Inter", "Segoe UI", sans-serif; font-size: 0.98rem; line-height: 1.45; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #notificacoes textarea.input-admin-form { min-height: 128px; resize: vertical; } #notificacoes .input-admin-form:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16); } /* ========== VÍDEOS ========== */ .videos-list { margin-top: 2rem; } .video-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 1rem; background: #f9f9f9; } .video-info { flex: 1; } .video-info h4 { margin: 0 0 0.5rem 0; color: #333; } .video-info p { margin: 0.25rem 0; color: #666; } .video-info small { display: block; color: #888; font-size: 0.85rem; } .video-actions { display: flex; gap: 0.5rem; } .video-actions button { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .video-actions .btn-secondary { background: #007bff; color: white; } .video-actions .btn-danger { background: #dc3545; color: white; } /* ========== CARDS PERSONALIZADOS ========== */ .cards-list { margin-top: 2rem; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; } .card-item { border: 2px solid #ddd; border-radius: 8px; padding: 1rem; background: #fff; cursor: move; transition: all 0.2s ease; } .card-item:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-item.dragging { opacity: 0.5; transform: rotate(5deg); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .card-header h4 { margin: 0; font-size: 1.1rem; } .card-order { font-size: 0.8rem; color: #666; font-weight: bold; } .card-content { margin-bottom: 0.5rem; } .card-content p { margin: 0.25rem 0; line-height: 1.4; } .card-content img { border-radius: 4px; margin-top: 0.5rem; } .card-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } /* Estilos para upload de imagem */ .imagem-preview { margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; background: #f9f9f9; } .imagem-preview img { display: block; margin-bottom: 0.5rem; border-radius: 4px; } } .card-item.dragging { opacity: 0.5; transform: rotate(5deg); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .card-header h4 { margin: 0; font-size: 1.1rem; } .card-order { font-size: 0.8rem; color: #666; background: rgba(255, 255, 255, 0.8); padding: 0.25rem 0.5rem; border-radius: 4px; } .card-content { margin-bottom: 1rem; } .card-content p { margin: 0.25rem 0; line-height: 1.4; } .card-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .card-actions button { padding: 0.4rem 0.8rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .card-actions .btn-secondary { background: #007bff; color: white; } .card-actions .btn-danger { background: #dc3545; color: white; } /* Formulários */ .form-section { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; border: 1px solid #e9ecef; } .form-section h3 { margin-top: 0; margin-bottom: 1rem; color: #333; } /* === ESTILOS PARA VÍDEOS === */ .video-player-wrapper { text-align: center; } .video-player { width: 100%; max-width: 800px; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-bottom: 1.5rem; } .video-info { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; text-align: left; max-width: 800px; margin: 0 auto; } .video-info h4 { color: var(--blue); margin: 0 0 1rem 0; font-size: 1.4rem; } .video-info p { color: #495057; line-height: 1.6; margin-bottom: 1rem; } .video-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; color: #6c757d; margin-bottom: 1rem; } .video-meta span { background: white; padding: 0.25rem 0.75rem; border-radius: 20px; border: 1px solid #e9ecef; } .header-actions { display: flex; gap: 1rem; align-items: center; } .btn-large { padding: 0.875rem 1.5rem; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(0, 51, 128, 0.3); } .btn-large .material-icons { font-size: 1.25rem; } .stat-badge { background: var(--orange); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3); } .search-input { padding: 0.5rem 1rem; border: 2px solid #e9ecef; border-radius: 25px; font-size: 0.9rem; width: 250px; transition: border-color 0.3s ease; } .search-input:focus { outline: none; border-color: var(--blue); } .filter-select { padding: 0.5rem 1rem; border: 2px solid #e9ecef; border-radius: 8px; font-size: 0.9rem; background: white; cursor: pointer; } .filter-select:focus { outline: none; border-color: var(--blue); } .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .video-card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; overflow: hidden; transition: all 0.3s ease; } .video-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .video-thumbnail { position: relative; height: 180px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: hidden; } .video-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .video-card:hover .video-cover { transform: scale(1.05); } .video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #adb5bd; font-size: 3rem; } .video-duration { font-size: 0.8rem; color: #6c757d; background: rgba(0, 0, 0, 0.7); color: white; padding: 0.25rem 0.5rem; border-radius: 4px; margin-top: 0.5rem; } .video-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 51, 128, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .video-card:hover .video-overlay { opacity: 1; } .btn-play { background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .btn-play:hover { background: white; transform: scale(1.1); } .btn-play .material-icons { color: var(--blue); font-size: 2rem; margin-left: 2px; } .video-info { padding: 1.25rem; } .video-title { color: var(--blue); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.75rem 0; line-height: 1.3; } .video-description { color: #495057; font-size: 0.9rem; line-height: 1.4; margin: 0 0 1rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #6c757d; margin-bottom: 0.75rem; } .video-category { background: #e9ecef; color: #495057; padding: 0.25rem 0.5rem; border-radius: 12px; font-weight: 500; } .video-size { color: #6c757d; } .video-date { color: #6c757d; } .video-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; } .tag { background: #f8f9fa; color: #495057; padding: 0.2rem 0.5rem; border-radius: 10px; font-size: 0.75rem; border: 1px solid #e9ecef; } .video-actions { display: flex; gap: 0.5rem; padding: 0 1.25rem 1.25rem; } .btn-small { padding: 0.4rem 0.8rem; font-size: 0.8rem; border-radius: 6px; display: flex; align-items: center; gap: 0.25rem; } .btn-small .material-icons { font-size: 1rem; } .empty-state { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: #6c757d; } .empty-state .material-icons { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state p { margin: 0; font-size: 1.1rem; } /* Responsividade para vídeos */ @media (max-width: 768px) { .videos-grid { grid-template-columns: 1fr; } .header-actions { flex-direction: column; align-items: stretch; } .search-input { width: 100%; } .video-player { max-width: 100%; } .video-info { max-width: 100%; } .video-meta { flex-direction: column; gap: 0.5rem; } } /* === CARDS DE IMAGEM === */ .image-card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; overflow: hidden; transition: all 0.3s ease; } .image-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .image-thumbnail { position: relative; height: 180px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: hidden; } .image-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .image-card:hover .image-cover { transform: scale(1.05); } .image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 51, 128, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .image-card:hover .image-overlay { opacity: 1; } .btn-preview { background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .btn-preview:hover { background: white; transform: scale(1.1); } .btn-preview .material-icons { color: var(--blue); font-size: 2rem; } .image-info { padding: 1.25rem; } .image-title { color: var(--blue); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.75rem 0; line-height: 1.3; } .image-description { color: #495057; font-size: 0.9rem; line-height: 1.4; margin: 0 0 1rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .image-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #6c757d; margin-bottom: 0.75rem; } .image-size { color: #6c757d; } .image-type { color: #6c757d; } .image-date { color: #6c757d; } .image-actions { display: flex; gap: 0.5rem; padding: 0 1.25rem 1.25rem; } /* === VISUALIZAÇÃO EM LISTA PARA VÍDEOS === */ .videos-list .list-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 0.75rem; border: 1px solid #e9ecef; } .videos-list .video-preview-small { width: 120px; height: 80px; border-radius: 6px; overflow: hidden; background: #f8f9fa; display: flex; align-items: center; justify-content: center; } .videos-list .video-cover-small { width: 100%; height: 100%; object-fit: cover; } .videos-list .item-details { flex: 1; } .videos-list .item-details h4 { margin: 0 0 0.5rem 0; color: var(--blue); font-size: 1.1rem; } .videos-list .item-details p { margin: 0 0 0.75rem 0; color: #495057; font-size: 0.9rem; line-height: 1.4; } .videos-list .item-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: #6c757d; margin-bottom: 0.5rem; } .videos-list .item-meta small { display: block; } .videos-list .item-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; } .videos-list .item-actions { display: flex; gap: 0.5rem; } /* === VISUALIZAÇÃO EM LISTA PARA IMAGENS === */ .images-list .list-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 0.75rem; border: 1px solid #e9ecef; } .images-list .image-preview { width: 100px; height: 100px; border-radius: 6px; overflow: hidden; background: #f8f9fa; display: flex; align-items: center; justify-content: center; } .images-list .image-preview img { width: 100%; height: 100%; object-fit: cover; } .images-list .item-details { flex: 1; } .images-list .item-details h4 { margin: 0 0 0.5rem 0; color: var(--blue); font-size: 1.1rem; } .images-list .item-details p { margin: 0 0 0.75rem 0; color: #495057; font-size: 0.9rem; line-height: 1.4; } .images-list .item-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: #6c757d; } .images-list .item-meta small { display: block; } .images-list .item-actions { display: flex; gap: 0.5rem; } /* === GRIDS === */ .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .videos-list, .images-list { display: flex; flex-direction: column; gap: 0.75rem; } .video-player-container { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .video-watermark { position: absolute; top: 10px; right: 10px; z-index: 10; pointer-events: none; opacity: 0.7; text-align: right; } .watermark-text { display: block; background: rgba(0, 0, 0, 0.8); color: rgba(255, 255, 255, 0.8); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .watermark-sub { font-size: 10px; margin-top: 2px; opacity: 0.6; } /* Proteção adicional contra capturas */ .video-player-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 5; pointer-events: none; } /* Mensagens de proteção */ .protection-notice { background: rgba(220, 53, 69, 0.9); color: white; padding: 1rem; border-radius: 8px; text-align: center; margin: 1rem 0; font-weight: 600; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); } .form-row { margin-bottom: 1rem; } .form-row label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333; } .form-row input, .form-row textarea, .form-row select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; box-sizing: border-box; } .form-row textarea { resize: vertical; min-height: 100px; } .btn-action { background: #28a745; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 500; margin-right: 0.5rem; } .btn-action:hover { background: #218838; } .btn-secondary { background: #6c757d; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; } .btn-secondary:hover { background: #5a6268; } .btn-danger { background: #dc3545; color: white; } .btn-danger:hover { background: #c82333; } /* Responsivo */ @media (max-width: 768px) { .cards-grid { grid-template-columns: 1fr; } .video-item { flex-direction: column; align-items: flex-start; gap: 1rem; } .video-actions { align-self: stretch; justify-content: center; } .card-actions { justify-content: center; } } /* ========== CARDS PERSONALIZADOS NA PÁGINA INICIAL ========== */ .custom-cards-section { max-width: 1200px; margin: 0 auto; padding: 2rem; display: none; /* Inicialmente oculto, será mostrado se houver cards */ } .custom-cards-section.active { display: block; } .custom-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .custom-card { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; border: 2px solid transparent; } .custom-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .custom-card h3 { margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .custom-card p { margin-bottom: 1.5rem; line-height: 1.6; font-size: 1rem; } .custom-card-image { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .custom-card-video { margin-top: 1rem; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .custom-card-video video { width: 100%; height: auto; display: block; } /* Proteção contra download de vídeo */ .custom-card-video video { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-card-video video::-webkit-media-controls { display: none !important; } .custom-card-video video::-webkit-media-controls-panel { display: none !important; } /* Botão de play customizado */ .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; border: none; border-radius: 50%; width: 60px; height: 60px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10; } .video-play-button:hover { background: rgba(0, 0, 0, 0.9); transform: translate(-50%, -50%) scale(1.1); } .video-container { position: relative; background: #000; border-radius: 8px; overflow: hidden; } /* Responsivo para cards personalizados */ @media (max-width: 768px) { .custom-cards-section { padding: 1rem; } .custom-cards-container { grid-template-columns: 1fr; gap: 1rem; } .custom-card { padding: 1.5rem; } .custom-card h3 { font-size: 1.25rem; } } /* Seção de Boas-vindas */ .welcome-section { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); max-width: 500px; width: 90%; z-index: 2000; border: 2px solid rgba(0, 51, 128, 0.1); } .welcome-content { text-align: center; } .welcome-title { color: var(--blue); font-size: 1.8rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.2; } .welcome-text { color: var(--text-dark); font-size: 1rem; line-height: 1.5; margin-bottom: 2rem; opacity: 0.8; } .welcome-actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .welcome-actions .btn-action, .welcome-actions .btn-secondary { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 700; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: none; min-width: 140px; } .welcome-actions .btn-guest { background: var(--p3-color); color: white; border: 2px solid var(--p3-color); font-size: 1.1rem; padding: 1rem 2rem; min-width: 200px; margin-bottom: 1rem; } .welcome-actions .btn-guest:hover { background: #1fb554; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31, 181, 84, 0.3); } .welcome-actions .btn-action { background: var(--blue); color: white; } .welcome-actions .btn-action:hover { background: var(--orange); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 51, 128, 0.3); } .welcome-actions .btn-secondary { background: rgba(255, 255, 255, 0.9); color: var(--blue); border: 2px solid var(--blue); } .welcome-actions .btn-secondary:hover { background: var(--blue); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 51, 128, 0.2); } /* Esconder seção de boas-vindas quando usuário estiver logado */ .welcome-section.logged-in, html[data-user-logged-in="1"] .welcome-section { display: none !important; } /* Responsivo para seção de boas-vindas */ @media (max-width: 768px) { .welcome-section { padding: 1.5rem; max-width: 90%; } .welcome-title { font-size: 1.5rem; } .welcome-text { font-size: 0.9rem; } .welcome-actions { flex-direction: column; align-items: center; } .welcome-actions .btn-action, .welcome-actions .btn-secondary { width: 100%; max-width: 250px; } } /* Modal de Autenticação Modernizado */ .auth-modal { max-width: 500px; width: min(500px, 90vw); border-radius: 20px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); padding: 0; overflow: hidden; max-height: min(92vh, 900px); display: flex; flex-direction: column; } .register-auth-modal .auth-content { overflow-y: auto; overscroll-behavior: contain; } .auth-header { background: linear-gradient(135deg, var(--blue), var(--orange)); color: white; padding: 2rem 1.5rem; text-align: center; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .auth-header.has-custom-bg { background-image: linear-gradient(135deg, rgba(0, 51, 128, 0.78), rgba(255, 94, 31, 0.72)), var(--auth-header-bg-image); background-size: min(100%, 380px) 260px; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .auth-header.has-custom-bg.auth-header-no-overlay { background-image: var(--auth-header-bg-image); } .auth-logo { margin-bottom: 1rem; } .auth-logo-image { width: 76px; height: 76px; object-fit: contain; display: inline-block; padding: 0.5rem; border-radius: 18px; background: rgba(255, 255, 255, 0.16); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); } .auth-icon { font-size: 3rem; opacity: 0.9; } .auth-title { font-size: 1.5rem; font-weight: 900; margin: 0.5rem 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .auth-subtitle { font-size: 0.9rem; opacity: 0.9; margin: 0; font-weight: 500; } .auth-content { padding: 2rem 1.5rem; background: white; } .auth-welcome { text-align: center; margin-bottom: 2rem; } .auth-welcome h3 { color: var(--blue); font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem 0; } .auth-welcome p { color: var(--text-dark); font-size: 0.95rem; line-height: 1.5; opacity: 0.8; margin: 0; } .auth-options { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .auth-option-card { border: 2px solid #e1e8ed; border-radius: 12px; padding: 1.5rem; transition: all 0.3s ease; cursor: pointer; background: #fafbfc; } .auth-option-card.primary { border-color: #28a745; background: rgba(40, 167, 69, 0.05); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15); } .auth-option-card.primary:hover { border-color: #28a745; background: rgba(40, 167, 69, 0.08); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(40, 167, 69, 0.2); } .option-icon { font-size: 2rem; margin-bottom: 1rem; text-align: center; } .option-content h4 { color: var(--blue); font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; } .option-content p { color: var(--text-dark); font-size: 0.9rem; line-height: 1.4; margin: 0; opacity: 0.8; } .btn-guest, .btn-login { width: 100%; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; margin-top: 1rem; } .btn-guest { background: #28a745; color: white; } .btn-guest:hover { background: #218838; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } .btn-login { background: var(--blue); color: white; } .btn-login:hover { background: var(--orange); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 51, 128, 0.3); } .auth-divider { text-align: center; position: relative; margin: 1rem 0; } .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e1e8ed; } .auth-divider span { background: white; color: #657786; padding: 0 1rem; font-size: 0.9rem; font-weight: 500; position: relative; z-index: 1; } /* Formulário de Login */ .auth-form-container { margin-top: 2rem; } .auth-form-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .btn-back { background: none; border: none; color: var(--blue); font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 6px; transition: background 0.2s ease; } .btn-back:hover { background: rgba(0, 51, 128, 0.1); } .auth-form-header h4 { color: var(--blue); font-size: 1.2rem; font-weight: 700; margin: 0; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { color: var(--text-dark); font-weight: 600; font-size: 0.9rem; } .form-group input { padding: 0.75rem; border: 2px solid #e1e8ed; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s ease; } .form-group input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 51, 128, 0.1); } .form-actions { display: flex; gap: 1rem; margin-top: 1rem; } .btn-secondary, .btn-primary { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; } .btn-secondary { background: #f8f9fa; color: var(--blue); border: 2px solid #e1e8ed; } .btn-secondary:hover { background: var(--blue); color: white; border-color: var(--blue); } .btn-primary { background: var(--blue); color: white; } .btn-primary:hover { background: var(--orange); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 51, 128, 0.3); } /* Mensagens */ .auth-message { padding: 0.75rem; border-radius: 6px; font-size: 0.9rem; font-weight: 500; text-align: center; } .auth-message.error { background: #fee; color: #c53030; border: 1px solid #feb2b2; } .auth-message.success { background: #efe; color: #22543d; border: 1px solid #9ae6b4; } /* Informações sobre acesso */ .auth-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } .info-section h5 { color: var(--blue); font-size: 1rem; font-weight: 700; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; } .info-section ul { list-style: none; padding: 0; margin: 0; } .info-section li { color: var(--text-dark); font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.5rem; padding-left: 1rem; position: relative; } .info-section li::before { content: '✓'; position: absolute; left: 0; color: #28a745; font-weight: bold; } /* Responsivo */ @media (max-width: 768px) { .modal-overlay { align-items: flex-start; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); } .auth-modal { width: min(96vw, 500px); margin: 0 auto; max-height: calc(100dvh - 24px); } .auth-header { padding: 1.5rem 1rem; } .auth-header.has-custom-bg { background-size: min(100%, 380px) 260px; min-height: 220px; } .auth-content { padding: 1rem 0.9rem 1.1rem; } #authRegisterModal .auth-content { max-height: calc(100dvh - 220px); overflow-y: auto; } #authRegisterModal .health-grid { grid-template-columns: 1fr; } #authRegisterModal .modal-footer { flex-direction: column; } .auth-fields { padding: 14px 16px 4px; max-height: 48vh; } #perfilModal .modal-footer { padding: 10px 16px 14px; } .auth-options { gap: 1rem; } .auth-option-card { padding: 1rem; } .form-actions { flex-direction: column; } } /* === ESTILOS PARA CONTROLE DE ACESSO PÚBLICO === */ .public-access-container { max-width: 1200px; } .access-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .info-box { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 1px solid #dee2e6; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .info-box h4 { margin: 0 0 0.5rem 0; color: #495057; font-size: 1.1rem; } .info-box p { margin: 0; color: #6c757d; font-size: 0.95rem; } .public-access-list { display: flex; flex-direction: column; gap: 2rem; } .access-category { background: white; border: 1px solid #e9ecef; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .access-category h3 { margin: 0 0 1.5rem 0; color: #343a40; font-size: 1.3rem; display: flex; align-items: center; gap: 0.5rem; } .access-items { display: flex; flex-direction: column; gap: 1rem; } .access-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; transition: all 0.2s ease; } .access-item:hover { background: #e9ecef; border-color: #adb5bd; } .access-info h4 { margin: 0 0 0.25rem 0; color: #495057; font-size: 1rem; } .access-info p { margin: 0; color: #6c757d; font-size: 0.9rem; } .access-toggle { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 100px; } .toggle { position: relative; display: inline-block; width: 50px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.3s; border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .toggle input:checked + .toggle-slider { background-color: #28a745; } .toggle input:checked + .toggle-slider:before { transform: translateX(26px); } .toggle-label { font-size: 0.8rem; color: #6c757d; font-weight: 500; text-align: center; } /* Mensagens do admin */ .admin-message { position: fixed; top: 20px; right: 20px; padding: 1rem 1.5rem; border-radius: 8px; color: white; font-weight: 500; z-index: 1000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); max-width: 400px; } .admin-message.success { background-color: #28a745; } .admin-message.error { background-color: #dc3545; } .admin-message.info { background-color: #007bff; } /* Responsividade para acesso público */ @media (max-width: 768px) { .access-item { flex-direction: column; align-items: flex-start; gap: 1rem; } .access-toggle { align-self: flex-end; flex-direction: row; gap: 0.75rem; } .access-info { grid-template-columns: 1fr; } .public-access-list { gap: 1.5rem; } .access-category { padding: 1rem; } } /* === ESTILOS PARA LOGIN ADMIN === */ .admin-login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 51, 128, 0.95), rgba(0, 51, 128, 0.85)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; } .admin-login-modal { background: white; border-radius: 20px; padding: 0; max-width: 450px; width: 100%; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); overflow: hidden; position: relative; } .admin-login-header { background: linear-gradient(135deg, var(--blue), var(--orange)); color: white; padding: 2.5rem 2rem 2rem; text-align: center; position: relative; overflow: hidden; } .admin-login-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(180deg); } } .admin-login-header .login-logo { margin-bottom: 1.5rem; position: relative; z-index: 2; } .admin-login-header .login-logo .material-icons { font-size: 4rem; color: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); } .admin-login-header h2 { color: white; font-size: 1.8rem; font-weight: 700; margin: 0 0 0.5rem 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; z-index: 2; } .admin-login-header p { color: rgba(255, 255, 255, 0.9); margin: 0; font-weight: 500; font-size: 1rem; position: relative; z-index: 2; } .admin-login-form { padding: 2.5rem 2rem; background: white; } .admin-login-form .form-group { margin-bottom: 1.5rem; } .admin-login-form label { display: block; color: var(--blue); font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem; } .admin-login-form input { width: 100%; padding: 1rem; border: 2px solid #e1e8ed; border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: #f8f9fa; box-sizing: border-box; } .admin-login-form input:focus { outline: none; border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(0, 51, 128, 0.1); transform: translateY(-1px); } .admin-login-form input::placeholder { color: #adb5bd; } .password-wrapper { position: relative; display: flex; align-items: center; } .password-wrapper input { padding-right: 3rem !important; } .toggle-password { position: absolute; right: 0.75rem; background: none; border: none; cursor: pointer; color: #6c757d; padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; line-height: 1; } .toggle-password:hover { color: var(--blue); } .toggle-password .material-icons { font-size: 1.25rem; } .admin-message { color: #d61f2a; font-size: 0.9rem; margin-bottom: 1.5rem; min-height: 1.2rem; font-weight: 500; text-align: center; padding: 0.5rem; border-radius: 8px; background: rgba(214, 31, 42, 0.05); border: 1px solid rgba(214, 31, 42, 0.1); } .admin-login-form .btn-primary { width: 100%; padding: 1rem; background: linear-gradient(135deg, var(--blue), var(--orange)); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 51, 128, 0.3); margin-top: 1rem; } .admin-login-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 51, 128, 0.4); } .admin-login-form .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 51, 128, 0.3); } .admin-login-footer { text-align: center; padding: 1.5rem 2rem; background: #f8f9fa; border-top: 1px solid #e9ecef; } .admin-login-footer .btn-link { color: var(--blue); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s ease; } .admin-login-footer .btn-link:hover { color: var(--orange); text-decoration: underline; } /* Responsividade para login */ @media (max-width: 480px) { .admin-login-overlay { padding: 0.5rem; } .admin-login-modal { max-width: 100%; border-radius: 16px; } .admin-login-header { padding: 2rem 1.5rem 1.5rem; } .admin-login-header h2 { font-size: 1.5rem; } .admin-login-form { padding: 2rem 1.5rem; } .admin-login-footer { padding: 1.5rem; } } /* ========== CARDS PERSONALIZADOS ========== */ .cards-list { margin-top: 2rem; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; } .card-item { border: 2px solid #e1e8ed; border-radius: 12px; padding: 1rem; cursor: move; transition: all 0.2s ease; position: relative; min-height: 200px; display: flex; flex-direction: column; } .card-item:hover { border-color: var(--blue); box-shadow: 0 4px 12px rgba(0, 51, 128, 0.1); } .card-item.dragging { opacity: 0.5; transform: rotate(2deg); } .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; } .card-header h4 { margin: 0; font-size: 1.1rem; font-weight: 600; flex: 1; } .card-actions { display: flex; gap: 0.5rem; } .card-actions button { padding: 0.25rem 0.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s ease; } .btn-edit { background-color: #ffc107; color: #000; } .btn-edit:hover { background-color: #e0a800; } .btn-delete { background-color: #dc3545; color: #fff; } .btn-delete:hover { background-color: #c82333; } .card-content { flex: 1; margin-bottom: 0.5rem; } .card-content p { margin: 0; line-height: 1.4; } .card-footer { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 0.5rem; font-size: 0.8rem; opacity: 0.7; } /* Barra de progresso para upload */ .upload-progress { width: 100%; margin-bottom: 1rem; } .progress-bar { width: 100%; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; } .progress-fill { height: 100%; background: linear-gradient(90deg, #007bff, #0056b3); width: 0%; transition: width 0.3s ease; border-radius: 4px; } .progress-text { font-size: 0.9rem; color: #666; text-align: center; font-weight: 500; } /* Estilos para preview de arquivos atuais na edição */ .current-file-preview { margin-top: 0.5rem; padding: 1rem; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .current-file-preview p { margin: 0 0 0.5rem 0; font-weight: 600; color: #495057; font-size: 0.9rem; } .current-file-preview video, .current-file-preview img { border: 1px solid #ced4da; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .current-file-preview video { background-color: #000; } #current-video-info { font-size: 0.85rem; color: #6c757d; margin-top: 0.5rem; } /* Estilos para preview de vídeo na lista */ .video-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background-color: #000; pointer-events: none; /* Impede interação direta com o vídeo */ } /* === CASAS DO TABULEIRO === */ .tabuleiro-grid { position: relative; width: 100%; height: 300px; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #e9ecef; } .casa-preview { position: absolute; display: flex; align-items: center; justify-content: center; border: 2px solid #333; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s ease; cursor: pointer; } .casa-preview:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 10; } .casa-numero { font-size: 12px; font-weight: bold; color: #333; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); pointer-events: none; } /* Responsivo para casas do tabuleiro */ @media (max-width: 768px) { .tabuleiro-grid { height: 200px; } .casa-preview { min-width: 25px; min-height: 25px; } .casa-numero { font-size: 10px; } } } .card-item-mini .card-info h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: var(--blue); } .card-item-mini .card-info p { margin: 0; font-size: 12px; color: #6c757d; } .card-item-mini .card-status { flex-shrink: 0; } .status-badge { padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .status-badge.active { background: #d4edda; color: #155724; } .status-badge.inactive { background: #f8d7da; color: #721c24; } /* === PREVIEW DO TABULEIRO (Admin) === */ .tabuleiro-preview { background: #f1f3f4; border: 1px solid #dee2e6; border-radius: 10px; min-height: 240px; padding: 12px; overflow: auto; } .tab-prev-info { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 13px; color: #495057; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 8px 12px; } .tab-prev-legend { margin-left: auto; display: flex; gap: 8px; align-items: center; } .tab-prev-wrapper { position: relative; border-radius: 8px; overflow: visible; } .tab-prev-svg { pointer-events: none; } .tab-prev-casa { position: absolute; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform 0.15s, box-shadow 0.15s; cursor: default; -webkit-user-select: none; user-select: none; } .tab-prev-casa:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 10; } .casa-preview-item { position: absolute; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.12); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; -webkit-user-select: none; user-select: none; } .casa-preview-item:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.22); z-index: 10; } .casa-num { font-size: 11px; font-weight: 700; pointer-events: none; line-height: 1; } .casa-card-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; background: #3498db; border-radius: 50%; border: 1px solid #fff; pointer-events: none; } /* ================================================================ EDITOR DE TABULEIRO — LAYOUT DE 3 COLUNAS (drag & drop) ================================================================ */ /* Seção ocupa toda a altura disponível sem o padding padrão */ .tabuleiro-full-section { flex-direction: column; height: calc(100vh - 80px); padding: 0 !important; overflow: hidden; } .admin-section.active.tabuleiro-full-section { display: flex; } /* Cabeçalho da seção */ .tab-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.4rem; background: #fff; border-bottom: 2px solid #e9ecef; flex-shrink: 0; flex-wrap: wrap; } .tab-editor-title h1 { color: var(--blue); font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.2; } .tab-editor-title p { color: #6c757d; font-size: 0.8rem; margin: 0; } .tab-editor-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Painel de configurações colapsável */ .config-strip-card { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 0.8rem 1.4rem; flex-shrink: 0; } .config-inline-form { width: 100%; } .config-fields-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start; } .cfg-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 110px; } .cfg-field label { font-size: 0.72rem; font-weight: 600; color: #495057; text-transform: uppercase; letter-spacing: 0.03em; } .cfg-field select, .cfg-field input[type="text"], .cfg-field input[type="file"] { padding: 0.35rem 0.5rem; border: 1px solid #ced4da; border-radius: 5px; font-size: 0.8rem; background: #fff; } .cfg-color input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid #ced4da; border-radius: 5px; cursor: pointer; } .cfg-descricao { min-width: 200px; flex: 2; } /* Corpo do editor: 3 colunas */ .tabuleiro-editor-body { display: flex; flex: 1; overflow: hidden; gap: 0; } /* ---- Painel esquerdo: Cards ---- */ .tab-cards-sidebar { width: 220px; min-width: 180px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e9ecef; overflow: hidden; flex-shrink: 0; } .tab-panel-title { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1rem 0.2rem; font-weight: 700; font-size: 0.85rem; color: var(--blue); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .tab-panel-title .material-icons { font-size: 16px; } .tab-panel-subtitle { padding: 0 1rem 0.5rem; font-size: 0.72rem; color: #adb5bd; flex-shrink: 0; } .cards-drag-list { flex: 1; overflow-y: auto; padding: 0.3rem 0.5rem; } .tab-panel-footer { padding: 0.5rem; border-top: 1px solid #f1f1f1; flex-shrink: 0; } .panel-empty-msg { padding: 0.5rem; color: #adb5bd; font-size: 0.8rem; text-align: center; } /* Item de card arrastável */ .card-drag-item { display: flex; align-items: center; gap: 0.4rem; background: #f8f9fa; border-radius: 6px; margin-bottom: 4px; padding: 0.4rem 0.5rem; cursor: grab; transition: background 0.15s, box-shadow 0.15s, transform 0.1s; border-left: 4px solid #adb5bd; -webkit-user-select: none; user-select: none; } .card-drag-item:hover { background: #e9f0ff; box-shadow: 0 2px 6px rgba(0,51,128,.1); } .card-drag-item.dragging { opacity: .5; transform: scale(.97); cursor: grabbing; } .card-drag-inactive { opacity: .5; } .card-drag-handle { font-size: 13px; color: #ced4da; cursor: grab; flex-shrink: 0; } .card-drag-info { flex: 1; min-width: 0; overflow: hidden; } .card-drag-info strong { display: block; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #212529; } .card-drag-info small { font-size: 0.68rem; color: #868e96; } .card-drag-dot { width: 8px; height: 8px; border-radius: 50%; background: #ced4da; flex-shrink: 0; } .card-drag-dot.dot-active { background: #27ae60; } /* ---- Área central: Canvas do tabuleiro ---- */ .tab-board-canvas { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f3f4; } .board-canvas-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1rem; background: #fff; border-bottom: 1px solid #e9ecef; flex-shrink: 0; } .board-status { font-size: 0.82rem; color: #495057; font-weight: 500; } .board-canvas-actions { display: flex; gap: 0.4rem; } .board-canvas-scroll { flex: 1; overflow: auto; padding: 1rem; } /* Board interativo */ .board-interactive { border: none !important; background: transparent !important; padding: 0 !important; min-height: unset !important; } .board-drop-zone { position: relative; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.07); } .board-empty-hint { display: flex; align-items: center; gap: 0.5rem; background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 0.6rem 1rem; margin-bottom: 0.8rem; font-size: 0.82rem; color: #856404; } .board-empty-hint .material-icons { font-size: 18px; color: #ffc107; } /* Casa do tabuleiro (drag & drop) */ .board-house { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #e9ecef; box-shadow: 0 2px 6px rgba(0,0,0,.1); transition: transform 0.15s, box-shadow 0.15s, outline 0.1s; overflow: hidden; -webkit-user-select: none; user-select: none; } .board-house:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.18); z-index: 10; } .board-house.selected { outline: 3px solid #0d6efd; outline-offset: 2px; z-index: 20; } .board-house.dragging { opacity: .45; cursor: grabbing; } .board-house.drag-over { outline: 3px dashed #0d6efd; outline-offset: 2px; transform: scale(1.1); z-index: 15; } .board-house.is-start { box-shadow: 0 4px 14px rgba(39,174,96,.4); } .board-house.is-end { box-shadow: 0 4px 14px rgba(231,76,60,.4); } .board-house.has-card { box-shadow: 0 3px 10px rgba(52,152,219,.3); } .house-num { font-weight: 700; line-height: 1; pointer-events: none; } .house-card-name { font-size: 9px; color: rgba(0,0,0,.55); text-align: center; line-height: 1.1; padding: 0 3px; pointer-events: none; margin-top: 2px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .house-card-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; background: #3498db; border-radius: 50%; border: 1.5px solid #fff; pointer-events: none; } /* ---- Painel direito: Editor de propriedades ---- */ .tab-house-panel { width: 230px; min-width: 200px; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #e9ecef; overflow: hidden; flex-shrink: 0; } .house-editor-content { flex: 1; overflow-y: auto; padding: 0.6rem 0.75rem; } .house-editor-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 0.5rem; color: #ced4da; text-align: center; padding: 2rem 1rem; } .house-editor-empty .material-icons { font-size: 40px; } .house-editor-empty p { font-size: 0.82rem; margin: 0; line-height: 1.4; } /* Campos do inline editor */ .he-field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.55rem; } .he-field label { font-size: 0.7rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.03em; } .he-field select, .he-field input[type="number"], .he-field input[type="color"] { padding: 0.3rem 0.4rem; border: 1px solid #ced4da; border-radius: 5px; font-size: 0.8rem; width: 100%; } .he-field input[type="color"] { height: 34px; padding: 2px; cursor: pointer; } .he-actions { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f1f1f1; } /* Botões utilitários */ .btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.3rem; } .btn-full { width: 100%; justify-content: center; } .btn-active { background: var(--blue) !important; color: #fff !important; } /* Responsividade do editor */ @media (max-width: 1100px) { .tab-cards-sidebar { width: 180px; } .tab-house-panel { width: 200px; } } @media (max-width: 860px) { .tabuleiro-editor-body { flex-direction: column; overflow: auto; } .tabuleiro-full-section { height: auto; } .tab-cards-sidebar, .tab-house-panel { width: 100%; min-width: unset; border-right: none; border-left: none; border-bottom: 1px solid #e9ecef; max-height: 220px; } .board-canvas-scroll { min-height: 300px; } } /* === ANIMAÇÕES DRAG & DROP ============================================= */ @keyframes pulse-border { 0%, 100% { outline-color: rgba(13, 110, 253, 0.35); } 50% { outline-color: rgba(13, 110, 253, 0.9); } } .board-drop-zone.receiving { outline: 3px dashed rgba(13, 110, 253, 0.6); outline-offset: 4px; animation: pulse-border 1.2s ease infinite; } .board-drop-zone.receiving::after { content: 'Solte aqui'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(13, 110, 253, 0.08); color: #0d6efd; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 20px; pointer-events: none; white-space: nowrap; z-index: 100; } /* === PAINEL DE LAYOUTS ================================================= */ .layouts-panel { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; } .layouts-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.85rem; background: #f8f9fa; border-bottom: 1px solid #e9ecef; cursor: pointer; -webkit-user-select: none; user-select: none; } .layouts-panel-header h4 { margin: 0; font-size: 0.82rem; font-weight: 700; color: #495057; display: flex; align-items: center; gap: 0.4rem; } .layouts-panel-header h4 .material-icons { font-size: 16px; } .layouts-panel-body { padding: 0.6rem 0.8rem; } .layouts-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 220px; overflow-y: auto; margin-bottom: 0.6rem; } .layout-card { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.65rem; border: 1px solid #dee2e6; border-radius: 7px; cursor: pointer; transition: background 0.15s, border-color 0.15s; background: #fff; } .layout-card:hover { background: #f0f4ff; border-color: #b6ccff; } .layout-card.active { border-color: #0d6efd; background: #e8f0fe; } .layout-card.is-padrao .layout-card-badge { display: inline-flex; } .layout-card-badge { display: none; align-items: center; background: #198754; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 20px; letter-spacing: 0.03em; white-space: nowrap; } .layout-card-name { flex: 1; font-size: 0.8rem; font-weight: 600; color: #343a40; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layout-card-meta { font-size: 0.7rem; color: #6c757d; white-space: nowrap; } .layout-card-actions { display: flex; gap: 0.2rem; opacity: 0; transition: opacity 0.15s; } .layout-card:hover .layout-card-actions { opacity: 1; } .layout-card-actions .btn-icon-xs { width: 24px; height: 24px; border-radius: 4px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; transition: background 0.12s; } .layout-card-actions .btn-icon-xs .material-icons { font-size: 14px; } .layout-card-actions .btn-icon-xs:hover { background: #dee2e6; } .layout-card-actions .btn-icon-xs.danger:hover { background: #f8d7da; color: #842029; } .layout-card-actions .btn-icon-xs.success:hover { background: #d1e7dd; color: #0f5132; } /* Área de salvar novo layout */ .layouts-save-area { border-top: 1px solid #f1f1f1; padding-top: 0.6rem; display: flex; gap: 0.4rem; align-items: center; } .layouts-save-area input[type="text"] { flex: 1; padding: 0.3rem 0.55rem; border: 1px solid #ced4da; border-radius: 5px; font-size: 0.8rem; } .layouts-save-area input[type="text"]:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.15); } /* === NOME DO LAYOUT ATIVO ============================================== */ .layout-ativo-badge { display: inline-flex; align-items: center; gap: 0.3rem; background: #e8f0fe; border: 1px solid #b6ccff; color: #1a56db; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 20px; margin-left: 0.5rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layout-ativo-badge .material-icons { font-size: 14px; } /* Formulário de configuração do tabuleiro */ /* === BOARD ADMIN PREVIEW — visual idêntico ao index.html === */ /* Preview do tabuleiro no admin: sem scroll, o JS aplica o scale */ #casas-preview { overflow: hidden !important; display: flex; align-items: flex-start; } /* Container que envolve as linhas no admin */ .board-admin-preview { padding: 16px !important; padding-top: 16px !important; width: 100%; max-width: 100%; margin: 0; border-radius: 10px; gap: 10px; transform: scale(var(--board-fit-scale, 1)); transform-origin: top left !important; flex-shrink: 0; } /* Layout espiral: CSS grid com posicionamento explícito de cada casa */ .board-espiral-grid { display: grid !important; /* sobrepõe flex do board-container */ gap: 10px; } .board-espiral-grid .board-card { min-width: 0; width: 100%; } /* Garante que o board-row tenha gap menor no admin para caber melhor. Sobrepõe o grid global (repeat(4,1fr)) para exibir N cards por linha sem quebra. */ .board-admin-preview .board-row { display: flex !important; flex-wrap: nowrap !important; flex-direction: row !important; direction: ltr !important; margin-bottom: 0; gap: 10px; } .board-admin-preview .board-row .board-card { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 100px !important; /* altura uniforme para todos os cards */ min-height: unset !important; overflow: hidden; } /* Circular/Quadrado: deja que aspect-ratio controle a altura */ .board-admin-preview.formato-circular .board-row .board-card, .board-admin-preview.formato-quadrado .board-row .board-card { height: auto !important; } /* Circular/Quadrado: desabilita stretch para que aspect-ratio 1/1 funcione corretamente */ .board-admin-preview.formato-circular .board-row, .board-admin-preview.formato-quadrado .board-row { align-items: flex-start !important; } /* Override: desativa hover-transform no admin para não conflitar com D&D */ .board-admin-preview .board-card:hover { transform: translateY(-3px); } /* Estado: card selecionado (editando) */ .board-admin-preview .admin-board-card.selected { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: -4px; box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.6), 0 8px 20px rgba(0,0,0,0.2); } /* Estado: card sendo arrastado */ .board-admin-preview .admin-board-card.dragging { opacity: 0.5; transform: scale(0.96); } /* Estado: área de drop com card acima */ .board-admin-preview .admin-board-card.drag-over { outline: 3px dashed rgba(255, 255, 255, 0.7); outline-offset: -5px; transform: scale(1.03); } /* Cards sem card associado — fundo semi-transparente */ .board-admin-preview .admin-board-card.card-empty { opacity: 0.55; } .board-admin-preview .admin-board-card.card-empty:hover { opacity: 0.8; } /* Hint visual no interior de casas vazias */ .admin-card-empty-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: rgba(255,255,255,0.7); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; } .admin-card-empty-hint .material-icons { font-size: 22px; opacity: 0.6; } /* Cursor grab nos cards arrastáveis do admin */ .board-admin-preview .admin-board-card { cursor: grab; } .board-admin-preview .admin-board-card.card-special { cursor: default; /* Neutraliza tamanhos especiais globais — uniforme com os demais cards */ font-size: 0.65rem !important; min-height: unset !important; flex: 1 1 0 !important; } /* Garante que card-special não cresça sozinho no formato quadrado/retangular */ .board-admin-preview .board-card.formato-quadrado.card-special, .board-admin-preview .board-card.formato-retangular.card-special { aspect-ratio: unset !important; } /* Circular especial: mesma regra 1/1 dos normais */ .board-admin-preview .board-card.formato-circular.card-special { aspect-ratio: 1 / 1 !important; border-radius: 50% !important; align-self: center !important; max-width: 120px !important; } /* ------------------------------------------------------------------ */ /* TRILHA VISUAL ENTRE CARDS */ /* ------------------------------------------------------------------ */ /* Ponto conector horizontal entre cards dentro de uma linha */ .trail-dot-h { width: 18px; min-width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); flex-shrink: 0; align-self: center; position: relative; z-index: 1; margin: 0 -2px; /* sobreposição leve nos elementos adjacentes */ } /* ════════════════════════════════════════════════════════════════ */ /* ESTRADA / CAMINHO DO TABULEIRO */ /* Faixa colorida que percorre todo o layout; */ /* cards ficam sobrepostos sobre ela como num jogo de tabuleiro */ /* ════════════════════════════════════════════════════════════════ */ /* Invólucro de linha: container transparente — faixa desenhada via ::before no board-row */ .road-row-wrap { background: transparent; padding: 0; border-radius: 0; box-shadow: none; position: relative; z-index: 2; } /* board-row dentro da linha: posicionado para que ::before fique atrás dos cards */ .board-admin-preview .road-row-wrap .board-row { position: relative; margin-bottom: 0 !important; } /* Faixa fina da estrada — ~1/3 da altura do card (33px), centralizada verticalmente */ .board-admin-preview .road-row-wrap .board-row::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 33px; background: var(--rc, #8B6914); border-radius: 8px; z-index: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.38), inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.18); pointer-events: none; } /* Cards acima da faixa */ .board-admin-preview .road-row-wrap .board-row .board-card { position: relative; z-index: 1; } /* Cards elevados — efeito de estar "sentado" sobre a estrada */ .board-admin-preview .road-row-wrap .admin-board-card { box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important; } /* Conector de curva entre duas linhas consecutivas de estrada */ .road-turn { height: 33px; position: relative; z-index: 1; /* atrás dos road-row-wrap (z-index:2); cards ficam no topo */ margin: 0; pointer-events: none; } /* Curva à direita: estrada dobra pelo lado direito (linhas pares — serpente) */ .road-turn-right::before { content: ''; position: absolute; right: 0; top: -34px; bottom: -34px; /* estende para alcançar a faixa das linhas adjacentes */ width: 56px; background: var(--rc, #8B6914); border-radius: 0 30px 30px 0; box-shadow: 8px 0 16px rgba(0,0,0,0.28); } /* Curva à esquerda: estrada dobra pelo lado esquerdo (linhas ímpares — serpente) */ .road-turn-left::before { content: ''; position: absolute; left: 0; top: -34px; bottom: -34px; /* estende para alcançar a faixa das linhas adjacentes */ width: 56px; background: var(--rc, #8B6914); border-radius: 30px 0 0 30px; box-shadow: -8px 0 16px rgba(0,0,0,0.28); } /* Conector central: estrada desce pelo centro (layouts grade / linha-reta) */ .road-turn-center::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -34px; bottom: -34px; /* estende para alcançar a faixa das linhas adjacentes */ width: 33px; background: var(--rc, #8B6914); border-radius: 0; box-shadow: 0 6px 14px rgba(0,0,0,0.28); } .trail-turn { display: flex; align-items: center; height: 28px; padding: 0 6px; } .trail-turn-right { justify-content: flex-end; } .trail-turn-left { justify-content: flex-start; } .trail-turn-center { justify-content: center; } /* Ponto de virada vertical (entre linhas) */ .trail-dot-v { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); } /* Badge de número da casa — posicionado em cima do card */ .trail-num { position: absolute; top: 6px; left: 8px; font-size: 0.6rem; font-weight: 800; color: rgba(255, 255, 255, 0.6); line-height: 1; letter-spacing: 0.02em; pointer-events: none; z-index: 2; } /* Esconde o card-number padrão (index.html) dentro do preview admin */ .board-admin-preview .card-number { display: none; } /* ── Formatos de card no preview admin ──────────────────────── */ /* Quadrado: lados iguais — altura controlada por aspect-ratio via flex width */ .board-admin-preview .board-card.formato-quadrado { border-radius: 10px 10px 4px 4px !important; aspect-ratio: 1 / 1 !important; min-height: unset !important; height: auto !important; align-self: flex-start !important; } /* Circular: totalmente redondo — conteúdo centralizado e compacto */ .board-admin-preview .board-card.formato-circular { border-radius: 50% !important; aspect-ratio: 1 / 1 !important; min-height: unset !important; height: unset !important; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; padding: 8% !important; gap: 2px; box-sizing: border-box; } /* Número: sai do fluxo absoluto e entra no flex como item normal */ .board-admin-preview .board-card.formato-circular .trail-num { position: static !important; transform: none !important; font-size: 0.62rem; font-weight: 900; color: rgba(255, 255, 255, 0.7); line-height: 1; flex-shrink: 0; } /* Wrapper do título: centralizado, sem overflow */ .board-admin-preview .board-card.formato-circular .card-content-wrapper { display: flex !important; flex-direction: column; align-items: center; width: 100%; overflow: hidden; } /* Título truncado em no máximo 3 linhas */ .board-admin-preview .board-card.formato-circular .card-title { font-size: 0.48rem !important; font-weight: 700 !important; line-height: 1.25 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; color: white; padding: 0 2px; } /* Descrição oculta — sem espaço no círculo */ .board-admin-preview .board-card.formato-circular .card-desc { display: none; } /* Card vazio: só ícone + */ .board-admin-preview .board-card.formato-circular .admin-card-empty-hint { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .board-admin-preview .board-card.formato-circular .admin-card-empty-hint .material-icons { font-size: 16px !important; opacity: 0.7; } .board-admin-preview .board-card.formato-circular .admin-card-empty-hint small { display: none; } /* Retangular: altura fixa definida pelo board-row .board-card (100px), cantos suaves */ .board-admin-preview .board-card.formato-retangular { border-radius: 10px 10px 4px 4px !important; aspect-ratio: unset !important; min-height: unset !important; } /* Quadrado/Circular: border-radius ajustado para encaixar com a faixa */ /* (especificidade extra para garantir que estas regras ganhem sobre as da base) */ .board-admin-preview .board-row .board-card.formato-circular { border-radius: 50% !important; /* círculo perfeito — faixa fica abaixo separada */ } #tabuleiro-config-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1rem; } #tabuleiro-config-form .form-group { display: flex; flex-direction: column; } #tabuleiro-config-form label { font-weight: 600; color: var(--blue); margin-bottom: 0.5rem; font-size: 0.9rem; } #tabuleiro-config-form select, #tabuleiro-config-form input[type="color"], #tabuleiro-config-form input[type="file"], #tabuleiro-config-form textarea { padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 6px; font-size: 0.9rem; transition: border-color 0.3s ease; } #tabuleiro-config-form select:focus, #tabuleiro-config-form input:focus, #tabuleiro-config-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0, 51, 128, 0.1); } #tabuleiro-config-form input[type="color"] { width: 60px; height: 40px; padding: 0; border: none; cursor: pointer; } #tabuleiro-config-form textarea { resize: vertical; min-height: 80px; } /* Responsividade para o formulário */ @media (max-width: 768px) { #tabuleiro-config-form .form-row { grid-template-columns: 1fr; gap: 0.75rem; } .tabuleiro-preview { min-height: 200px; } } /* Tablets */ @media (max-width: 1024px) { .videos-grid, .images-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .videos-list .video-preview-small { width: 100px; height: 70px; } .images-list .image-preview { width: 80px; height: 80px; } } /* Mobile */ @media (max-width: 768px) { .videos-grid, .images-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .videos-list .list-item, .images-list .list-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .videos-list .video-preview-small, .images-list .image-preview { width: 100%; height: 150px; } .videos-list .item-actions, .images-list .item-actions { width: 100%; justify-content: center; } .image-thumbnail { height: 140px; } .view-controls { flex-direction: column; gap: 0.5rem; } .view-controls .btn-toggle { width: 100%; justify-content: center; } } /* Small Mobile */ @media (max-width: 480px) { .videos-grid, .images-grid { grid-template-columns: 1fr; } .videos-list .list-item, .images-list .list-item { padding: 0.75rem; } .videos-list .item-details h4, .images-list .item-details h4 { font-size: 1rem; } .videos-list .item-details p, .images-list .item-details p { font-size: 0.85rem; } .videos-list .item-meta, .images-list .item-meta { flex-direction: column; gap: 0.25rem; } .image-info { padding: 1rem; } .image-actions { padding: 0 1rem 1rem; } } /* ========== CARDS GRID VIEW ========== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .card-item { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; overflow: hidden; transition: all 0.3s ease; } .card-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .card-thumbnail { position: relative; height: 140px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-preview { text-align: center; color: white; padding: 1rem; } .card-preview h4 { margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; } .card-preview p { margin: 0 0 0.5rem 0; font-size: 0.85rem; opacity: 0.9; } .card-preview small { display: block; font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.25rem; } .card-info { padding: 1rem; } .card-title { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; color: #333; } .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #666; } .card-position { background: #e3f2fd; color: #1976d2; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 500; } .card-date { opacity: 0.7; } .card-actions { padding: 0 1rem 1rem; display: flex; gap: 0.5rem; } /* ========== CARD ENHANCEMENTS ========== */ .card-type-indicator { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; font-weight: 500; opacity: 0.8; } .card-type-indicator .material-icons { font-size: 1rem; } .card-media-info { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .media-badge { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.8rem; } .media-badge.video { background: #ff5722; color: white; } .media-badge.image { background: #2196f3; color: white; } .card-content-preview { margin-top: 0.5rem; font-size: 0.85rem; color: #666; line-height: 1.4; } /* ========== LIST VIEW ENHANCEMENTS ========== */ .item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; } .item-header h4 { margin: 0; flex: 1; } .item-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .badge.order { background: #e3f2fd; color: #1976d2; } .badge.type { background: #f3e5f5; color: #7b1fa2; } .badge.media { background: #fff3e0; color: #e65100; } .badge.media.video { background: #ffebee; color: #c62828; } .badge.media.image { background: #e8f5e8; color: #2e7d32; } .badge .material-icons { font-size: 0.8rem; } /* ========== RESPONSIVE ADJUSTMENTS ========== */ @media (max-width: 768px) { .cards-grid { grid-template-columns: 1fr; } .item-badges { margin-top: 0.5rem; justify-content: flex-start; } .card-type-indicator { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .card-media-info { justify-content: center; } } /* ========== CARDS LIST VIEW ========== */ .cards-list { margin-top: 1rem; } .cards-list .list-item { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; margin-bottom: 0.75rem; padding: 1rem; transition: all 0.2s ease; } .cards-list .list-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .cards-list .item-info h4 { margin: 0 0 0.5rem 0; color: #333; } .cards-list .item-info p { margin: 0 0 0.5rem 0; color: #666; font-size: 0.9rem; } .cards-list .item-info small { color: #888; font-size: 0.8rem; } .cards-list .item-actions { display: flex; gap: 0.5rem; } /* ========== CASAS-TABULEIRO — NOVA SEÇÃO COMPLETA ========== */ /* ── Config Bar ─────────────────────────────────────────────── */ .casas-config-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0; background: #fff; border-bottom: 1px solid #e9ecef; padding: 0 1rem; min-height: 62px; flex-shrink: 0; } /* Grupo de campos com label acima */ .ccb-group { display: flex; flex-direction: column; gap: 2px; padding: 0.45rem 0.8rem; } .ccb-group-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #adb5bd; line-height: 1; } .ccb-fields { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0.5rem; } /* Campo individual dentro da config bar */ .ccb-field { display: flex; flex-direction: column; gap: 3px; } .ccb-field label { font-size: 0.68rem; font-weight: 600; color: #6c757d; white-space: nowrap; } .ccb-field select, .ccb-field input[type="text"] { height: 30px; padding: 0 0.5rem; border: 1px solid #dee2e6; border-radius: 6px; font-size: 0.8rem; background: #f8f9fa; color: #343a40; transition: border-color 0.15s, box-shadow 0.15s; min-width: 105px; } .ccb-field select:focus, .ccb-field input[type="text"]:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.12); background: #fff; } /* Color picker compacto */ .ccb-field.ccb-color { align-items: center; } .ccb-field.ccb-color input[type="color"] { width: 38px; height: 30px; padding: 2px 3px; border: 1px solid #dee2e6; border-radius: 6px; cursor: pointer; background: none; } .ccb-field.ccb-color input[type="color"]:hover { border-color: #adb5bd; } /* Separador vertical entre grupos */ .ccb-divider { width: 1px; height: 36px; background: #e9ecef; margin: 0 0.25rem; align-self: center; flex-shrink: 0; } /* Empurra ações para direita */ .ccb-spacer { flex: 1; min-width: 0.5rem; } /* Seção de status + botões (lado direito) */ .ccb-actions-section { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0 0.45rem 0.8rem; flex-shrink: 0; } .ccb-status { font-size: 0.78rem; color: #6c757d; font-weight: 500; white-space: nowrap; } .ccb-btn-group { display: flex; align-items: center; gap: 0.4rem; } .ccb-btn-save { background: #198754 !important; border-color: #157347 !important; } .ccb-btn-save:hover { background: #157347 !important; border-color: #146c43 !important; } /* Responsividade da config bar */ @media (max-width: 860px) { .casas-config-bar { padding: 0.5rem 0.75rem; gap: 0.25rem; } .ccb-spacer { display: none; } .ccb-actions-section { width: 100%; padding: 0.4rem 0; border-top: 1px solid #f1f1f1; justify-content: flex-end; } } /* ── Painel inline de edição de casa ────────────────────────── */ .casas-inline-panel { background: #fff; border-top: 2px solid #0d6efd; flex-shrink: 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.10); z-index: 10; animation: slideUpPanel 0.18s ease; overflow: hidden; } @keyframes slideUpPanel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .casas-inline-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 1rem; background: #f0f6ff; border-bottom: 1px solid #d0e4ff; } .cip-header-left { display: flex; align-items: center; gap: 0.4rem; } .cip-header-icon { font-size: 16px; color: #0d6efd; } .casas-inline-title { font-weight: 700; font-size: 0.85rem; color: #1a3a6e; } .cip-close-btn { padding: 0.2rem 0.4rem !important; line-height: 1; } .casas-inline-form-body { padding: 0.7rem 1rem 0.6rem; } /* Grid de campos do form inline */ .cif-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.65rem; } .cif-field { display: flex; flex-direction: column; gap: 3px; min-width: 80px; } .cif-field label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; white-space: nowrap; } .cif-field input[type="number"], .cif-field select { height: 32px; padding: 0 0.45rem; border: 1px solid #dee2e6; border-radius: 6px; font-size: 0.82rem; background: #f8f9fa; color: #212529; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; } .cif-field input[type="number"]:focus, .cif-field select:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.1); background: #fff; } /* Color picker do form inline */ .cif-field.cif-color { min-width: 66px; align-items: center; } .cif-field.cif-color input[type="color"] { width: 52px; height: 32px; padding: 2px 3px; border: 1px solid #dee2e6; border-radius: 6px; cursor: pointer; background: none; } /* Card associado ocupa mais espaço */ .cif-field.cif-wide { flex: 1; min-width: 180px; } /* Botões de ação do form inline */ .cif-actions { display: flex; align-items: flex-end; gap: 0.4rem; padding-bottom: 1px; } /* Responsividade do form inline */ @media (max-width: 860px) { .cif-grid { flex-wrap: wrap; } .cif-field.cif-wide { min-width: 140px; } .casas-inline-panel { overflow-y: auto; max-height: 240px; } } /* ── Usuários Públicos + Dashboard ─────────────────────────────────────────── */ #usuarios-publicos .content-card, #estatisticas .content-card { margin-bottom: 1.5rem; } #upu-detail .modal-body, #upu-detail-body { padding: 1rem 0; } #stat-resumo, #estat-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } #estatisticas canvas { max-height: 240px; } /* ======= PARÂMETROS DO SISTEMA ======= */ .param-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .param-row:last-child { border-bottom: none; } .param-info { flex: 1; } .param-label { display: block; font-weight: 600; font-size: 14px; color: var(--text-primary, #eee); margin-bottom: 4px; } .param-hint { font-size: 12px; color: var(--text-secondary, #888); margin: 0; } .param-control { display: flex; align-items: center; gap: 10px; min-width: 200px; justify-content: flex-end; } .param-select { background: var(--bg-secondary, #1e1e2e); color: var(--text-primary, #eee); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; min-width: 200px; } .param-select:focus { outline: none; border-color: var(--primary, #7c3aed); } .param-input { background: var(--bg-secondary, #1e1e2e); color: var(--text-primary, #eee); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 8px 12px; font-size: 13px; width: 220px; } .param-input:focus { outline: none; border-color: var(--primary, #7c3aed); } .param-status { font-size: 12px; font-weight: 600; min-width: 60px; text-align: right; } /* Toggle switch para parâmetros booleanos */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch .toggle-slider { position: absolute; inset: 0; background: #555; border-radius: 26px; transition: .3s; } .toggle-switch .toggle-slider:before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; } .toggle-switch input:checked + .toggle-slider { background: var(--primary, #7c3aed); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } /* ======= PORTAL (tela alternativa ao tabuleiro) ======= */ .portal-screen { width: 100%; padding: 16px; box-sizing: border-box; } .portal-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; max-width: 1400px; margin: 0 auto; } @media (max-width: 900px) { .portal-grid { grid-template-columns: 1fr; } } .portal-section { background: var(--card-bg, rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); } .portal-section:last-child { margin-bottom: 0; } .portal-section-title { font-size: 0.98rem; font-weight: 800; color: var(--text-primary, #eee); margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.01em; } /* Notícias/matérias */ .portal-noticia-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; margin-bottom: 10px; } .portal-noticia-card:last-child { margin-bottom: 0; } .portal-noticia-card:hover { transform: translateY(-2px); border-color: rgba(124, 58, 237, 0.42); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.22); } .portal-noticia-thumb { width: 92px; height: 68px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,0.05); } .portal-noticia-body { flex: 1; min-width: 0; } .portal-noticia-titulo { font-size: 0.84rem; font-weight: 700; color: var(--text-primary, #eee); margin: 1px 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .portal-noticia-meta { font-size: 0.72rem; color: var(--text-secondary, #888); } /* Vagas */ .portal-vaga-card { padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; margin-bottom: 10px; } .portal-vaga-card:last-child { margin-bottom: 0; } .portal-vaga-card:hover { transform: translateY(-2px); border-color: rgba(124, 58, 237, 0.42); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.2); } .portal-vaga-titulo { font-size: 0.84rem; font-weight: 700; color: var(--text-primary, #eee); margin: 0 0 5px; line-height: 1.35; } .portal-vaga-empresa { font-size: 0.73rem; color: var(--accent, #a78bfa); margin: 0 0 4px; font-weight: 600; } .portal-vaga-info { font-size: 0.72rem; color: var(--text-secondary, #888); } /* Serviços rápidos */ .portal-servicos-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 2px; } .portal-servico-btn { --svc-from: #6366f1; --svc-to: #4338ca; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 82px; padding: 12px; background: linear-gradient(135deg, var(--svc-from), var(--svc-to)); border: 1px solid rgba(255,255,255,0.24); border-radius: 12px; cursor: pointer; color: #f8fafc; text-align: left; line-height: 1.3; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; text-decoration: none; position: relative; overflow: hidden; } .portal-servico-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 24px rgba(2, 6, 23, 0.25); filter: saturate(1.08); } .portal-servico-btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 52%); pointer-events: none; } .portal-servico-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); position: relative; z-index: 1; } .portal-servico-icon-glyph { font-size: 22px; line-height: 1; color: #ffffff; } .portal-servico-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; } .portal-servico-content strong { font-size: 0.83rem; font-weight: 800; letter-spacing: 0.01em; } .portal-servico-content small { font-size: 0.72rem; color: rgba(241, 245, 249, 0.92); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .portal-servico-arrow { justify-self: end; font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.95); position: relative; z-index: 1; } .portal-empty { color: var(--text-secondary, #888); font-size: 13px; text-align: center; padding: 20px 0; } @media (max-width: 700px) { .portal-grid { gap: 14px; } .portal-screen { padding-bottom: calc(200px + env(safe-area-inset-bottom)); } .portal-servicos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .portal-servico-btn { grid-template-columns: 1fr; text-align: center; min-height: 116px; padding: 12px 10px; } .portal-servico-icon { margin: 0 auto; } .portal-servico-content small { -webkit-line-clamp: 2; } .portal-servico-arrow { display: none; } } /* ========================================== Modal Perfil – Campos do formulário ========================================== */ #perfilModal .modal-content { text-align: left; padding: 0; overflow: hidden; } #perfilModal .auth-header { border-radius: 20px 20px 0 0; } .auth-fields { padding: 18px 22px 4px; display: flex; flex-direction: column; gap: 10px; background: #fff; max-height: 52vh; overflow-y: auto; } .auth-field-group { display: flex; flex-direction: column; gap: 4px; text-align: left; } .auth-label { font-size: 0.75rem; font-weight: 700; color: rgba(0, 0, 0, 0.55); letter-spacing: 0.4px; text-transform: uppercase; } .auth-input { width: 100%; height: 40px; border-radius: 9px; border: 1.5px solid rgba(0, 0, 0, 0.13); padding: 0 11px; font-size: 0.9rem; font-weight: 500; color: #1a1a1a; background: #f8f9fa; outline: none; box-sizing: border-box; transition: border-color 0.18s, box-shadow 0.18s; font-family: inherit; } .auth-input:focus { border-color: rgba(46, 204, 113, 0.65); box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.13); background: #fff; } .auth-input[readonly] { background: #efefef; cursor: not-allowed; opacity: 0.7; } #perfilModal .modal-footer { padding: 12px 22px 16px; margin-top: 0; background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.07); border-radius: 0 0 20px 20px; justify-content: space-between; } #perfilModal #perfilMsg { margin: 4px 22px 0; } /* ========== MENU LATERAL UNIFICADO (DESKTOP + MOBILE) ========== */ .mobile-hamburger-btn { display: flex; position: fixed; top: var(--pc-mobile-hamburger-top, 0px); left: var(--pc-mobile-hamburger-left, 12px); right: auto; bottom: auto; min-width: var(--pc-mobile-hamburger-width, 64px); width: var(--pc-mobile-hamburger-width, 64px); height: var(--pc-mobile-hamburger-height, 56px); border-radius: 18px; border: 1px solid var(--demo-border, rgba(0, 51, 128, 0.16)); background: var(--demo-surface, #ffffff); color: var(--demo-text, #1a2a4a); box-shadow: var(--demo-shadow, 0 12px 28px rgba(15, 23, 42, 0.14)); cursor: pointer; z-index: 5100; align-items: center; justify-content: center; padding: 0 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 0.15s ease, box-shadow 0.15s ease; gap: 6px; box-sizing: border-box; } .mobile-hamburger-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16); } .mobile-hamburger-btn:active { transform: scale(0.96); } .mobile-hamburger-btn .mhb-avatar { min-width: 24px; min-height: 24px; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .mobile-hamburger-btn .mhb-avatar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; } .mhb-bars { display: flex; flex-direction: column; gap: 3px; color: #ffffff !important; } .mhb-bars i { display: block; width: 14px; height: 2px; border-radius: 999px; background: #ffffff !important; color: #ffffff !important; } :root[data-theme="light"] .mhb-bars i, :root:not([data-theme="dark"]) .mhb-bars i { background: #1f2937 !important; color: #1f2937 !important; } .mobile-hamburger-overlay { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 5110; } .mobile-hamburger-overlay.active { display: block; } .mobile-hamburger-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: var(--demo-surface, #ffffff); color: var(--demo-text, #111827); z-index: 5120; box-shadow: 10px 0 32px rgba(15, 23, 42, 0.18); transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow-y: auto; } .mobile-hamburger-drawer.open { transform: translateX(0); } .mhd-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px; background: linear-gradient(135deg, var(--blue, #003380), #1d4ed8); color: #fff; flex-shrink: 0; } .mhd-title { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; } .mhd-close-btn { background: none; border: none; color: rgba(255, 255, 255, 0.82); font-size: 1.1rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1; transition: background 0.15s; } .mhd-close-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .mhd-user-section { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; background: var(--demo-surface-soft, #f8fafc); border-bottom: 1px solid var(--demo-border, rgba(0, 51, 128, 0.08)); flex-shrink: 0; } .mhd-avatar-circle { width: 46px; height: 46px; border-radius: 50%; background: rgba(79, 70, 229, 0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; overflow: hidden; border: 2px solid rgba(79, 70, 229, 0.18); } .mhd-avatar-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .mhd-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mhd-user-name { font-size: 0.95rem; font-weight: 700; color: var(--demo-text, #1a2a4a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mhd-user-status { font-size: 0.75rem; color: var(--demo-muted, #64748b); } .mhd-auth-actions { padding: 12px 18px 4px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .mhd-btn-primary { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--blue, #003380); color: #fff; border: none; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; width: 100%; transition: background 0.15s, transform 0.1s; } .mhd-btn-primary:active { transform: scale(0.97); } .mhd-btn-outline { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: transparent; color: var(--demo-text, #003380); border: 1.5px solid var(--demo-border, rgba(0, 51, 128, 0.22)); border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; width: 100%; transition: background 0.15s, border-color 0.15s; } .mhd-btn-outline:hover { background: rgba(79, 70, 229, 0.08); } .mhd-btn-logout { color: #e74c3c; border-color: rgba(231, 76, 60, 0.22); } #mhdPerfilActions { display: none; } .mhd-btn-logout:hover { background: rgba(231, 76, 60, 0.05); } .mhd-divider { height: 1px; background: var(--demo-border, rgba(0, 51, 128, 0.08)); margin: 12px 18px 4px; flex-shrink: 0; } .mhd-nav { padding: 8px 10px 16px; display: flex; flex-direction: column; gap: 4px; } .mhd-section-label { padding: 10px 18px 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--demo-muted, #64748b); } .mhd-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px; background: transparent; border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 700; color: var(--demo-text, #1a2a4a); cursor: pointer; width: 100%; text-align: left; transition: background 0.15s, transform 0.12s ease; } .mhd-nav-item:hover { background: rgba(79, 70, 229, 0.08); } .mhd-nav-item.is-active { background: var(--demo-accent-soft, rgba(0, 51, 128, 0.1)); color: var(--demo-primary, #003380); } .mhd-nav-item:active { background: rgba(0, 51, 128, 0.1); transform: scale(0.99); } .mhd-nav-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; } #sidebarToggle, #sidebarToggleRight, #authToggle { display: none !important; } #btnFixedRollDice { display: none !important; } html[data-current-tela="tabuleiro"] #btnFixedRollDice { display: flex !important; left: auto; right: 16px; top: 16px; } @media (max-width: 640px) { .mobile-hamburger-btn { top: var(--pc-mobile-hamburger-top, 0px); left: var(--pc-mobile-hamburger-left, 12px); right: auto; bottom: auto; min-width: var(--pc-mobile-hamburger-width, 64px); width: var(--pc-mobile-hamburger-width, 64px); height: var(--pc-mobile-hamburger-height, 56px); padding: 0 8px; gap: 6px; } .mobile-hamburger-drawer { width: min(320px, 90vw); } } /* ========== PÁGINA HOME ========== */ /* Container principal da página home */ #home { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-color); background-image: radial-gradient(#dfe4ea 1px, transparent 1px); background-size: 20px 20px; z-index: 1; overflow-y: auto; overflow-x: hidden; } #home.active { display: flex; flex-direction: column; } #home-content { display: flex; flex-direction: column; min-height: 100vh; width: 100%; padding-top: 28px; } /* ========== HOME HEADER ========== */ .home-header { background: linear-gradient(120deg, rgba(0, 51, 128, 0.96), rgba(255, 94, 31, 0.88)); border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding: 8px 20px; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .home-header .pc-header-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .home-header .pc-logo-container { display: flex; align-items: center; gap: 12px; } .home-header .pc-camara-title { font-size: 1.4rem; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: -0.5px; } .home-header .pc-header-right { display: flex; align-items: center; gap: 12px; } .home-header .pc-weather { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, 0.18); border-radius: 12px; font-size: 0.9rem; color: #ffffff; } /* ========== HOME LAYOUT (Grid 2 Colunas) ========== */ .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%; flex: 1; align-items: start; } .home-grid.home-grid-no-sidebar { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1024px) { .home-grid { grid-template-columns: 1fr; padding: 16px; gap: 20px; } .carousel-card { grid-template-columns: 1fr; } .carousel-card-image { height: 180px; min-height: 180px; } } /* ========== HOME MAIN SECTION (CAROUSEL) ========== */ .home-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .home-section { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 51, 128, 0.12); border-radius: 16px; padding: 24px; box-shadow: 0 10px 26px rgba(0, 35, 90, 0.12); min-width: 0; } .home-section-title { font-size: 1.4rem; font-weight: 800; color: #003380; margin: 0 0 20px 0; text-transform: none; letter-spacing: -0.3px; } .home-section-title-no-margin { margin: 0; } /* ========== CAROUSEL STYLING ========== */ .carousel-section { padding: 24px; } .carousel-wrapper { position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; } .carousel-container { flex: 1; overflow: hidden; min-width: 0; } .carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1); gap: 0; } .carousel-card { flex: 0 0 100%; background: linear-gradient(160deg, #f7fafc, #eef3f9); border: 1px solid rgba(0, 51, 128, 0.16); border-radius: 14px; overflow: hidden; cursor: default; transition: all 0.3s ease; display: grid; grid-template-columns: minmax(240px, 46%) minmax(0, 1fr); align-items: stretch; min-height: 280px; } .carousel-card:hover { transform: translateY(-4px); border-color: rgba(255, 94, 31, 0.4); box-shadow: 0 14px 30px rgba(0, 51, 128, 0.2); } .carousel-card.is-clickable { cursor: pointer; } .carousel-card-image { width: 100%; height: 100%; min-height: 100%; object-fit: cover; background: rgba(0, 51, 128, 0.2); } .carousel-card-content { padding: 24px 24px 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; box-sizing: border-box; min-width: 0; } .carousel-card-title { font-size: 1.05rem; font-weight: 700; color: #102a43; margin: 0 0 8px 0; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-inline: 2px; } .carousel-card-meta { font-size: 0.8rem; color: #486581; display: flex; gap: 12px; flex-wrap: wrap; padding-inline: 2px; } .carousel-card-type { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px; border-radius: 8px; color: #ffffff; } .carousel-card-materia .carousel-card-type { background: linear-gradient(135deg, #0f62fe, #0043ce); } .carousel-card-evento .carousel-card-type { background: linear-gradient(135deg, #ff5e1f, #cc3d00); } .carousel-card-date { opacity: 0.8; } .carousel-card-desc { margin: 0; color: #334e68; font-size: 0.88rem; line-height: 1.4; padding-inline: 2px; flex: 1; } @media (max-width: 1024px) { .carousel-card { grid-template-columns: 1fr; min-height: 0; } .carousel-card-image { height: clamp(160px, 26vh, 220px); min-height: clamp(160px, 26vh, 220px); } .carousel-card-content { padding: 18px 16px 16px; } } /* ========== CAROUSEL CONTROLS ========== */ .carousel-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(163, 163, 163, 0.15); border: 1px solid rgba(163, 163, 163, 0.25); color: #ffffff; cursor: pointer; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .carousel-btn:hover { background: rgba(163, 163, 163, 0.28); border-color: rgba(163, 163, 163, 0.40); transform: scale(1.08); } .carousel-btn:active { transform: scale(0.96); } .carousel-indicators { display: flex; gap: 8px; justify-content: center; margin-top: 16px; } .carousel-indicator { width: 10px; height: 10px; border-radius: 50%; background: rgba(163, 163, 163, 0.25); border: 1px solid rgba(163, 163, 163, 0.35); cursor: pointer; transition: all 0.3s ease; } .carousel-indicator.active { width: 28px; border-radius: 6px; background: linear-gradient(135deg, #003380, #ff5e1f); border-color: transparent; } .pc-editorial-section { padding: 20px; margin-top: 0; } .pc-editorial-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .pc-editorial-header h3 { margin: 6px 0 0 0; color: #102a43; } .pc-btn-inline { width: auto; padding: 10px 18px; } .materia-photo-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; } .materia-photo-preview-card { border: 1px solid rgba(15, 98, 254, 0.14); border-radius: 14px; padding: 10px; background: #f8fbff; } .materia-photo-preview-card.is-cover { border-color: rgba(255, 94, 31, 0.4); box-shadow: 0 10px 24px rgba(16, 42, 67, 0.08); } .materia-photo-preview-image { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; display: block; } .materia-photo-preview-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .materia-photo-empty { grid-column: 1 / -1; padding: 14px; border: 1px dashed rgba(72, 101, 129, 0.35); border-radius: 12px; color: #486581; background: #f8fafc; } .materia-status-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .materia-status-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; font-weight: 700; background: #e2e8f0; color: #243b53; } .materia-status-chip.is-published { background: #d9f99d; color: #365314; } .materia-status-chip.is-event { background: #dbeafe; color: #1d4ed8; } .materia-status-chip.is-holiday { background: #fee2e2; color: #b91c1c; } .materia-card-cover { width: 100%; height: 180px; object-fit: cover; border-radius: 16px; margin-bottom: 14px; } .materia-thumb-list { display: flex; gap: 10px; margin-top: 14px; margin-bottom: 8px; overflow-x: auto; } .materia-thumb { border: 2px solid transparent; background: transparent; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; flex: 0 0 auto; } .materia-thumb.is-active { border-color: #ff5e1f; } .materia-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; } /* ========== HOME SIDEBAR (TALENTOS) ========== */ .home-sidebar { display: flex; flex-direction: column; min-width: 0; } .talentos-section { padding: 20px; display: flex; flex-direction: column; gap: 16px; height: fit-content; position: sticky; top: 80px; } .talentos-list { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; } .talentos-list::-webkit-scrollbar { width: 6px; } .talentos-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .talentos-list::-webkit-scrollbar-thumb { background: rgba(163, 163, 163, 0.25); border-radius: 10px; } .talentos-list::-webkit-scrollbar-thumb:hover { background: rgba(163, 163, 163, 0.40); } .talentos-item { padding: 12px; background: rgba(0, 51, 128, 0.05); border: 1px solid rgba(0, 51, 128, 0.15); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; display: flex; gap: 10px; align-items: flex-start; } .talentos-item:hover { background: rgba(255, 94, 31, 0.08); border-color: rgba(255, 94, 31, 0.34); transform: translateX(4px); } .talentos-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #003380, #ff5e1f); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #ffffff; font-size: 0.9rem; overflow: hidden; } .talentos-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .talentos-info { flex: 1; min-width: 0; } .talentos-name { font-size: 0.9rem; font-weight: 700; color: #102a43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .talentos-role { font-size: 0.75rem; color: #486581; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-empty { text-align: center; color: #627d98; padding: 20px; margin: 0; font-size: 0.9rem; } .talento-admin-preview { margin-top: 10px; padding: 12px; border: 1px dashed rgba(0, 51, 128, 0.2); border-radius: 12px; background: rgba(0, 51, 128, 0.03); } .talento-admin-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); } .talento-admin-inline { display: flex; align-items: flex-start; gap: 14px; } .talento-admin-inline .item-info { flex: 1; min-width: 0; } .talento-admin-empty { width: 96px; height: 96px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 51, 128, 0.12), rgba(255, 94, 31, 0.16)); color: #003380; font-weight: 800; flex-shrink: 0; } .talento-admin-current-file { margin-top: 6px; color: #486581; font-size: 0.85rem; } .home-btn-more { width: 100%; padding: 12px 16px; background: linear-gradient(135deg, #003380, #ff5e1f); color: #ffffff; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .home-btn-more:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 51, 128, 0.25); } .home-calendar-section { display: flex; flex-direction: column; gap: 12px; } .home-calendar-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .home-calendar-actions { display: flex; align-items: center; gap: 10px; } .home-calendar-title { font-weight: 700; color: #102a43; text-transform: capitalize; } .calendar-btn { border: 1px solid rgba(0, 51, 128, 0.2); background: #ffffff; color: #003380; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; } .home-calendar-weekdays, .home-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .home-calendar-weekdays span { font-size: 0.74rem; font-weight: 700; text-align: center; color: #486581; } .home-calendar-day { min-height: 42px; border-radius: 10px; border: 1px solid rgba(0, 51, 128, 0.15); background: #ffffff; color: #102a43; font-weight: 700; cursor: pointer; position: relative; } .home-calendar-day.is-muted { opacity: 0.32; cursor: default; } .home-calendar-day.is-selected { outline: 2px solid rgba(255, 94, 31, 0.5); } .home-calendar-day.has-event::after, .home-calendar-day.has-holiday::after, .home-calendar-day.has-both::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; right: 6px; bottom: 6px; } .home-calendar-day.has-event::after { background: #0f62fe; } .home-calendar-day.has-holiday::after { background: #ff5e1f; } .home-calendar-day.has-both::after { background: linear-gradient(135deg, #0f62fe, #ff5e1f); } .home-calendar-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: #486581; } .home-calendar-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; } .dot-event { background: #0f62fe; } .dot-holiday { background: #ff5e1f; } .dot-both { background: linear-gradient(135deg, #0f62fe, #ff5e1f); } .home-agenda-day { border-top: 1px solid rgba(0, 51, 128, 0.12); padding-top: 10px; } .home-agenda-day h3 { margin: 0 0 10px; color: #102a43; } .home-agenda-list { display: grid; grid-template-columns: 1fr; gap: 8px; } .agenda-card { border: 1px solid rgba(0, 51, 128, 0.12); border-radius: 10px; padding: 10px; background: #f8fbff; } .agenda-card.is-clickable { width: 100%; text-align: left; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .agenda-card.is-clickable:hover { transform: translateY(-1px); border-color: rgba(15, 98, 254, 0.35); box-shadow: 0 10px 18px rgba(0, 51, 128, 0.12); } .agenda-card.is-clickable:focus-visible { outline: 2px solid rgba(15, 98, 254, 0.55); outline-offset: 2px; } .agenda-card h4 { margin: 0 0 4px; color: #102a43; } .agenda-card p, .agenda-card small { margin: 0; color: #486581; } .agenda-holiday { border-left: 4px solid #ff5e1f; } .agenda-event { border-left: 4px solid #0f62fe; } .home-agenda-modal-content { max-width: 760px; text-align: left; border-width: 2px; } .home-agenda-modal-head { margin-bottom: 12px; } .home-agenda-modal-tag { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; color: #ffffff; margin-bottom: 8px; background: #0f62fe; } .home-agenda-modal-tag.is-holiday { background: #ff5e1f; } .home-agenda-modal-image-wrap { margin: 10px 0 14px; } .home-agenda-modal-image { width: 100%; max-height: min(55vh, 420px); object-fit: cover; border-radius: 12px; border: 1px solid rgba(0, 51, 128, 0.15); } .home-agenda-modal-description { white-space: pre-line; } .home-agenda-modal-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #0f62fe, #0043ce); } .home-agenda-modal-link:hover { filter: brightness(1.06); } .home-agenda-modal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .home-agenda-modal-copy { border: none; border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; color: #0f172a; background: #e2e8f0; } .home-agenda-modal-copy:hover { background: #cbd5e1; } .home-agenda-modal-copy-status { font-size: 0.84rem; color: #486581; } .app-toast { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 4200; max-width: min(88vw, 320px); border-radius: 12px; padding: 10px 14px; font-size: 0.9rem; font-weight: 700; color: #e2e8f0; background: rgba(15, 23, 42, 0.92); box-shadow: 0 14px 28px rgba(2, 6, 23, 0.35); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; } .app-toast.is-visible { opacity: 1; transform: translateY(0); } .app-toast.is-success { background: rgba(5, 150, 105, 0.94); color: #ecfeff; } .app-toast.is-error { background: rgba(185, 28, 28, 0.94); color: #fef2f2; } .home-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .home-info-card { --home-card-from: #6366f1; --home-card-to: #4338ca; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; padding: 15px; background: linear-gradient(135deg, var(--home-card-from), var(--home-card-to)); box-shadow: 0 12px 24px rgba(17, 24, 39, 0.2); position: relative; overflow: hidden; } .home-info-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.24), transparent 58%); pointer-events: none; } .home-info-card::after { content: ">"; position: absolute; right: 12px; top: 12px; color: rgba(255, 255, 255, 0.95); font-weight: 800; font-size: 0.9rem; line-height: 1; } .home-info-card.is-clickable { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } .home-info-card.is-clickable:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(17, 24, 39, 0.28); filter: saturate(1.08); } .home-info-card h3 { margin: 0 0 7px; color: #ffffff; font-size: 1rem; line-height: 1.32; position: relative; z-index: 1; } .home-info-card p, .home-info-card small { margin: 0; color: rgba(241, 245, 249, 0.92); line-height: 1.45; position: relative; z-index: 1; } #homeVagasList .home-info-card:nth-child(4n + 1) { --home-card-from: #4f46e5; --home-card-to: #4338ca; } #homeVagasList .home-info-card:nth-child(4n + 2) { --home-card-from: #8b5cf6; --home-card-to: #7c3aed; } #homeVagasList .home-info-card:nth-child(4n + 3) { --home-card-from: #14b8a6; --home-card-to: #0f766e; } #homeVagasList .home-info-card:nth-child(4n + 4) { --home-card-from: #f59e0b; --home-card-to: #d97706; } #homeEmpresasList .home-info-card:nth-child(4n + 1) { --home-card-from: #06b6d4; --home-card-to: #0891b2; } #homeEmpresasList .home-info-card:nth-child(4n + 2) { --home-card-from: #22c55e; --home-card-to: #16a34a; } #homeEmpresasList .home-info-card:nth-child(4n + 3) { --home-card-from: #ec4899; --home-card-to: #db2777; } #homeEmpresasList .home-info-card:nth-child(4n + 4) { --home-card-from: #f97316; --home-card-to: #ea580c; } .company-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; } .company-logo, .company-fallback { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .company-fallback { background: rgba(255, 255, 255, 0.22); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); } .home-btn-more:active { transform: translateY(0); } /* ========== RESPONSIVIDADE HOME ========== */ @media (max-width: 1024px) { .home-sidebar { flex-direction: row; gap: 16px; } .talentos-section { position: static; width: 100%; max-height: none; } .talentos-list { flex-direction: row; overflow-x: auto; max-height: none; gap: 12px; } .talentos-item { flex: 0 0 140px; flex-direction: column; align-items: center; text-align: center; } .talentos-info { width: 100%; } .talentos-name { white-space: normal; overflow: visible; text-overflow: clip; } .talentos-role { white-space: normal; overflow: visible; } } @media (max-width: 768px) { #home { overflow-y: auto; } #home-content { min-height: 0; padding-top: 88px; } .home-header { padding: 12px 16px; } .home-header .pc-header-top { flex-direction: column; align-items: flex-start; } .home-header .pc-header-right { width: 100%; } .home-header .pc-weather { width: 100%; justify-content: center; flex-wrap: wrap; text-align: center; } .home-grid { padding: 12px; gap: 16px; } .home-section, .carousel-section { padding: 16px; } .home-section-title { font-size: 1.2rem; } .home-calendar-header { flex-direction: column; align-items: flex-start; } .home-calendar-actions { width: 100%; justify-content: space-between; } .home-calendar-weekdays, .home-calendar-grid { gap: 6px; } .home-calendar-day { min-height: 36px; } .carousel-card-title { font-size: 0.95rem; } .carousel-btn { width: 40px; height: 40px; font-size: 1rem; } .carousel-wrapper { gap: 10px; } .home-cards-grid { grid-template-columns: 1fr; } .home-btn-more { padding: 10px 14px; font-size: 0.85rem; } .home-sidebar { flex-direction: column; } .talentos-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; } .talentos-item { flex: 0 0 120px; flex-direction: column; align-items: center; text-align: center; } }