/* ==========================================================================
DESIGN SYSTEM & VARIABLES - UNIÃO PROTEÇÃO VEICULAR
========================================================================== */
:root {
/* Brand Colors */
--brand-red: #07883D;
--brand-red-hover: #046A32;
--brand-red-light: rgba(7, 136, 61, 0.10);
/* Neutrals */
--bg-main: #F8F9FA;
--bg-card: #FFFFFF;
--text-primary: #151618;
--text-secondary: #5E6366;
--border-color: #E2E8F0;
/* Functional Colors */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 16px 40px rgba(7, 136, 61, 0.12);
/* Border Radii */
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 32px;
/* Transitions */
--transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ==========================================================================
RESET & BASE STYLES
========================================================================== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden; /* Prevents scroll on totem */
background-color: var(--bg-main);
font-family: 'Outfit', sans-serif;
color: var(--text-primary);
user-select: none; /* Prevents user selecting text on totem */
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; /* Removes touch highlight box */
}
/* ==========================================================================
APP SHELL & LAYOUT
========================================================================== */
/* ==========================================================================
PRE-SCREEN / TOTEM IDLE STATE
========================================================================== */
.pre-screen {
position: fixed;
inset: 0;
z-index: 35;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
background: #F7FAF7 url('../assets/pre_tela_uniao.png') center / contain no-repeat;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.pre-screen-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 900ms ease;
}
.pre-screen-video-bg {
z-index: 0;
object-fit: cover;
filter: blur(20px);
transform: scale(1.06);
}
.pre-screen-video-bg.is-active {
opacity: 0.38;
}
.pre-screen-video-main {
z-index: 1;
object-fit: contain;
object-position: center;
}
.pre-screen-video-main.is-active {
opacity: 1;
}
.pre-screen.is-visible {
opacity: 1;
pointer-events: auto;
}
.pre-screen-content {
position: absolute;
left: 50%;
top: 58%;
z-index: 2;
width: min(560px, 58vw);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
transform: translate(-50%, -50%);
}
.pre-screen-eyebrow {
display: none;
}
.pre-screen h1 {
max-width: 560px;
font-size: clamp(2.8rem, 4vw, 4.25rem);
font-weight: 800;
line-height: 1.02;
color: var(--text-primary);
}
.pre-screen p:not(.pre-screen-eyebrow) {
max-width: 500px;
font-size: clamp(1.08rem, 1.55vw, 1.42rem);
font-weight: 500;
line-height: 1.35;
color: var(--text-secondary);
}
.pre-screen-start {
min-width: min(330px, 78vw);
min-height: 64px;
margin-top: 8px;
border: 0;
border-radius: 16px;
background: var(--brand-red);
color: #FFFFFF;
font-family: inherit;
font-size: clamp(1.08rem, 1.45vw, 1.32rem);
font-weight: 800;
box-shadow: 0 16px 34px rgba(7, 136, 61, 0.25);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
animation: preScreenPulse 2.6s ease-in-out infinite;
}
.pre-screen-start:hover {
background: var(--brand-red-hover);
box-shadow: 0 20px 40px rgba(7, 136, 61, 0.30);
transform: translateY(-2px);
}
.pre-screen-start:active {
transform: scale(0.97);
}
.pre-screen-hint {
font-size: clamp(0.95rem, 1.1vw, 1.08rem);
font-weight: 700;
color: rgba(21, 22, 24, 0.58);
}
@keyframes preScreenPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
@media (max-width: 900px) {
.pre-screen-content {
top: 57%;
width: min(520px, 82vw);
gap: 12px;
}
}
@media (max-width: 560px) {
.pre-screen-content {
top: 56%;
width: 88vw;
}
.pre-screen h1 {
font-size: clamp(2.2rem, 11vw, 3rem);
}
.pre-screen-start {
min-height: 58px;
border-radius: 14px;
}
}
#app-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* Decorative background elements inspired by the brand U symbol */
.bg-decor-left {
position: absolute;
bottom: -5%;
left: -5%;
width: 40vh;
height: 40vh;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
.bg-decor-right {
position: absolute;
top: -5%;
right: -5%;
width: 45vh;
height: 45vh;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
/* Horizontal sliding slider */
#app-slider {
display: flex;
width: 300vw;
height: 100%;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
position: relative;
}
#app-slider.slide-position-1 {
transform: translateX(0vw);
}
#app-slider.slide-position-2 {
transform: translateX(-100vw);
}
#app-slider.slide-position-3 {
transform: translateX(-200vw);
}
/* Screen Base */
.screen {
width: 100vw;
height: 100%;
display: flex;
flex-direction: column;
padding: 3vh 4vw;
position: relative;
z-index: 2;
}
.screen-header {
height: 10vh;
min-height: 70px;
max-height: 90px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2vh;
}
.screen-header.flex-header {
justify-content: space-between;
}
.screen-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3vh;
}
/* ==========================================================================
BRAND LOGOS
========================================================================== */
.brand-logo-container {
display: flex;
align-items: center;
gap: 16px;
}
.brand-logo-img {
height: 56px;
width: 56px;
object-fit: contain;
border-radius: var(--radius-sm);
padding: 0;
box-shadow: 0 4px 12px rgba(254, 0, 2, 0.2);
}
.brand-logo-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
}
.brand-text-title {
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -1px;
}
.brand-text-subtitle {
font-size: 0.65rem;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 1px;
}
.footer-logo .brand-logo-img {
height: 48px;
width: 48px;
padding: 0;
box-shadow: none;
opacity: 0.85;
}
.footer-logo .brand-text-title {
font-size: 1.6rem;
opacity: 0.85;
}
.footer-logo .brand-text-subtitle {
font-size: 0.55rem;
letter-spacing: 1.5px;
opacity: 0.85;
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
.main-title {
font-size: 2.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5vh;
letter-spacing: -0.5px;
text-align: center;
}
@media (max-width: 768px) {
.main-title {
font-size: 1.75rem;
}
}
/* ==========================================================================
SCREEN 1: ATTENDANT SELECTION
========================================================================== */
.btn-pre-screen-home {
position: absolute;
top: 3vh;
left: 4vw;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 10px 18px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
background: #FFFFFF;
color: var(--text-secondary);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-pre-screen-home:hover {
color: var(--brand-red);
border-color: var(--brand-red);
box-shadow: var(--shadow-md);
}
.btn-pre-screen-home:active {
transform: scale(0.96);
}
@media (max-width: 640px) {
.btn-pre-screen-home {
min-height: 44px;
padding: 9px 12px;
font-size: 0.92rem;
}
}
.attendants-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
width: 100%;
max-width: 900px;
margin-top: 1vh;
}
.attendant-card {
background-color: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: var(--shadow-sm);
text-decoration: none;
}
.attendant-card:hover {
border-color: var(--brand-red);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.attendant-card:active {
transform: scale(0.97);
border-color: var(--brand-red);
background-color: var(--brand-red-light);
}
/* Initial Avatar Container */
.avatar-container {
position: relative;
width: 110px;
height: 110px;
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-hover) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid var(--border-color);
transition: var(--transition-smooth);
overflow: hidden;
}
.attendant-card:hover .avatar-container {
border-color: #151618;
transform: scale(1.05);
}
.avatar-u-watermark {
position: absolute;
width: 75%;
height: 75%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0.18;
transition: var(--transition-smooth);
}
.attendant-card:hover .avatar-u-watermark {
opacity: 0.35;
transform: translate(-50%, -50%) scale(1.1);
}
.avatar-initials {
color: #FFFFFF;
font-size: 2.25rem;
font-weight: 700;
letter-spacing: 1px;
z-index: 2;
position: relative;
text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.attendant-name {
font-size: 1.35rem;
font-weight: 600;
color: var(--text-primary);
text-align: center;
line-height: 1.3;
}
@media (max-width: 768px) {
.attendants-grid {
grid-template-columns: 1fr;
gap: 16px;
max-width: 450px;
}
.attendant-card {
padding: 20px;
flex-direction: row;
justify-content: flex-start;
gap: 20px;
}
.avatar-container {
width: 70px;
height: 70px;
}
.avatar-initials {
font-size: 1.5rem;
}
.attendant-name {
text-align: left;
font-size: 1.15rem;
}
}
/* ==========================================================================
SCREEN 2: RATING SELECTION
========================================================================== */
.btn-back {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--bg-card);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 10px 18px;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-back:hover {
color: var(--brand-red);
border-color: var(--brand-red);
transform: translateX(-2px);
}
.btn-back:active {
transform: scale(0.95);
}
.screen-evaluation .screen-content {
justify-content: flex-start;
padding-top: clamp(56px, 8vh, 86px);
gap: clamp(22px, 3vh, 34px);
}
/* Attendant selection info badge */
.attendant-badge {
display: inline-flex;
align-items: center;
gap: 14px;
background-color: #FFFFFF;
border: 1.5px solid var(--border-color);
padding: 10px 12px;
border-radius: 50px;
box-shadow: var(--shadow-sm);
margin-bottom: 0;
}
.badge-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-hover) 100%);
color: #FFFFFF;
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--border-color);
box-shadow: var(--shadow-sm);
}
.badge-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.badge-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-red);
}
.btn-change-attendant {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
border: 0;
border-left: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
padding: 0 4px 0 14px;
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-change-attendant:hover {
color: var(--brand-red);
}
.btn-change-attendant:active {
transform: scale(0.96);
}
/* Ratings Layout */
.ratings-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
width: 100%;
max-width: 1100px;
margin-top: 0;
}
.rating-card {
background-color: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
padding: 24px 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
cursor: pointer;
transition: var(--transition-bounce);
box-shadow: var(--shadow-sm);
}
.rating-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.rating-card:active {
transform: scale(0.95);
}
.emoji-wrapper {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.emoji-img {
width: 100%;
height: 100%;
object-fit: contain;
transition: var(--transition-bounce);
}
.rating-card:hover .emoji-img {
transform: scale(1.12);
}
.rating-label {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
text-align: center;
}
/* Specific feedback card borders on active/hover */
.card-very-bad:hover { border-color: #D32F2F; }
.card-bad:hover { border-color: #F57C00; }
.card-regular:hover { border-color: #FBC02D; }
.card-good:hover { border-color: #388E3C; }
.card-excellent:hover { border-color: var(--brand-red); }
@media (max-width: 900px) {
.ratings-row {
grid-template-columns: repeat(3, 1fr);
justify-content: center;
gap: 16px;
}
.card-very-bad { order: 1; }
.card-bad { order: 2; }
.card-regular { order: 3; }
.card-good { order: 4; }
.card-excellent { order: 5; }
}
@media (max-width: 600px) {
.ratings-row {
grid-template-columns: 1fr;
max-width: 320px;
}
.rating-card {
flex-direction: row;
justify-content: flex-start;
padding: 16px 24px;
gap: 24px;
}
.emoji-wrapper {
width: 60px;
height: 60px;
}
.rating-label {
font-size: 1.25rem;
}
}
/* ==========================================================================
SCREEN 3: THANK YOU SCREEN
========================================================================== */
.screen-thankyou {
justify-content: space-between;
padding-top: 8vh;
padding-bottom: 5vh;
}
.thankyou-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 3.5vh;
max-width: 700px;
margin: 0 auto;
}
.thankyou-title {
font-size: 3rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -1px;
line-height: 1.1;
}
.thankyou-subtitle {
font-size: 1.35rem;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.5;
max-width: 580px;
}
@media (max-width: 768px) {
.thankyou-title { font-size: 2.25rem; }
.thankyou-subtitle { font-size: 1.15rem; }
}
/* Success Ring Animation */
.success-animation-container {
width: 140px;
height: 140px;
position: relative;
margin-bottom: 1vh;
}
.brand-success-ring {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.checkmark-svg {
width: 140px;
height: 140px;
border-radius: 50%;
display: block;
stroke-width: 3.5;
stroke: var(--brand-red);
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px var(--brand-red);
animation: fillRing .4s ease-in-out .4s forwards, scaleCheckmark .3s ease-in-out .9s forwards;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3.5;
stroke-linecap: round;
stroke: var(--brand-red);
fill: none;
animation: strokeRing .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke-linecap: round;
animation: strokeCheck .3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes strokeRing {
100% {
stroke-dashoffset: 0;
}
}
@keyframes fillRing {
100% {
box-shadow: inset 0px 0px 0px 80px rgba(254, 0, 2, 0.05);
}
}
@keyframes scaleCheckmark {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes strokeCheck {
100% {
stroke-dashoffset: 0;
}
}
/* Timeout Progress Indicator */
.timeout-indicator-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 2vh;
}
.timeout-progress-bar {
width: 240px;
height: 6px;
background-color: var(--border-color);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.timeout-progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--brand-red);
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
}
.timeout-progress-bar.is-running::after {
animation: fillProgress var(--return-timeout, 12s) linear forwards;
}
.timeout-text {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: 0.5px;
}
.btn-undo {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 2.5vh;
padding: 12px 22px;
background-color: var(--bg-card);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-undo:hover {
color: var(--brand-red);
border-color: var(--brand-red);
}
.btn-undo:active {
transform: scale(0.96);
background-color: var(--brand-red-light);
}
.comment-qr-card {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 16px;
background: #FFFFFF;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
text-align: left;
}
.comment-qr-card[hidden] {
display: none;
}
.comment-qr-copy {
display: grid;
gap: 4px;
min-width: 190px;
}
.comment-qr-copy strong {
font-size: 1rem;
color: var(--text-primary);
}
.comment-qr-copy span {
font-size: 0.9rem;
color: var(--text-secondary);
}
#comment-qr-img {
width: 118px;
height: 118px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: #FFFFFF;
}
/* ==========================================================================
QUICK FEEDBACK MODAL
========================================================================== */
.feedback-modal {
position: fixed;
inset: 0;
z-index: 30;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.feedback-modal.is-open {
display: flex;
}
.feedback-backdrop {
position: absolute;
inset: 0;
background: rgba(21, 22, 24, 0.42);
backdrop-filter: blur(5px);
}
.feedback-card {
position: relative;
width: min(560px, 100%);
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: 28px;
padding: 30px;
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
text-align: center;
animation: tokenRise .24s ease-out;
}
.feedback-eyebrow {
margin: 0 0 6px;
color: var(--brand-red);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.feedback-card h2 {
margin: 0;
font-size: 2rem;
line-height: 1.1;
}
.feedback-subtitle {
margin: 12px auto 18px;
color: var(--text-secondary);
line-height: 1.45;
}
.feedback-extra-questions {
display: grid;
gap: 14px;
margin: 0 0 16px;
text-align: left;
}
.feedback-extra-questions:empty {
display: none;
}
.feedback-question {
background: #F8FAFC;
border: 1.5px solid var(--border-color);
border-radius: 16px;
padding: 14px;
}
.feedback-question-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
color: var(--text-primary);
font-size: 0.96rem;
font-weight: 800;
}
.feedback-required {
color: var(--brand-red);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.feedback-choice-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.feedback-choice {
min-height: 40px;
border: 1.5px solid var(--border-color);
border-radius: 999px;
background: #FFFFFF;
color: var(--text-secondary);
font: inherit;
font-size: 0.92rem;
font-weight: 800;
padding: 0 14px;
cursor: pointer;
}
.feedback-choice.is-selected {
border-color: var(--brand-red);
background: var(--brand-red-light);
color: var(--brand-red);
}
.feedback-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
.feedback-chips button {
min-height: 42px;
border: 1.5px solid var(--border-color);
border-radius: 999px;
background: #F8F9FA;
color: var(--text-secondary);
font: inherit;
font-weight: 800;
padding: 0 14px;
cursor: pointer;
}
.feedback-chips button.is-selected {
border-color: var(--brand-red);
color: var(--brand-red);
background: var(--brand-red-light);
}
.feedback-observation {
width: 100%;
min-height: 104px;
border: 2px solid var(--border-color);
border-radius: 16px;
padding: 14px;
font: inherit;
color: var(--text-primary);
resize: none;
}
.feedback-observation:focus {
outline: none;
border-color: #CBD5E1;
box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
}
.feedback-count {
margin-top: 8px;
text-align: right;
color: var(--text-secondary);
font-size: 0.82rem;
font-weight: 700;
}
.feedback-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.btn-feedback-secondary,
.btn-feedback-primary {
min-height: 54px;
border: 0;
border-radius: 14px;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.btn-feedback-secondary {
background: #F1F5F9;
color: var(--text-secondary);
}
.btn-feedback-primary {
background: var(--brand-red);
color: #FFFFFF;
}
.btn-feedback-secondary:disabled,
.btn-feedback-primary:disabled {
opacity: 0.58;
cursor: not-allowed;
}
/* ==========================================================================
TOAST (connection / save errors)
========================================================================== */
.totem-toast {
position: fixed;
left: 50%;
bottom: 40px;
transform: translateX(-50%) translateY(20px);
max-width: 90vw;
padding: 16px 24px;
background-color: var(--text-primary);
color: #FFFFFF;
font-size: 1.05rem;
font-weight: 600;
border-radius: var(--radius-sm);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 40;
}
.totem-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@keyframes fillProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* Footer in thank you screen */
.thankyou-footer {
height: 8vh;
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* ==========================================================================
ATTENDANT TOKEN MODAL
========================================================================== */
.token-modal {
position: fixed;
inset: 0;
z-index: 20;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.token-modal.is-open {
display: flex;
}
.token-backdrop {
position: absolute;
inset: 0;
background: rgba(21, 22, 24, 0.42);
backdrop-filter: blur(5px);
}
.token-card {
position: relative;
width: min(430px, 100%);
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: 28px;
padding: 32px;
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
text-align: center;
animation: tokenRise .24s ease-out;
}
@keyframes tokenRise {
from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.token-close {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: #FFFFFF;
color: var(--text-secondary);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.token-avatar {
width: 74px;
height: 74px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-hover) 100%);
color: #FFFFFF;
display: grid;
place-items: center;
font-size: 1.65rem;
font-weight: 800;
border: 4px solid var(--border-color);
}
.token-eyebrow {
margin: 0 0 6px;
color: var(--brand-red);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.token-card h2 {
margin: 0;
font-size: 2rem;
line-height: 1.1;
}
.token-subtitle {
margin: 12px auto 20px;
color: var(--text-secondary);
line-height: 1.45;
}
.token-subtitle strong {
color: var(--text-primary);
}
.token-form {
display: grid;
gap: 14px;
}
.token-input {
width: 100%;
min-height: 58px;
border: 2px solid var(--border-color);
border-radius: 16px;
text-align: center;
font: inherit;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 0.28em;
}
.token-input:focus {
border-color: var(--brand-red);
}
.token-error {
min-height: 20px;
color: var(--brand-red);
font-weight: 700;
font-size: 0.92rem;
}
.token-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.token-keypad button {
min-height: 52px;
border: 1px solid var(--border-color);
border-radius: 14px;
background: #F8F9FA;
color: var(--text-primary);
font: inherit;
font-weight: 800;
font-size: 1.1rem;
cursor: pointer;
}
.token-keypad button:active {
transform: scale(0.97);
background: var(--brand-red-light);
}
.token-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.btn-token-secondary,
.btn-token-primary {
min-height: 52px;
border: 0;
border-radius: 14px;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.btn-token-secondary {
background: #F1F5F9;
color: var(--text-secondary);
}
.btn-token-primary {
background: var(--brand-red);
color: #FFFFFF;
}
.btn-token-primary:active,
.btn-token-secondary:active {
transform: scale(0.98);
}
/* Dynamic rating models configured from the admin */
.ratings-row.rating-scale-10 {
grid-template-columns: repeat(5, minmax(0, 1fr));
max-width: 1180px;
gap: 14px;
}
.ratings-row.rating-scale-10 .rating-card {
padding: 18px 10px;
min-height: 170px;
}
.ratings-row.rating-scale-10 .emoji-wrapper {
width: 78px;
height: 78px;
}
.ratings-row.rating-scale-10 .rating-label {
font-size: 0.96rem;
}
.rating-number {
position: absolute;
right: -6px;
top: -8px;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--brand-red);
color: #fff;
border: 2px solid #fff;
font-size: 0.86rem;
font-weight: 800;
box-shadow: var(--shadow-sm);
}
.feedback-modal[data-observation-mode="hidden"] .feedback-chips,
.feedback-modal[data-observation-mode="hidden"] .feedback-observation,
.feedback-modal[data-observation-mode="hidden"] .feedback-count {
display: none;
}
@media (max-width: 900px) {
.ratings-row.rating-scale-10 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.ratings-row.rating-scale-10 {
grid-template-columns: 1fr;
}
}
/* Feedback modal simplified when admin questions exist */
.feedback-chips[hidden] {
display: none !important;
}
.feedback-modal[data-has-extra-questions="1"] .feedback-extra-questions {
margin-bottom: 18px;
}
/* Android kiosk/tablet responsiveness */
@supports (height: 100dvh) {
html,
body,
#app-container,
#app-slider,
.screen {
height: 100dvh;
}
}
.screen {
padding: clamp(12px, 2dvh, 28px) clamp(18px, 4vw, 64px);
min-height: 0;
}
.screen-header {
height: clamp(50px, 8dvh, 82px);
min-height: 50px;
max-height: 82px;
margin-bottom: clamp(8px, 1.5dvh, 18px);
}
.screen-content {
min-height: 0;
gap: clamp(12px, 2dvh, 28px);
}
.main-title {
font-size: clamp(1.7rem, 3vw, 2.55rem);
margin-bottom: 0;
}
.attendants-grid {
width: min(100%, 1040px);
max-width: 92vw;
gap: clamp(12px, 2.2dvh, 24px);
margin-top: 0;
}
.attendant-card {
min-height: clamp(132px, 23dvh, 220px);
padding: clamp(14px, 2.3dvh, 30px);
gap: clamp(10px, 1.8dvh, 20px);
}
.avatar-container {
width: clamp(74px, 12dvh, 110px);
height: clamp(74px, 12dvh, 110px);
}
.avatar-initials {
font-size: clamp(1.35rem, 3.2dvh, 2.25rem);
}
.attendant-name {
font-size: clamp(1rem, 1.55vw, 1.35rem);
line-height: 1.22;
}
.screen-evaluation .screen-content {
padding-top: clamp(16px, 5dvh, 70px);
gap: clamp(14px, 2.4dvh, 28px);
}
.ratings-row {
gap: clamp(10px, 1.8dvh, 20px);
max-width: min(1120px, 94vw);
}
.rating-card {
min-height: clamp(130px, 27dvh, 190px);
padding: clamp(14px, 2.2dvh, 24px) clamp(10px, 1.6vw, 16px);
gap: clamp(8px, 1.8dvh, 16px);
}
.emoji-wrapper {
width: clamp(64px, 12dvh, 100px);
height: clamp(64px, 12dvh, 100px);
}
.rating-label {
font-size: clamp(0.92rem, 1.45vw, 1.15rem);
}
.token-card,
.feedback-card {
max-height: calc(100dvh - 24px);
overflow: auto;
overscroll-behavior: contain;
}
.token-input[readonly],
.feedback-observation[readonly] {
caret-color: transparent;
}
.feedback-observation[readonly] {
min-height: 74px;
background: #F8FAFC;
}
@media (orientation: landscape) and (max-height: 760px) {
.screen {
padding-top: clamp(10px, 1.5dvh, 18px);
padding-bottom: clamp(10px, 1.5dvh, 18px);
}
.screen-attendants .screen-content {
justify-content: flex-start;
}
.brand-logo-img {
width: clamp(38px, 7dvh, 52px);
height: clamp(38px, 7dvh, 52px);
}
.brand-text-title {
font-size: clamp(1.25rem, 3.2dvh, 1.8rem);
}
.brand-text-subtitle {
font-size: clamp(0.48rem, 1.4dvh, 0.62rem);
}
.btn-pre-screen-home,
.btn-back {
min-height: 40px;
padding: 8px 12px;
font-size: 0.9rem;
}
.attendant-card {
min-height: 128px;
}
.attendant-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.attendant-badge {
padding: 7px 10px;
}
.badge-avatar {
width: 38px;
height: 38px;
}
.badge-label {
font-size: 0.68rem;
}
.badge-name {
font-size: 0.92rem;
}
.ratings-row {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.rating-card {
min-height: 126px;
}
}
@media (orientation: landscape) and (max-height: 620px) {
.screen-header {
height: 44px;
min-height: 44px;
}
.main-title {
font-size: clamp(1.45rem, 4.4dvh, 2rem);
}
.attendants-grid {
gap: 10px;
}
.attendant-card {
min-height: 106px;
flex-direction: row;
justify-content: flex-start;
text-align: left;
}
.avatar-container {
width: 62px;
height: 62px;
flex: 0 0 auto;
}
.attendant-name {
text-align: left;
font-size: clamp(0.92rem, 2.8dvh, 1.08rem);
}
.screen-evaluation .screen-content {
padding-top: 8px;
}
.rating-card {
min-height: 104px;
}
.emoji-wrapper {
width: 54px;
height: 54px;
}
}
/* ==========================================================================
ENCAIXE GARANTIDO — tela de atendentes em qualquer resolução (landscape)
Não depende de saber a resolução do totem:
- o título fica no topo;
- a grade de atendentes centraliza no espaço que sobra;
- se faltar altura (ou tiver muitas atendentes), ROLA dentro da área
em vez de cortar os nomes da fileira de baixo.
========================================================================== */
.screen-attendants .screen-content {
justify-content: flex-start;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.screen-attendants .attendants-grid {
margin-block: auto; /* centraliza quando sobra espaço; colapsa ao rolar */
}
.screen-attendants .attendant-card {
min-height: clamp(92px, 19dvh, 190px);
}
/* Nome longo nunca empurra/corta o card: limita a 2 linhas com reticências */
.screen-attendants .attendant-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
/* Android GM92 / low-height kiosk final override */
@media (orientation: landscape) and (max-height: 700px) {
html,
body,
#app-container,
#app-slider,
.screen {
height: 100dvh !important;
max-height: 100dvh !important;
}
.screen {
padding: 10px clamp(24px, 4vw, 52px) !important;
min-height: 0 !important;
}
.screen-header {
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
margin-bottom: 6px !important;
}
.screen-attendants .screen-content,
.screen-evaluation .screen-content {
justify-content: flex-start !important;
gap: 10px !important;
padding-top: 0 !important;
min-height: 0 !important;
}
.screen-attendants .main-title,
.screen-evaluation .main-title {
font-size: clamp(1.5rem, 4.2dvh, 1.9rem) !important;
line-height: 1.08 !important;
margin: 0 !important;
}
.brand-logo-container {
gap: 10px !important;
}
.brand-logo-img {
width: 40px !important;
height: 40px !important;
}
.brand-text-title {
font-size: 1.35rem !important;
}
.brand-text-subtitle {
font-size: 0.5rem !important;
letter-spacing: 1.4px !important;
}
.btn-pre-screen-home,
.btn-back {
min-height: 38px !important;
padding: 7px 11px !important;
font-size: 0.88rem !important;
border-radius: 10px !important;
}
.btn-pre-screen-home svg,
.btn-back svg {
width: 18px !important;
height: 18px !important;
}
.attendants-grid {
width: min(900px, 92vw) !important;
max-width: 92vw !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px 14px !important;
margin-top: 0 !important;
}
.attendant-card {
min-height: 104px !important;
height: 104px !important;
padding: 10px 15px !important;
flex-direction: row !important;
justify-content: flex-start !important;
gap: 14px !important;
border-radius: 16px !important;
}
.avatar-container {
width: 62px !important;
height: 62px !important;
flex: 0 0 62px !important;
border-width: 3px !important;
}
.avatar-initials {
font-size: 1.24rem !important;
}
.attendant-name {
text-align: left !important;
font-size: clamp(0.92rem, 2.6dvh, 1.04rem) !important;
line-height: 1.18 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.attendant-badge {
padding: 6px 9px !important;
gap: 9px !important;
}
.badge-avatar {
width: 36px !important;
height: 36px !important;
font-size: 0.84rem !important;
}
.badge-label {
font-size: 0.64rem !important;
}
.badge-name {
font-size: 0.9rem !important;
}
.btn-change-attendant {
min-height: 32px !important;
font-size: 0.82rem !important;
padding-left: 10px !important;
}
.ratings-row {
max-width: 94vw !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 0 !important;
}
.rating-card {
min-height: 108px !important;
padding: 10px 8px !important;
gap: 8px !important;
border-radius: 16px !important;
}
.emoji-wrapper {
width: 56px !important;
height: 56px !important;
}
.rating-label {
font-size: 0.9rem !important;
line-height: 1.12 !important;
}
.token-modal,
.feedback-modal {
padding: 10px !important;
align-items: center !important;
}
.token-card {
width: min(380px, 94vw) !important;
max-height: calc(100dvh - 20px) !important;
padding: 18px !important;
border-radius: 22px !important;
}
.token-avatar {
width: 54px !important;
height: 54px !important;
margin-bottom: 10px !important;
font-size: 1.2rem !important;
}
.token-card h2,
.feedback-card h2 {
font-size: 1.45rem !important;
}
.token-subtitle,
.feedback-subtitle {
margin: 8px auto 10px !important;
font-size: 0.9rem !important;
}
.token-form {
gap: 8px !important;
}
.token-input {
min-height: 46px !important;
font-size: 1.25rem !important;
}
.token-keypad {
gap: 7px !important;
}
.token-keypad button {
min-height: 42px !important;
border-radius: 12px !important;
}
.btn-token-secondary,
.btn-token-primary,
.btn-feedback-secondary,
.btn-feedback-primary {
min-height: 44px !important;
border-radius: 12px !important;
}
.feedback-card {
width: min(640px, 94vw) !important;
max-height: calc(100dvh - 20px) !important;
padding: 18px !important;
border-radius: 22px !important;
}
.feedback-extra-questions {
gap: 8px !important;
margin-bottom: 8px !important;
}
.feedback-question {
padding: 10px !important;
border-radius: 14px !important;
}
.feedback-choice,
.feedback-chips button {
min-height: 34px !important;
font-size: 0.84rem !important;
padding: 0 11px !important;
}
.feedback-observation {
min-height: 54px !important;
}
}
/* Smart feedback modal: no Android keyboard surface */
.feedback-observation,
.feedback-count {
display: none !important;
}
.feedback-modal[data-has-extra-questions="1"] .feedback-extra-questions {
margin-bottom: 10px;
}
.feedback-question-smart {
text-align: center;
}
.feedback-question-smart .feedback-question-title {
justify-content: center;
margin-bottom: 14px;
font-size: 1.02rem;
}
.feedback-question-smart .feedback-choice-grid {
justify-content: center;
}
.feedback-actions {
grid-template-columns: 0.85fr 1.15fr; /* 2 botoes: Corrigir nota + Salvar */
}
.btn-feedback-tertiary {
min-height: 54px;
border: 1.5px solid var(--border-color);
border-radius: 14px;
background: #FFFFFF;
color: var(--text-secondary);
font: inherit;
font-weight: 800;
cursor: pointer;
}
.btn-feedback-tertiary:active {
transform: scale(0.98);
background: #F8FAFC;
}
@media (max-width: 620px) {
.feedback-actions {
grid-template-columns: 1fr;
}
}
.feedback-chips {
display: none !important;
}
/* ==========================================================================
FOTO DA ATENDENTE — preenche o avatar circular (fallback = iniciais)
========================================================================== */
.avatar-container .avatar-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
z-index: 4; /* acima da inicial (z-index 2) e da marca-d'agua */
}
/* Foto nos avatares do badge (tela 2) e do modal de token (fallback = iniciais) */
.badge-avatar,
.token-avatar {
position: relative;
overflow: hidden;
}
.badge-avatar-photo,
.token-avatar-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
z-index: 2;
}
/* ==========================================================================
CENTRALIZACAO VERTICAL — telas com altura suficiente (CSS px > 600).
Cobre 1920x1080 mesmo com densidade (DPI) alta, que reporta ~720px CSS.
So o totem realmente baixo (<=600px, ex.: 1024x600) fica top-aligned.
========================================================================== */
@media (orientation: landscape) and (min-height: 601px) {
/* ATENDENTES: grupo (titulo + cards) centralizado, leve vies pra cima */
.screen-attendants .screen-content {
justify-content: center !important;
padding-top: 0 !important;
padding-bottom: clamp(16px, 4vh, 56px) !important;
}
.screen-attendants .attendants-grid {
margin-block: 0 !important;
}
/* AVALIACAO: badge no topo (no fluxo). Os EMOJIS sao centralizados em
relacao a TELA inteira (centro absoluto), e a pergunta fica logo acima.
.screen ja e position:relative, entao o absolute ancora na tela. */
.screen-evaluation .screen-content {
justify-content: flex-start !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.screen-evaluation .ratings-row {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: min(1120px, 94vw) !important;
margin: 0 !important;
}
.screen-evaluation .main-title {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: calc(50% + clamp(80px, 15dvh, 110px)) !important; /* logo acima dos emojis */
margin: 0 !important;
}
}
/* ==========================================================================
TELA 3 (Obrigado / QR) — caber sem cortar o botao Desfazer e o logo.
Compacta e centraliza; rola por dentro como ultima garantia.
========================================================================== */
@media (orientation: landscape) and (max-height: 900px) {
.screen-thankyou {
justify-content: space-between !important; /* logo ancorado no rodape */
padding-top: clamp(10px, 2vh, 24px) !important;
padding-bottom: clamp(10px, 2vh, 24px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
}
.thankyou-container {
flex: 1 1 auto !important; /* preenche o meio e centraliza o conteudo */
justify-content: center !important;
gap: clamp(8px, 1.6vh, 20px) !important;
}
.success-animation-container,
.checkmark-svg {
width: clamp(68px, 11vh, 120px) !important;
height: clamp(68px, 11vh, 120px) !important;
}
.thankyou-title {
font-size: clamp(1.5rem, 4.2vh, 2.4rem) !important;
margin: 0 !important;
}
.thankyou-subtitle {
font-size: clamp(0.95rem, 2.4vh, 1.25rem) !important;
}
/* QR em destaque: e a unica acao real do cliente nesta tela */
#comment-qr-img {
width: clamp(120px, 19vh, 168px) !important;
height: clamp(120px, 19vh, 168px) !important;
}
.comment-qr-card {
padding: clamp(10px, 1.6vh, 18px) clamp(12px, 1.8vh, 20px) !important;
gap: clamp(12px, 2vw, 22px) !important;
}
/* Menos poluicao: esconde a barra de progresso, mantem o aviso de retorno */
.timeout-progress-bar {
display: none !important;
}
.timeout-indicator-container {
margin-top: clamp(4px, 1vh, 12px) !important;
}
.btn-undo {
margin-top: clamp(6px, 1.4vh, 16px) !important;
}
.thankyou-footer {
height: auto !important;
min-height: 0 !important;
padding-top: 6px !important;
}
}
/* ==========================================================================
COPA BRASIL THEME OVERRIDES
========================================================================== */
:root {
--brand-red: #07883D;
--brand-red-hover: #046A32;
--brand-red-light: rgba(7, 136, 61, 0.10);
--brand-yellow: #F7D117;
--brand-yellow-soft: rgba(247, 209, 23, 0.22);
--brand-blue: #1E74D6;
--brand-green-dark: #063D2B;
--bg-main: #F7FAF7;
--text-primary: #101817;
--text-secondary: #55615D;
--border-color: #DDE9E3;
--shadow-lg: 0 18px 44px rgba(7, 136, 61, 0.14), 0 0 0 1px rgba(247, 209, 23, 0.12);
}
html, body {
background:
radial-gradient(circle at 50% 115%, rgba(7, 136, 61, 0.13), transparent 42%),
linear-gradient(180deg, #FAFCFB 0%, #F3F7F4 100%);
}
#totem-lock {
background:
radial-gradient(circle at 50% 26%, rgba(247, 209, 23, 0.20), transparent 28%),
radial-gradient(circle at 18% 80%, rgba(7, 136, 61, 0.26), transparent 34%),
linear-gradient(135deg, #052A20 0%, #082E25 55%, #0B1D2C 100%) !important;
}
.lock-card {
border-color: rgba(247, 209, 23, 0.22) !important;
background: rgba(255, 255, 255, 0.07) !important;
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46), 0 0 46px rgba(7, 136, 61, 0.18) !important;
}
.lock-logo {
border-radius: 0 !important;
filter: drop-shadow(0 0 14px rgba(247, 209, 23, 0.52)) drop-shadow(0 8px 20px rgba(7, 136, 61, 0.34));
}
.lock-eyebrow {
color: var(--brand-yellow) !important;
}
.lock-submit {
background: linear-gradient(135deg, #07883D 0%, #0AB84E 70%, #F7D117 100%) !important;
box-shadow: 0 14px 34px rgba(7, 136, 61, 0.34) !important;
}
.pre-screen {
background: #F7FAF7 url('../assets/pre_tela_uniao.png') center / contain no-repeat;
}
.pre-screen-video-bg.is-active {
opacity: 0.42;
}
.pre-screen-video-bg {
filter: blur(24px) saturate(1.12);
transform: scale(1.07);
}
.pre-screen-content {
top: 57%;
}
.pre-screen h1 {
color: #111817;
text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}
.pre-screen p:not(.pre-screen-eyebrow) {
color: rgba(16, 24, 23, 0.66);
}
.pre-screen-start {
background: linear-gradient(135deg, #07883D 0%, #0BB650 78%, #F7D117 140%);
border: 1px solid rgba(247, 209, 23, 0.42);
box-shadow: 0 18px 38px rgba(7, 136, 61, 0.25), 0 0 0 6px rgba(247, 209, 23, 0.08);
}
.pre-screen-start:hover {
background: linear-gradient(135deg, #046A32 0%, #07883D 74%, #F7D117 140%);
box-shadow: 0 22px 46px rgba(7, 136, 61, 0.30), 0 0 0 7px rgba(247, 209, 23, 0.10);
}
.pre-screen-hint {
color: rgba(16, 24, 23, 0.58);
}
#app-container {
background:
radial-gradient(circle at 15% 105%, rgba(7, 136, 61, 0.16), transparent 30%),
radial-gradient(circle at 85% 105%, rgba(247, 209, 23, 0.16), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,250,247,0.96) 100%);
}
#app-container::before,
#app-container::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
#app-container::before {
background:
linear-gradient(90deg, transparent 49.92%, rgba(7, 136, 61, 0.08) 50%, transparent 50.08%),
radial-gradient(ellipse at 50% 108%, transparent 0 18%, rgba(7, 136, 61, 0.11) 18.4%, transparent 18.8%),
radial-gradient(ellipse at 50% 108%, transparent 0 32%, rgba(247, 209, 23, 0.12) 32.4%, transparent 32.9%);
opacity: 0.92;
}
#app-container::after {
background:
linear-gradient(115deg, transparent 0 7%, rgba(7, 136, 61, 0.10) 7.4%, transparent 8.1% 100%),
linear-gradient(115deg, transparent 0 10.6%, rgba(247, 209, 23, 0.14) 11%, transparent 11.7% 100%),
linear-gradient(245deg, transparent 0 7%, rgba(7, 136, 61, 0.10) 7.4%, transparent 8.1% 100%),
linear-gradient(245deg, transparent 0 10.6%, rgba(247, 209, 23, 0.14) 11%, transparent 11.7% 100%);
opacity: 0.9;
}
.bg-decor-left,
.bg-decor-right {
opacity: 0.32;
filter: blur(0.2px);
}
.bg-decor-left {
background-image: url('data:image/svg+xml;utf8,');
}
.bg-decor-right {
background-image: url('data:image/svg+xml;utf8,');
}
.brand-logo-img {
width: 64px;
height: 64px;
border-radius: 0;
box-shadow: none;
filter: drop-shadow(0 0 12px rgba(247, 209, 23, 0.48)) drop-shadow(0 10px 18px rgba(7, 136, 61, 0.18));
}
.footer-logo .brand-logo-img {
width: 54px;
height: 54px;
opacity: 1;
filter: drop-shadow(0 0 10px rgba(247, 209, 23, 0.34));
}
.brand-text-title {
color: var(--brand-green-dark);
}
.brand-text-subtitle {
color: rgba(6, 61, 43, 0.72);
}
.btn-pre-screen-home,
.btn-back,
.attendant-badge,
.attendant-card,
.rating-card,
.comment-qr-card,
.btn-undo,
.token-card,
.feedback-card {
background: rgba(255, 255, 255, 0.86);
border-color: rgba(7, 136, 61, 0.14);
box-shadow: 0 14px 32px rgba(6, 61, 43, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
}
.btn-pre-screen-home:hover,
.btn-back:hover,
.btn-change-attendant:hover,
.btn-undo:hover {
color: var(--brand-red);
border-color: rgba(7, 136, 61, 0.42);
}
.attendant-card {
position: relative;
overflow: hidden;
}
.attendant-card::after,
.rating-card::after {
content: '';
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 3px;
border-radius: 999px 999px 0 0;
background: linear-gradient(90deg, #07883D, #F7D117, #1E74D6);
opacity: 0;
transition: var(--transition-smooth);
}
.attendant-card:hover,
.rating-card:hover {
border-color: rgba(7, 136, 61, 0.48);
box-shadow: 0 18px 48px rgba(7, 136, 61, 0.14), 0 0 0 1px rgba(247, 209, 23, 0.18);
}
.attendant-card:hover::after,
.rating-card:hover::after {
opacity: 1;
}
.avatar-container,
.badge-avatar,
.token-avatar {
background: linear-gradient(135deg, #07883D 0%, #0FBF58 70%, #F7D117 150%);
border-color: rgba(247, 209, 23, 0.50);
box-shadow: 0 8px 22px rgba(7, 136, 61, 0.18);
}
.badge-name,
.token-eyebrow,
.feedback-eyebrow,
.btn-change-attendant:hover {
color: var(--brand-red);
}
.card-excellent:hover,
.card-good:hover,
.card-regular:hover {
border-color: var(--brand-red);
}
.brand-success-ring {
background: rgba(7, 136, 61, 0.08);
box-shadow: 0 0 0 8px rgba(247, 209, 23, 0.08), 0 16px 40px rgba(7, 136, 61, 0.14);
}
.checkmark-circle,
.checkmark-check {
stroke: var(--brand-red);
}
.timeout-progress-bar,
.btn-token-primary,
.btn-feedback-primary {
background: linear-gradient(135deg, #07883D 0%, #0AB84E 82%, #F7D117 145%);
}
.btn-token-primary,
.btn-feedback-primary {
box-shadow: 0 12px 28px rgba(7, 136, 61, 0.22);
}
.btn-token-secondary:hover,
.btn-feedback-secondary:hover,
.btn-feedback-tertiary:hover,
.feedback-extra-choice.is-selected,
.feedback-extra-choice:hover {
border-color: var(--brand-red);
color: var(--brand-red);
background: var(--brand-red-light);
}
.token-input:focus,
.feedback-observation:focus {
border-color: rgba(7, 136, 61, 0.48);
box-shadow: 0 0 0 4px rgba(7, 136, 61, 0.10);
}
.totem-toast {
background: #063D2B;
box-shadow: 0 18px 42px rgba(6, 61, 43, 0.28);
}
@media (orientation: landscape) and (max-height: 700px) {
.brand-logo-img {
width: 46px;
height: 46px;
}
.footer-logo .brand-logo-img {
width: 40px;
height: 40px;
}
}
/* ==========================================================================
COPA BRASIL DESIGN REFINEMENTS
========================================================================== */
:root {
--brand-red: #08783B;
--brand-red-hover: #055E31;
--brand-red-light: rgba(8, 120, 59, 0.09);
--brand-yellow: #EFCB2D;
--brand-yellow-soft: rgba(239, 203, 45, 0.18);
--brand-blue: #1D6FC9;
--brand-green-dark: #0B2F25;
--bg-main: #F8FBF8;
--text-primary: #111A18;
--text-secondary: #53605C;
--border-color: #DCE9E2;
--shadow-sm: 0 3px 10px rgba(11, 47, 37, 0.035);
--shadow-md: 0 12px 30px rgba(11, 47, 37, 0.075);
--shadow-lg: 0 20px 52px rgba(8, 120, 59, 0.14), 0 0 0 1px rgba(239, 203, 45, 0.10);
}
.pre-screen-content {
top: 56.6%;
width: min(520px, 54vw);
gap: 12px;
}
.pre-screen h1 {
font-size: clamp(2.55rem, 3.55vw, 3.8rem);
font-weight: 800;
line-height: 1.04;
letter-spacing: 0;
color: #101817;
}
.pre-screen p:not(.pre-screen-eyebrow) {
max-width: 460px;
font-size: clamp(1rem, 1.35vw, 1.22rem);
font-weight: 520;
color: rgba(17, 26, 24, 0.64);
}
.pre-screen-start {
min-width: min(315px, 74vw);
min-height: 60px;
margin-top: 6px;
border-radius: 15px;
background: linear-gradient(135deg, #08783B 0%, #0E9F4A 82%);
border: 1px solid rgba(239, 203, 45, 0.42);
box-shadow: 0 18px 38px rgba(8, 120, 59, 0.25), 0 0 0 6px rgba(239, 203, 45, 0.08);
letter-spacing: 0;
}
.pre-screen-start:hover {
background: linear-gradient(135deg, #055E31 0%, #08783B 82%);
box-shadow: 0 22px 46px rgba(8, 120, 59, 0.30), 0 0 0 7px rgba(239, 203, 45, 0.10);
}
.pre-screen-hint {
color: rgba(17, 26, 24, 0.52);
font-weight: 700;
}
#app-container {
background:
radial-gradient(circle at 18% 108%, rgba(8, 120, 59, 0.12), transparent 32%),
radial-gradient(circle at 86% 108%, rgba(239, 203, 45, 0.13), transparent 32%),
linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,251,248,0.98) 100%);
}
#app-container::before {
opacity: 0.42;
background:
radial-gradient(ellipse at 50% 112%, transparent 0 18%, rgba(8, 120, 59, 0.11) 18.4%, transparent 18.8%),
radial-gradient(ellipse at 50% 112%, transparent 0 32%, rgba(239, 203, 45, 0.13) 32.4%, transparent 32.9%),
linear-gradient(90deg, transparent 49.95%, rgba(8, 120, 59, 0.035) 50%, transparent 50.05%);
}
#app-container::after {
opacity: 0.34;
background:
linear-gradient(116deg, transparent 0 7.2%, rgba(8, 120, 59, 0.08) 7.5%, transparent 8.1% 100%),
linear-gradient(116deg, transparent 0 10.4%, rgba(239, 203, 45, 0.10) 10.8%, transparent 11.5% 100%),
linear-gradient(244deg, transparent 0 7.2%, rgba(8, 120, 59, 0.08) 7.5%, transparent 8.1% 100%),
linear-gradient(244deg, transparent 0 10.4%, rgba(239, 203, 45, 0.10) 10.8%, transparent 11.5% 100%);
}
.screen {
padding: clamp(18px, 2.6vh, 28px) clamp(44px, 4vw, 72px);
}
.screen-header {
height: clamp(58px, 8vh, 76px);
min-height: 58px;
max-height: 76px;
margin-bottom: clamp(4px, 1vh, 12px);
}
.brand-logo-container {
gap: 12px;
}
.screen-header .brand-logo-container,
.thankyou-footer .brand-logo-container {
padding: 2px 8px;
border-radius: 18px;
}
.brand-logo-img {
width: 52px;
height: 52px;
filter: drop-shadow(0 0 10px rgba(239, 203, 45, 0.36)) drop-shadow(0 8px 16px rgba(8, 120, 59, 0.16));
}
.brand-text-title {
font-size: 1.65rem;
font-weight: 800;
letter-spacing: 0;
color: #0C3026;
}
.brand-text-subtitle {
font-size: 0.58rem;
letter-spacing: 0.16em;
color: rgba(12, 48, 38, 0.66);
}
.footer-logo .brand-logo-img {
width: 44px;
height: 44px;
}
.footer-logo .brand-text-title {
font-size: 1.35rem;
letter-spacing: 0;
}
.footer-logo .brand-text-subtitle {
font-size: 0.5rem;
}
.main-title {
font-size: clamp(2rem, 3.25vw, 2.55rem);
font-weight: 780;
letter-spacing: 0;
line-height: 1.08;
margin-bottom: clamp(8px, 1.2vh, 14px);
}
.screen-content {
gap: clamp(18px, 2.45vh, 28px);
}
.attendants-grid {
max-width: 980px;
gap: 20px 22px;
}
.attendant-card {
min-height: 148px;
padding: 22px 26px;
gap: 16px;
border-width: 1px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(250,253,251,0.88) 100%);
box-shadow: 0 12px 28px rgba(11, 47, 37, 0.055), inset 0 1px 0 rgba(255,255,255,0.96);
}
.attendant-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(8, 120, 59, 0.13), 0 0 0 1px rgba(239, 203, 45, 0.12);
}
.avatar-container {
width: 92px;
height: 92px;
border-width: 3px;
border-color: rgba(239, 203, 45, 0.52);
box-shadow: 0 10px 24px rgba(8, 120, 59, 0.12), 0 0 0 5px rgba(8, 120, 59, 0.06);
}
.avatar-container .avatar-photo {
transform: scale(1.01);
}
.attendant-name {
font-size: clamp(1.08rem, 1.45vw, 1.22rem);
font-weight: 720;
line-height: 1.2;
letter-spacing: 0;
}
.screen-evaluation .screen-content {
padding-top: clamp(44px, 6.6vh, 68px);
gap: clamp(18px, 2.55vh, 28px);
}
.attendant-badge {
border-width: 1px;
background: rgba(255,255,255,0.88);
box-shadow: 0 12px 28px rgba(11, 47, 37, 0.07), inset 0 1px 0 rgba(255,255,255,0.96);
}
.badge-label {
font-weight: 650;
letter-spacing: 0.04em;
}
.badge-name {
color: #08783B;
font-weight: 800;
}
.ratings-row {
max-width: 1060px;
gap: 16px;
}
.rating-card {
min-height: 148px;
padding: 20px 14px;
gap: 12px;
border-width: 1px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(250,253,251,0.88) 100%);
box-shadow: 0 12px 28px rgba(11, 47, 37, 0.055), inset 0 1px 0 rgba(255,255,255,0.96);
}
.rating-card:hover {
transform: translateY(-5px);
}
.emoji-wrapper {
width: 84px;
height: 84px;
}
.rating-label {
font-size: 1.04rem;
font-weight: 780;
letter-spacing: 0;
}
.card-very-bad:hover { border-color: rgba(211, 47, 47, 0.65); }
.card-bad:hover { border-color: rgba(245, 124, 0, 0.65); }
.card-regular:hover { border-color: rgba(239, 203, 45, 0.78); }
.card-good:hover,
.card-excellent:hover { border-color: rgba(8, 120, 59, 0.62); }
.token-card,
.feedback-card {
border-radius: 24px;
border: 1px solid rgba(8, 120, 59, 0.16);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 28px 80px rgba(11, 47, 37, 0.20), 0 0 0 1px rgba(239, 203, 45, 0.10);
}
.feedback-backdrop,
.token-backdrop {
background: rgba(8, 22, 18, 0.42);
backdrop-filter: blur(8px);
}
.token-card h2,
.feedback-card h2,
.thankyou-title {
letter-spacing: 0;
}
.feedback-question {
background: linear-gradient(180deg, #FFFFFF 0%, #F8FBF9 100%);
border-color: rgba(8, 120, 59, 0.14);
}
.feedback-choice,
.feedback-extra-choice {
border-radius: 999px;
border-color: rgba(8, 120, 59, 0.16);
background: #FFFFFF;
}
.btn-token-primary,
.btn-feedback-primary,
.timeout-progress-bar::after {
background: linear-gradient(135deg, #08783B 0%, #0DA24A 86%);
}
.btn-token-primary,
.btn-feedback-primary {
box-shadow: 0 14px 30px rgba(8, 120, 59, 0.22);
}
.btn-feedback-tertiary,
.btn-token-secondary,
.btn-feedback-secondary,
.btn-pre-screen-home,
.btn-back,
.btn-undo {
border-width: 1px;
background: rgba(255,255,255,0.88);
}
.screen-thankyou {
background:
radial-gradient(circle at 50% 26%, rgba(239, 203, 45, 0.10), transparent 28%),
radial-gradient(circle at 50% 100%, rgba(8, 120, 59, 0.10), transparent 38%);
}
.thankyou-container {
gap: clamp(18px, 2.6vh, 30px);
}
.thankyou-title {
font-size: clamp(2.15rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.08;
}
.thankyou-subtitle {
font-size: clamp(1.04rem, 1.6vw, 1.24rem);
color: rgba(17, 26, 24, 0.62);
}
.brand-success-ring {
border-radius: 999px;
background: rgba(8, 120, 59, 0.07);
box-shadow: 0 0 0 8px rgba(239, 203, 45, 0.07), 0 18px 44px rgba(8, 120, 59, 0.14);
}
@keyframes fillRing {
100% { box-shadow: inset 0px 0px 0px 80px rgba(8, 120, 59, 0.06); }
}
.comment-qr-card {
border-width: 1px;
border-color: rgba(8, 120, 59, 0.16);
border-radius: 18px;
background: rgba(255,255,255,0.92);
box-shadow: 0 16px 36px rgba(11, 47, 37, 0.08), inset 0 1px 0 rgba(255,255,255,0.96);
}
#comment-qr-img {
border-color: rgba(8, 120, 59, 0.18);
}
@media (orientation: landscape) and (max-height: 700px) {
.main-title {
font-size: clamp(1.55rem, 5.4vh, 2rem) !important;
}
.attendant-card {
min-height: 116px !important;
padding: 14px 18px !important;
}
.avatar-container {
width: 62px !important;
height: 62px !important;
}
.rating-card {
min-height: 112px !important;
padding: 12px 10px !important;
}
.emoji-wrapper {
width: 58px !important;
height: 58px !important;
}
}
/* Micro polish for card contrast and calmer center background */
#app-container::before {
opacity: 0.34;
}
#app-container::after {
opacity: 0.26;
}
.attendant-card,
.rating-card {
border-color: rgba(8, 120, 59, 0.20);
box-shadow: 0 14px 32px rgba(11, 47, 37, 0.075), 0 1px 0 rgba(255,255,255,0.92) inset;
}
.attendant-card::before,
.rating-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 46%);
opacity: 0.65;
}
.rating-card {
min-height: 164px;
}
.emoji-wrapper {
width: 88px;
height: 88px;
}
@media (orientation: landscape) and (max-height: 700px) {
.rating-card {
min-height: 118px !important;
}
}
/* ==========================================================================
ESCALA DE AVALIAÇÃO LEGÍVEL — cor por nota (vermelho → verde)
Mantém o tema Brasil; dá identidade de cor a cada carinha para a fileira
ser lida como uma escala num relance. Cobre escala de 5 e de 10.
========================================================================== */
.rating-card .emoji-wrapper {
border-radius: 50%;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
/* halo tonal atrás do emoji */
.card-very-bad .emoji-wrapper,
.card-scale-1 .emoji-wrapper { background: radial-gradient(circle at 50% 46%, rgba(224, 57, 47, 0.16), transparent 68%); }
.card-bad .emoji-wrapper,
.card-scale-2 .emoji-wrapper { background: radial-gradient(circle at 50% 46%, rgba(244, 123, 26, 0.18), transparent 68%); }
.card-regular .emoji-wrapper,
.card-scale-3 .emoji-wrapper { background: radial-gradient(circle at 50% 46%, rgba(242, 192, 21, 0.22), transparent 68%); }
.card-good .emoji-wrapper,
.card-scale-4 .emoji-wrapper { background: radial-gradient(circle at 50% 46%, rgba(111, 181, 46, 0.18), transparent 68%); }
.card-excellent .emoji-wrapper,
.card-scale-5 .emoji-wrapper { background: radial-gradient(circle at 50% 46%, rgba(27, 162, 74, 0.18), transparent 68%); }
/* rótulo na cor da nota (tom escuro para contraste no card branco) */
.card-very-bad .rating-label, .card-scale-1 .rating-label { color: #C5322A; }
.card-bad .rating-label, .card-scale-2 .rating-label { color: #D86C12; }
.card-regular .rating-label, .card-scale-3 .rating-label { color: #B0890A; }
.card-good .rating-label, .card-scale-4 .rating-label { color: #5C9A28; }
.card-excellent .rating-label, .card-scale-5 .rating-label { color: #15833C; }
/* borda do card em repouso na cor da nota — a fileira vira um degradê */
.card-very-bad, .card-scale-1 { border-color: rgba(224, 57, 47, 0.30) !important; }
.card-bad, .card-scale-2 { border-color: rgba(244, 123, 26, 0.32) !important; }
.card-regular, .card-scale-3 { border-color: rgba(242, 192, 21, 0.42) !important; }
.card-good, .card-scale-4 { border-color: rgba(111, 181, 46, 0.34) !important; }
.card-excellent, .card-scale-5 { border-color: rgba(27, 162, 74, 0.34) !important; }
/* ao tocar, o card "acende" na própria cor */
.rating-card:hover .emoji-wrapper,
.rating-card:active .emoji-wrapper { transform: scale(1.06); }
.card-very-bad:hover { box-shadow: 0 16px 40px rgba(224, 57, 47, 0.18) !important; }
.card-bad:hover { box-shadow: 0 16px 40px rgba(244, 123, 26, 0.18) !important; }
.card-regular:hover { box-shadow: 0 16px 40px rgba(242, 192, 21, 0.22) !important; }
.card-good:hover { box-shadow: 0 16px 40px rgba(111, 181, 46, 0.18) !important; }
.card-excellent:hover { box-shadow: 0 16px 40px rgba(27, 162, 74, 0.18) !important; }
/* ==========================================================================
AJUSTES DE DENSIDADE — totens altos (ex.: 1920x1080)
Preenche melhor os cards: emoji/foto maiores e menos vazio.
NÃO afeta o modo compacto de telas baixas (max-height:700px usa !important).
========================================================================== */
@media (orientation: landscape) and (min-height: 701px) {
/* ---- Tela 2: mascote maior, protagonista do card ---- */
.ratings-row {
gap: 18px !important;
}
.screen-evaluation .rating-card {
min-height: 196px !important;
padding: 22px 16px 20px !important;
gap: 12px !important;
justify-content: center !important;
}
.rating-card .emoji-wrapper {
width: 128px !important;
height: 128px !important;
}
.screen-evaluation .rating-label {
font-size: 1.2rem !important;
}
/* ---- Tela 1: cards de atendente em layout horizontal (foto + nome) ---- */
.screen-attendants .attendants-grid {
max-width: 1100px !important;
gap: 22px 26px !important;
}
.screen-attendants .attendant-card {
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 24px !important;
padding: 22px 30px !important;
min-height: 156px !important;
text-align: left !important;
}
.screen-attendants .avatar-container {
width: 118px !important;
height: 118px !important;
flex: 0 0 118px !important;
}
.screen-attendants .attendant-name {
text-align: left !important;
font-size: 1.34rem !important;
line-height: 1.26 !important;
}
}
/* ==========================================================================
BACKGROUND COPA — FOTO DO ESTÁDIO (telas 1, 2 e 3)
Substitui a base em gradiente pela foto real do estádio como fundo único
atrás do slider (fica fixo enquanto as telas deslizam). A interface
continua 100% HTML/CSS por cima, em cards de vidro branco.
Composição preservada (cover), centro mantido limpo e legível.
========================================================================== */
#app-container {
background:
linear-gradient(180deg, rgba(247,251,248,0.0) 0%, rgba(247,251,248,0.0) 100%),
url('../assets/pre_tela_uniao.png') center / cover no-repeat,
#EAF3EC;
}
/* ::before vira o "scrim" de legibilidade: clareia só a faixa central onde
ficam título/cards/emojis, sem lavar os cantos vibrantes (luzes, fitas
verde/amarelo, bola). Os cantos mantêm o clima Copa. */
#app-container::before {
z-index: 0;
opacity: 1 !important;
background:
radial-gradient(ellipse 96% 82% at 50% 47%,
rgba(255,255,255,0.46) 0%,
rgba(255,255,255,0.16) 44%,
rgba(255,255,255,0.0) 72%) !important;
}
/* ::after (linhas diagonais decorativas) sai de cena: a foto já traz textura
e cantos suficientes — manter limparia menos e poluiria. */
#app-container::after {
display: none !important;
}
/* As marcas-d'água "U" em SVG não combinam sobre a foto: ocultar. */
.bg-decor-left,
.bg-decor-right {
display: none !important;
}
/* Telas transparentes para a foto aparecer; a 3 (Obrigado) tinha gradiente
próprio que cobria a foto — neutralizar mantendo só um brilho suave. */
.screen-attendants,
.screen-evaluation {
background: transparent !important;
}
.screen-thankyou {
background:
radial-gradient(ellipse 70% 60% at 50% 44%,
rgba(255,255,255,0.40) 0%,
rgba(255,255,255,0.0) 70%) !important;
}
/* ---- Cards de vidro branco: bem opacos para destacar do campo/fundo ----
"Integrados ao fundo": sombra suave, borda discreta e fio verde/amarelo. */
.attendant-card,
.rating-card,
.attendant-badge,
.comment-qr-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(252,254,253,0.93) 100%) !important;
border: 1px solid rgba(8, 120, 59, 0.22) !important;
box-shadow:
0 18px 42px rgba(11, 47, 37, 0.16),
0 2px 8px rgba(11, 47, 37, 0.08),
inset 0 1px 0 rgba(255,255,255,0.96) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.attendant-card:hover {
border-color: rgba(8, 120, 59, 0.55) !important;
box-shadow:
0 26px 56px rgba(8, 120, 59, 0.20),
0 0 0 1px rgba(239, 203, 45, 0.30) !important;
}
/* Fio verde→amarelo→azul no rodapé do card, agora sempre levemente visível
(detalhe Copa discreto) e cheio no hover. */
.attendant-card::after,
.rating-card::after {
opacity: 0.45;
}
.attendant-card:hover::after,
.rating-card:hover::after {
opacity: 1;
}
/* Botões / chips de navegação em vidro branco para lerem sobre a foto. */
.btn-pre-screen-home,
.btn-back,
.btn-undo {
background: rgba(255,255,255,0.92) !important;
border: 1px solid rgba(8, 120, 59, 0.20) !important;
box-shadow: 0 8px 20px rgba(11, 47, 37, 0.12) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Logo no topo: chip frostado discreto garante leitura em qualquer crop
da foto, mantendo o ar premium/corporativo. */
.screen-header .brand-logo-container {
padding: 8px 18px 8px 12px;
border-radius: 18px;
background: rgba(255,255,255,0.74);
border: 1px solid rgba(255,255,255,0.6);
box-shadow: 0 10px 26px rgba(11, 47, 37, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.thankyou-footer .brand-logo-container {
padding: 6px 16px 6px 10px;
border-radius: 16px;
background: rgba(255,255,255,0.62);
box-shadow: 0 8px 22px rgba(11, 47, 37, 0.10);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Títulos sobre a foto: leve respiro branco para nunca disputar com o campo. */
.main-title,
.thankyou-title {
text-shadow: 0 1px 10px rgba(255,255,255,0.55);
}
.thankyou-subtitle {
text-shadow: 0 1px 8px rgba(255,255,255,0.5);
}
/* ==========================================================================
TELA 2 — REFINO (totem de votação: fileira de notas permanece no centro)
- título com um respiro a mais (sem subir os cards);
- cards menos "caixote" (mais largos / mais baixos / mais padding);
- TESTE de contraste no centro branco (creme leve + sombra definida);
- tamanho visual dos mascotes equalizado por nota.
========================================================================== */
@media (orientation: landscape) and (min-height: 701px) {
/* Só afasta o título da fileira; a fileira segue centralizada (50%).
Empurrado mais pra cima (aproveita o vazio acima) p/ ~60px de respiro. */
.screen-evaluation .main-title {
bottom: calc(50% + clamp(128px, 18dvh, 152px)) !important;
}
/* Forma: mais largo e um pouco mais baixo, com folga interna. */
.screen-evaluation .ratings-row {
max-width: min(1180px, 95vw) !important;
gap: 20px !important;
}
.screen-evaluation .rating-card {
min-height: 178px !important;
padding: 18px 18px 16px !important;
border-radius: 22px !important;
gap: 10px !important;
}
.screen-evaluation .rating-card .emoji-wrapper {
width: 120px !important;
height: 120px !important;
}
}
/* Contraste no miolo claro da foto (TESTE): creme suave + sombra mais
definida para o card "flutuar". A borda colorida por nota continua
mandando na identidade da escala. */
.screen-evaluation .rating-card {
background: linear-gradient(180deg, #FFFFFF 0%, #F2F7F1 100%) !important;
box-shadow:
0 18px 38px rgba(11, 47, 37, 0.16),
0 3px 10px rgba(11, 47, 37, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
/* Equalização do tamanho visual dos mascotes. As poses variam (uns mais
"espalhados"), então o object-fit deixa as cabeças em tamanhos diferentes.
Aproximamos por escala-base por nota (variável CSS reusada no hover). */
.card-very-bad { --emoji-scale: 1.00; }
.card-bad { --emoji-scale: 1.00; }
.card-regular { --emoji-scale: 1.15; }
.card-good { --emoji-scale: 1.06; }
.card-excellent { --emoji-scale: 1.10; }
.rating-card .emoji-img {
transform: scale(var(--emoji-scale, 1));
}
/* Zoom de toque uniforme (multiplica a escala-base); o wrapper não faz mais
zoom para evitar o efeito de "duplo zoom". */
.rating-card:hover .emoji-img,
.rating-card:active .emoji-img {
transform: scale(calc(var(--emoji-scale, 1) * 1.07)) !important;
}
.rating-card:hover .emoji-wrapper,
.rating-card:active .emoji-wrapper {
transform: none !important;
}
/* ==========================================================================
AJUSTES (copa9)
1) Barra "Retornando ao início" — trilho claro + preenchimento verde→amarelo
(antes trilho e preenchimento eram ambos verdes = não se via encher).
2) Pré-tela — título/subtítulo/botão maiores para preencher o balão branco.
3) Tela 2 — mascotes e cards maiores (mais foco), fileira segue no centro.
========================================================================== */
/* 1) PROGRESSO (Tela 3) -------------------------------------------------- */
.timeout-progress-bar {
width: 264px !important;
height: 9px !important;
background: rgba(11, 47, 37, 0.16) !important; /* trilho neutro visível */
border-radius: 999px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
overflow: hidden;
}
.timeout-progress-bar::after {
/* preenchimento com contraste: verde forte → ponta amarela */
background: linear-gradient(90deg, #0AA047 0%, #08783B 55%, #EFCB2D 100%) !important;
box-shadow: 0 0 8px rgba(8, 120, 59, 0.35);
}
.timeout-text {
font-weight: 700;
}
/* 2) PRÉ-TELA (idle) ----------------------------------------------------- */
.pre-screen-content {
width: min(640px, 62vw);
gap: 16px;
}
.pre-screen h1 {
font-size: clamp(3rem, 4.3vw, 4.7rem);
line-height: 1.02;
}
.pre-screen p:not(.pre-screen-eyebrow) {
max-width: 540px;
font-size: clamp(1.14rem, 1.6vw, 1.5rem);
}
.pre-screen-start {
min-width: min(380px, 80vw);
min-height: 70px;
border-radius: 17px;
font-size: clamp(1.2rem, 1.7vw, 1.5rem);
}
.pre-screen-hint {
font-size: clamp(1rem, 1.25vw, 1.2rem);
}
/* 3) TELA 2 — mascotes/cards maiores (foco), fileira centralizada -------- */
@media (orientation: landscape) and (min-height: 701px) {
.screen-evaluation .ratings-row {
width: min(1320px, 96vw) !important; /* alarga p/ os cards não ficarem "caixote" */
max-width: min(1320px, 96vw) !important;
gap: 22px !important;
}
.screen-evaluation .rating-card {
min-height: 212px !important;
padding: 22px 18px 18px !important;
}
/* mascote protagonista, com respiro em volta (meio-termo) */
.screen-evaluation .rating-card .emoji-wrapper {
width: 144px !important;
height: 144px !important;
}
.screen-evaluation .rating-label {
font-size: 1.24rem !important;
}
}
/* Tela 3 (Obrigado/QR) em totem alto: centraliza o conjunto e puxa o logo
pra perto do conteúdo, com gap controlado — elimina o vão grande entre o
botão "Desfazer" e o rodapé, distribuindo o vazio igual em cima/embaixo. */
@media (orientation: landscape) and (min-height: 901px) {
/* Conteúdo desce e o logo ancora bem mais embaixo (rodapé de verdade),
com gap moderado entre o botão e o logo. O vazio fica no topo. */
.screen-thankyou {
justify-content: flex-end !important;
padding-bottom: clamp(30px, 4vh, 48px) !important;
}
.thankyou-container {
flex: 0 0 auto !important;
}
.thankyou-footer {
margin-top: clamp(56px, 8vh, 92px) !important;
}
}
/* Reativa a barra "Retornando ao início" em todas as alturas. O código
original a escondia em telas ≤900px (display:none); aqui ela volta,
mantendo o estilo de contraste (trilho claro + preenchimento verde→amarelo). */
.timeout-progress-bar {
display: block !important;
}
/* TABLET (alta densidade + altura CSS curta): o totem cai no modo compacto e
os emojis ficam minúsculos em cards largos. Aqui ampliamos só os emojis
(e o card acompanha pra não estourar) APENAS nesse caso — `min-resolution`
garante que o notebook (DPR 1) e totens pequenos reais NÃO sejam afetados.
Há espaço físico de sobra (painel é 1080 real), então não gera scroll. */
@media (orientation: landscape) and (max-height: 700px) and (min-resolution: 1.5dppx) {
.screen-evaluation .rating-card {
min-height: clamp(150px, 27vh, 196px) !important;
padding: 16px 14px 14px !important;
gap: 10px !important;
}
.screen-evaluation .rating-card .emoji-wrapper {
width: clamp(88px, 17vh, 128px) !important;
height: clamp(88px, 17vh, 128px) !important;
}
.screen-evaluation .rating-label {
font-size: clamp(1rem, 2.6vh, 1.22rem) !important;
}
/* respiro do título igual ao notebook, proporcional à altura curta */
.screen-evaluation .main-title {
font-size: clamp(1.6rem, 5vh, 2.1rem) !important;
}
/* TELA 1 (atendentes): no tablet o título colava nos cards. Dá respiro
entre o título e a grade e equilibra o conjunto (centralizado). */
.screen-attendants .screen-content {
justify-content: center !important;
gap: clamp(28px, 6vh, 54px) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.screen-attendants .main-title {
font-size: clamp(1.6rem, 5vh, 2.1rem) !important;
margin-bottom: 0 !important;
}
.screen-attendants .attendant-card {
min-height: clamp(118px, 22vh, 158px) !important;
}
}
/* ==========================================================================
TEMA PADRAO UNIAO - SOMENTE IDENTIDADE VISUAL
Mantem todas as medidas e regras responsivas consolidadas para o totem.
========================================================================== */
:root {
--brand-red: #FE0002;
--brand-red-hover: #D90002;
--brand-red-light: rgba(254, 0, 2, 0.08);
--bg-main: #F8F9FA;
--bg-card: #FFFFFF;
--text-primary: #151618;
--text-secondary: #5E6366;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 16px 40px rgba(254, 0, 2, 0.10);
}
/* A arte completa pertence apenas a pre-tela. */
#app-container {
background: var(--bg-main) !important;
}
#app-container::before,
#app-container::after {
display: none !important;
}
.screen-attendants,
.screen-evaluation,
.screen-thankyou {
background: transparent !important;
}
/* Marcas d'agua discretas do tema institucional original. */
.bg-decor-left,
.bg-decor-right {
display: block !important;
opacity: 1 !important;
filter: none !important;
}
.bg-decor-left {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.bg-decor-right {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* Logotipo sem chip de vidro nem brilho verde/amarelo. */
.screen-header .brand-logo-container,
.thankyou-footer .brand-logo-container {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.brand-logo-img,
.footer-logo .brand-logo-img {
filter: none !important;
box-shadow: 0 4px 12px rgba(254, 0, 2, 0.16) !important;
}
.footer-logo .brand-logo-img {
opacity: 0.85 !important;
}
.brand-text-title {
color: var(--text-primary) !important;
}
.brand-text-subtitle {
color: var(--text-secondary) !important;
}
.main-title,
.thankyou-title,
.thankyou-subtitle {
text-shadow: none !important;
}
.thankyou-subtitle {
color: var(--text-secondary) !important;
}
/* Superficies neutras; os ajustes de tamanho e alinhamento continuam acima. */
.attendant-card,
.rating-card,
.attendant-badge,
.comment-qr-card,
.token-card,
.feedback-card {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.attendant-card::before,
.rating-card::before,
.attendant-card::after,
.rating-card::after {
display: none !important;
}
.attendant-card:hover,
.rating-card:hover {
border-color: var(--brand-red) !important;
box-shadow: var(--shadow-lg) !important;
}
.avatar-container,
.badge-avatar,
.token-avatar {
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-hover) 100%) !important;
border-color: var(--border-color) !important;
box-shadow: var(--shadow-sm) !important;
}
.attendant-card:hover .avatar-container {
border-color: var(--text-primary) !important;
}
.badge-name,
.token-eyebrow,
.feedback-eyebrow {
color: var(--brand-red) !important;
}
/* Escala uniforme: a expressao do emoji comunica a nota. */
.rating-card,
.card-very-bad,
.card-bad,
.card-regular,
.card-good,
.card-excellent,
.card-scale-1,
.card-scale-2,
.card-scale-3,
.card-scale-4,
.card-scale-5,
.card-scale-6,
.card-scale-7,
.card-scale-8,
.card-scale-9,
.card-scale-10 {
border-color: var(--border-color) !important;
}
.rating-card:hover {
border-color: var(--brand-red) !important;
}
.rating-card .emoji-wrapper {
background: transparent !important;
box-shadow: none !important;
}
.rating-card .rating-label {
color: var(--text-primary) !important;
}
/* Botoes e indicadores no vermelho institucional. */
.btn-pre-screen-home,
.btn-back,
.btn-undo {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.btn-pre-screen-home:hover,
.btn-back:hover,
.btn-change-attendant:hover,
.btn-undo:hover {
color: var(--brand-red) !important;
border-color: var(--brand-red) !important;
}
.pre-screen-start,
.lock-submit,
.btn-token-primary,
.btn-feedback-primary {
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-hover) 100%) !important;
border-color: rgba(254, 0, 2, 0.32) !important;
box-shadow: 0 14px 32px rgba(254, 0, 2, 0.22) !important;
}
.pre-screen-start:hover,
.lock-submit:hover,
.btn-token-primary:hover,
.btn-feedback-primary:hover {
background: linear-gradient(135deg, var(--brand-red-hover) 0%, #B80002 100%) !important;
box-shadow: 0 18px 38px rgba(254, 0, 2, 0.26) !important;
}
.brand-success-ring {
background: transparent !important;
box-shadow: none !important;
}
.checkmark-svg,
.checkmark-circle,
.checkmark-check {
stroke: var(--brand-red) !important;
}
.timeout-progress-bar {
background: var(--border-color) !important;
box-shadow: none !important;
}
.timeout-progress-bar::after {
background: var(--brand-red) !important;
box-shadow: none !important;
}
@keyframes fillRing {
100% {
box-shadow: inset 0 0 0 80px rgba(254, 0, 2, 0.05);
}
}
/* Bloqueio e dialogos tambem seguem a identidade padrao. */
#totem-lock {
background:
radial-gradient(circle at 50% 28%, rgba(254, 0, 2, 0.18), transparent 30%),
linear-gradient(135deg, #151618 0%, #202124 100%) !important;
}
.lock-card {
border-color: rgba(255, 255, 255, 0.14) !important;
background: rgba(255, 255, 255, 0.07) !important;
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46) !important;
}
.lock-logo {
filter: drop-shadow(0 8px 20px rgba(254, 0, 2, 0.28)) !important;
}
.lock-eyebrow {
color: rgba(255, 255, 255, 0.72) !important;
}
.feedback-question,
.feedback-choice,
.feedback-extra-choice {
background: #FFFFFF !important;
border-color: var(--border-color) !important;
}
.token-input:focus,
.feedback-observation:focus {
border-color: var(--brand-red) !important;
box-shadow: 0 0 0 4px var(--brand-red-light) !important;
}
/* Reforco contra regras tematicas mais especificas/inline. */
#app-container .screen-evaluation .rating-card {
background: var(--bg-card) !important;
box-shadow: var(--shadow-sm) !important;
}
#app-container .screen-evaluation .rating-card:hover {
border-color: var(--brand-red) !important;
box-shadow: var(--shadow-lg) !important;
}
#totem-lock .lock-submit {
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-hover) 100%) !important;
border-color: rgba(254, 0, 2, 0.32) !important;
box-shadow: 0 14px 32px rgba(254, 0, 2, 0.22) !important;
}
#totem-lock .lock-submit:hover {
background: linear-gradient(135deg, var(--brand-red-hover) 0%, #B80002 100%) !important;
box-shadow: 0 18px 38px rgba(254, 0, 2, 0.26) !important;
}