html,
body {
max-width: 100%;
overflow-x: clip;
}
/* Painel administrativo alinhado às referências operacionais aprovadas. */
body.page-event-dashboard .admin-reference-tabs {
position: sticky;
top: 64px;
z-index: 24;
display: flex;
align-items: center;
gap: 30px;
min-height: 52px;
margin: 0 0 18px;
padding: 0 20px;
overflow-x: auto;
border-bottom: 1px solid #d8e2ec;
background: #fff;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
scrollbar-gutter: stable;
}
body.page-event-dashboard .admin-reference-tabs::-webkit-scrollbar {
height: 6px;
}
body.page-event-dashboard .admin-reference-tabs::-webkit-scrollbar-track {
background: #eef3f8;
}
body.page-event-dashboard .admin-reference-tabs::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #9db3c9;
}
body.page-event-dashboard .admin-reference-tabs a,
body.page-event-dashboard .admin-reference-tabs button,
body.page-event-dashboard .admin-reference-tabs span {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-height: 52px;
padding: 0;
border: 0;
background: transparent;
color: #5d6c80;
font: inherit;
font-size: .82rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
body.page-event-dashboard .admin-reference-tabs button {
cursor: pointer;
}
body.page-event-dashboard .admin-reference-tabs .is-active {
color: #0068ae;
}
body.page-event-dashboard .admin-reference-tabs .is-active::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: #19a8d8;
content: "";
}
body.page-event-dashboard .admin-event-integrations {
min-height: 260px;
}
body.page-event-dashboard .admin-event-integration-list {
display: grid;
}
body.page-event-dashboard .admin-event-integration-list article {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 78px;
padding: 14px 22px;
border-top: 1px solid #e1e8f0;
}
body.page-event-dashboard .admin-event-integration-list__icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 8px;
background: #edf7ff;
color: #0068ae;
font-size: 1.2rem;
}
body.page-event-dashboard .admin-event-integration-list strong,
body.page-event-dashboard .admin-event-integration-list small {
display: block;
}
body.page-event-dashboard .admin-event-integration-list small {
margin-top: 4px;
color: #6b788b;
}
body.page-event-dashboard .admin-event-integration-list a {
color: #0068ae;
font-weight: 800;
text-decoration: none;
}
body.page-event-dashboard #tickets > .admin-table-card {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
body.page-event-dashboard .admin-ticket-overview-heading,
body.page-event-dashboard .admin-ticket-manager-heading {
padding: 20px 22px 0;
background: #fff;
}
body.page-event-dashboard .admin-ticket-overview-heading > span,
body.page-event-dashboard .admin-ticket-manager-heading > span {
color: #66758a;
font-size: .74rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
body.page-event-dashboard .admin-ticket-sales-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0 0 18px;
padding: 18px 22px 24px;
border-radius: 0 0 10px 10px;
background: #fff;
box-shadow: 0 5px 16px rgba(20, 48, 77, .07);
}
body.page-event-dashboard .admin-ticket-sales-summary article {
min-height: 56px;
border-color: #dfe6ed;
border-radius: 5px;
background: #fff;
box-shadow: none;
}
body.page-event-dashboard .admin-ticket-sales-summary article:nth-child(1) strong { color: #10aa9b; }
body.page-event-dashboard .admin-ticket-sales-summary article:nth-child(2) strong { color: #d99413; }
body.page-event-dashboard .admin-ticket-sales-summary article:nth-child(3) strong { color: #e24848; }
body.page-event-dashboard .admin-ticket-manager-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-radius: 10px 10px 0 0;
}
body.page-event-dashboard .admin-ticket-create-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
body.page-event-dashboard .admin-ticket-create-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 18px;
border: 1px solid #078bd0;
border-radius: 999px;
background: #fff;
color: #0072ba;
font: inherit;
font-size: .76rem;
font-weight: 800;
cursor: pointer;
}
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] {
padding: 0 22px 24px;
border-radius: 0 0 10px 10px;
background: #fff;
box-shadow: 0 5px 16px rgba(20, 48, 77, .07);
}
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] > .admin-list-toolbar {
padding-inline: 0;
}
body.page-event-dashboard #tickets .admin-ticket-table-item__content small {
display: block;
margin-top: 3px;
color: #6c7888;
}
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] .admin-table {
min-width: 840px;
}
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] .admin-table th:first-child,
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] .admin-table td:first-child {
width: 24%;
min-width: 190px;
overflow-wrap: normal;
}
body.page-event-dashboard .admin-ticket-visibility {
display: inline-flex;
align-items: center;
gap: 5px;
color: #778396;
font-size: .76rem;
font-weight: 800;
text-transform: uppercase;
}
body.page-event-dashboard .admin-ticket-visibility::after {
width: 28px;
height: 16px;
border-radius: 999px;
background: #cdd5df;
box-shadow: inset 12px 0 0 2px #fff;
content: "";
}
body.page-event-dashboard .admin-ticket-visibility.is-active {
color: #0072ba;
}
body.page-event-dashboard .admin-ticket-visibility.is-active::after {
background: #15a9e0;
box-shadow: inset -12px 0 0 2px #fff;
}
body.page-event-dashboard .admin-table-link--icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
padding: 0;
border: 1px solid #c9d9e7;
border-radius: 8px;
}
body.page-event-dashboard .admin-ticket-row-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
white-space: nowrap;
}
body.page-event-dashboard .admin-ticket-row-actions form {
margin: 0;
}
body.page-event-dashboard .admin-ticket-secondary-area {
margin-top: 18px;
border: 1px solid #dbe4ed;
border-radius: 10px;
background: #fff;
}
body.page-event-dashboard .admin-ticket-secondary-area > summary {
padding: 16px 20px;
color: #0b4e83;
font-weight: 800;
cursor: pointer;
}
body.page-event-dashboard .admin-reference-modal .admin-modal__panel {
width: min(760px, calc(100vw - 32px));
max-height: min(820px, calc(100vh - 32px));
border-radius: 8px;
}
body.page-event-dashboard .admin-reference-modal.admin-modal--large .admin-modal__panel {
width: min(920px, calc(100vw - 32px));
}
body.page-event-dashboard .admin-ticket-edit-modal .admin-modal__panel {
width: min(780px, calc(100vw - 32px));
max-height: min(780px, calc(100dvh - 32px));
border-radius: 18px;
}
body.page-event-dashboard .admin-ticket-edit-form {
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
background: #ffffff;
}
body.page-event-dashboard .admin-ticket-edit-form > .admin-form-section__grid {
padding: 24px;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 18px;
}
body.page-event-dashboard .admin-ticket-edit-form .field,
body.page-event-dashboard .admin-ticket-edit-form .admin-ticket-switch {
min-width: 0;
align-self: start;
}
body.page-event-dashboard .admin-ticket-edit-form .field textarea {
min-height: 88px;
}
body.page-event-dashboard .admin-ticket-edit-form__actions {
position: sticky;
z-index: 2;
bottom: 0;
margin: 0;
padding: 16px 24px;
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid #dbe4ed;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.05);
}
body.page-event-dashboard .admin-ticket-edit-form__actions button {
min-height: 42px;
}
body.page-event-dashboard .admin-access-role-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
border: 0;
}
body.page-event-dashboard .admin-access-role-options legend {
grid-column: 1 / -1;
margin-bottom: 2px;
color: #263b54;
font-size: .82rem;
font-weight: 800;
}
body.page-event-dashboard .admin-access-role-options label {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 72px;
padding: 13px;
border: 1px solid #d4dfe9;
border-radius: 7px;
cursor: pointer;
}
body.page-event-dashboard .admin-access-role-options input {
margin-top: 3px;
accent-color: #0068ae;
}
body.page-event-dashboard .admin-access-role-options strong,
body.page-event-dashboard .admin-access-role-options small {
display: block;
}
body.page-event-dashboard .admin-access-role-options small {
margin-top: 3px;
color: #6c7889;
line-height: 1.35;
}
body.page-event-dashboard .admin-reference-modal .admin-ticket-create-form {
grid-template-columns: 1fr;
}
body.page-event-dashboard .admin-reference-modal .admin-ticket-create-form__grid {
grid-column: 1;
}
body.page-event-dashboard .admin-registration-editor {
grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.2fr);
align-items: stretch;
gap: 0;
padding: 0;
}
body.page-event-dashboard .admin-registration-editor__catalog,
body.page-event-dashboard .admin-registration-editor__preview {
padding: 24px;
}
body.page-event-dashboard .admin-registration-editor__catalog {
border-right: 1px solid #dfe6ee;
}
body.page-event-dashboard .admin-registration-editor__catalog > span {
display: block;
color: #69778a;
font-size: .72rem;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
body.page-event-dashboard .admin-registration-editor__catalog > strong {
display: block;
margin-top: 4px;
color: #11233d;
}
body.page-event-dashboard .admin-registration-editor__catalog > p {
margin: 7px 0 18px;
color: #6a7789;
line-height: 1.45;
}
body.page-event-dashboard .admin-registration-editor__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
body.page-event-dashboard .admin-registration-editor__chips > span,
body.page-event-dashboard .admin-registration-editor__chips > label {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 0 12px;
border: 1px solid #cbd8e5;
border-radius: 999px;
background: #fff;
color: #28516f;
font-size: .78rem;
font-weight: 800;
}
body.page-event-dashboard .admin-registration-editor__chips input {
accent-color: #0073b7;
}
body.page-event-dashboard .admin-registration-editor__preview {
display: grid;
align-content: start;
gap: 14px;
background: #fbfcfd;
}
body.page-event-dashboard .admin-registration-editor__preview > strong {
margin-bottom: 4px;
color: #223d57;
}
body.page-event-dashboard .admin-registration-editor__preview > label:not(.admin-event-detail-consent) {
display: grid;
gap: 6px;
color: #45566d;
font-size: .82rem;
font-weight: 800;
}
body.page-event-dashboard .admin-registration-editor__preview input[type="text"],
body.page-event-dashboard .admin-registration-editor__preview input[type="email"] {
min-height: 42px;
border: 1px solid #d5dde7;
border-radius: 5px;
background: #fff;
}
body.page-event-dashboard .admin-registration-editor > .admin-modal__footer {
grid-column: 1 / -1;
margin: 0;
padding: 16px 24px;
border-top: 1px solid #dfe6ee;
}
body.page-event-dashboard #registrations .admin-participants-table {
min-width: 1230px;
table-layout: fixed;
}
body.page-event-dashboard #registrations .admin-participants-table--race {
min-width: 1780px;
}
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__select { width: 50px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__status { width: 64px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__participant { width: 250px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__creci { width: 130px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__ticket { width: 180px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__type { width: 220px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__order { width: 90px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__date { width: 140px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__checkin { width: 140px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__actions { width: 64px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__bib { width: 100px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__distance { width: 100px; }
body.page-event-dashboard #registrations .admin-participants-table col.admin-participants-table__shirt { width: 90px; }
body.page-event-dashboard #registrations .admin-participants-table th,
body.page-event-dashboard #registrations .admin-participants-table td {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
body.page-event-dashboard #registrations .admin-participants-table th,
body.page-event-dashboard #registrations .admin-participants-table__cell--compact,
body.page-event-dashboard #registrations .admin-participants-table__cell--date {
white-space: nowrap;
}
body.page-event-dashboard #registrations .admin-participants-table__cell--participant strong,
body.page-event-dashboard #registrations .admin-participants-table__cell--participant small,
body.page-event-dashboard #registrations .admin-participants-table__cell--creci,
body.page-event-dashboard #registrations .admin-participants-table__cell--ticket {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.page-event-dashboard #registrations .admin-participants-table__cell--participant small,
body.page-event-dashboard #registrations .admin-participants-table__cell--creci,
body.page-event-dashboard #registrations .admin-participants-table__cell--ticket {
cursor: default;
}
body.page-event-dashboard .admin-ticket-type-stack {
display: grid;
justify-items: start;
gap: 4px;
min-width: 0;
}
body.page-event-dashboard .admin-ticket-type-stack > strong {
max-width: 100%;
overflow: hidden;
color: #17283d;
font-size: .82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
body.page-event-dashboard .admin-ticket-category {
display: block;
color: #0067a8;
font-size: .69rem;
font-weight: 900;
letter-spacing: .035em;
line-height: 1.2;
text-transform: uppercase;
}
body.page-event-dashboard .admin-ticket-category--vip {
color: #a96f00;
}
body.page-event-dashboard .admin-inline-action--ticket-transfer {
min-height: 30px;
gap: 4px;
padding: 4px 8px;
font-size: .7rem;
line-height: 1.1;
cursor: pointer;
}
body.page-event-dashboard .admin-inline-action--ticket-transfer i {
font-size: .82rem;
}
body.page-event-dashboard .admin-ticket-transfer-unavailable {
color: #77869a;
font-size: .72rem;
line-height: 1.35;
}
body.page-event-dashboard .admin-ticket-transfer-modal {
width: min(640px, calc(100vw - 48px));
}
body.page-event-dashboard .admin-ticket-transfer-modal .admin-modal__body {
display: grid;
gap: 18px;
}
body.page-event-dashboard .admin-ticket-transfer-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
body.page-event-dashboard .admin-ticket-transfer-summary > div {
min-width: 0;
padding: 14px 16px;
border: 1px solid #dbe7f3;
border-radius: 14px;
background: #f8fbff;
}
body.page-event-dashboard .admin-ticket-transfer-summary span,
body.page-event-dashboard .admin-ticket-transfer-summary strong {
display: block;
}
body.page-event-dashboard .admin-ticket-transfer-summary span {
margin-bottom: 4px;
color: #64748b;
font-size: .72rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
body.page-event-dashboard .admin-ticket-transfer-summary strong {
overflow-wrap: anywhere;
color: #10243d;
}
body.page-event-dashboard .admin-ticket-transfer-impact {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid #bde7da;
border-radius: 14px;
background: #effbf6;
color: #145b49;
}
body.page-event-dashboard .admin-ticket-transfer-impact > i {
margin-top: 2px;
color: #118466;
font-size: 1.25rem;
}
body.page-event-dashboard .admin-ticket-transfer-impact strong,
body.page-event-dashboard .admin-ticket-transfer-impact p {
display: block;
margin: 0;
}
body.page-event-dashboard .admin-participants-table__cell--actions {
text-align: right;
}
body.page-event-dashboard .admin-registration-delete-button {
display: inline-grid;
width: 36px;
height: 36px;
padding: 0;
place-items: center;
border: 1px solid #fecaca;
border-radius: 10px;
background: #fff7f7;
color: #b91c1c;
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
body.page-event-dashboard .admin-registration-delete-button:hover,
body.page-event-dashboard .admin-registration-delete-button:focus-visible {
border-color: #ef4444;
background: #fee2e2;
color: #991b1b;
}
body.page-event-dashboard .admin-registration-delete-modal {
width: min(620px, calc(100vw - 48px));
}
body.page-event-dashboard .admin-registration-delete-modal .admin-modal__body {
display: grid;
gap: 18px;
}
body.page-event-dashboard .admin-registration-delete-summary {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 1px solid #fecaca;
border-radius: 14px;
background: #fff7f7;
color: #7f1d1d;
}
body.page-event-dashboard .admin-registration-delete-summary i {
margin-top: 2px;
color: #dc2626;
font-size: 1.35rem;
}
body.page-event-dashboard .admin-registration-delete-summary p {
margin: 0;
line-height: 1.55;
}
body.page-event-dashboard .admin-ticket-transfer-impact p {
margin-top: 3px;
color: #397565;
font-size: .84rem;
line-height: 1.45;
}
body.page-event-dashboard .admin-registration-status-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: #98a5b5;
}
body.page-event-dashboard .admin-registration-status-dot--success { background: #22b7a6; }
body.page-event-dashboard .admin-registration-status-dot--warning { background: #e0a629; }
body.page-event-dashboard .admin-registration-status-dot--danger { background: #df5959; }
body.page-event-dashboard .admin-participant-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 14px 22px;
padding: 14px 16px;
border: 1px solid #b9d8f0;
border-radius: 12px;
background: #eef7ff;
}
body.page-event-dashboard .admin-participant-selection-bar[hidden] {
display: none;
}
body.page-event-dashboard [data-ticket-public-only][hidden] {
display: none !important;
}
body.page-event-dashboard .admin-participant-selection-bar strong,
body.page-event-dashboard .admin-participant-selection-bar small {
display: block;
}
body.page-event-dashboard .admin-participant-selection-bar strong {
color: #12385c;
font-size: .9rem;
}
body.page-event-dashboard .admin-participant-selection-bar small {
margin-top: 3px;
color: #58718a;
}
body.page-event-dashboard .admin-selection-checkbox {
display: inline-grid;
width: 22px;
height: 22px;
place-items: center;
cursor: pointer;
}
body.page-event-dashboard .admin-selection-checkbox input {
width: 18px;
height: 18px;
margin: 0;
accent-color: #0868b2;
cursor: pointer;
}
body.page-event-dashboard .admin-participants-table__select-cell {
padding-inline: 14px;
text-align: center;
}
body.page-event-dashboard .admin-participant-accounts-card .admin-card-header {
align-items: flex-start;
padding: 22px;
}
body.page-event-dashboard .admin-participant-account-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
}
body.page-event-dashboard .admin-participant-account-actions form {
margin: 0;
}
body.page-event-dashboard .admin-participant-account-actions button {
padding: 0;
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
}
body.page-event-dashboard .admin-account-verified {
color: #087f6c;
}
body.page-event-dashboard .admin-modal__close-link {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border: 1px solid #d7e1eb;
border-radius: 50%;
color: #4b6076;
font-size: 1.4rem;
line-height: 1;
text-decoration: none;
}
body.page-event-dashboard .admin-participant-account-form {
display: grid;
gap: 20px;
}
body.page-event-dashboard .admin-checkin-grid--reference {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "list" "validator";
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-last-checkins { grid-area: list; }
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-validator { grid-area: validator; }
body.page-event-dashboard .admin-checkin-grid--reference .admin-last-checkins {
padding: 0;
overflow: hidden;
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-last-checkins > h2 {
margin: 0;
padding: 20px 24px 8px;
color: #657489;
font-size: .76rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-participant-search {
width: min(430px, calc(100% - 48px));
margin: 8px 24px 18px;
}
body.page-event-dashboard .admin-checkin-list-head,
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-list article {
display: grid;
grid-template-columns: 130px minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(130px, .8fr) minmax(110px, .7fr);
align-items: center;
gap: 14px;
}
body.page-event-dashboard .admin-checkin-list-head {
min-width: 970px;
padding: 12px 22px;
border-block: 1px solid #dfe6ee;
background: #f8fafc;
color: #657489;
font-size: .69rem;
font-weight: 900;
text-transform: uppercase;
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-list {
margin: 0;
overflow-x: auto;
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-list article {
min-width: 970px;
min-height: 58px;
padding: 10px 22px;
border-bottom: 1px solid #e3e9ef;
border-radius: 0;
box-shadow: none;
}
body.page-event-dashboard .admin-checkin-row-button {
min-height: 30px;
padding: 0 12px;
border: 1px solid #0a91d1;
border-radius: 999px;
background: #fff;
color: #0072ba;
font: inherit;
font-size: .72rem;
font-weight: 800;
cursor: pointer;
}
body.page-event-dashboard .admin-checkin-row-action .admin-check-icon {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border-radius: 50%;
background: #23bda9;
color: #fff;
}
@media (max-width: 900px) {
body.page-event-dashboard .admin-ticket-sales-summary {
grid-template-columns: 1fr;
}
body.page-event-dashboard .admin-ticket-manager-heading {
align-items: stretch;
flex-direction: column;
}
body.page-event-dashboard .admin-ticket-create-actions {
justify-content: flex-start;
}
body.page-event-dashboard .admin-registration-editor {
grid-template-columns: 1fr;
}
body.page-event-dashboard .admin-registration-editor__catalog {
border-right: 0;
border-bottom: 1px solid #dfe6ee;
}
}
@media (max-width: 640px) {
body.page-event-dashboard .admin-reference-tabs {
gap: 22px;
margin-inline: -10px;
padding-inline: 16px;
}
body.page-event-dashboard .admin-ticket-overview-heading,
body.page-event-dashboard .admin-ticket-manager-heading,
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] {
padding-inline: 16px;
}
body.page-event-dashboard .admin-ticket-sales-summary {
padding-inline: 16px;
}
body.page-event-dashboard .admin-ticket-create-actions button {
flex: 1 1 150px;
}
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] .admin-table,
body.page-event-dashboard #registrations .admin-table {
min-width: 0;
}
body.page-event-dashboard #registrations .admin-participants-table {
display: block;
width: 100%;
table-layout: auto;
}
body.page-event-dashboard #registrations .admin-participants-table colgroup {
display: none;
}
body.page-event-dashboard #registrations .admin-participants-table tbody,
body.page-event-dashboard #registrations .admin-participants-table tr,
body.page-event-dashboard #registrations .admin-participants-table td {
width: 100%;
}
body.page-event-dashboard #registrations .admin-participants-table td {
grid-template-columns: minmax(116px, 42%) minmax(0, 1fr);
align-items: start;
}
body.page-event-dashboard #registrations .admin-participants-table td::before {
min-width: 0;
line-height: 1.35;
white-space: normal;
}
body.page-event-dashboard #registrations .admin-participants-table__cell--compact,
body.page-event-dashboard #registrations .admin-participants-table__cell--date {
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
}
body.page-event-dashboard .admin-ticket-type-stack > strong {
white-space: normal;
}
body.page-event-dashboard .admin-ticket-transfer-summary {
grid-template-columns: 1fr;
}
body.page-event-dashboard .admin-participant-selection-bar {
align-items: stretch;
flex-direction: column;
margin-inline: 16px;
}
body.page-event-dashboard .admin-participant-selection-bar .admin-primary-button {
width: 100%;
}
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] .admin-table th:first-child,
body.page-event-dashboard #tickets .admin-list-block[data-admin-directory="tickets"] .admin-table td:first-child {
width: auto;
min-width: 0;
}
body.page-event-dashboard .admin-checkin-list-head {
display: none;
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-list article {
grid-template-columns: minmax(0, 1fr);
min-width: 0;
padding: 16px;
}
body.page-event-dashboard .admin-checkin-grid--reference .admin-checkin-list article > span {
color: #53647a;
font-size: .8rem;
}
body.page-event-dashboard .admin-access-role-options {
grid-template-columns: 1fr;
}
body.page-event-dashboard .admin-event-integration-list article {
grid-template-columns: 38px minmax(0, 1fr);
}
body.page-event-dashboard .admin-event-integration-list article > a {
grid-column: 2;
}
}
/* Modo Operação v2 - interface mobile-first baseada no fluxo de referência. */
body.page-checkin-operation {
margin: 0;
background: #eef3f8;
color: #10243e;
}
body.page-checkin-operation .public-footer {
display: none;
}
.operation-app,
.operation-app * {
box-sizing: border-box;
}
.operation-app {
width: 100%;
max-width: none;
min-height: 100dvh;
margin: 0;
padding-bottom: 110px;
}
.operation-topbar {
position: sticky;
z-index: 30;
top: 0;
display: flex;
min-height: 64px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
background: #082845;
color: #ffffff;
box-shadow: 0 2px 12px rgba(8, 40, 69, 0.18);
}
.operation-topbar__brand,
.operation-topbar__actions,
.operation-topbar__actions a,
.operation-topbar__actions button {
display: flex;
align-items: center;
}
.operation-topbar__brand {
min-height: 44px;
gap: 10px;
color: #ffffff !important;
font-size: 1rem;
font-weight: 850;
text-decoration: none;
}
.operation-topbar__brand img {
width: 36px;
height: 36px;
object-fit: contain;
}
.operation-topbar__actions {
gap: 8px;
}
.operation-topbar__actions form {
margin: 0;
}
.operation-topbar__actions a,
.operation-topbar__actions button,
.operation-topbar__avatar {
width: 44px;
min-width: 44px;
height: 44px;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font: inherit;
font-size: 1.2rem;
text-decoration: none;
}
.operation-topbar__avatar {
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.28);
font-size: 0.9rem;
font-weight: 850;
}
.operation-events,
.operation-workspace {
width: min(100% - 32px, 980px);
margin: 0 auto;
}
.operation-page-heading {
padding: 38px 0 22px;
}
.operation-page-heading > span,
.operation-event-header > div > span,
.operation-context-bar span,
.operation-participants > header span {
color: #667b93;
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.operation-page-heading h1 {
margin: 5px 0 0;
color: #071b32;
font-size: clamp(1.75rem, 4vw, 2.45rem);
letter-spacing: -0.035em;
}
.operation-event-list {
display: grid;
gap: 14px;
}
.operation-event-card {
display: grid;
grid-template-columns: 68px minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
border: 1px solid #d7e1ec;
border-radius: 16px;
padding: 20px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(26, 54, 82, 0.06);
}
.operation-event-card__date {
display: grid;
width: 64px;
height: 64px;
place-content: center;
border-radius: 14px;
background: #edf6ff;
color: #075ea8;
text-align: center;
}
.operation-event-card__date strong {
font-size: 1.45rem;
line-height: 1;
}
.operation-event-card__date span {
margin-top: 3px;
font-size: 0.72rem;
font-weight: 850;
}
.operation-event-card__content {
min-width: 0;
}
.operation-status {
display: inline-flex;
align-items: center;
gap: 6px;
color: #08765e;
font-size: 0.76rem;
font-weight: 800;
}
.operation-status i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #159a7c;
}
.operation-event-card h2 {
margin: 5px 0 9px;
overflow-wrap: anywhere;
color: #071b32;
font-size: 1.22rem;
}
.operation-event-card p {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 3px 0;
color: #60758e;
font-size: 0.88rem;
}
.operation-event-card p i {
margin-top: 2px;
color: #1875bd;
}
.operation-event-card dl {
display: flex;
gap: 24px;
margin: 14px 0 0;
}
.operation-event-card dl div {
display: flex;
align-items: baseline;
gap: 6px;
}
.operation-event-card dt {
color: #718399;
font-size: 0.74rem;
}
.operation-event-card dd {
margin: 0;
color: #10243e;
font-size: 1rem;
font-weight: 850;
}
.operation-event-card form {
margin: 0;
}
.operation-primary-button,
.operation-event-card button,
.operation-participant__status button,
.operation-search button,
.operation-manual-code button {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #075ea8;
border-radius: 10px;
padding: 0 17px;
background: #075ea8;
color: #ffffff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.operation-workspace {
padding-top: 22px;
}
.operation-event-header {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1px solid #d7e1ec;
border-radius: 15px;
background: #ffffff;
}
.operation-event-header > a:first-child {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid #d3e0ed;
border-radius: 50%;
color: #075ea8;
font-size: 1.2rem;
text-decoration: none;
}
.operation-event-header h1 {
margin: 3px 0;
overflow-wrap: anywhere;
color: #071b32;
font-size: clamp(1.25rem, 3.5vw, 1.7rem);
line-height: 1.15;
}
.operation-event-header p {
margin: 0;
color: #667b93;
font-size: 0.82rem;
}
.operation-event-header__switch {
min-height: 44px;
display: inline-flex;
align-items: center;
color: #075ea8;
font-size: 0.86rem;
font-weight: 800;
text-decoration: none;
}
.operation-scope-tabs {
display: flex;
gap: 4px;
margin: 14px 0;
overflow-x: auto;
border-bottom: 1px solid #d7e1ec;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
}
.operation-scope-tabs::-webkit-scrollbar {
height: 6px;
}
.operation-scope-tabs::-webkit-scrollbar-track {
background: #eef3f8;
}
.operation-scope-tabs::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #9db3c9;
}
.operation-scope-tabs a {
min-height: 46px;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
border-bottom: 3px solid transparent;
padding: 0 14px;
color: #687b91;
font-size: 0.86rem;
font-weight: 780;
text-decoration: none;
}
.operation-scope-tabs a.is-active {
border-bottom-color: #0796ca;
color: #075ea8;
}
.operation-context-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
border-left: 3px solid #0796ca;
border-radius: 8px;
padding: 11px 14px;
background: #e9f7fc;
}
.operation-context-bar div {
display: grid;
gap: 3px;
}
.operation-context-bar small {
color: #557087;
}
.operation-feedback {
display: grid;
gap: 8px;
margin-bottom: 14px;
}
.operation-feedback p {
display: flex;
min-height: 48px;
align-items: center;
gap: 9px;
margin: 0;
border: 1px solid #bbddca;
border-radius: 11px;
padding: 10px 13px;
background: #eaf8f0;
color: #126342;
font-weight: 750;
}
.operation-feedback p.operation-feedback--error {
border-color: #efc0c0;
background: #fff0f0;
color: #a42929;
}
.operation-feedback p.operation-feedback--warning,
.operation-feedback p.operation-feedback--info {
border-color: #ecd79f;
background: #fff8e7;
color: #7f5b00;
}
.operation-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: 14px;
margin-bottom: 14px;
border: 1px solid #d7e1ec;
border-radius: 14px;
padding: 18px 20px 16px;
background: #ffffff;
}
.operation-summary--with-vip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.operation-summary__metric {
display: grid;
min-width: 0;
justify-items: center;
gap: 8px;
text-align: center;
}
.operation-summary__ring {
--operation-color: #00539b;
--operation-progress: 0%;
position: relative;
display: grid;
width: 84px;
aspect-ratio: 1;
place-items: center;
border-radius: 50%;
background: conic-gradient(
var(--operation-color) 0 var(--operation-progress),
#dce5ef var(--operation-progress) 100%
);
}
.operation-summary__ring::before {
position: absolute;
inset: 7px;
border-radius: inherit;
background: #ffffff;
content: "";
}
.operation-summary__metric--pending .operation-summary__ring {
--operation-color: #f4bf45;
}
.operation-summary__metric--done .operation-summary__ring {
--operation-color: #0f8b5f;
}
.operation-summary__metric--vip {
position: relative;
padding-left: 14px;
border-left: 1px solid #d7e1ec;
}
.operation-summary__metric--vip .operation-summary__ring {
--operation-color: #e5a600;
}
.operation-summary__ring strong {
position: relative;
z-index: 1;
color: #071b32;
font-size: 1.45rem;
line-height: 1;
}
.operation-summary__metric > span {
color: #667b93;
font-size: 0.75rem;
font-weight: 650;
line-height: 1.25;
}
.operation-responsive-label__short {
display: none;
}
.operation-participants,
.operation-manual-code,
.operation-recent {
border: 1px solid #d7e1ec;
border-radius: 15px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(26, 54, 82, 0.05);
}
.operation-participants > header {
display: flex;
min-height: 70px;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
}
.operation-participants > header h2 {
margin: 2px 0 0;
color: #071b32;
font-size: 1.28rem;
}
.operation-participants > header button {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid #d3e0ed;
border-radius: 50%;
background: #ffffff;
color: #075ea8;
font: inherit;
font-size: 1.2rem;
cursor: pointer;
}
.operation-search {
display: none;
gap: 7px;
padding: 0 18px 14px;
}
.operation-search.is-open {
display: grid;
}
.operation-search label,
.operation-manual-code label {
color: #425a73;
font-size: 0.78rem;
font-weight: 780;
}
.operation-search > div,
.operation-manual-code form > div,
.operation-qr-modal .admin-checkin-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.operation-search input,
.operation-manual-code input,
.operation-qr-modal input {
width: 100%;
min-width: 0;
min-height: 44px;
border: 1px solid #c9d7e5;
border-radius: 10px;
padding: 0 13px;
background: #ffffff;
color: #10243e;
font: inherit;
}
.operation-filters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid #e0e7ef;
border-bottom: 1px solid #e0e7ef;
}
.operation-filters--with-vip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.operation-filters button {
position: relative;
min-width: 0;
min-height: 48px;
border: 0;
border-bottom: 3px solid transparent;
padding: 0 8px;
background: #ffffff;
color: #75869a;
font: inherit;
font-size: 0.8rem;
font-weight: 760;
cursor: pointer;
}
.operation-filters button.is-active {
border-bottom-color: #0796ca;
color: #075ea8;
}
.operation-filters span {
color: inherit;
font-size: 0.7rem;
}
.operation-participant-list {
display: grid;
}
.operation-participant {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
min-width: 0;
padding: 15px 18px;
}
.operation-participant + .operation-participant {
border-top: 1px solid #e2e9f1;
}
.operation-participant[hidden] {
display: none;
}
.operation-participant__identity,
.operation-participant__status {
display: grid;
min-width: 0;
gap: 3px;
}
.operation-participant__identity strong {
overflow-wrap: anywhere;
color: #075ea8;
font-size: 0.98rem;
}
.operation-participant__identity span,
.operation-participant__identity small,
.operation-participant__status small {
overflow-wrap: anywhere;
color: #60758e;
font-size: 0.78rem;
}
.operation-participant__identity .operation-participant__vip-label {
display: inline-flex;
align-items: center;
margin-right: 7px;
border-radius: 999px;
padding: 3px 7px;
background: #fff4cc;
color: #765600;
font-size: 0.66rem;
font-weight: 850;
letter-spacing: 0.025em;
text-transform: uppercase;
}
.operation-participant--vip {
box-shadow: inset 3px 0 0 #e5a600;
}
.operation-participant__status {
justify-items: end;
}
.operation-participant__status > span {
display: inline-flex;
min-height: 28px;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 4px 9px;
font-size: 0.72rem;
font-weight: 850;
}
.operation-participant__status .is-done {
background: #e4f7ee;
color: #08765e;
}
.operation-participant__status .is-pending {
background: #edf3f8;
color: #546b82;
}
.operation-participant__status .is-unavailable {
background: #fff0f0;
color: #a42929;
}
.operation-participant__status form {
margin: 6px 0 0;
}
.operation-manual-code,
.operation-recent {
margin-top: 14px;
overflow: hidden;
}
.operation-manual-code summary,
.operation-recent summary {
display: flex;
min-height: 54px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 18px;
color: #28445f;
font-weight: 780;
cursor: pointer;
list-style: none;
}
.operation-manual-code summary::-webkit-details-marker,
.operation-recent summary::-webkit-details-marker {
display: none;
}
.operation-manual-code form {
display: grid;
gap: 7px;
border-top: 1px solid #e2e9f1;
padding: 15px 18px 18px;
}
.operation-recent summary span {
min-width: 26px;
border-radius: 999px;
padding: 3px 7px;
background: #edf3f8;
color: #60758e;
font-size: 0.72rem;
text-align: center;
}
.operation-recent > div {
border-top: 1px solid #e2e9f1;
}
.operation-recent article {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 18px;
}
.operation-recent article + article {
border-top: 1px solid #edf1f5;
}
.operation-recent article > span {
display: grid;
gap: 2px;
}
.operation-recent small,
.operation-recent time {
color: #687b91;
font-size: 0.74rem;
}
.operation-empty {
display: grid;
min-height: 280px;
place-items: center;
align-content: center;
gap: 8px;
border: 1px solid #d7e1ec;
border-radius: 16px;
padding: 28px;
background: #ffffff;
color: #60758e;
text-align: center;
}
.operation-empty i {
color: #91a4b7;
font-size: 2.4rem;
}
.operation-empty strong {
color: #10243e;
font-size: 1.05rem;
}
.operation-empty p {
max-width: 430px;
margin: 0;
}
.operation-empty a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: #075ea8;
font-weight: 800;
}
.operation-empty--participants {
min-height: 250px;
border: 0;
border-radius: 0 0 15px 15px;
box-shadow: none;
}
.operation-empty--filtered {
min-height: 190px;
}
.operation-qr-fab {
position: fixed;
z-index: 25;
right: max(24px, env(safe-area-inset-right));
bottom: max(24px, env(safe-area-inset-bottom));
display: inline-flex;
min-width: 58px;
min-height: 58px;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 999px;
padding: 0 18px;
background: #f28c18;
color: #ffffff;
box-shadow: 0 10px 28px rgba(173, 89, 0, 0.3);
font: inherit;
font-weight: 850;
cursor: pointer;
}
.operation-qr-fab i {
font-size: 1.45rem;
}
.operation-qr-modal .admin-modal__panel {
width: min(520px, calc(100vw - 24px));
max-height: min(760px, calc(100dvh - 24px));
}
.operation-qr-modal .operation-scanner {
min-height: 320px;
}
.operation-qr-modal .admin-checkin-input-row {
margin-top: 12px;
}
.operation-special-guest-modal .admin-modal__panel {
width: min(460px, calc(100vw - 24px));
align-items: center;
gap: 18px;
padding: 30px;
text-align: center;
}
.operation-special-guest-modal__icon {
display: grid;
width: 72px;
height: 72px;
place-items: center;
border-radius: 50%;
background: #fff4cc;
color: #b57c00;
font-size: 2rem;
box-shadow: 0 0 0 8px #fffaeb;
}
.operation-special-guest-modal__content {
display: grid;
justify-items: center;
gap: 8px;
}
.operation-special-guest-modal__content > span {
color: #936a00;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.operation-special-guest-modal__content h2,
.operation-special-guest-modal__content p {
margin: 0;
}
.operation-special-guest-modal__content h2 {
color: #071b32;
font-size: clamp(1.5rem, 5vw, 2rem);
}
.operation-special-guest-modal__content p {
max-width: 360px;
color: #526981;
line-height: 1.55;
}
.operation-special-guest-modal__content p strong {
color: #10243e;
}
.operation-special-guest-modal__content small {
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 999px;
padding: 7px 11px;
background: #edf4fb;
color: #31516f;
font-weight: 750;
}
.operation-special-guest-modal .operation-primary-button {
width: 100%;
justify-content: center;
}
@media (max-width: 680px) {
.operation-app {
padding-bottom: 96px;
}
.operation-topbar {
min-height: 58px;
padding: 7px max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left));
}
.operation-topbar__brand span {
font-size: 0.9rem;
}
.operation-topbar__actions > a {
display: none;
}
.operation-topbar__actions button {
display: flex;
}
.operation-topbar__avatar {
width: 40px;
min-width: 40px;
height: 40px;
}
.operation-events,
.operation-workspace {
width: 100%;
}
.operation-events {
padding: 0 12px;
}
.operation-page-heading {
padding: 24px 2px 16px;
}
.operation-event-card {
grid-template-columns: 54px minmax(0, 1fr);
gap: 12px;
padding: 15px;
}
.operation-event-card__date {
width: 52px;
height: 52px;
}
.operation-event-card form {
grid-column: 1 / -1;
}
.operation-event-card form button {
width: 100%;
}
.operation-event-card dl {
gap: 16px;
}
.operation-workspace {
padding-top: 0;
}
.operation-event-header {
grid-template-columns: 44px minmax(0, 1fr);
gap: 11px;
border-width: 0 0 1px;
border-radius: 0;
padding: 13px 12px;
box-shadow: none;
}
.operation-event-header__switch {
display: none;
}
.operation-scope-tabs {
margin: 0;
padding: 0 6px;
background: #ffffff;
}
.operation-context-bar,
.operation-feedback,
.operation-summary,
.operation-participants,
.operation-manual-code,
.operation-recent {
margin-right: 12px;
margin-left: 12px;
}
.operation-context-bar {
align-items: flex-start;
flex-direction: column;
margin-top: 12px;
}
.operation-feedback {
margin-top: 12px;
}
.operation-summary {
margin-top: 12px;
gap: 6px;
padding: 13px 8px 12px;
}
.operation-summary--with-vip {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
padding-right: 5px;
padding-left: 5px;
}
.operation-summary__metric {
gap: 6px;
}
.operation-summary__ring {
width: 68px;
}
.operation-summary__ring::before {
inset: 6px;
}
.operation-summary__ring strong {
font-size: 1.25rem;
}
.operation-summary__metric > span {
font-size: 0.68rem;
}
.operation-summary__metric--vip {
padding-left: 5px;
}
.operation-participants > header {
min-height: 64px;
padding: 10px 14px;
}
.operation-search {
padding: 0 14px 12px;
}
.operation-filters button {
padding: 0 3px;
font-size: 0.74rem;
}
.operation-filters--with-vip button {
min-height: 54px;
font-size: 0.68rem;
line-height: 1.15;
}
.operation-participant {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 14px;
}
.operation-participant__status {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
justify-items: start;
}
.operation-participant__status form,
.operation-participant__status button {
width: 100%;
}
.operation-participant__status form {
grid-column: 1 / -1;
margin-top: 4px;
}
.operation-search > div,
.operation-manual-code form > div,
.operation-qr-modal .admin-checkin-input-row {
grid-template-columns: minmax(0, 1fr);
}
.operation-search button,
.operation-manual-code button,
.operation-qr-modal .admin-checkin-input-row button {
width: 100%;
}
.operation-qr-fab {
right: max(14px, env(safe-area-inset-right));
bottom: max(14px, env(safe-area-inset-bottom));
width: 58px;
padding: 0;
}
.operation-qr-fab span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.operation-qr-modal .admin-modal__header,
.operation-qr-modal .admin-modal__body {
padding: 14px;
}
.operation-qr-modal .operation-scanner {
min-height: clamp(220px, 42dvh, 340px);
}
.operation-special-guest-modal .admin-modal__panel {
gap: 16px;
padding: 24px 18px 18px;
}
.operation-special-guest-modal__icon {
width: 64px;
height: 64px;
font-size: 1.7rem;
}
}
@media (max-width: 430px) {
.operation-summary--with-vip .operation-summary__ring {
width: clamp(54px, 15vw, 64px);
}
.operation-summary--with-vip .operation-summary__metric > span {
max-width: 76px;
font-size: 0.62rem;
overflow-wrap: anywhere;
}
.operation-summary--with-vip .operation-responsive-label__full,
.operation-filters--with-vip .operation-responsive-label__full {
display: none;
}
.operation-summary--with-vip .operation-responsive-label__short,
.operation-filters--with-vip .operation-responsive-label__short {
display: inline;
}
}
/* Ingressos: navegacao interna e paineis de comunicacao */
.admin-ticket-tabs {
position: sticky;
top: 62px;
z-index: 8;
display: flex;
align-items: end;
gap: 30px;
min-height: 52px;
margin: 0 0 18px;
padding: 0 26px;
border-bottom: 1px solid #d8e3ef;
background: #fff;
overflow-x: auto;
}
.admin-ticket-tabs button {
position: relative;
flex: 0 0 auto;
min-height: 52px;
padding: 2px 0 0;
border: 0;
background: transparent;
color: #60718a;
font: inherit;
font-size: 0.88rem;
font-weight: 700;
cursor: pointer;
}
.admin-ticket-tabs button::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: #0798d2;
opacity: 0;
transform: scaleX(0.65);
transition: opacity 160ms ease, transform 160ms ease;
}
.admin-ticket-tabs button:hover,
.admin-ticket-tabs button.is-active {
color: #005da8;
}
.admin-ticket-tabs button.is-active::after {
opacity: 1;
transform: scaleX(1);
}
.admin-ticket-sales-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
padding: 24px 24px 10px;
}
.admin-ticket-sales-summary article {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
min-height: 74px;
padding: 14px 18px;
border: 1px solid #d9e3ee;
border-radius: 10px;
background: #fff;
}
.admin-ticket-sales-summary i {
color: #8a9ab0;
font-size: 1.45rem;
}
.admin-ticket-sales-summary span {
color: #60718a;
font-size: 0.9rem;
}
.admin-ticket-sales-summary strong {
color: #007d72;
font-size: 1.7rem;
font-weight: 650;
line-height: 1;
}
.admin-ticket-sales-summary article:nth-child(3) strong { color: #005da8; }
.admin-ticket-communication,
.admin-ticket-coupons {
padding: 0;
overflow: hidden;
}
.admin-ticket-panel-heading {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 88px;
padding: 20px 26px;
border-bottom: 1px solid #dfe7f0;
}
.admin-ticket-panel-heading span {
display: block;
margin-bottom: 4px;
color: #708099;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-ticket-panel-heading h2 {
margin: 0;
color: #071e3d;
font-size: 1.28rem;
line-height: 1.2;
}
.admin-ticket-editor-layout {
display: grid;
grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.28fr);
gap: 30px;
align-items: start;
padding: 30px;
}
.admin-ticket-message-preview,
.admin-ticket-email-preview {
display: grid;
place-items: center;
min-height: 310px;
padding: 28px;
border-radius: 10px;
background: #f2f5f8;
}
.admin-ticket-message-preview__sheet,
.admin-ticket-email-preview {
color: #40516a;
}
.admin-ticket-message-preview__sheet {
width: min(100%, 290px);
min-height: 230px;
padding: 24px;
border: 1px solid #dfe6ee;
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 28px rgba(17, 42, 76, 0.08);
}
.admin-ticket-message-preview__sheet > span,
.admin-ticket-message-preview__sheet > small,
.admin-ticket-email-preview > span,
.admin-ticket-email-preview > small {
display: block;
color: #73839a;
font-size: 0.78rem;
}
.admin-ticket-message-preview__sheet > strong,
.admin-ticket-email-preview > strong {
display: block;
margin-top: 4px;
color: #102c50;
}
.admin-ticket-message-preview__line {
height: 8px;
margin: 18px 0;
border-radius: 5px;
background: #dce4ed;
}
.admin-ticket-message-preview__sheet p {
margin: 8px 0 0;
color: #304561;
line-height: 1.55;
white-space: pre-line;
}
.admin-ticket-email-preview {
display: grid;
min-height: 500px;
padding: 18px;
border: 1px solid #e1e8f0;
background: #edf2f7;
}
.admin-ticket-email-preview__browser {
width: min(100%, 420px);
}
.admin-ticket-email-preview__subject {
display: grid;
gap: 4px;
padding: 12px 14px;
border: 1px solid #d4dee9;
border-bottom: 0;
border-radius: 10px 10px 0 0;
background: #fff;
}
.admin-ticket-email-preview__subject span {
color: #718198;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-ticket-email-preview__subject strong {
overflow: hidden;
color: #172d49;
font-size: 0.78rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-ticket-email-preview__sheet {
overflow: hidden;
border: 1px solid #d4dee9;
border-radius: 0 0 10px 10px;
background: #fff;
box-shadow: 0 12px 28px rgba(17, 42, 76, 0.08);
}
.admin-ticket-email-preview__sheet > header {
padding: 14px 18px;
background: #063b6f;
color: #fff;
}
.admin-ticket-email-preview__sheet > header strong,
.admin-ticket-email-preview__sheet > header span {
display: block;
}
.admin-ticket-email-preview__sheet > header strong { font-size: 0.78rem; }
.admin-ticket-email-preview__sheet > header span { margin-top: 2px; color: #c7d7e8; font-size: 0.61rem; }
.admin-ticket-email-preview__body {
padding: 18px;
color: #334760;
}
.admin-ticket-email-preview__greeting,
.admin-ticket-email-preview__message {
margin: 0;
font-size: 0.67rem;
line-height: 1.55;
}
.admin-ticket-email-preview__body h3 {
margin: 6px 0 8px;
color: #0b1f3a;
font-size: 1rem;
line-height: 1.25;
}
.admin-ticket-email-preview__body dl {
margin: 12px 0;
border-top: 1px solid #e4eaf1;
}
.admin-ticket-email-preview__body dl > div {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid #e4eaf1;
font-size: 0.62rem;
}
.admin-ticket-email-preview__body dt { color: #718198; }
.admin-ticket-email-preview__body dd { margin: 0; color: #233a57; font-weight: 700; }
.admin-ticket-email-preview__qr {
display: grid;
justify-items: center;
padding: 12px;
border: 1px solid #dce5ef;
border-radius: 8px;
background: #f4f8fb;
text-align: center;
}
.admin-ticket-email-preview__qr svg {
display: block;
width: 104px;
height: 104px;
margin-bottom: 7px;
}
.admin-ticket-email-preview__qr strong { color: #153657; font-size: 0.68rem; }
.admin-ticket-email-preview__qr span { margin-top: 2px; color: #718198; font-size: 0.58rem; }
.admin-ticket-email-preview__button {
display: table;
margin: 12px auto 0;
padding: 8px 12px;
border-radius: 6px;
background: #00539b;
color: #fff;
font-size: 0.62rem;
font-weight: 800;
}
.admin-ticket-message-form {
display: grid;
gap: 20px;
}
.admin-ticket-message-form textarea {
min-height: 230px;
resize: none;
}
.admin-ticket-form-actions {
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding-top: 4px;
}
.admin-ticket-empty-state {
display: grid;
place-items: center;
min-height: 350px;
padding: 48px 24px;
text-align: center;
}
.admin-ticket-empty-state i {
display: block;
margin-bottom: 16px;
color: #159fe0;
font-size: 3rem;
}
.admin-ticket-empty-state strong { color: #102c50; font-size: 1.15rem; }
.admin-ticket-empty-state p { margin: 8px 0 20px; color: #667791; }
.admin-ticket-coupon-table { padding: 24px 26px 30px; }
.admin-ticket-percent-field { display: grid; grid-template-columns: 1fr 44px; }
.admin-ticket-percent-field input { border-radius: 8px 0 0 8px; }
.admin-ticket-percent-field span { display: grid; place-items: center; border: 1px solid #cad7e6; border-left: 0; border-radius: 0 8px 8px 0; background: #f3f6fa; font-weight: 700; }
.admin-ticket-coupons .admin-modal__body > .admin-form-section__grid,
.admin-ticket-coupons .admin-modal__body > .admin-ticket-form-actions { grid-column: 1 / -1; }
.admin-ticket-coupons .admin-modal__body > .admin-ticket-form-actions .admin-primary-button { min-height: 44px; height: 44px; align-self: flex-start; }
.account-ticket-message {
margin: 20px 0;
padding: 16px 18px;
border-left: 4px solid #0b86be;
border-radius: 0 8px 8px 0;
background: #eef8fd;
}
.account-ticket-message strong { color: #0b5278; }
.account-ticket-message p { margin: 6px 0 0; line-height: 1.55; }
@media (max-width: 980px) {
.admin-ticket-sales-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-ticket-editor-layout { grid-template-columns: 1fr; }
.admin-ticket-message-preview, .admin-ticket-email-preview { min-height: 240px; }
}
@media (max-width: 680px) {
.admin-ticket-tabs { gap: 22px; padding-inline: 18px; }
.admin-ticket-sales-summary { padding: 18px 16px 8px; }
.admin-ticket-sales-summary article { grid-template-columns: 34px 1fr auto; padding-inline: 14px; }
.admin-ticket-sales-summary { grid-template-columns: 1fr; }
.admin-ticket-panel-heading { align-items: flex-start; gap: 14px; min-height: auto; padding: 18px; }
.admin-ticket-panel-heading--actions { flex-direction: column; }
.admin-ticket-editor-layout { gap: 20px; padding: 18px; }
.admin-ticket-coupon-table { padding: 18px; }
}
/* Sympla-inspired event workspace preview (temporary validation copy, 2026-08-14). */
.admin-event-workspace-preview .admin-sidebar-cycle__label {
display: none;
}
.admin-event-workspace-preview .admin-sidebar-cycle {
margin-top: 4px;
}
.admin-event-workspace-preview .admin-sidebar-cycle__group nav {
gap: 4px;
}
.admin-event-primary-tabs {
min-width: 0;
margin-top: -8px;
overflow-x: auto;
border-bottom: 1px solid #dce5ef;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
}
.admin-event-registration-chart__scroll {
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
}
.admin-event-registration-chart__scroll::-webkit-scrollbar {
height: 6px;
}
.admin-event-registration-chart__scroll::-webkit-scrollbar-track {
background: #eef3f8;
}
.admin-event-registration-chart__scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #9db3c9;
}
.admin-event-primary-tabs::-webkit-scrollbar {
height: 6px;
}
.admin-event-primary-tabs::-webkit-scrollbar-track {
background: #eef3f8;
}
.admin-event-primary-tabs::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #9db3c9;
}
.admin-event-primary-tabs > div {
min-width: max-content;
display: flex;
align-items: end;
gap: 26px;
}
.admin-event-primary-tabs button,
.admin-event-primary-tabs a {
min-height: 42px;
padding: 0 1px;
display: inline-flex;
align-items: center;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
color: #66758a;
font: inherit;
font-size: 0.76rem;
font-weight: 750;
text-decoration: none;
white-space: nowrap;
}
.admin-event-primary-tabs button:hover,
.admin-event-primary-tabs a:hover {
color: #075c9d;
text-decoration: none;
}
.admin-event-primary-tabs button.is-active,
.admin-event-primary-tabs a.is-active {
border-bottom-color: #0796c9;
color: #075c9d;
}
.admin-event-workspace-preview #dashboard > .admin-event-focus-hero,
.admin-event-workspace-preview #dashboard > .admin-metrics-grid,
.admin-event-workspace-preview #dashboard > .admin-event-focus-layout,
.admin-event-workspace-preview #dashboard > .admin-event-quick-actions,
.admin-event-workspace-preview #dashboard > .admin-event-secondary-details {
display: none;
}
.admin-event-registration-overview {
overflow: hidden;
border: 1px solid #dfe7f0;
border-radius: 14px;
background: #fff;
}
.admin-event-registration-overview > header {
padding: 20px 22px 16px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid #e8edf3;
}
.admin-event-registration-overview > header span {
display: block;
margin-bottom: 3px;
color: #718096;
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-event-registration-overview > header h2 {
margin: 0;
color: #0b1f38;
font-size: 1.15rem;
letter-spacing: -0.02em;
}
.admin-event-registration-overview > header form {
display: flex;
align-items: center;
gap: 9px;
}
.admin-event-registration-overview > header label {
color: #526179;
font-size: 0.75rem;
font-weight: 750;
}
.admin-event-registration-overview > header select {
width: auto;
min-width: 162px;
min-height: 38px;
padding: 0 34px 0 11px;
border: 1px solid #d5dfeb;
border-radius: 8px;
background-color: #fff;
color: #22344d;
font: inherit;
font-size: 0.78rem;
}
.admin-event-registration-chart {
padding: 24px 22px 12px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 10px;
}
.admin-event-registration-chart__axis {
height: 260px;
padding-bottom: 25px;
display: grid;
grid-template-rows: repeat(5, 1fr);
align-items: start;
color: #8a97a8;
font-size: 0.63rem;
text-align: right;
}
.admin-event-registration-chart__axis span:last-child {
align-self: end;
}
.admin-event-registration-chart__scroll {
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.admin-event-registration-chart__plot {
--chart-days: 30;
min-width: max(640px, calc(var(--chart-days) * 22px));
height: 260px;
padding: 0 4px;
display: grid;
grid-template-columns: repeat(var(--chart-days), minmax(12px, 1fr));
align-items: stretch;
gap: 6px;
background: repeating-linear-gradient(
to bottom,
#e8edf3 0,
#e8edf3 1px,
transparent 1px,
transparent 25%
);
border-bottom: 1px solid #d6e0ea;
}
.admin-event-registration-chart__day {
min-width: 0;
height: 260px;
display: grid;
grid-template-rows: minmax(0, 1fr) 25px;
align-items: end;
justify-items: center;
}
.admin-event-registration-chart__bar {
width: min(100%, 24px);
min-height: 0;
align-self: end;
border: 1px solid #079ed3;
border-bottom: 0;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, rgba(28, 178, 226, 0.64), rgba(28, 178, 226, 0.25));
}
.admin-event-registration-chart__bar[style*="height: 0%"] {
border: 0;
}
.admin-event-registration-chart__day small {
padding-top: 7px;
color: #748196;
font-size: 0.59rem;
white-space: nowrap;
}
.admin-event-registration-chart__day small.is-hidden {
visibility: hidden;
}
.admin-event-registration-summary {
padding: 10px 22px 20px 66px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.admin-event-registration-summary article {
min-height: 62px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid #e2e8f0;
border-radius: 9px;
}
.admin-event-registration-summary span {
color: #607086;
font-size: 0.76rem;
}
.admin-event-registration-summary strong {
color: #0a7fae;
font-size: 1.35rem;
font-weight: 650;
}
.admin-event-registration-summary article:nth-child(2) strong {
color: #d69518;
}
.admin-event-registration-summary article:nth-child(3) strong {
color: #34465e;
}
@media (max-width: 760px) {
.admin-event-primary-tabs {
margin: -4px -2px 0;
}
.admin-event-primary-tabs > div {
gap: 20px;
}
.admin-event-primary-tabs button,
.admin-event-primary-tabs a {
min-height: 44px;
font-size: 0.73rem;
}
.admin-event-registration-overview > header {
align-items: stretch;
flex-direction: column;
padding: 17px 16px 14px;
}
.admin-event-registration-overview > header form {
justify-content: space-between;
}
.admin-event-registration-overview > header select {
flex: 1;
min-width: 0;
}
.admin-event-registration-chart {
padding: 20px 14px 10px;
grid-template-columns: 28px minmax(0, 1fr);
gap: 8px;
}
.admin-event-registration-chart__plot {
min-width: max(100%, calc(var(--chart-days) * 6px));
gap: 2px;
}
.admin-event-registration-summary {
padding: 8px 14px 16px;
grid-template-columns: 1fr;
gap: 8px;
}
.admin-event-registration-summary article {
min-height: 52px;
}
}
.admin-event-details,
.admin-event-analytics {
display: grid;
gap: 20px;
}
.admin-event-detail-panel {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
gap: 18px;
}
.admin-event-detail-panel[hidden] {
display: none;
}
.admin-event-detail-card,
.admin-event-ticket-breakdown {
min-width: 0;
overflow: hidden;
border: 1px solid #dfe7f0;
border-radius: 12px;
background: #fff;
}
.admin-event-detail-card > header,
.admin-event-ticket-breakdown > header {
min-height: 58px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #e8edf3;
}
.admin-event-detail-card h2,
.admin-event-ticket-breakdown h2 {
margin: 0;
color: #10243e;
font-size: 1rem;
}
.admin-event-detail-card header p {
margin: 3px 0 0;
color: #728097;
font-size: .75rem;
}
.admin-event-detail-card header a,
.admin-event-detail-card header button,
.admin-event-detail-card footer a {
border: 0;
background: transparent;
color: #0963a7;
font: inherit;
font-size: .78rem;
font-weight: 750;
text-decoration: none;
}
.admin-event-detail-card dl {
margin: 0;
padding: 18px 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 30px;
}
.admin-event-detail-card dt {
margin-bottom: 6px;
color: #718096;
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
}
.admin-event-detail-card dd {
margin: 0;
color: #26384f;
font-size: .86rem;
}
.admin-event-detail-status {
width: 8px;
height: 8px;
margin-right: 8px;
display: inline-block;
border-radius: 50%;
background: #159a79;
}
.admin-event-detail-card footer {
padding: 14px 20px;
display: flex;
gap: 20px;
border-top: 1px solid #e8edf3;
}
.admin-event-detail-form-preview,
.admin-event-detail-panel[data-event-detail-panel="access"] .admin-event-detail-card,
.admin-event-detail-panel[data-event-detail-panel="settings"] .admin-event-detail-card {
grid-column: 1 / -1;
}
.admin-event-detail-fields {
width: min(520px, 100%);
margin: 0 auto;
padding: 28px 22px 34px;
display: grid;
gap: 16px;
}
.admin-event-detail-fields label {
display: grid;
gap: 6px;
color: #46566d;
font-size: .75rem;
font-weight: 700;
}
.admin-event-detail-fields input:not([type="checkbox"]) {
min-height: 42px;
border: 1px solid #dbe3ec;
border-radius: 7px;
background: #f8fafc;
}
.admin-event-detail-fields .admin-event-detail-consent {
display: flex;
align-items: center;
}
.admin-event-detail-rules-preview {
padding: 14px 16px;
border: 1px solid #dbe3ec;
border-radius: 9px;
background: #f8fafc;
color: #46566d;
}
.admin-event-detail-rules-preview strong,
.admin-event-detail-rules-preview p {
margin: 0;
}
.admin-event-detail-rules-preview p {
margin-top: 7px;
font-size: .82rem;
font-weight: 400;
line-height: 1.55;
}
.admin-event-registration-option {
min-height: 64px;
padding: 13px 14px;
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #f8fafc;
}
.admin-event-registration-option input {
width: 18px;
height: 18px;
margin-top: 2px;
}
.admin-event-registration-option span {
display: grid;
gap: 3px;
}
.admin-event-registration-option small {
color: var(--admin-muted);
line-height: 1.4;
}
.admin-event-detail-access-list,
.admin-event-detail-settings {
display: grid;
}
.admin-event-detail-access-list > p {
margin: 0;
padding: 30px 20px;
color: #6b778b;
}
.admin-event-detail-access-list article,
.admin-event-detail-settings a {
min-height: 58px;
padding: 0 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(130px, .3fr) auto minmax(90px, auto);
align-items: center;
gap: 16px;
border-top: 1px solid #e8edf3;
color: #26384f;
text-decoration: none;
}
.admin-event-detail-access-list article:first-child,
.admin-event-detail-settings a:first-child {
border-top: 0;
}
.admin-event-detail-access-list button {
border: 0;
background: transparent;
color: #0963a7;
font: inherit;
font-size: .78rem;
font-weight: 750;
}
.admin-event-detail-access-list article > div:first-child {
min-width: 0;
display: grid;
gap: 3px;
}
.admin-event-detail-access-list article strong,
.admin-event-detail-access-list article small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-event-detail-access-list article small {
color: #718096;
font-size: .72rem;
}
.admin-event-detail-access-list--invitations {
border-top: 1px solid #e8edf3;
background: #fbfcfe;
}
.admin-event-detail-access-list--invitations article {
grid-template-columns: minmax(0, 1fr) minmax(120px, .28fr) auto minmax(150px, auto);
}
.admin-access-status {
padding: 5px 9px;
border-radius: 999px;
background: #edf2f7;
color: #5f6f83;
font-size: .7rem;
font-style: normal;
font-weight: 750;
}
.admin-access-status.is-active,
.admin-access-status.is-accepted {
background: #e5f7ef;
color: #087455;
}
.admin-access-status.is-pending {
background: #fff4d8;
color: #966600;
}
.admin-access-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.admin-access-actions form {
margin: 0;
}
.admin-access-actions .is-danger {
color: #b42318;
}
.admin-access-invite-link {
margin: 16px 20px 0;
padding: 13px 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border: 1px solid #b9dfd2;
border-radius: 9px;
background: #effaf6;
}
.admin-access-invite-link > div {
min-width: 0;
display: grid;
gap: 3px;
}
.admin-access-invite-link span {
color: #557066;
font-size: .72rem;
}
.admin-access-invite-link button {
min-height: 36px;
padding: 0 13px;
flex: 0 0 auto;
border: 1px solid #0f8a68;
border-radius: 7px;
background: #fff;
color: #087455;
font: inherit;
font-size: .75rem;
font-weight: 750;
}
.admin-invitation-summary {
margin: 20px 0;
display: grid;
gap: 12px;
}
.admin-invitation-summary div {
padding-bottom: 10px;
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 12px;
border-bottom: 1px solid #e8edf3;
}
.admin-invitation-summary dt {
color: #718096;
font-size: .72rem;
font-weight: 750;
}
.admin-invitation-summary dd {
margin: 0;
overflow-wrap: anywhere;
color: #26384f;
font-size: .82rem;
}
.admin-event-detail-settings a {
grid-template-columns: minmax(0, 1fr) auto;
}
.admin-event-status-controls {
padding: 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
border-bottom: 1px solid #e8edf3;
background: #f8fafc;
}
.admin-event-status-control {
min-width: 0;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
border: 1px solid #dce5ee;
border-radius: 12px;
background: #fff;
}
.admin-event-status-control__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.admin-event-status-control__heading > div {
min-width: 0;
}
.admin-event-status-control__heading > div > span {
display: block;
margin-bottom: 5px;
color: #718096;
font-size: .68rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.admin-event-status-control h3 {
margin: 0;
color: #10243e;
font-size: 1rem;
line-height: 1.3;
}
.admin-event-status-control > p,
.admin-event-checkin-activation__notice {
margin: 0;
color: #627188;
font-size: .8rem;
line-height: 1.5;
}
.admin-event-status-control > form:not(.admin-event-checkin-activation) {
margin-top: auto;
}
.admin-event-status-control .button {
min-height: 42px;
font: inherit;
font-size: .8rem;
font-weight: 750;
}
.admin-event-state-pill {
flex: 0 0 auto;
padding: 5px 9px;
border-radius: 999px;
background: #eef2f6;
color: #657287;
font-size: .68rem;
font-weight: 800;
}
.admin-event-state-pill.is-active {
background: #e6f7f1;
color: #08785e;
}
.admin-event-state-pill.is-scheduled {
background: #fff4da;
color: #986400;
}
.admin-event-checkin-activation {
display: grid;
gap: 14px;
}
.admin-event-checkin-toggle {
min-height: 54px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid #dce5ee;
border-radius: 10px;
cursor: pointer;
}
.admin-event-checkin-toggle > span:first-child {
min-width: 0;
display: grid;
gap: 2px;
}
.admin-event-checkin-toggle strong {
color: #1f334d;
font-size: .82rem;
}
.admin-event-checkin-toggle small {
color: #6f7d91;
font-size: .72rem;
line-height: 1.35;
}
.admin-event-checkin-date {
display: grid;
gap: 7px;
color: #43546b;
font-size: .75rem;
font-weight: 750;
}
.admin-event-checkin-date input {
width: 100%;
min-height: 42px;
padding: 0 12px;
border: 1px solid #cedae6;
border-radius: 9px;
background: #fff;
color: #22364f;
font: inherit;
font-weight: 600;
}
.admin-event-checkin-date input:disabled {
background: #f1f4f7;
color: #8793a4;
}
.admin-event-checkin-activation .button {
justify-self: start;
}
.admin-event-status-control__module-link {
margin-top: auto;
color: #0963a7;
font-size: .8rem;
font-weight: 750;
text-decoration: none;
}
@media (max-width: 840px) {
.admin-event-status-controls {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.admin-event-status-controls {
padding: 14px;
}
.admin-event-status-control {
padding: 16px;
}
.admin-event-status-control__heading {
align-items: center;
}
.admin-event-checkin-activation .button,
.admin-event-status-control > form:not(.admin-event-checkin-activation) .button {
width: 100%;
}
}
.admin-event-analytics__toolbar {
display: flex;
align-items: center;
gap: 12px;
}
.admin-event-analytics__toolbar form,
.admin-event-analytics__export {
min-height: 42px;
padding: 0 13px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid #d5dfeb;
border-radius: 8px;
background: #fff;
color: #314158;
font: inherit;
font-size: .78rem;
text-decoration: none;
}
.admin-event-analytics__toolbar label {
font-weight: 750;
}
.admin-event-analytics__toolbar select {
border: 0;
background: transparent;
color: inherit;
font: inherit;
}
.admin-event-analytics__export {
color: #0863a8;
font-weight: 750;
}
.admin-event-analytics__timestamps {
margin-left: auto;
display: flex;
gap: 10px;
}
.admin-event-analytics__timestamps > span {
min-height: 52px;
padding: 8px 12px;
display: grid;
align-content: center;
border: 1px solid #e1e7ef;
border-radius: 9px;
background: #fff;
}
.admin-event-analytics__timestamps small,
.admin-event-analytics__timestamps em {
color: #728097;
font-size: .65rem;
font-style: normal;
}
.admin-event-analytics__timestamps strong {
color: #1c2e46;
font-size: .74rem;
}
.admin-event-analytics__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.admin-event-analytics__metrics article {
min-height: 112px;
padding: 18px 20px;
display: grid;
align-content: center;
gap: 5px;
border: 1px solid #dfe7f0;
border-radius: 12px;
background: #fff;
}
.admin-event-analytics__metrics span,
.admin-event-analytics__metrics small {
color: #66758a;
font-size: .74rem;
}
.admin-event-analytics__metrics strong {
color: #0d233d;
font-size: 1.4rem;
font-weight: 650;
}
.admin-event-registration-overview > header > strong {
color: #0b7fac;
font-size: .78rem;
}
.admin-event-ticket-breakdown table {
width: 100%;
border-collapse: collapse;
}
.admin-event-ticket-breakdown th,
.admin-event-ticket-breakdown td {
padding: 14px 20px;
border-top: 1px solid #e8edf3;
color: #43536a;
font-size: .78rem;
text-align: left;
}
.admin-event-ticket-breakdown th {
background: #f8fafc;
color: #65738a;
font-size: .68rem;
text-transform: uppercase;
}
@media (max-width: 900px) {
.admin-event-analytics__toolbar,
.admin-event-analytics__timestamps {
align-items: stretch;
flex-wrap: wrap;
}
.admin-event-analytics__timestamps {
width: 100%;
margin-left: 0;
}
.admin-event-analytics__timestamps > span {
flex: 1 1 200px;
}
.admin-event-analytics__metrics,
.admin-event-detail-panel {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.admin-event-analytics__toolbar form,
.admin-event-analytics__export {
width: 100%;
justify-content: space-between;
}
.admin-event-detail-card dl {
grid-template-columns: 1fr;
}
.admin-event-detail-access-list article {
grid-template-columns: minmax(0, 1fr) auto;
}
.admin-event-detail-access-list article span {
grid-column: 1;
}
.admin-event-detail-access-list .admin-access-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.admin-event-detail-access-list--invitations article {
grid-template-columns: minmax(0, 1fr) auto;
padding-block: 14px;
}
.admin-event-detail-access-list--invitations .admin-access-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.admin-access-invite-link {
align-items: stretch;
flex-direction: column;
}
}
/* Etapa D: selecao e confirmacao de atividades em lote. */
.activity-bulk-toolbar {
position: sticky;
top: 12px;
z-index: 24;
display: grid;
grid-template-columns: minmax(230px, 0.8fr) minmax(220px, 1fr) auto;
gap: 14px;
align-items: center;
margin: 1rem 0;
padding: 14px;
border: 1px solid rgba(0, 83, 155, 0.22);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 18px 38px rgba(15, 47, 75, 0.14);
}
.activity-bulk-toolbar__summary {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 10px;
align-items: center;
min-width: 0;
}
.activity-bulk-toolbar__summary > div {
display: grid;
gap: 2px;
min-width: 0;
}
.activity-bulk-toolbar__summary strong,
.activity-bulk-toolbar__summary small {
overflow-wrap: anywhere;
}
.activity-bulk-toolbar__summary strong {
color: #0f2f4b;
}
.activity-bulk-toolbar__summary small {
color: #526179;
line-height: 1.35;
}
.activity-bulk-toolbar__count {
width: 46px;
height: 46px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: #e8f2ff;
color: #004a8f;
font-size: 1.12rem;
font-weight: 950;
}
.activity-bulk-toolbar__items {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.activity-bulk-toolbar__items:empty {
display: none;
}
.activity-bulk-toolbar__items span {
max-width: 100%;
overflow: hidden;
padding: 5px 8px;
border-radius: 999px;
background: #eef7f4;
color: #12634c;
font-size: 0.74rem;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
}
.activity-bulk-toolbar__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.activity-bulk-toolbar__actions .button {
min-height: 44px;
white-space: nowrap;
}
.activity-bulk-toolbar__actions .button:disabled {
cursor: not-allowed;
opacity: 0.56;
}
.activity-selection-control {
position: relative;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 10px;
align-items: center;
min-height: 54px;
padding: 10px 12px;
border: 1px solid #b9d4f2;
border-radius: 12px;
background: #ffffff;
color: #0f2f4b;
cursor: pointer;
}
.activity-selection-control input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.activity-selection-control__indicator {
width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
border: 2px solid #6f9bc3;
border-radius: 7px;
background: #ffffff;
}
.activity-selection-control__indicator::after {
content: "";
width: 9px;
height: 5px;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
opacity: 0;
transform: rotate(-45deg) scale(0.7);
}
.activity-selection-control__copy {
display: grid;
gap: 2px;
min-width: 0;
}
.activity-selection-control__copy strong,
.activity-selection-control__copy small {
overflow-wrap: anywhere;
}
.activity-selection-control__copy small {
color: #526179;
}
.activity-selection-control:focus-within {
outline: 3px solid rgba(37, 99, 235, 0.28);
outline-offset: 2px;
}
.activity-selection-control.is-selected {
border-color: #0f8a68;
background: #ecfdf5;
}
.activity-selection-control.is-selected .activity-selection-control__indicator {
border-color: #0f8a68;
background: #0f8a68;
}
.activity-selection-control.is-selected .activity-selection-control__indicator::after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
.activity-selection-control.is-conflicting,
.activity-selection-control.is-unavailable {
border-color: #d7dee7;
background: #f8fafc;
color: #64748b;
cursor: not-allowed;
}
.event-card.is-bulk-selected {
box-shadow:
0 0 0 3px rgba(15, 138, 104, 0.24),
0 18px 42px rgba(22, 50, 79, 0.12);
}
.event-card.is-bulk-conflicting .activity-selection-control,
.event-card.is-bulk-unavailable .activity-selection-control {
opacity: 0.78;
}
.activity-confirmation-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.activity-confirmation-item {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid rgba(0, 83, 155, 0.16);
border-radius: 14px;
background: #f8fbff;
}
.activity-confirmation-item__heading {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.activity-confirmation-item__heading > span {
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: #e8f2ff;
color: #004a8f;
font-size: 0.78rem;
font-weight: 950;
}
.activity-confirmation-item__heading strong {
color: #0f2f4b;
overflow-wrap: anywhere;
}
.activity-confirmation-item dl {
display: grid;
gap: 7px;
margin: 0;
}
.activity-confirmation-item dl > div {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 8px;
}
.activity-confirmation-item dt {
color: #64748b;
font-size: 0.74rem;
}
.activity-confirmation-item dd {
margin: 0;
color: #263d55;
font-size: 0.82rem;
font-weight: 800;
overflow-wrap: anywhere;
}
.activity-confirmation-item > small {
color: #92400e;
font-weight: 800;
}
@media (max-width: 1100px) {
.activity-bulk-toolbar {
grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
}
.activity-bulk-toolbar__actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.activity-bulk-toolbar {
top: 8px;
grid-template-columns: minmax(0, 1fr);
padding: 12px;
border-radius: 16px;
}
.activity-bulk-toolbar__actions {
grid-column: auto;
display: grid;
grid-template-columns: 1fr 1fr;
}
.activity-bulk-toolbar__actions .button {
width: 100%;
min-width: 0;
padding-inline: 10px;
white-space: normal;
}
.activity-bulk-toolbar__actions .button--primary {
grid-column: 1 / -1;
}
.activity-confirmation-item dl > div {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
}
/* Fase D: assistente funcional de criação e configuração de eventos. */
.admin-event-assistant-shell {
display: grid;
gap: 18px;
}
.admin-event-assistant-shell__intro {
padding: 20px 22px;
border: 1px solid #dbe6f2;
border-radius: 20px;
background: linear-gradient(135deg, #ffffff, #f4f8fc);
}
.admin-event-assistant-shell__intro h2,
.admin-event-assistant-shell__intro p {
margin: 0;
}
.admin-event-assistant-shell__intro h2 {
margin-top: 0.35rem;
color: #10253f;
}
.admin-event-assistant-shell__intro p {
margin-top: 0.4rem;
color: #63748a;
}
.admin-event-assistant {
min-width: 0;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(31, 55, 82, 0.08);
overflow: clip;
}
.event-admin-form.admin-event-assistant {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.event-admin-form.admin-event-assistant > .admin-event-assistant__layout,
.event-admin-form.admin-event-assistant > .admin-event-assistant__footer {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
}
.admin-event-assistant__layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 270px;
min-width: 0;
}
.admin-event-assistant__steps,
.admin-event-assistant__summary {
min-width: 0;
padding: 24px 20px;
background: #f7f9fc;
}
.admin-event-assistant__steps {
border-right: 1px solid #e2e9f1;
}
.admin-event-assistant__summary {
border-left: 1px solid #e2e9f1;
}
.admin-event-assistant__progress-copy {
display: grid;
gap: 3px;
}
.admin-event-assistant__progress-copy span {
color: #68798e;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-event-assistant__progress-copy strong {
color: #17324d;
font-size: 0.92rem;
}
.admin-event-assistant__progress {
height: 7px;
margin-top: 12px;
border-radius: 999px;
background: #dfe7ef;
overflow: hidden;
}
.admin-event-assistant__progress > span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #00539b, #007d73);
transition: width 180ms ease;
}
.admin-event-assistant__steps .admin-event-wizard__steps {
position: static;
margin: 22px 0 0;
padding: 0;
display: grid;
gap: 7px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.admin-event-assistant__steps .admin-event-wizard__steps > a,
.admin-event-assistant__steps .admin-event-wizard__steps > span {
min-width: 0;
min-height: 54px;
padding: 9px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 9px;
align-items: center;
border: 1px solid transparent;
border-radius: 13px;
color: #66768b;
text-decoration: none;
}
.admin-event-assistant__steps .admin-event-wizard__steps > a:hover,
.admin-event-assistant__steps .admin-event-wizard__steps > .is-active {
border-color: #bdd4e8;
background: #ffffff;
color: #0b568c;
box-shadow: 0 8px 20px rgba(31, 55, 82, 0.07);
}
.admin-event-assistant__steps .admin-event-wizard__steps > .is-complete .event-stepper__number {
background: #dff4ed;
color: #14735f;
}
.admin-event-assistant__steps .event-stepper__number {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #e5edf5;
color: #52677d;
font-size: 0.82rem;
font-weight: 900;
}
.admin-event-assistant__steps .is-active .event-stepper__number {
background: #00539b;
color: #ffffff;
}
.admin-event-assistant__steps .event-stepper__number + span {
min-width: 0;
display: grid;
gap: 2px;
}
.admin-event-assistant__steps .event-stepper__number + span strong,
.admin-event-assistant__steps .event-stepper__number + span small {
overflow: hidden;
text-overflow: ellipsis;
}
.admin-event-assistant__steps .event-stepper__number + span strong {
color: inherit;
font-size: 0.84rem;
white-space: nowrap;
}
.admin-event-assistant__steps .event-stepper__number + span small {
color: #8190a2;
font-size: 0.7rem;
white-space: nowrap;
}
.admin-event-assistant__content {
min-width: 0;
padding: 28px;
background: #ffffff;
}
.admin-event-assistant__content > .admin-form-section {
padding: 0;
gap: 22px;
border: 0;
border-radius: 0;
}
.admin-event-assistant__content > .admin-form-section > header {
padding-bottom: 18px;
border-bottom: 1px solid #e6edf4;
}
.admin-event-assistant__content > .admin-form-section > header > span {
width: 36px;
height: 36px;
border-radius: 12px;
background: #e8f1f9;
}
.admin-event-assistant__content .admin-section-kicker {
margin: 0 0 0.2rem;
}
.admin-event-assistant .event-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-event-assistant .event-type-card {
min-height: 150px;
}
.admin-event-assistant .event-type-card > i {
font-size: 1.55rem;
color: #0b6096;
}
.admin-event-assistant .event-type-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.admin-module-switch-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.admin-module-switch {
min-width: 0;
}
.admin-module-switch > label {
height: 100%;
min-width: 0;
}
.admin-module-switch > label:has(input:checked) {
border-color: #86bad8;
background: #edf7fb;
box-shadow: inset 3px 0 #007d73;
}
.admin-switch-field {
min-width: 0;
min-height: 64px;
padding: 12px 14px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
border: 1px solid #d8e3ed;
border-radius: 14px;
background: #f9fbfd;
cursor: pointer;
transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.admin-switch-field:hover {
border-color: #9cbdd8;
background: #f4f9fd;
}
.admin-switch-field:has(input:checked) {
border-color: #86bad8;
background: #edf7fb;
}
.admin-switch-field:has(input:disabled) {
cursor: not-allowed;
opacity: 0.68;
}
.admin-switch-field__content {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
.admin-switch-field__icon {
flex: 0 0 auto;
color: #0b6096;
font-size: 1.25rem;
}
.admin-switch-field__copy {
min-width: 0;
display: grid;
gap: 2px;
}
.admin-switch-field__copy strong {
color: #0f172a;
font-size: 0.92rem;
font-weight: 850;
line-height: 1.25;
}
.admin-modern-form .admin-switch-field .admin-switch-field__description {
color: #64748b;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.35;
}
.admin-switch {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
.admin-switch input[type="checkbox"] {
position: absolute;
inset: 0;
z-index: 1;
width: 44px;
height: 24px;
min-height: 24px;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
/* Event workspace preview (temporary validation copy, 2026-08-14). */
body.page-event-portfolio-preview,
body.page-event-workspace-preview {
background: #f5f7fa;
}
.admin-event-portfolio-preview .admin-page-title > span,
.admin-event-workspace-preview .admin-page-title > span,
.admin-event-portfolio-preview .admin-global-search,
.admin-event-workspace-preview .admin-global-search,
.admin-event-portfolio-preview .admin-notification-button,
.admin-event-workspace-preview .admin-notification-button,
.admin-event-portfolio-preview .admin-role-current,
.admin-event-workspace-preview .admin-role-current {
display: none;
}
.admin-event-portfolio-preview .admin-page-topbar,
.admin-event-workspace-preview .admin-page-topbar {
align-items: end;
min-height: 0;
padding-block: 6px 22px;
}
.admin-event-portfolio-preview .admin-page-topbar {
border: 0;
background: transparent;
box-shadow: none;
}
.admin-event-workspace-preview .admin-page-topbar {
display: none;
}
.admin-event-portfolio-preview .admin-page-title h1,
.admin-event-workspace-preview .admin-page-title h1 {
font-size: clamp(1.65rem, 2.2vw, 2.2rem);
letter-spacing: -0.04em;
}
.admin-event-portfolio-preview .admin-page-title p,
.admin-event-workspace-preview .admin-page-title p,
.admin-event-workspace-preview .admin-disabled-modules {
display: none;
}
.admin-event-portfolio-preview .admin-sidebar-user,
.admin-event-portfolio-preview .admin-sidebar-mobile-switcher,
.admin-event-workspace-preview .admin-sidebar-user,
.admin-event-workspace-preview .admin-sidebar-mobile-switcher {
display: none;
}
.admin-event-portfolio-preview .admin-list-card {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.admin-event-portfolio-preview .admin-list-card > .admin-list-toolbar {
margin-bottom: 14px;
padding: 0;
border: 0;
background: transparent;
}
.admin-event-portfolio-preview .admin-primary-button {
font-family: inherit;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
}
.admin-event-table-wrap {
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
}
.admin-event-table {
width: 100%;
min-width: 820px;
border-collapse: collapse;
table-layout: fixed;
}
.admin-event-table th {
padding: 13px 14px;
background: #f7f9fc;
color: #64748b;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.08em;
text-align: left;
text-transform: uppercase;
}
.admin-event-table th:nth-child(1) {
width: 105px;
}
.admin-event-table th:nth-child(2) {
width: 170px;
}
.admin-event-table th:nth-child(3) {
width: 120px;
}
.admin-event-table th:nth-child(4) {
width: auto;
}
.admin-event-table th:nth-child(5) {
width: 190px;
}
.admin-event-table th:last-child {
width: 180px;
}
.admin-event-table td {
padding: 17px 14px;
border-top: 1px solid #e8edf3;
color: #17243a;
vertical-align: middle;
}
.admin-event-table td:nth-child(5) {
padding-right: 20px;
}
.admin-event-table td:last-child {
padding-left: 18px;
}
.admin-event-table tbody tr:hover td {
background: #fbfcfe;
}
.admin-event-table__name,
.admin-event-table__detail {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-event-table__name {
font-size: 0.9rem;
line-height: 1.35;
overflow-wrap: anywhere;
text-align: left;
}
.admin-event-table__detail {
color: #526179;
font-size: 0.78rem;
line-height: 1.4;
}
.admin-event-table-status {
display: inline-flex;
align-items: center;
gap: 7px;
color: #405168;
font-size: 0.7rem;
font-weight: 850;
line-height: 1.25;
}
.admin-event-table-status::before {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #7b8798;
content: "";
}
.admin-event-table-status--success::before {
background: #15956f;
}
.admin-event-table-status--info::before {
background: #087eb8;
}
.admin-event-table-status--warning::before {
background: #d59215;
}
.admin-event-table-status--danger::before {
background: #cf4f46;
}
.admin-event-ticket-progress {
min-width: 150px;
}
.admin-event-ticket-progress__track {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e6ebf1;
}
.admin-event-ticket-progress__track > span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0066ad, #09a6b2);
}
.admin-event-ticket-progress small {
display: block;
margin-top: 7px;
color: #526179;
font-size: 0.7rem;
font-weight: 750;
white-space: nowrap;
}
.admin-event-table__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
}
.admin-event-edit-button {
display: inline-grid;
width: 38px;
height: 38px;
place-items: center;
flex: 0 0 38px;
border: 1px solid #d5dfeb;
border-radius: 9px;
background: #fff;
color: #075c9d;
font-size: 1rem;
}
.admin-event-edit-button:hover {
border-color: #9ebbd3;
background: #f1f7fc;
}
.admin-event-portfolio-preview .admin-list-footer {
border-top: 0;
background: transparent;
}
.admin-event-workspace-preview .admin-workspace {
gap: 18px;
padding: 24px 28px 48px;
align-content: start;
grid-auto-rows: max-content;
}
.admin-event-workspace-heading {
position: sticky;
top: 0;
z-index: 32;
min-width: 0;
min-height: 62px;
padding: 3px 0 18px;
display: flex;
align-items: center;
align-self: start;
gap: 12px;
border-bottom: 1px solid #dce5ef;
background: var(--admin-bg);
}
.admin-event-workspace-heading h1 {
min-width: 0;
margin: 0 0 0 12px;
color: #07172c;
font-size: clamp(1.65rem, 2.3vw, 2.15rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.15;
overflow-wrap: anywhere;
}
.admin-event-workspace-heading__status {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
color: #526179;
font-size: 0.72rem;
font-weight: 750;
line-height: 1;
}
.admin-event-workspace-heading__status::before {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #7b8798;
content: "";
}
.admin-event-workspace-heading__status--success::before {
background: #15956f;
}
.admin-event-workspace-heading__status--warning::before {
background: #d59215;
}
.admin-event-workspace-heading__status--danger::before {
background: #cf4f46;
}
.admin-sidebar--event-workspace .admin-sidebar-card {
border-color: #102f4c;
background: linear-gradient(180deg, #092a48 0%, #071d33 100%);
}
.admin-sidebar--event-workspace .admin-sidebar-brand--event-back {
border-bottom-color: rgba(255, 255, 255, 0.13);
}
.admin-sidebar--event-workspace .admin-sidebar-brand--event-back > span {
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.admin-sidebar--event-workspace .admin-sidebar-brand strong,
.admin-sidebar--event-workspace .admin-sidebar-brand small,
.admin-sidebar--event-workspace .admin-sidebar-footer a,
.admin-sidebar--event-workspace .admin-sidebar-footer button {
color: #fff;
}
.admin-sidebar--event-workspace .admin-sidebar-brand small {
color: #9fc2dd;
}
.admin-sidebar--event-workspace .admin-sidebar-footer {
border-top-color: rgba(255, 255, 255, 0.13);
}
.admin-sidebar--event-workspace .admin-sidebar-footer a:hover,
.admin-sidebar--event-workspace .admin-sidebar-footer button:hover {
color: #76d3cc;
}
.admin-event-workspace-preview .admin-event-focus-hero {
grid-template-columns: minmax(0, 1fr) 190px;
min-height: 0;
margin-bottom: 18px;
padding: 22px;
border: 1px solid #dfe8f2;
border-radius: 18px;
background: #fff;
box-shadow: none;
}
.admin-event-workspace-preview .admin-event-focus-hero::before,
.admin-event-workspace-preview .admin-event-focus-hero::after {
display: none;
}
.admin-event-workspace-preview .admin-event-focus-hero__eyebrow small,
.admin-event-workspace-preview .admin-event-focus-hero__content > p,
.admin-event-workspace-preview .admin-event-focus-card-header p,
.admin-event-workspace-preview .admin-event-task__body > p,
.admin-event-workspace-preview .admin-quick-action-card p,
.admin-event-workspace-preview .admin-quick-action-card small {
display: none;
}
.admin-event-workspace-preview .admin-event-focus-hero h2 {
max-width: 720px;
margin-top: 8px;
font-size: clamp(1.15rem, 1.7vw, 1.45rem);
letter-spacing: -0.025em;
}
.admin-event-workspace-preview .admin-event-focus-hero__actions {
margin-top: 18px;
}
.admin-event-workspace-preview .admin-event-focus-hero__status {
min-height: 126px;
padding: 16px;
border: 0;
background: #f4f8fc;
}
.admin-event-workspace-preview .admin-event-focus-hero__status > small {
display: none;
}
.admin-event-workspace-preview .admin-metrics-grid {
gap: 12px;
margin-bottom: 18px;
}
.admin-event-workspace-preview .admin-metric-card {
min-height: 112px;
padding: 17px;
box-shadow: none;
}
.admin-event-workspace-preview .admin-event-focus-layout {
gap: 14px;
}
.admin-event-workspace-preview .admin-card,
.admin-event-workspace-preview .admin-activity-card {
border-color: #e2e8f0;
box-shadow: none;
}
.admin-event-workspace-preview .admin-schedule-board {
padding: 18px;
}
.admin-event-workspace-preview .admin-schedule-item {
gap: 14px;
padding: 14px 4px;
}
.admin-event-workspace-preview .admin-schedule-item p,
.admin-event-workspace-preview .admin-schedule-item small,
.admin-event-workspace-preview .admin-schedule-item em,
.admin-event-workspace-preview .admin-schedule-capacity > small,
.admin-event-workspace-preview .admin-schedule-capacity > em,
.admin-event-workspace-preview .admin-schedule-capacity > strong,
.admin-event-workspace-preview .admin-schedule-presence small {
display: none;
}
.admin-event-workspace-preview .admin-schedule-item h4 {
margin-bottom: 5px;
font-size: 0.96rem;
}
.admin-ticket-capacity-stepper {
display: inline-grid;
grid-template-columns: 34px minmax(52px, auto) 34px;
align-items: center;
overflow: hidden;
border: 1px solid #d8e1ec;
border-radius: 10px;
background: #fff;
}
.admin-ticket-capacity-stepper button {
width: 34px;
height: 34px;
border: 0;
background: #f1f5f9;
color: #004f91;
font-size: 1.15rem;
font-weight: 800;
cursor: pointer;
}
.admin-ticket-capacity-stepper button:hover:not(:disabled) {
background: #e4edf7;
}
.admin-ticket-capacity-stepper button:disabled {
color: #a8b2c1;
cursor: not-allowed;
}
.admin-ticket-capacity-stepper output {
padding: 0 8px;
color: #17243a;
font-size: 0.84rem;
font-weight: 800;
text-align: center;
}
.admin-ticket-usage {
display: grid;
gap: 6px;
min-width: 150px;
}
.admin-ticket-usage strong,
.admin-ticket-period {
color: #263750;
font-size: 0.82rem;
font-weight: 700;
}
.admin-ticket-usage small {
color: #64748b;
font-size: 0.72rem;
}
.admin-ticket-usage__bar {
display: block;
width: 100%;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e7edf4;
}
.admin-ticket-usage__bar i {
display: block;
width: var(--ticket-progress, 0%);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0069ad, #14a7c7);
}
.admin-ticket-period {
display: block;
max-width: 210px;
line-height: 1.45;
}
.admin-registration-checkin {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
font-size: 0.82rem;
font-weight: 700;
}
.admin-registration-checkin.is-complete {
color: #087f5b;
}
.admin-table-muted {
color: #8290a4;
font-size: 0.82rem;
}
.admin-event-workspace-preview #tickets .admin-ticket-table-item__content small {
display: none;
}
.admin-event-workspace-preview #tickets .admin-ticket-table-item__content em {
margin-top: 5px;
color: #64748b;
font-size: 0.71rem;
font-style: normal;
}
.admin-event-workspace-preview #tickets .admin-form-subsection > small {
display: none;
}
.admin-event-workspace-preview .admin-table-link.is-danger {
color: #b42318;
}
.admin-event-workspace-preview .admin-user-list article {
min-height: 72px;
padding-block: 12px;
}
.admin-event-workspace-preview .admin-user-list article > form {
margin: 0;
}
.admin-user-list__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.admin-user-list__actions form {
margin: 0;
}
.admin-certificate-studio {
margin-bottom: 18px;
padding: 20px;
}
.admin-certificate-studio__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.admin-certificate-studio__header h2 {
margin: 4px 0 0;
font-size: 1.2rem;
}
.admin-certificate-studio__layout {
display: grid;
grid-template-columns: minmax(230px, 0.42fr) minmax(440px, 1fr);
gap: 22px;
align-items: start;
}
.admin-certificate-studio__controls {
display: grid;
gap: 14px;
}
.admin-certificate-studio fieldset {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
border: 0;
}
.admin-certificate-studio legend {
grid-column: 1 / -1;
margin-bottom: 2px;
color: #334155;
font-size: 0.75rem;
font-weight: 800;
}
.admin-certificate-studio fieldset label {
position: relative;
display: flex;
}
.admin-certificate-studio fieldset input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.admin-certificate-studio fieldset label span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 38px;
padding: 7px;
border: 1px solid #d8e1ec;
border-radius: 9px;
color: #475569;
font-size: 0.72rem;
font-weight: 750;
text-align: center;
cursor: pointer;
}
.admin-certificate-studio fieldset input:checked + span {
border-color: #0b68ad;
background: #eaf4fc;
color: #004f91;
}
.admin-certificate-studio__upload {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 58px;
padding: 12px;
border: 1px dashed #aab9ca;
border-radius: 11px;
color: #31506e;
font-size: 0.8rem;
font-weight: 800;
}
.admin-certificate-studio__upload-status {
flex-basis: 100%;
color: #64748b;
font-size: 0.7rem;
font-weight: 650;
line-height: 1.4;
text-align: center;
}
.admin-certificate-studio__upload-status.is-error {
color: #b42318;
}
.admin-certificate-studio[aria-busy="true"] .admin-certificate-studio__upload {
background: #f8fafc;
}
.admin-certificate-studio__upload input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.admin-certificate-studio__fields {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.admin-certificate-studio__logo-colors {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.admin-certificate-studio__logo-colors label span {
gap: 8px;
}
.admin-certificate-studio__logo-swatch {
width: 14px;
height: 14px;
flex: 0 0 14px;
border: 1px solid #94a3b8;
border-radius: 50%;
}
.admin-certificate-studio__logo-swatch--black {
background: #0f172a;
}
.admin-certificate-studio__logo-swatch--white {
background: #fff;
}
.admin-certificate-studio__logo-swatch--blue {
background: #00639b;
}
.admin-certificate-studio__text-editor {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid #d8e1ec;
border-radius: 12px;
background: #f8fbfe;
}
.admin-certificate-studio__text-editor-heading {
display: grid;
gap: 2px;
}
.admin-certificate-studio__text-editor-heading strong {
color: #17324d;
font-size: 0.82rem;
}
.admin-certificate-studio__text-editor-heading small,
.admin-certificate-studio__color-field > small {
color: #64748b;
font-size: 0.72rem;
line-height: 1.45;
}
.admin-certificate-studio__text-editor .field {
gap: 6px;
}
.admin-certificate-studio__text-editor .field > span:first-child {
color: #334155;
font-size: 0.72rem;
font-weight: 800;
}
.admin-certificate-studio__text-editor input[type="text"] {
min-height: 42px;
}
.admin-certificate-studio__color-control {
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 10px;
}
.admin-certificate-studio__color-control input[type="color"] {
width: 48px;
height: 42px;
padding: 4px;
border: 1px solid #cbd5e1;
border-radius: 9px;
background: #fff;
cursor: pointer;
}
.admin-certificate-studio__color-control output {
color: #334155;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 0.8rem;
font-weight: 750;
}
.admin-certificate-studio__text-editor .admin-primary-button {
width: 100%;
min-height: 44px;
}
.admin-certificate-studio__preview {
position: relative;
isolation: isolate;
display: flex;
aspect-ratio: 842 / 595;
min-height: 300px;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
padding: 7%;
border: 1px solid #d7e0e9;
border-radius: 10px;
background: #fff;
color: #15304e;
text-align: center;
}
.admin-certificate-studio__preset-surface {
position: absolute;
z-index: 0;
inset: 0;
background: linear-gradient(145deg, #f7fbff 0%, #fff 56%, #eef6fb 100%);
}
.admin-certificate-studio__preset-surface::before,
.admin-certificate-studio__preset-surface::after {
position: absolute;
content: "";
}
.admin-certificate-studio__preset-surface::before {
inset: 5%;
border: 1px solid rgba(0, 79, 145, 0.25);
}
.admin-certificate-studio__preset-surface::after {
right: -8%;
bottom: -26%;
width: 42%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(241, 174, 39, 0.2);
}
.admin-certificate-studio__background {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
}
.admin-certificate-studio__preset-surface[hidden],
.admin-certificate-studio__background[hidden],
.admin-certificate-studio [data-certificate-custom-artwork][hidden],
.admin-certificate-studio [data-certificate-preset-artwork][hidden] {
display: none;
}
.admin-certificate-studio__preview > p,
.admin-certificate-studio__preview > h3,
.admin-certificate-studio__preview > small,
.admin-certificate-studio__preview > span,
.admin-certificate-studio__brand,
.admin-certificate-studio__custom-brand {
position: relative;
z-index: 1;
}
.admin-certificate-studio__brand {
position: absolute;
top: 9%;
left: 9%;
display: flex;
align-items: center;
gap: 8px;
color: #004f91;
}
.admin-certificate-studio__brand img {
width: 38px;
height: 38px;
object-fit: contain;
}
.admin-certificate-studio__custom-brand {
position: absolute;
z-index: 1;
top: 5%;
left: 5%;
display: flex;
align-items: center;
gap: clamp(5px, 0.8vw, 10px);
color: #0f172a;
font-size: clamp(0.52rem, 1.25vw, 1rem);
font-weight: 800;
}
.admin-certificate-studio__custom-brand img {
width: clamp(24px, 4vw, 48px);
height: clamp(24px, 4vw, 48px);
object-fit: contain;
}
.admin-certificate-studio[data-certificate-logo-color="black"] .admin-certificate-studio__custom-brand img {
filter: brightness(0);
}
.admin-certificate-studio[data-certificate-logo-color="white"] .admin-certificate-studio__custom-brand {
color: #fff;
}
.admin-certificate-studio[data-certificate-logo-color="white"] .admin-certificate-studio__custom-brand img {
filter: brightness(0) invert(1);
}
.admin-certificate-studio[data-certificate-logo-color="blue"] .admin-certificate-studio__custom-brand {
color: #00639b;
}
.admin-certificate-studio[data-certificate-logo-color="blue"] .admin-certificate-studio__custom-brand img {
filter: none;
}
.admin-certificate-studio__preview > .admin-certificate-studio__custom-title {
color: var(--certificate-preview-text-color);
}
.admin-certificate-studio__preview > span {
color: #0b68ad;
font-size: clamp(1.15rem, 2.4vw, 2rem);
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.admin-certificate-studio__preview p {
margin: 9px 0 0;
font-size: clamp(0.72rem, 1.2vw, 0.95rem);
}
.admin-certificate-studio__preview h3 {
margin: 8px 0;
color: #004f91;
font-family: Georgia, serif;
font-size: clamp(1.15rem, 2.6vw, 2.2rem);
font-weight: 500;
}
.admin-certificate-studio__preview > small {
margin-top: 20px;
color: #64748b;
font-size: 0.66rem;
font-weight: 700;
}
.admin-certificate-studio[data-template="institutional_classic"] .admin-certificate-studio__preset-surface {
border: 8px double #bd8b2f;
background: #fffdf7;
}
.admin-certificate-studio[data-template="institutional_classic"] .admin-certificate-studio__preset-surface::before {
border-color: rgba(189, 139, 47, 0.42);
}
.admin-certificate-studio[data-template="event_identity"] .admin-certificate-studio__preset-surface {
background: linear-gradient(135deg, #004f91, #087c78);
}
.admin-certificate-studio[data-template="event_identity"] .admin-certificate-studio__preview {
color: #fff;
}
.admin-certificate-studio[data-template="event_identity"] .admin-certificate-studio__preview h3,
.admin-certificate-studio[data-template="event_identity"] .admin-certificate-studio__preview > span,
.admin-certificate-studio[data-template="event_identity"] .admin-certificate-studio__brand {
color: #fff;
}
.admin-certificate-studio[data-custom-artwork="true"] .admin-certificate-studio__preview,
.admin-certificate-studio[data-custom-artwork="true"] .admin-certificate-studio__preview h3,
.admin-certificate-studio[data-custom-artwork="true"] .admin-certificate-studio__preview p,
.admin-certificate-studio[data-custom-artwork="true"] .admin-certificate-studio__preview > small {
color: var(--certificate-preview-text-color, #17324d);
}
.admin-event-workspace-preview #certificates .admin-closing-hero,
.admin-event-workspace-preview #certificates .admin-closing-checklist,
.admin-event-workspace-preview #certificates .admin-closing-reports {
display: none;
}
.admin-event-workspace-preview #certificates .admin-closing-grid {
display: block;
margin-bottom: 18px;
}
.admin-event-workspace-preview #certificates .admin-closing-side {
display: block;
}
.admin-event-workspace-preview #certificates .admin-closing-certificate {
display: grid;
grid-template-columns: minmax(240px, 0.8fr) auto minmax(240px, 1fr);
align-items: center;
gap: 18px;
padding: 18px 20px;
}
.admin-event-workspace-preview #certificates .admin-closing-certificate header p,
.admin-event-workspace-preview #certificates .admin-closing-impact {
display: none;
}
.admin-event-workspace-preview #certificates .certificate-admin-list .admin-card-header p {
display: none;
}
@media (max-width: 1100px) {
.admin-certificate-studio__layout {
grid-template-columns: 1fr;
}
.admin-certificate-studio__controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-certificate-studio__controls > fieldset:first-child {
grid-column: 1 / -1;
}
.admin-event-workspace-preview #certificates .admin-closing-certificate {
grid-template-columns: 1fr auto;
}
.admin-event-workspace-preview #certificates .admin-closing-certificate__actions {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
.admin-event-table-wrap {
overflow: hidden;
}
.admin-event-table,
.admin-event-table tbody,
.admin-event-table tr,
.admin-event-table td {
display: block;
width: 100%;
min-width: 0;
}
.admin-event-table thead {
display: none;
}
.admin-event-table tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 14px;
padding: 16px;
border-top: 1px solid #e8edf3;
}
.admin-event-table tr:first-child {
border-top: 0;
}
.admin-event-table td {
padding: 0;
border: 0;
}
.admin-event-table td::before {
display: block;
margin-bottom: 4px;
color: #7b8798;
content: attr(data-label);
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-event-table td:nth-child(1) {
grid-column: 2;
grid-row: 1;
}
.admin-event-table td:nth-child(2) {
grid-column: 1;
grid-row: 1;
}
.admin-event-table td:nth-child(3),
.admin-event-table td:nth-child(4) {
grid-column: 1 / -1;
}
.admin-event-table td:nth-child(5) {
grid-column: 1 / -1;
}
.admin-event-table td:last-child {
grid-column: 1 / -1;
}
.admin-event-table__name,
.admin-event-table__detail {
overflow: visible;
white-space: normal;
}
.admin-event-table__actions {
justify-content: stretch;
}
.admin-event-table__actions .admin-primary-button {
flex: 1;
}
.admin-event-workspace-preview .admin-event-focus-hero {
grid-template-columns: 1fr;
}
.admin-event-workspace-preview .admin-workspace {
gap: 14px;
padding: 0;
}
.admin-event-workspace-preview .admin-mobile-context {
display: none;
}
.admin-event-workspace-preview .admin-mobile-primary-action {
grid-column: 3;
justify-self: end;
}
.admin-event-workspace-heading {
position: static;
min-height: 0;
align-items: flex-start;
flex-direction: column;
gap: 8px;
padding: 4px 2px 14px;
}
.admin-event-workspace-heading h1 {
font-size: 1.45rem;
}
.admin-event-workspace-preview .admin-event-focus-hero__status {
min-height: 0;
}
.admin-certificate-studio__header {
align-items: stretch;
flex-direction: column;
}
.admin-certificate-studio__controls {
grid-template-columns: 1fr;
}
.admin-certificate-studio__controls > fieldset:first-child {
grid-column: auto;
}
.admin-certificate-studio__preview {
aspect-ratio: 842 / 595;
min-height: 0;
justify-content: center;
padding: 8%;
}
.admin-certificate-studio__brand {
top: 6%;
left: 6%;
gap: 4px;
font-size: 0.62rem;
}
.admin-certificate-studio__brand img {
width: 22px;
height: 22px;
}
.admin-certificate-studio__preview > span {
position: absolute;
top: 7%;
right: 6%;
font-size: 0.72rem;
}
.admin-certificate-studio__preview h3 {
margin: 5px 0;
font-size: 1.08rem;
}
.admin-certificate-studio__preview p {
max-width: 100%;
margin-top: 4px;
overflow-wrap: anywhere;
font-size: 0.58rem;
line-height: 1.3;
}
.admin-certificate-studio__preview > small {
margin-top: 8px;
font-size: 0.5rem;
}
.admin-event-workspace-preview #certificates .admin-closing-certificate {
grid-template-columns: 1fr;
}
}
.admin-switch__track {
position: relative;
display: block;
width: 44px;
height: 24px;
border-radius: 999px;
background: #b8c5d1;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
transition: background-color 160ms ease, box-shadow 160ms ease;
}
.admin-switch__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.26);
transition: transform 160ms ease;
}
.admin-switch input:checked + .admin-switch__track {
background: var(--admin-blue, #00539b);
}
.admin-switch input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(20px);
}
.admin-switch input:focus-visible + .admin-switch__track {
outline: 3px solid rgba(0, 83, 155, 0.24);
outline-offset: 3px;
}
.admin-switch input:disabled + .admin-switch__track {
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}
@media (prefers-reduced-motion: reduce) {
.admin-switch-field,
.admin-switch__track,
.admin-switch__thumb {
transition: none;
}
}
.admin-event-assistant__conditional {
padding: 18px;
display: grid;
gap: 16px;
border: 1px solid #dce6ef;
border-radius: 17px;
background: #fbfcfe;
}
.admin-event-assistant__conditional[hidden] {
display: none;
}
.admin-event-assistant__conditional h4 {
margin: 0;
color: #17324d;
}
.admin-event-assistant__linked-areas {
display: grid;
gap: 10px;
}
.admin-event-assistant__linked-areas article {
padding: 14px 15px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
border: 1px solid #dce6ef;
border-radius: 14px;
}
.admin-event-assistant__linked-areas article > i {
color: #0b6096;
font-size: 1.35rem;
}
.admin-event-assistant__linked-areas p {
margin: 0.2rem 0 0;
font-size: 0.86rem;
}
.admin-event-assistant__linked-areas a,
.admin-inline-link {
color: #00539b;
font-weight: 850;
text-decoration: none;
}
.admin-event-assistant__advanced {
border: 1px solid #dce6ef;
border-radius: 16px;
overflow: hidden;
}
.admin-event-assistant__advanced > summary {
min-height: 56px;
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
list-style: none;
}
.admin-event-assistant__advanced > summary::-webkit-details-marker {
display: none;
}
.admin-event-assistant__advanced > summary span {
display: inline-flex;
gap: 9px;
align-items: center;
}
.admin-event-assistant__advanced[open] > summary {
border-bottom: 1px solid #dce6ef;
}
.admin-event-assistant__advanced > .event-form-grid {
padding: 18px;
}
.admin-event-artwork-manager {
min-width: 0;
display: grid;
gap: 16px;
}
.admin-event-artwork-manager__intro {
display: grid;
gap: 5px;
}
.admin-event-artwork-manager__intro h4,
.admin-event-artwork-manager__intro p,
.admin-event-artwork-card__header h4,
.admin-event-artwork-card__header p {
margin: 0;
}
.admin-event-artwork-manager__intro p,
.admin-event-artwork-card__header p {
color: #607388;
line-height: 1.5;
}
.admin-event-artwork-list {
display: grid;
gap: 16px;
}
.admin-event-artwork-card {
min-width: 0;
padding: 16px;
border: 1px solid #d6e2ed;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 12px 28px rgba(24, 52, 82, 0.06);
}
.admin-event-artwork-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
list-style: none;
cursor: pointer;
}
.admin-event-artwork-card__header::-webkit-details-marker {
display: none;
}
.admin-event-artwork-card__header:focus-visible {
border-radius: 10px;
outline: 3px solid rgba(0, 83, 155, 0.2);
outline-offset: 4px;
}
.admin-event-artwork-card__header > div {
min-width: 0;
display: grid;
gap: 5px;
}
.admin-event-artwork-card__header h4 {
color: #17324d;
font-size: 1rem;
}
.admin-event-artwork-card__header p {
max-width: 70ch;
font-size: 0.84rem;
}
.admin-event-artwork-card__resolution {
flex: 0 0 auto;
padding: 6px 9px;
border-radius: 999px;
background: #e8f2fb;
color: #00539b;
font-size: 0.72rem;
font-weight: 850;
white-space: nowrap;
}
.admin-event-artwork-card__summary-action {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
.admin-event-artwork-card__summary-action > i {
color: #00539b;
transition: transform 160ms ease;
}
.admin-event-artwork-card[open] .admin-event-artwork-card__summary-action > i {
transform: rotate(180deg);
}
.admin-event-artwork-card__body {
margin-top: 14px;
padding-top: 14px;
display: grid;
gap: 14px;
border-top: 1px solid #e2eaf2;
}
.event-card-image-editor {
display: grid;
gap: 10px;
}
.event-card-image-editor > label {
width: fit-content;
color: #17324d;
font-weight: 850;
}
.event-card-image-editor > input[type="file"] {
width: 100%;
min-height: 52px;
padding: 0.65rem 0.75rem;
border: 1px solid #ccd9e5;
border-radius: 11px;
background: #ffffff;
}
.event-card-image-editor > input[type="file"]:focus-visible {
border-color: #00539b;
outline: 3px solid rgba(0, 83, 155, 0.18);
outline-offset: 1px;
}
.event-card-image-editor > small {
color: #6b7d91;
line-height: 1.45;
}
.event-card-image-editor__status {
min-height: 1.45em;
}
.event-card-image-editor__error {
margin: 0;
color: #b23d35 !important;
font-weight: 750;
}
.event-card-image-editor__workspace {
margin-top: 4px;
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.75fr);
gap: 16px;
align-items: start;
}
.event-card-cropper {
position: relative;
aspect-ratio: 16 / 9;
min-width: 0;
overflow: hidden;
border: 0;
border-radius: 14px;
background: #edf2f7;
box-shadow: inset 0 0 0 1px #b9cbdc;
isolation: isolate;
user-select: none;
}
.event-card-cropper > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.event-card-image-editor.is-editing .event-card-cropper > img {
position: absolute;
inset: 0 auto auto 0;
max-width: none;
object-fit: fill;
transform-origin: 0 0;
}
.event-card-cropper.is-draggable {
cursor: grab;
touch-action: none;
}
.event-card-cropper.is-dragging {
cursor: grabbing;
}
.event-card-cropper.is-dragging > img {
will-change: transform;
}
.event-card-cropper__placeholder {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-content: center;
justify-items: center;
gap: 6px;
padding: 20px;
color: #61758a;
text-align: center;
}
.event-card-cropper__placeholder[hidden] {
display: none;
}
.event-card-cropper__placeholder i {
color: #00539b;
font-size: 2rem;
}
.event-card-cropper__placeholder strong {
color: #17324d;
}
.event-card-cropper__placeholder span {
font-size: 0.8rem;
}
.event-card-cropper__output-size {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
max-width: calc(100% - 20px);
padding: 5px 8px;
border-radius: 7px;
background: rgba(6, 36, 65, 0.88);
color: #ffffff;
font-size: 0.7rem;
font-weight: 850;
letter-spacing: 0.02em;
}
.event-card-cropper__safe-area {
position: absolute;
inset: 12%;
z-index: 3;
border: 2px dashed rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 999px rgba(5, 28, 52, 0.24);
pointer-events: none;
}
.event-card-cropper__safe-area b {
position: absolute;
right: 6px;
bottom: 6px;
padding: 3px 6px;
border-radius: 5px;
background: rgba(6, 36, 65, 0.82);
color: #ffffff;
font-size: 0.62rem;
line-height: 1.2;
}
.event-card-image-editor__controls {
min-width: 0;
margin: 0;
padding: 14px;
display: grid;
gap: 13px;
border: 1px solid #d7e2ec;
border-radius: 13px;
background: #f8fafc;
}
.event-card-image-editor__controls:disabled {
opacity: 0.62;
}
.event-card-image-editor__controls legend {
padding: 0 4px;
color: #17324d;
font-weight: 850;
}
.event-card-image-editor__controls > p {
margin: 0;
color: #5f7186;
font-size: 0.78rem;
line-height: 1.5;
}
.event-card-image-editor__controls > label {
display: grid;
gap: 6px;
}
.event-card-image-editor__controls > label > span {
display: flex;
justify-content: space-between;
gap: 10px;
color: #304b66;
font-size: 0.78rem;
font-weight: 750;
}
.event-card-image-editor__controls output {
color: #00539b;
font-variant-numeric: tabular-nums;
}
.event-card-image-editor__controls input[type="range"] {
width: 100%;
min-height: 24px;
accent-color: #00539b;
cursor: pointer;
}
.event-card-image-editor__controls input[type="range"]:focus-visible {
outline: 3px solid rgba(0, 83, 155, 0.2);
outline-offset: 2px;
}
.event-card-image-editor__controls > button {
width: 100%;
min-height: 44px;
justify-content: center;
}
@media (max-width: 760px) {
.admin-event-artwork-card {
padding: 12px;
}
.admin-event-artwork-card__header {
display: grid;
gap: 10px;
}
.admin-event-artwork-card__summary-action {
justify-content: space-between;
}
.admin-event-artwork-card__resolution {
width: fit-content;
white-space: normal;
}
.event-card-image-editor__workspace {
grid-template-columns: 1fr;
}
.event-card-cropper__output-size {
top: 8px;
left: 8px;
}
.event-card-cropper__safe-area b {
font-size: 0.58rem;
}
}
@media (forced-colors: active) {
.event-card-cropper__safe-area {
border-color: CanvasText;
box-shadow: none;
}
.event-card-cropper__output-size,
.event-card-cropper__safe-area b {
border: 1px solid CanvasText;
background: Canvas;
color: CanvasText;
}
}
.admin-event-assistant__summary h3 {
margin: 0.45rem 0 1.2rem;
color: #17324d;
overflow-wrap: anywhere;
}
.admin-event-assistant__summary dl {
margin: 0;
display: grid;
gap: 10px;
}
.admin-event-assistant__summary dl > div {
padding-bottom: 10px;
border-bottom: 1px solid #dfe7ef;
}
.admin-event-assistant__summary dt {
color: #738398;
font-size: 0.7rem;
font-weight: 850;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.admin-event-assistant__summary dd {
margin: 0.22rem 0 0;
color: #203a55;
font-weight: 800;
overflow-wrap: anywhere;
}
.admin-event-assistant__module-summary {
margin-top: 18px;
}
.admin-event-assistant__module-summary > strong {
color: #203a55;
font-size: 0.8rem;
}
.admin-event-assistant__module-summary > div {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.admin-event-assistant__module-summary span {
padding: 0.3rem 0.5rem;
border: 1px solid #cbdbe8;
border-radius: 999px;
background: #ffffff;
color: #52677d;
font-size: 0.7rem;
font-weight: 800;
}
.admin-event-assistant__saved {
margin: 20px 0 0;
padding: 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 9px;
border-radius: 13px;
background: #e9f5f1;
color: #2f655b;
font-size: 0.75rem;
}
.admin-event-assistant__saved i {
font-size: 1.1rem;
}
.admin-event-assistant__saved span {
display: grid;
gap: 2px;
}
.admin-event-assistant__footer {
padding: 16px 20px;
display: flex;
justify-content: space-between;
gap: 12px;
border-top: 1px solid #e2e9f1;
background: #ffffff;
}
.admin-event-assistant__footer > div {
display: flex;
gap: 9px;
align-items: center;
}
.admin-event-review-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
gap: 18px;
align-items: start;
}
.admin-event-review-list {
display: grid;
gap: 10px;
}
.admin-event-review-list > section,
.admin-event-review-list > article,
.admin-event-review-list__success {
padding: 14px;
border: 1px solid #dce6ef;
border-radius: 14px;
}
.admin-event-review-list > section > div:first-child {
display: flex;
justify-content: space-between;
gap: 10px;
}
.admin-event-review-list > section p {
margin: 0.55rem 0 0;
font-size: 0.82rem;
}
.admin-event-review-list > article {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
background: #fffaf0;
}
.admin-event-review-list > article.is-blocking {
border-color: #f0c9c4;
background: #fff6f5;
}
.admin-event-review-list > article > i {
color: #b76320;
font-size: 1.25rem;
}
.admin-event-review-list > article.is-blocking > i {
color: #b23d35;
}
.admin-event-review-list article div {
min-width: 0;
}
.admin-event-review-list article div > span {
display: block;
color: #a04d29;
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.admin-event-review-list article p {
margin: 0.2rem 0 0;
font-size: 0.78rem;
}
.admin-event-review-list article a {
color: #00539b;
font-size: 0.75rem;
font-weight: 900;
text-decoration: none;
}
.admin-event-review-list__success {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
background: #edf8f4;
color: #216c5d;
}
.admin-event-review-list__success i {
font-size: 1.35rem;
}
.admin-event-review-list__success p {
margin: 0.15rem 0 0;
}
.admin-event-public-preview {
border: 1px solid #d8e3ed;
border-radius: 17px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(31, 55, 82, 0.1);
overflow: hidden;
}
.admin-wizard-ticket-card {
margin: 22px 0 0;
padding: 20px;
border: 1px solid #cbdde9;
border-radius: 15px;
background: #f8fbfd;
}
.admin-wizard-ticket-card h4 {
margin: 0 0 16px;
color: #17324d;
font-weight: 850;
}
.admin-wizard-ticket-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: end;
}
.admin-wizard-ticket-grid .field--wide {
grid-column: 1 / -1;
}
.admin-wizard-ticket-grid [data-wizard-ticket-price] {
grid-column: 1 / -1;
}
.admin-event-public-preview > span {
display: block;
padding: 10px 13px;
background: #f3f6f9;
color: #6c7d91;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-event-public-preview__hero {
aspect-ratio: 16 / 8;
display: grid;
place-items: center;
background-color: var(--event-accent, #00539b);
background-position: center;
background-size: cover;
color: #ffffff;
}
.admin-event-public-preview__hero i {
font-size: 2.2rem;
filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.25));
}
.admin-event-public-preview > div:not(.admin-event-public-preview__hero) {
padding: 15px;
}
.admin-event-public-preview h4,
.admin-event-public-preview p {
margin: 0;
}
.admin-event-public-preview h4 {
margin-top: 0.25rem;
color: #17324d;
}
.admin-event-public-preview p {
margin-top: 0.45rem;
color: #65768a;
font-size: 0.82rem;
}
.admin-event-public-preview > div > span {
margin-top: 0.8rem;
display: flex;
gap: 6px;
color: #496177;
font-size: 0.75rem;
}
.admin-event-public-preview > a,
.admin-event-public-preview > small {
margin: 0 15px 15px;
display: inline-flex;
gap: 6px;
color: #00539b;
font-size: 0.75rem;
font-weight: 850;
text-decoration: none;
}
.admin-event-publication-choice {
padding: 16px;
display: grid;
grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1fr);
gap: 16px;
align-items: end;
border: 1px solid #cbdde9;
border-radius: 15px;
background: #f4f9fc;
}
.admin-event-publication-choice > p {
margin: 0 0 0.25rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
color: #496177;
font-size: 0.8rem;
}
@media (max-width: 1180px) {
.admin-event-assistant__layout {
grid-template-columns: 210px minmax(0, 1fr);
}
.admin-event-assistant__summary {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
gap: 16px;
border-top: 1px solid #e2e9f1;
border-left: 0;
}
.admin-event-assistant__summary h3,
.admin-event-assistant__summary .admin-section-kicker {
grid-column: 1;
}
.admin-event-assistant__summary dl {
grid-column: 2;
grid-row: 1 / 4;
}
.admin-event-assistant__module-summary,
.admin-event-assistant__saved {
margin-top: 0;
grid-column: 3;
}
}
@media (max-width: 760px) {
.admin-event-assistant {
border-radius: 18px;
}
.admin-event-assistant__layout {
grid-template-columns: minmax(0, 1fr);
}
.admin-event-assistant__steps {
padding: 16px;
border-right: 0;
border-bottom: 1px solid #e2e9f1;
}
.admin-event-assistant__steps .admin-event-wizard__steps {
margin-top: 14px;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-bottom: 6px;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
}
.admin-event-assistant__steps .admin-event-wizard__steps::-webkit-scrollbar {
height: 6px;
}
.admin-event-assistant__steps .admin-event-wizard__steps > a,
.admin-event-assistant__steps .admin-event-wizard__steps > span {
flex: 0 0 150px;
}
.admin-event-assistant__content {
padding: 20px 16px;
}
.admin-event-assistant__summary {
grid-column: auto;
grid-template-columns: minmax(0, 1fr);
padding: 18px 16px;
}
.admin-event-assistant__summary h3,
.admin-event-assistant__summary .admin-section-kicker,
.admin-event-assistant__summary dl,
.admin-event-assistant__module-summary,
.admin-event-assistant__saved {
grid-column: auto;
grid-row: auto;
}
.admin-event-assistant .event-type-grid,
.admin-module-switch-grid,
.admin-event-review-grid,
.admin-event-publication-choice,
.admin-wizard-ticket-grid {
grid-template-columns: minmax(0, 1fr);
}
.admin-event-assistant .event-type-card:last-child:nth-child(odd) {
grid-column: auto;
}
.admin-event-assistant__footer,
.admin-event-assistant__footer > div {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.admin-event-assistant__footer .admin-primary-button,
.admin-event-assistant__footer .admin-ghost-button {
width: 100%;
justify-content: center;
}
.admin-event-assistant__linked-areas article,
.admin-event-review-list > article {
grid-template-columns: auto minmax(0, 1fr);
}
.admin-event-assistant__linked-areas article > a,
.admin-event-review-list > article > a {
grid-column: 2;
}
.admin-event-assistant__linked-areas article > a,
.admin-event-review-list > article > a,
.admin-event-assistant__conditional > .admin-inline-link,
.admin-event-public-preview > a {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 6px;
}
}
@media (max-width: 560px) {
.admin-event-assistant-shell__intro {
padding: 17px;
}
.admin-event-assistant__content .admin-form-section__grid,
.admin-event-assistant__conditional .admin-toggle-grid,
.admin-event-assistant .certificate-template-picker__grid,
.admin-event-assistant .certificate-template-upload__positions {
grid-template-columns: minmax(0, 1fr);
}
.admin-event-assistant__conditional {
padding: 14px;
}
}
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 3px solid rgba(0, 83, 155, 0.32);
outline-offset: 3px;
}
body.page-checkin-operation {
background: #eef4fb;
color: #061a33;
}
.checkin-operation {
min-height: 100vh;
padding: 20px;
}
.checkin-operation__topbar,
.checkin-operation__hero,
.checkin-operation-card,
.checkin-operation-mode > *,
.checkin-operation-metrics article {
background: #ffffff;
border: 1px solid #d8e5f4;
box-shadow: 0 16px 40px rgba(15, 45, 80, 0.08);
}
.checkin-operation__topbar {
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
border-radius: 22px;
padding: 14px 18px;
position: sticky;
top: 12px;
z-index: 20;
}
.checkin-operation__brand,
.checkin-operation__user,
.checkin-operation__nav,
.checkin-operation__nav form {
display: flex;
align-items: center;
gap: 10px;
}
.checkin-operation__brand {
text-decoration: none;
color: inherit;
}
.checkin-operation__brand > span,
.checkin-operation__user > span,
.certificate-print__brand > span {
display: inline-grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 14px;
background: #004a8f;
color: #ffffff;
font-weight: 800;
}
.checkin-operation__brand strong,
.checkin-operation__user strong {
display: grid;
line-height: 1.1;
}
.checkin-operation__brand small,
.checkin-operation__user small {
color: #5d6f86;
font-weight: 600;
}
.checkin-operation__nav a,
.checkin-operation__nav button {
min-height: 44px;
border: 1px solid #d8e5f4;
border-radius: 999px;
background: #ffffff;
color: #004a8f;
font-weight: 800;
padding: 10px 14px;
text-decoration: none;
}
.checkin-operation__hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-radius: 28px;
margin: 22px 0;
padding: 28px;
}
.checkin-operation__hero h1 {
margin: 4px 0 8px;
font-size: clamp(2rem, 4vw, 4rem);
letter-spacing: 0;
}
.checkin-operation__hero p,
.checkin-operation-card p,
.checkin-operation-mode small,
.checkin-operation-metrics small {
color: #52677f;
}
.checkin-operation__event {
min-width: min(360px, 100%);
border-radius: 20px;
border: 1px solid #bfd8f5;
background: #f2f8ff;
padding: 18px;
}
.checkin-operation__event span,
.checkin-operation-mode span,
.checkin-operation-metrics span {
display: block;
color: #004a8f;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.checkin-operation__event strong {
display: block;
margin: 4px 0;
font-size: 1.2rem;
}
.checkin-operation__event-switcher {
display: grid;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #d6e4f2;
}
.checkin-operation__event-switcher label {
color: #35526d;
font-size: 0.76rem;
font-weight: 800;
}
.checkin-operation__event-switcher > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: stretch;
}
.checkin-operation__event-switcher select {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 0 38px 0 12px;
border: 1px solid #b8cfe5;
border-radius: 12px;
background: #ffffff;
color: #102f4d;
font: inherit;
font-weight: 750;
}
.checkin-operation__event-switcher .admin-ghost-button {
min-height: 44px;
white-space: nowrap;
}
.checkin-operation-feedback {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: start;
margin: -6px 0 22px;
border: 1px solid #cfe0f3;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 16px 40px rgba(15, 45, 80, 0.08);
padding: 16px 18px;
}
.checkin-operation-feedback__icon {
display: inline-grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 50%;
background: #e8f3ff;
}
.checkin-operation-feedback__icon::before {
content: "i";
color: #004a8f;
font-weight: 900;
}
.checkin-operation-feedback strong {
display: block;
margin-bottom: 4px;
font-size: 1.05rem;
}
.checkin-operation-feedback p {
margin: 0;
color: #52677f;
}
.checkin-operation-feedback ul {
display: grid;
gap: 8px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.checkin-operation-feedback__message {
border-radius: 14px;
padding: 10px 12px;
color: #17263a;
font-weight: 800;
}
.checkin-operation-feedback--success {
border-color: #aee8c7;
background: #f4fff8;
}
.checkin-operation-feedback--success .checkin-operation-feedback__icon,
.checkin-operation-feedback__message--success {
background: #dff8ea;
}
.checkin-operation-feedback--success .checkin-operation-feedback__icon::before {
content: "OK";
color: #047857;
}
.checkin-operation-feedback--warning {
border-color: #f6d79a;
background: #fffaf0;
}
.checkin-operation-feedback--warning .checkin-operation-feedback__icon,
.checkin-operation-feedback__message--warning {
background: #fff0c9;
}
.checkin-operation-feedback--warning .checkin-operation-feedback__icon::before {
content: "!";
color: #b45309;
}
.checkin-operation-feedback--error {
border-color: #f3b5b5;
background: #fff6f6;
}
.checkin-operation-feedback--error .checkin-operation-feedback__icon,
.checkin-operation-feedback__message--error {
background: #ffe1e1;
}
.checkin-operation-feedback--error .checkin-operation-feedback__icon::before {
content: "x";
color: #b91c1c;
}
.checkin-operation-mode,
.checkin-operation-metrics,
.checkin-operation-layout,
.checkin-operation-event-grid {
display: grid;
gap: 16px;
}
.checkin-operation-mode {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 18px;
}
.checkin-operation-mode > * {
display: grid;
gap: 6px;
border-radius: 22px;
padding: 18px;
text-decoration: none;
color: inherit;
}
.checkin-operation-mode > .is-active {
border-color: #004a8f;
box-shadow: inset 4px 0 0 #004a8f, 0 16px 40px rgba(15, 45, 80, 0.08);
}
.checkin-operation-mode > .is-disabled {
opacity: 0.62;
}
.checkin-operation-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 24px;
}
.checkin-operation-metrics article {
border-radius: 22px;
padding: 20px;
}
.checkin-operation-metrics strong {
display: block;
margin: 6px 0;
font-size: 2rem;
}
.checkin-operation-layout {
grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
align-items: start;
}
.checkin-operation-side-stack {
display: grid;
gap: 16px;
}
.checkin-operation-readiness__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.checkin-operation-readiness__header span {
color: #5e7189;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.checkin-operation-readiness__header h2 {
margin: 5px 0 0;
font-size: 1.3rem;
}
.checkin-operation-readiness__header > strong {
color: #004a8f;
font-size: 1.65rem;
}
.checkin-operation-readiness__track {
height: 8px;
margin: 16px 0;
overflow: hidden;
border-radius: 999px;
background: #e5edf6;
}
.checkin-operation-readiness__track span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #004a8f, #00856f);
}
.checkin-operation-readiness__list {
display: grid;
gap: 10px;
}
.checkin-operation-readiness__list article {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 10px;
border: 1px solid #d8e5f4;
border-radius: 16px;
padding: 12px;
background: #f8fbff;
}
.checkin-operation-readiness__list article > span {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 12px;
background: #e8f1fb;
color: #004a8f;
font-size: 1.1rem;
}
.checkin-operation-readiness__list article.is-complete > span {
background: #dff8ea;
color: #047857;
}
.checkin-operation-readiness__list article > div {
display: grid;
gap: 4px;
}
.checkin-operation-readiness__list small {
color: #63758c;
line-height: 1.45;
}
.checkin-operation-readiness__list a,
.checkin-operation-readiness__list em {
width: fit-content;
margin-top: 4px;
color: #004a8f;
font-size: 0.8rem;
font-style: normal;
font-weight: 900;
}
.checkin-operation-card {
border-radius: 24px;
padding: 22px;
}
.checkin-operation-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.checkin-operation-card__header h2 {
margin: 8px 0 6px;
font-size: 1.55rem;
}
.checkin-operation-form {
display: grid;
gap: 16px;
}
.checkin-operation-form label {
display: grid;
gap: 8px;
color: #17263a;
font-weight: 800;
}
.checkin-operation-form input {
min-height: 54px;
border: 1px solid #cfdeef;
border-radius: 14px;
padding: 0 16px;
font: inherit;
}
.checkin-operation-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.checkin-operation-event-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.checkin-operation-event-card,
.checkin-operation-picker a,
.checkin-operation-room {
display: grid;
gap: 8px;
border: 1px solid #d8e5f4;
border-radius: 18px;
background: #f8fbff;
padding: 16px;
text-decoration: none;
color: inherit;
}
.checkin-operation-picker {
display: grid;
gap: 10px;
max-height: 58vh;
overflow: auto;
padding-right: 4px;
}
.checkin-operation-room {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
margin-bottom: 18px;
}
.checkin-operation-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -4px 0 16px;
}
.checkin-operation-legend span {
border-radius: 999px;
padding: 7px 10px;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.checkin-operation-legend .is-valid {
background: #dff8ea;
color: #047857;
}
.checkin-operation-legend .is-warning {
background: #fff0c9;
color: #92400e;
}
.checkin-operation-legend .is-error {
background: #ffe1e1;
color: #b91c1c;
}
.checkin-operation-legend .is-blocked {
background: #eef2f7;
color: #475569;
}
.operation-scanner {
min-height: 340px;
}
body.page-certificate-print {
background: #edf3fb;
}
.certificate-print-shell {
min-height: 100vh;
padding: 28px;
}
.certificate-print-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
max-width: 1120px;
margin: 0 auto 18px;
}
.certificate-print {
max-width: 1120px;
min-height: 720px;
margin: 0 auto;
padding: 48px;
border: 1px solid #cdddf0;
border-radius: 28px;
background:
linear-gradient(135deg, rgba(0, 74, 143, 0.08), rgba(255, 255, 255, 0) 36%),
#ffffff;
box-shadow: 0 24px 60px rgba(15, 45, 80, 0.12);
}
.certificate-print__header,
.certificate-print__footer,
.certificate-print__brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.certificate-print__brand {
justify-content: flex-start;
font-size: 1.1rem;
}
.certificate-print__header p {
margin: 0;
color: #52677f;
}
.certificate-print__body {
padding: 92px 4vw 70px;
text-align: center;
}
.certificate-print__body h1 {
margin: 6px 0 20px;
font-size: clamp(3rem, 8vw, 6rem);
letter-spacing: 0;
color: #004a8f;
}
.certificate-print__statement {
max-width: 820px;
margin: 0 auto 18px;
color: #17263a;
font-size: clamp(1.25rem, 2vw, 1.65rem);
line-height: 1.55;
}
.certificate-print__details {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0;
}
.certificate-print__details div {
border-radius: 16px;
background: #f4f8fc;
padding: 14px;
}
.certificate-print__details dt {
color: #52677f;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.certificate-print__details dd {
margin: 6px 0 0;
color: #061a33;
font-weight: 800;
overflow-wrap: anywhere;
}
.certificate-print__footer {
margin-top: 56px;
color: #52677f;
text-align: center;
}
.certificate-print__footer span {
height: 1px;
flex: 1;
background: #cdddf0;
}
@media (max-width: 900px) {
.checkin-operation__topbar,
.checkin-operation__hero,
.checkin-operation-card__header {
align-items: stretch;
flex-direction: column;
}
.checkin-operation-layout,
.certificate-print__details {
grid-template-columns: 1fr;
}
.checkin-operation-room {
grid-template-columns: 1fr;
}
.certificate-print {
padding: 28px;
}
.certificate-print__body {
padding: 56px 0;
}
}
@media (max-width: 560px) {
.checkin-operation {
padding: 12px;
}
.checkin-operation-actions,
.certificate-print-actions {
align-items: stretch;
flex-direction: column;
}
.checkin-operation-actions > *,
.certificate-print-actions > * {
width: 100%;
justify-content: center;
}
.certificate-print-shell {
padding: 12px;
}
}
@media print {
body.page-certificate-print {
background: #ffffff;
}
.certificate-print-actions,
body.page-certificate-print script {
display: none !important;
}
.certificate-print-shell {
padding: 0;
}
.certificate-print {
width: 100%;
min-height: 100vh;
border: 0;
border-radius: 0;
box-shadow: none;
}
}
:root {
color-scheme: light;
--bg: #f4f7fb;
--bg-muted: rgba(255, 255, 255, 0.72);
--surface: rgba(255, 255, 255, 0.82);
--surface-strong: #ffffff;
--surface-dark: #173b6d;
--text: #15263a;
--text-soft: #66768a;
--line: rgba(22, 50, 79, 0.12);
--shadow: 0 28px 70px rgba(22, 50, 79, 0.16);
--brand: #1d4ed8;
--brand-strong: #173b8f;
--accent: #d97706;
--danger: #b91c1c;
--success: #0f766e;
--warning: #d97706;
--gradient-a: radial-gradient(circle at top left, rgba(29, 78, 216, 0.2), transparent 42%);
--gradient-b: radial-gradient(circle at right center, rgba(217, 119, 6, 0.24), transparent 38%);
--pattern: linear-gradient(115deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.25));
--motion-fast: 180ms;
--motion-base: 260ms;
--motion-slow: 420ms;
--ease-premium-out: cubic-bezier(0.25, 1, 0.5, 1);
--ease-premium-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ease-premium-snap: cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-form-section--intro {
border-color: rgba(0, 83, 155, 0.22);
background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}
.admin-preset-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.admin-preset-card {
display: grid;
gap: 8px;
min-height: 150px;
padding: 16px;
border: 1px solid rgba(0, 83, 155, 0.18);
border-radius: 18px;
background: #fff;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.admin-preset-card:hover,
.admin-preset-card:has(input:checked) {
border-color: #00539b;
box-shadow: 0 16px 36px rgba(0, 83, 155, 0.12);
transform: translateY(-1px);
}
.admin-preset-card input {
width: 18px;
height: 18px;
accent-color: #00539b;
}
.admin-preset-card strong {
color: #0f172a;
font-size: 0.96rem;
}
.admin-preset-card span {
color: #526179;
font-size: 0.86rem;
line-height: 1.45;
}
.admin-form-section__grid--after {
align-items: start;
}
.card-cta-link--secondary {
background: #fff7e0;
color: #76520a;
border-color: #f6d06f;
}
.account-ticket-activities {
margin: 18px 0;
padding: 14px;
border: 1px solid #d9e7f7;
border-radius: 16px;
background: #f8fbff;
}
.account-ticket-activities > strong {
display: block;
margin-bottom: 10px;
color: #0f172a;
}
.account-ticket-activities ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.account-ticket-activities li {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-top: 1px solid #e5edf7;
}
.account-ticket-activities li > div {
display: grid;
min-width: 0;
gap: 4px;
}
.account-ticket-activities li:first-child {
border-top: 0;
padding-top: 0;
}
.account-ticket-activities span {
font-weight: 700;
color: #0f172a;
}
.account-ticket-activities small {
color: #526179;
text-align: right;
}
.account-ticket-activities__status {
flex: 0 0 auto;
display: inline-grid;
gap: 3px;
justify-items: center;
max-width: 180px;
padding: 7px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 900;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
}
.account-ticket-activities__status small {
color: inherit;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0;
text-align: center;
text-transform: none;
opacity: 0.82;
}
.account-ticket-activities__status--checked {
background: #dcfce7;
color: #166534;
}
.account-ticket-activities__status--pending {
background: #fff7ed;
color: #9a3412;
}
.account-ticket-activities__status--waitlist {
background: #fffbeb;
color: #92400e;
}
.account-ticket-activities__status--scheduled {
background: #eaf3ff;
color: #004a8f;
}
.account-ticket-activities__side,
.account-agenda-item__side {
display: grid;
flex: 0 0 auto;
gap: 7px;
justify-items: end;
}
.account-ticket-activities__side form,
.account-agenda-item__side form {
margin: 0;
}
.account-inline-action {
min-height: 44px;
padding: 0 10px;
border: 1px solid #fed7aa;
border-radius: 999px;
background: #ffffff;
color: #9a3412;
cursor: pointer;
font-size: 0.72rem;
font-weight: 900;
}
.account-inline-action--qr {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
.account-inline-action:hover {
border-color: #fb923c;
background: #fff7ed;
}
.account-ticket-activities--empty {
border-style: dashed;
background: #ffffff;
}
.account-ticket-activities--waitlist {
border-color: #fde68a;
background: #fffbeb;
}
.account-ticket-activities--empty p {
margin: 0 0 12px;
color: #526179;
}
.account-ticket-activities__link {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 38px;
padding: 0 14px;
border: 1px solid #bfdbfe;
border-radius: 999px;
background: #eff6ff;
color: #004a8f;
font-weight: 800;
text-decoration: none;
}
.account-ticket-activities__link:hover {
background: #dbeafe;
}
.account-mobile-details {
display: block;
}
.account-mobile-details > summary {
display: none;
}
.account-mobile-details__body {
display: grid;
gap: 12px;
}
.account-messages-card {
display: grid;
gap: 14px;
}
.account-messages-card__heading {
margin: 0;
}
.account-message-list {
display: grid;
gap: 10px;
}
.account-message-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 13px 14px;
border: 1px solid #d9e7f7;
border-radius: 14px;
background: #f8fbff;
}
.account-message-item div {
display: grid;
min-width: 0;
gap: 3px;
}
.account-message-item strong {
color: #0f172a;
overflow-wrap: anywhere;
}
.account-message-item span {
color: #526179;
font-size: 0.86rem;
}
.account-message-item em {
flex: 0 0 auto;
padding: 6px 10px;
border-radius: 999px;
background: #eaf3ff;
color: #004a8f;
font-size: 0.72rem;
font-style: normal;
font-weight: 900;
text-transform: uppercase;
}
.certificate-list {
display: grid;
gap: 18px;
}
.certificate-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 20px;
padding: 22px;
border: 1px solid #d9e7f7;
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.certificate-card h2 {
margin: 12px 0 4px;
color: #071526;
}
.certificate-card p {
margin: 0 0 16px;
color: #526179;
}
.certificate-card__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
}
.certificate-card__meta div {
padding: 12px;
border-radius: 14px;
background: #f6f9fd;
}
.certificate-card__meta dt {
color: #60708a;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.certificate-card__meta dd {
margin: 4px 0 0;
color: #0f172a;
font-weight: 700;
}
.certificate-card__aside {
display: grid;
align-content: center;
justify-items: center;
gap: 8px;
padding: 18px;
border-radius: 18px;
background: linear-gradient(135deg, #004a8f, #1d75b8);
color: #fff;
text-align: center;
}
.certificate-card__aside strong {
font-size: 1rem;
}
.certificate-card__aside span {
color: rgba(255, 255, 255, 0.82);
font-size: 0.88rem;
}
@media (max-width: 980px) {
.admin-preset-grid,
.certificate-card {
grid-template-columns: 1fr;
}
.account-ticket-activities li {
display: grid;
}
.account-ticket-activities small,
.account-ticket-activities__status,
.account-ticket-activities__status small {
text-align: left;
justify-items: start;
}
.account-ticket-activities__side,
.account-agenda-item__side {
justify-items: start;
}
.account-message-item {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 640px) {
.admin-preset-card {
min-height: auto;
}
.certificate-card__meta {
grid-template-columns: 1fr;
}
.account-mobile-details {
margin: 16px 0;
border: 1px solid #d9e7f7;
border-radius: 18px;
background: #ffffff;
overflow: hidden;
}
.account-mobile-details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 56px;
padding: 0 14px;
color: #0f172a;
cursor: pointer;
font-weight: 900;
list-style: none;
}
.account-mobile-details > summary::-webkit-details-marker {
display: none;
}
.account-mobile-details > summary::after {
content: "+";
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: #eaf3ff;
color: #004a8f;
font-size: 1.15rem;
line-height: 1;
transition: transform 0.18s ease;
}
.account-mobile-details[open] > summary::after {
content: "−";
}
.account-mobile-details > summary strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 9px;
border-radius: 999px;
background: #004a8f;
color: #ffffff;
font-size: 0.78rem;
}
.account-mobile-details__body {
padding: 0 12px 12px;
}
.account-mobile-details .account-ticket-activities {
margin: 0;
border-radius: 14px;
}
.account-mobile-details .account-ticket-activities + .account-ticket-activities {
margin-top: 10px;
}
}
.admin-context-card {
padding: 16px 18px;
display: grid;
grid-template-columns: minmax(0, 1.35fr) auto auto;
align-items: center;
gap: 16px;
border: 1px solid #bfdbfe;
border-radius: 18px;
background: linear-gradient(135deg, #ffffff, #eef7ff);
box-shadow: 0 14px 32px rgba(0, 74, 143, 0.08);
}
.admin-context-card--empty {
border-color: #fde68a;
background: #fffbeb;
}
.admin-context-card__main {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
}
.admin-context-card__main h2,
.admin-selector-state h2,
.admin-selector-state h3 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
letter-spacing: 0;
}
.admin-context-card__main h2 {
font-size: 1rem;
}
.admin-context-card__main p,
.admin-selector-state p,
.admin-filter-note {
margin: 0.22rem 0 0;
color: var(--admin-muted);
line-height: 1.35;
}
.admin-context-card__main p span {
color: #94a3b8;
}
.admin-context-card__meta,
.admin-context-card__actions,
.admin-row-actions,
.admin-schedule-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.admin-context-card__meta span {
min-height: 26px;
padding: 0.3rem 0.68rem;
display: inline-flex;
align-items: center;
border-radius: 999px;
background: #ffffff;
color: #0f3f68;
font-size: 0.78rem;
font-weight: 900;
box-shadow: inset 0 0 0 1px #dbeafe;
}
.admin-context-card__actions form,
.admin-row-actions form,
.admin-row-select-form {
margin: 0;
}
.admin-managed-row {
grid-template-columns: 42px minmax(0, 1fr) auto auto;
}
.admin-managed-row.is-selected-context,
.admin-event-row.is-selected-context {
background: #f0f7ff;
box-shadow: inset 4px 0 0 var(--admin-blue);
}
.admin-event-row {
grid-template-columns: 106px minmax(0, 1fr) minmax(120px, auto) minmax(280px, auto);
}
.admin-selector-state {
padding: 26px;
display: grid;
gap: 18px;
}
.admin-selector-state--compact {
padding: 18px 0 0;
}
.admin-selector-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.admin-selector-grid--compact {
grid-template-columns: 1fr;
}
.admin-selector-card {
padding: 16px;
display: grid;
gap: 8px;
border: 1px solid var(--admin-border);
border-radius: 14px;
background: #ffffff;
text-align: left;
}
.admin-selector-card strong {
color: #020617;
font-weight: 900;
}
.admin-selector-card span,
.admin-selector-card small {
color: var(--admin-muted);
}
.admin-filter-note {
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 12px;
background: #f1f8ff;
color: #164268;
}
.admin-checkin-context {
margin-top: 14px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.admin-checkin-context strong {
color: #020617;
}
.admin-schedule-capacity {
display: grid;
gap: 5px;
}
.admin-schedule-capacity strong {
color: #020617;
font-size: 0.86rem;
}
.admin-schedule-capacity em {
width: max-content;
padding: 0.16rem 0.55rem;
border-radius: 999px;
background: #fffbeb;
color: #92400e;
font-size: 0.72rem;
font-style: normal;
font-weight: 900;
}
.admin-schedule-capacity__facts,
.activity-capacity-panel__facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin: 0;
}
.admin-schedule-capacity__facts div,
.activity-capacity-panel__facts div {
min-width: 0;
padding: 7px 8px;
border: 1px solid rgba(0, 83, 155, 0.12);
border-radius: 10px;
background: #ffffff;
}
.admin-schedule-capacity__facts dt,
.activity-capacity-panel__facts dt {
margin: 0 0 2px;
color: #66768a;
font-size: 0.62rem;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
}
.admin-schedule-capacity__facts dd,
.activity-capacity-panel__facts dd {
margin: 0;
color: #0f2f4b;
font-size: 0.92rem;
font-weight: 900;
}
.activity-capacity-panel {
margin-top: 10px;
padding: 12px;
display: grid;
gap: 6px;
border-radius: 12px;
background: rgba(239, 246, 255, 0.82);
}
.activity-capacity-panel strong,
.activity-capacity-panel small {
color: #0f2f4b;
}
.public-activity-state {
margin-top: 10px;
padding: 12px 13px;
display: grid;
gap: 4px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 14px;
background: rgba(248, 250, 252, 0.94);
}
.public-activity-state span {
color: #0f2f4b;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.public-activity-state p {
margin: 0;
color: #38536f;
font-size: 0.92rem;
line-height: 1.4;
}
.public-activity-state--open {
border-color: rgba(5, 150, 105, 0.28);
background: #f0fdf4;
}
.public-activity-state--open span,
.public-activity-state--success span {
color: #047857;
}
.public-activity-state--success {
border-color: rgba(5, 150, 105, 0.24);
background: #ecfdf5;
}
.public-activity-state--warning,
.public-activity-state--waitlist {
border-color: rgba(245, 158, 11, 0.34);
background: #fffbeb;
}
.public-activity-state--warning span,
.public-activity-state--waitlist span {
color: #92400e;
}
.public-activity-state--locked,
.public-activity-state--closed {
border-color: rgba(100, 116, 139, 0.22);
background: #f8fafc;
}
.public-activity-state--locked span,
.public-activity-state--closed span {
color: #475569;
}
.activity-choice-guide {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 16px;
align-items: center;
margin: 1rem 0;
padding: 18px;
border: 1px solid rgba(0, 83, 155, 0.18);
border-radius: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
box-shadow: 0 18px 42px rgba(22, 50, 79, 0.1);
}
.activity-choice-guide__copy {
display: grid;
gap: 6px;
min-width: 0;
}
.activity-choice-guide__copy h2 {
margin: 0;
color: #0f172a;
font-size: clamp(1.25rem, 2vw, 1.7rem);
}
.activity-choice-guide__copy p,
.activity-choice-guide__copy small {
margin: 0;
color: #526179;
line-height: 1.45;
}
.activity-choice-guide__stats {
display: grid;
grid-template-columns: repeat(5, minmax(78px, 1fr));
gap: 8px;
}
.activity-choice-guide__stats article {
display: grid;
gap: 3px;
min-width: 0;
padding: 10px 12px;
border: 1px solid rgba(0, 83, 155, 0.12);
border-radius: 14px;
background: #ffffff;
text-align: center;
}
.activity-choice-guide__stats strong {
color: #004a8f;
font-size: 1.16rem;
}
.activity-choice-guide__stats span {
color: #526179;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.activity-choice-guide__stat--soldout strong {
color: #9f1239;
}
.activity-choice-guide__stat--waiting {
border-color: #f4d38a !important;
background: #fffbeb !important;
}
.activity-choice-guide__stat--waiting strong {
color: #92400e;
}
.activity-choice-guide__cta {
white-space: nowrap;
}
.activity-choice-guide--success {
border-color: rgba(5, 150, 105, 0.24);
background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}
.activity-choice-guide--warning {
border-color: rgba(245, 158, 11, 0.32);
background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
.activity-choice-guide--locked {
border-color: rgba(100, 116, 139, 0.24);
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.card-cta-bar--stacked {
display: grid;
gap: 8px;
}
.card-cta-bar--stacked form {
margin: 0;
}
button.card-cta-link {
width: 100%;
border: 0;
cursor: pointer;
}
button.card-cta-link:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.activity-registration-shell .registration-layout--activity {
align-items: start;
}
@media (max-width: 960px) {
.activity-choice-guide {
grid-template-columns: 1fr;
align-items: stretch;
}
.activity-choice-guide__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-choice-guide__cta {
width: 100%;
justify-content: center;
}
.admin-context-card {
grid-template-columns: 1fr;
align-items: stretch;
}
.admin-context-card__actions,
.admin-context-card__meta {
justify-content: flex-start;
}
.admin-event-row,
.admin-managed-row {
grid-template-columns: 1fr;
}
}
html[data-theme="dark"] {
color-scheme: dark;
--bg: #08111d;
--bg-muted: rgba(10, 18, 32, 0.72);
--surface: rgba(9, 20, 36, 0.82);
--surface-strong: #0f1c31;
--surface-dark: #08111d;
--text: #f3f6fb;
--text-soft: #9eabc2;
--line: rgba(255, 255, 255, 0.08);
--shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
--brand: #93c5fd;
--brand-strong: #60a5fa;
--accent: #f59e0b;
--danger: #f87171;
--success: #34d399;
--warning: #fbbf24;
--gradient-a: radial-gradient(circle at top left, rgba(96, 165, 250, 0.22), transparent 42%);
--gradient-b: radial-gradient(circle at right center, rgba(245, 158, 11, 0.16), transparent 38%);
--pattern: linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
width: 100%;
margin: 0;
scroll-behavior: smooth;
}
@media (min-width: 761px) {
html:has(body.page-public-home) {
position: relative;
left: calc(100% - 100vw);
overflow-x: clip;
}
}
body {
margin: 0;
min-height: 100vh;
background:
var(--gradient-a),
var(--gradient-b),
linear-gradient(180deg, rgba(8, 17, 29, 0.05), transparent 30%),
var(--bg);
color: var(--text);
font-family: "Source Sans 3", sans-serif;
}
body.page-schedule {
background:
var(--schedule-gradient-a-light, var(--gradient-a)),
var(--schedule-gradient-b-light, var(--gradient-b)),
linear-gradient(180deg, rgba(8, 17, 29, 0.05), transparent 30%),
var(--schedule-bg-light, var(--bg));
}
html[data-theme="dark"] body.page-schedule {
background:
var(--schedule-gradient-a-dark, var(--gradient-a)),
var(--schedule-gradient-b-dark, var(--gradient-b)),
linear-gradient(180deg, rgba(8, 17, 29, 0.16), transparent 34%),
var(--schedule-bg-dark, var(--bg));
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 88%);
opacity: 0.28;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
}
.page-shell,
.auth-stage {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
}
.page-shell {
padding: 2rem 0 4rem;
}
.hero-surface,
.panel,
.subpanel,
.stat-card,
.timeline-toolbar,
.event-card,
.selector-card,
.admin-event-card,
.auth-card,
.hero-point,
.featured-card,
.empty-state,
.hero-showcase,
.appearance-preview {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--pattern), var(--surface);
box-shadow: var(--shadow);
backdrop-filter: blur(16px);
}
.hero-surface {
padding: 1.35rem;
animation: surface-rise 0.45s ease both;
isolation: isolate;
}
.hero-surface > * {
position: relative;
z-index: 1;
}
.hero-surface--schedule-image {
background: transparent;
border-color: transparent;
box-shadow: none;
min-height: clamp(520px, 85svh, 920px);
}
.hero-surface--schedule-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
/* Se quiser recolocar um overlay/gradiente no futuro, edite este background. */
background-image: var(--hero-active-image, var(--hero-image));
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.hero-surface::after,
.panel::after,
.auth-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.hero-surface--schedule-image::after {
display: none;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.topbar__actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
body.page-admin .page-shell {
width: min(1360px, calc(100% - 2rem));
}
.admin-header-surface {
display: grid;
gap: 0.9rem;
padding: 1rem 1.1rem 1.05rem;
}
.admin-header {
display: grid;
grid-template-columns: minmax(0, 1.25fr) auto auto;
align-items: center;
gap: 1rem;
}
.admin-header__identity {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.admin-header__brand {
flex: 0 0 auto;
}
.admin-header__brand .brand__mark {
width: 52px;
height: 52px;
border-radius: 18px;
}
.admin-header__brand strong {
display: block;
font-size: 1.02rem;
line-height: 1.05;
}
.admin-header__brand small {
margin-top: 0.2rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.admin-header__copy {
display: grid;
gap: 0.22rem;
min-width: 0;
}
.admin-header__copy h1 {
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2.3rem);
line-height: 1;
max-width: none;
}
.admin-header__copy p {
margin: 0;
max-width: 58ch;
font-size: 0.95rem;
line-height: 1.48;
color: var(--text-soft);
}
.admin-header__secondary {
justify-self: end;
}
.admin-session-pill {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0.42rem 0.88rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--success) 28%, var(--line));
background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.06));
color: color-mix(in srgb, var(--success) 82%, #eafff9);
font-family: "Space Grotesk", sans-serif;
font-size: 0.83rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.admin-header__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.7rem;
flex-wrap: wrap;
}
.admin-header__actions form {
display: flex;
margin: 0;
}
.admin-header__metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
}
.admin-header-surface .flash-stack {
margin: 0;
gap: 0.55rem;
}
.admin-header-surface .flash {
padding: 0.78rem 0.95rem;
border-radius: 16px;
font-size: 0.92rem;
}
.stat-card--admin-mini {
min-height: 0;
padding: 0.8rem 0.95rem;
display: grid;
gap: 0.12rem;
border-radius: 20px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 12%, transparent), transparent 44%),
color-mix(in srgb, var(--surface-strong) 78%, transparent);
}
.stat-card--admin-mini strong {
font-family: "Space Grotesk", sans-serif;
font-size: 1.72rem;
line-height: 1;
}
.stat-card--admin-mini span {
font-size: 0.85rem;
color: var(--text-soft);
}
.schedule-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.15rem;
}
.schedule-header__brand {
min-width: 0;
}
.schedule-header__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.95rem;
font-family: "Space Grotesk", sans-serif;
}
.brand__mark {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: linear-gradient(135deg, var(--brand), var(--accent));
color: #fff;
letter-spacing: 0.08em;
font-weight: 700;
}
.brand__mark--image {
background: transparent;
padding: 0;
box-shadow: none;
}
.brand__mark--image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 0;
border-radius: inherit;
}
.schedule-header__brand .brand__mark {
width: 58px;
height: 58px;
border-radius: 18px;
}
.schedule-header__brand strong {
display: block;
font-size: clamp(1.35rem, 2.1vw, 1.8rem);
line-height: 1;
}
.schedule-header__brand small {
margin-top: 0.32rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.11em;
}
.schedule-admin-link {
width: 48px;
min-width: 48px;
padding: 0;
}
.schedule-admin-link__icon {
font-size: 1.25rem;
line-height: 1;
}
.scroll-top-button {
position: fixed;
right: max(1rem, calc(env(safe-area-inset-right) + 0.75rem));
bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
z-index: 30;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
min-width: 52px;
height: 52px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
border-radius: 18px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--surface-strong) 74%, transparent));
color: color-mix(in srgb, var(--brand) 88%, var(--text));
box-shadow: 0 18px 40px rgba(22, 50, 79, 0.18);
opacity: 0;
pointer-events: none;
transform: translate3d(0, 12px, 0) scale(0.96);
transition:
opacity var(--motion-fast) var(--ease-premium-out),
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-fast) var(--ease-premium-out),
background-color var(--motion-base) var(--ease-premium-soft);
touch-action: manipulation;
}
.scroll-top-button.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0) scale(1);
}
.scroll-top-button:hover,
.scroll-top-button:focus-visible {
transform: translate3d(0, -2px, 0) scale(1);
border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
}
.scroll-top-button:focus-visible {
outline: none;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent),
0 18px 40px rgba(22, 50, 79, 0.18);
}
.scroll-top-button__icon {
width: 20px;
height: 20px;
}
.brand small,
.section-heading .eyebrow,
.eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
color: var(--accent);
font-weight: 700;
}
.brand small {
margin-top: 0.15rem;
color: var(--text-soft);
letter-spacing: 0.08em;
}
.hero-grid,
.featured-grid,
.admin-grid,
.auth-grid,
.delete-grid,
.selector-grid {
display: grid;
gap: 1.25rem;
}
.hero-grid {
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
align-items: end;
}
.hero-grid--admin {
grid-template-columns: minmax(0, 1.45fr) minmax(360px, 420px);
align-items: center;
}
.hero-grid--schedule {
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.95fr);
align-items: stretch;
min-height: clamp(520px, 85svh, 920px);
}
.hero-grid--schedule-image {
min-height: clamp(520px, 85svh, 920px);
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.88fr);
align-items: end;
}
.hero-grid--schedule-image-only {
grid-template-columns: minmax(0, 1fr);
}
.hero-copy h1,
.auth-card h2,
.section-heading h2,
.empty-state h3,
.panel h2 {
margin: 0.35rem 0 0.75rem;
font-family: "Space Grotesk", sans-serif;
line-height: 1.08;
}
.hero-copy h1 {
font-size: clamp(2rem, 3vw, 3.4rem);
max-width: 12ch;
}
.hero-copy p,
.panel__lead,
.empty-state p,
.event-card__summary,
.featured-card__summary {
margin: 0;
font-size: 1.05rem;
line-height: 1.55;
color: var(--text-soft);
}
.hero-copy--schedule {
display: grid;
gap: 0.85rem;
}
.hero-surface--schedule-image .hero-copy,
.hero-surface--schedule-image .brand,
.hero-surface--schedule-image .stat-card,
.hero-surface--schedule-image .flash {
color: #fff;
}
.hero-surface--schedule-image .hero-copy p,
.hero-surface--schedule-image .brand small,
.hero-surface--schedule-image .stat-card span {
color: rgba(255, 255, 255, 0.82);
}
.hero-surface--schedule-image .hero-copy h1,
.hero-surface--schedule-image .hero-copy p {
text-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.hero-surface--schedule-image .eyebrow {
color: #ffd28a;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
}
.hero-aside {
display: grid;
gap: 0.85rem;
align-self: stretch;
}
.hero-aside--overlay {
width: min(100%, 420px);
justify-self: end;
align-self: end;
}
.hero-stats--admin {
width: 100%;
max-width: 520px;
margin-left: auto;
align-self: center;
grid-template-columns: repeat(2, minmax(148px, 1fr));
}
.stat-card {
padding: 1rem;
}
.stat-card--section {
min-height: 0;
min-width: 166px;
padding: 0.82rem 1rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.18rem;
box-shadow: 0 16px 38px rgba(22, 50, 79, 0.12);
}
.stat-card--section strong {
margin-bottom: 0;
font-size: 1.55rem;
line-height: 1;
}
.stat-card--section span {
display: block;
line-height: 1.28;
font-weight: 700;
}
.section-stats--timeline {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.7rem;
}
.section-stats--timeline .stat-card--schedule-active {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), rgba(255, 255, 255, 0.86));
border-color: rgba(52, 211, 153, 0.24);
box-shadow: 0 16px 36px rgba(5, 150, 105, 0.12);
}
.section-stats--timeline .stat-card--schedule-active span {
color: #0f766e;
}
.section-stats--timeline .stat-card--schedule-finished {
background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(255, 255, 255, 0.86));
border-color: rgba(248, 113, 113, 0.24);
box-shadow: 0 16px 36px rgba(185, 28, 28, 0.12);
}
.section-stats--timeline .stat-card--schedule-finished span {
color: #c2410c;
}
html[data-theme="dark"] .section-stats--timeline .stat-card--schedule-active {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.18), rgba(9, 20, 36, 0.88));
border-color: rgba(52, 211, 153, 0.26);
box-shadow: 0 18px 40px rgba(5, 150, 105, 0.16);
}
html[data-theme="dark"] .section-stats--timeline .stat-card--schedule-active span {
color: #86efac;
}
html[data-theme="dark"] .section-stats--timeline .stat-card--schedule-finished {
background: linear-gradient(180deg, rgba(239, 68, 68, 0.18), rgba(9, 20, 36, 0.88));
border-color: rgba(248, 113, 113, 0.26);
box-shadow: 0 18px 40px rgba(185, 28, 28, 0.16);
}
html[data-theme="dark"] .section-stats--timeline .stat-card--schedule-finished span {
color: #fca5a5;
}
.stat-card--admin {
min-height: 138px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.35rem;
}
.stat-card strong {
display: block;
font-family: "Space Grotesk", sans-serif;
font-size: 1.8rem;
margin-bottom: 0.35rem;
}
.stat-card--admin strong {
margin-bottom: 0;
}
.stat-card--admin span {
display: block;
line-height: 1.35;
}
.hero-showcase {
min-height: 260px;
background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}
.hero-showcase--image img {
width: 100%;
min-height: 260px;
object-fit: cover;
}
.hero-showcase--fallback {
display: grid;
place-items: center;
padding: 1.25rem;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 22%, transparent), transparent 44%),
radial-gradient(circle at bottom left, color-mix(in srgb, var(--brand) 24%, transparent), transparent 42%),
color-mix(in srgb, var(--surface-strong) 82%, transparent);
}
.hero-showcase__copy {
display: grid;
gap: 0.8rem;
max-width: 34ch;
}
.hero-showcase__copy p {
margin: 0;
line-height: 1.7;
color: var(--text);
font-size: 1rem;
}
.section-block,
.tabs-nav,
.admin-grid {
margin-top: 1.35rem;
}
.section-block--timeline-tools {
margin-top: 1rem;
}
.public-activity-guide {
margin-bottom: 0.9rem;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid color-mix(in srgb, #bfdbfe 78%, var(--line));
border-radius: 20px;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 10%, transparent), transparent 36%),
#ffffff;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}
.public-activity-guide h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.15rem, 2vw, 1.45rem);
letter-spacing: 0;
}
.public-activity-guide p {
max-width: 64ch;
margin: 0.35rem 0 0;
color: var(--text-soft);
line-height: 1.5;
}
.public-activity-guide__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.65rem;
flex-wrap: wrap;
}
.section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.section-heading--timeline {
align-items: end;
justify-content: flex-end;
flex-wrap: wrap;
gap: 1rem 1.25rem;
}
.section-heading--carousel {
align-items: center;
flex-wrap: wrap;
}
.timeline-toolbar {
display: grid;
grid-template-columns: 1fr;
gap: 0.8rem;
padding: 0.8rem 0.9rem;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 12%, transparent), transparent 42%),
radial-gradient(circle at bottom left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%),
var(--pattern),
var(--surface);
/* Perf mobile: o navegador pode pular a rasterizacao do bloco fora da tela. */
content-visibility: auto;
contain-intrinsic-size: auto 260px;
}
.timeline-toolbar__intro {
display: grid;
gap: 0.55rem;
align-content: start;
}
.timeline-toolbar__intro h2 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.timeline-toolbar__intro p {
margin: 0;
color: var(--text-soft);
line-height: 1.55;
}
.timeline-filter-bar {
display: grid;
gap: 0.8rem;
align-content: start;
}
.timeline-filter-bar__summary {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
}
.timeline-filter-summary-pill {
display: inline-grid;
gap: 0.12rem;
min-height: 44px;
padding: 0.62rem 0.88rem;
border-radius: 16px;
border: 1px solid color-mix(in srgb, #60a5fa 34%, var(--line));
background:
linear-gradient(180deg, color-mix(in srgb, #eff6ff 94%, transparent), color-mix(in srgb, #dbeafe 76%, transparent));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
line-height: 1.1;
}
.timeline-filter-summary-pill small {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, #2563eb 56%, var(--text-soft));
}
.timeline-filter-summary-pill strong {
font-family: "Space Grotesk", sans-serif;
font-size: 0.9rem;
color: color-mix(in srgb, #1d4ed8 80%, var(--text));
}
.timeline-filter-summary-pill--muted {
border-color: var(--line);
background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
box-shadow: none;
}
.timeline-filter-summary-pill--muted small {
color: var(--text-soft);
}
.timeline-filter-summary-pill--muted strong {
color: var(--text);
}
html[data-theme="dark"] .timeline-filter-summary-pill {
border-color: color-mix(in srgb, #60a5fa 44%, var(--line));
background:
linear-gradient(180deg, rgba(59, 130, 246, 0.24), rgba(56, 189, 248, 0.12));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .timeline-filter-summary-pill small {
color: #93c5fd;
}
html[data-theme="dark"] .timeline-filter-summary-pill strong {
color: #eff6ff;
}
html[data-theme="dark"] .timeline-filter-summary-pill--muted {
border-color: var(--line);
background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
box-shadow: none;
}
html[data-theme="dark"] .timeline-filter-summary-pill--muted small {
color: var(--text-soft);
}
html[data-theme="dark"] .timeline-filter-summary-pill--muted strong {
color: var(--text);
}
.timeline-filter-bar__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.timeline-filter-menu {
position: relative;
margin: 0;
}
.timeline-filter-menu__summary {
list-style: none;
display: grid;
gap: 0.16rem;
min-height: 76px;
padding: 0.95rem 3.15rem 0.95rem 1rem;
border-radius: 20px;
border: 1px solid var(--line);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--surface-strong) 76%, transparent));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
cursor: pointer;
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-fast) var(--ease-premium-out),
box-shadow var(--motion-fast) var(--ease-premium-out),
background-color var(--motion-base) var(--ease-premium-soft);
}
.timeline-filter-menu__summary::-webkit-details-marker {
display: none;
}
.timeline-filter-menu__summary::marker {
content: "";
}
.timeline-filter-menu__summary::after {
content: "";
position: absolute;
top: 50%;
right: 1.15rem;
width: 0.76rem;
height: 0.76rem;
border-right: 2px solid color-mix(in srgb, var(--text-soft) 92%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--text-soft) 92%, transparent);
transform: translate3d(0, -62%, 0) rotate(45deg);
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-fast) var(--ease-premium-out);
}
.timeline-filter-menu__summary:hover,
.timeline-filter-menu__summary:focus-visible,
.timeline-filter-menu[open] .timeline-filter-menu__summary {
transform: translate3d(0, -1px, 0);
}
.timeline-filter-menu__summary:focus-visible {
border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
outline: none;
}
.timeline-filter-menu.is-active .timeline-filter-menu__summary,
.timeline-filter-menu[open] .timeline-filter-menu__summary {
border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
box-shadow: 0 18px 40px rgba(22, 50, 79, 0.12);
}
.timeline-filter-menu.is-active .timeline-filter-menu__summary {
background:
linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, var(--surface-strong)), color-mix(in srgb, var(--surface-strong) 78%, transparent));
}
.timeline-filter-menu__summary:hover::after,
.timeline-filter-menu__summary:focus-visible::after,
.timeline-filter-menu[open] .timeline-filter-menu__summary::after {
transform: translate3d(0, -74%, 0) rotate(45deg);
border-right-color: color-mix(in srgb, var(--brand) 44%, var(--text-soft));
border-bottom-color: color-mix(in srgb, var(--brand) 44%, var(--text-soft));
}
.timeline-filter-menu[open] .timeline-filter-menu__summary::after {
transform: translate3d(0, -36%, 0) rotate(-135deg);
}
.timeline-filter-menu__label {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
}
.timeline-filter-menu__value {
display: block;
font-size: 1.03rem;
line-height: 1.2;
}
.timeline-filter-menu__meta {
color: var(--text-soft);
font-size: 0.86rem;
line-height: 1.35;
}
.timeline-filter-menu__panel {
margin-top: 0.55rem;
padding: 0.45rem;
border-radius: 20px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
max-height: min(340px, 46vh);
overflow-y: auto;
overscroll-behavior: contain;
}
.timeline-filter-options {
display: grid;
gap: 0.35rem;
}
.timeline-filter-option {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
min-height: 58px;
padding: 0.82rem 0.92rem;
border-radius: 16px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-fast) var(--ease-premium-out),
box-shadow var(--motion-fast) var(--ease-premium-out),
background-color var(--motion-base) var(--ease-premium-soft);
}
.timeline-filter-option:hover,
.timeline-filter-option:focus-within {
transform: translate3d(0, -1px, 0);
border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
}
.timeline-filter-option.is-selected {
border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--surface-strong)), color-mix(in srgb, var(--surface-strong) 82%, transparent));
box-shadow: 0 12px 24px rgba(22, 50, 79, 0.08);
}
.timeline-filter-option__input {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.timeline-filter-option__copy {
display: grid;
gap: 0.14rem;
min-width: 0;
}
.timeline-filter-option__copy strong {
font-size: 0.98rem;
line-height: 1.25;
}
.timeline-filter-option__copy small {
font-size: 0.82rem;
line-height: 1.35;
color: var(--text-soft);
}
.timeline-filter-option__indicator {
width: 1rem;
min-width: 1rem;
height: 1rem;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--text-soft) 72%, transparent);
box-shadow: inset 0 0 0 4px transparent;
transition:
border-color var(--motion-fast) var(--ease-premium-out),
box-shadow var(--motion-fast) var(--ease-premium-out);
}
.timeline-filter-option.is-selected .timeline-filter-option__indicator,
.timeline-filter-option:focus-within .timeline-filter-option__indicator {
border-color: color-mix(in srgb, var(--brand) 82%, var(--accent));
}
.timeline-filter-option.is-selected .timeline-filter-option__indicator {
box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--brand) 88%, var(--accent));
}
.timeline-filter-bar__footer {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-end;
gap: 0.55rem;
}
.timeline-filter-bar__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.7rem;
margin-left: auto;
}
.timeline-filter-bar__actions .button {
min-width: 132px;
}
.featured-carousel {
position: relative;
display: grid;
gap: 0.95rem;
--carousel-peek: clamp(1rem, 3vw, 1.8rem);
--carousel-slide-width: clamp(320px, 72%, 780px);
--carousel-scale-far: 0.82;
--carousel-scale-near: 0.93;
--carousel-scale-active: 1.09;
--carousel-frame-inset: clamp(0.7rem, 2vw, 1rem);
/* Perf mobile: evita renderizar o carrossel completo quando ele esta fora da viewport. */
content-visibility: auto;
contain-intrinsic-size: auto 440px;
}
.featured-carousel__viewport {
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--carousel-slide-width);
gap: clamp(0.9rem, 2.5vw, 1.2rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
scrollbar-color: transparent transparent;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
/* Mantem a altura natural dos slides; "stretch" fazia a arte vertical sobrar dentro do card. */
align-items: center;
/* Reserva folga vertical para o slide ativo crescer com scale sem "bater" na viewport. */
padding-block: 1.35rem 1.7rem;
/* Centraliza o card em foco e ainda preserva um "peek" lateral consistente. */
padding-inline: max(var(--carousel-peek), calc((100% - var(--carousel-slide-width)) / 2));
scroll-padding-inline: max(var(--carousel-peek), calc((100% - var(--carousel-slide-width)) / 2));
}
.featured-carousel.is-programmatic-scrolling .featured-carousel__viewport {
scroll-snap-type: none;
}
.featured-carousel__viewport::-webkit-scrollbar {
display: none;
}
.featured-carousel__slide {
scroll-snap-align: center;
scroll-snap-stop: always;
position: relative;
min-width: 0;
content-visibility: auto;
contain-intrinsic-size: auto 620px;
transform: translate3d(0, 0, 0) scale(var(--carousel-scale-far));
transform-origin: center center;
opacity: 0.7;
filter: saturate(0.82);
transition:
transform var(--motion-slow) var(--ease-premium-soft),
opacity var(--motion-base) var(--ease-premium-out),
filter var(--motion-base) var(--ease-premium-soft),
box-shadow var(--motion-base) var(--ease-premium-soft);
will-change: transform, opacity;
}
.featured-carousel__slide.is-near {
transform: translate3d(0, 0, 0) scale(var(--carousel-scale-near));
opacity: 0.88;
filter: saturate(0.94);
z-index: 2;
}
.featured-carousel__slide.is-active {
transform: translate3d(0, 0, 0) scale(var(--carousel-scale-active));
opacity: 1;
filter: none;
z-index: 3;
box-shadow: 0 38px 86px rgba(22, 50, 79, 0.24);
}
.featured-carousel__slide.is-far {
transform: translate3d(0, 0, 0) scale(var(--carousel-scale-far));
opacity: 0.62;
}
@media (hover: hover) and (pointer: fine) {
.featured-carousel__slide {
cursor: default;
}
.featured-carousel__slide:not(.is-active) {
cursor: pointer;
}
}
.featured-carousel.is-single {
--carousel-peek: 0px;
--carousel-slide-width: 100%;
}
.featured-carousel.is-single .featured-carousel__slide {
transform: none;
opacity: 1;
filter: none;
}
.carousel-controls {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.carousel-controls--overlay {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.carousel-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
color: var(--text);
font-family: "Space Grotesk", sans-serif;
font-size: 1.4rem;
font-weight: 700;
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-base) var(--ease-premium-soft),
background-color var(--motion-base) var(--ease-premium-soft),
opacity var(--motion-fast) var(--ease-premium-out);
}
.carousel-button--overlay {
position: absolute;
top: 50%;
width: 42px;
min-width: 42px;
min-height: 42px;
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.18);
color: #f8fafc;
opacity: 0.66;
backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
pointer-events: auto;
transform: translate3d(0, -50%, 0);
}
.carousel-button--overlay[data-carousel-prev] {
left: clamp(0.45rem, 1.6vw, 0.9rem);
}
.carousel-button--overlay[data-carousel-next] {
right: clamp(0.45rem, 1.6vw, 0.9rem);
}
.carousel-button:hover,
.carousel-button:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
}
.carousel-button--overlay:hover,
.carousel-button--overlay:focus-visible {
transform: translate3d(0, calc(-50% - 1px), 0);
border-color: rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.26);
opacity: 1;
}
.carousel-button:disabled {
opacity: 0.38;
cursor: default;
transform: none;
}
.carousel-button--overlay:disabled {
transform: translate3d(0, -50%, 0);
}
.carousel-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0.46rem;
flex-wrap: wrap;
width: fit-content;
margin-inline: auto;
min-height: 12px;
padding: 0.18rem 0;
overflow: visible;
}
.carousel-dot {
position: relative;
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(148, 163, 184, 0.58);
transition:
transform var(--motion-base) var(--ease-premium-snap),
background-color var(--motion-base) var(--ease-premium-soft),
opacity var(--motion-fast) var(--ease-premium-out);
will-change: transform, opacity;
box-shadow: none;
opacity: 1;
}
.carousel-dot.is-active {
background: rgba(255, 255, 255, 0.96);
transform: scale(1.08);
box-shadow: none;
}
html[data-theme="dark"] .carousel-dots {
box-shadow: none;
}
html[data-theme="dark"] .carousel-dot {
background: rgba(148, 163, 184, 0.62);
}
html[data-theme="dark"] .carousel-dot.is-active {
background: rgba(255, 255, 255, 0.98);
}
.featured-card {
min-height: 320px;
padding: 1.4rem;
background:
linear-gradient(140deg, rgba(10, 24, 40, 0.88), rgba(6, 30, 52, 0.75)),
linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
var(--surface-dark);
color: #fff;
}
.featured-card--image {
background:
linear-gradient(140deg, rgba(7, 16, 29, 0.9), rgba(7, 16, 29, 0.68)),
var(--surface-dark);
}
.featured-card--clean {
min-height: clamp(440px, 74svh, 760px);
padding: 0;
display: grid;
place-items: center;
}
.featured-card--clean.featured-card--image {
background:
linear-gradient(180deg, rgba(6, 14, 24, 0.14), rgba(6, 14, 24, 0.26)),
var(--surface-dark);
}
.featured-card--clean .featured-card__overlay {
inset: auto -18% -34% auto;
width: 240px;
height: 240px;
opacity: 0.16;
filter: blur(8px);
}
.featured-card__media-frame {
position: absolute;
inset: var(--carousel-frame-inset);
display: grid;
place-items: center;
overflow: hidden;
border-radius: calc(24px - var(--carousel-frame-inset));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
radial-gradient(circle at bottom left, color-mix(in srgb, var(--brand) 16%, transparent), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
rgba(10, 24, 40, 0.68);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 24px 52px rgba(8, 17, 29, 0.22);
}
.featured-card__media-frame--fallback {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%),
radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 32%),
linear-gradient(160deg, rgba(13, 44, 71, 0.98), rgba(8, 29, 51, 0.94));
}
.featured-card__media-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
/* A arte vertical precisa caber inteira no slide em mobile; por isso usamos contain. */
object-fit: contain;
object-position: center center;
transform: translateZ(0);
}
.featured-card__overlay {
position: absolute;
inset: auto -16% -28% auto;
width: 220px;
height: 220px;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%);
opacity: 0.35;
filter: blur(4px);
}
.featured-card__content,
.event-card,
.admin-event-card,
.selector-card,
.panel,
.subpanel,
.auth-card {
position: relative;
z-index: 1;
}
.featured-card__content {
display: flex;
flex-direction: column;
height: 100%;
gap: 1rem;
}
.featured-card__footer-stack,
.event-card__footer-stack {
display: grid;
gap: 0.85rem;
margin-top: auto;
}
.featured-card__footer {
display: grid;
gap: 0.85rem;
}
.featured-card h3,
.event-card h3,
.admin-event-card strong,
.selector-card strong {
margin: 0;
font-family: "Space Grotesk", sans-serif;
}
.featured-card h3 {
font-size: clamp(1.5rem, 2vw, 2rem);
max-width: 18ch;
}
.featured-card__speaker,
.event-card__speaker,
.admin-event-card span,
.selector-card span {
margin: 0;
color: inherit;
opacity: 0.82;
}
.featured-card__speaker,
.event-card__speaker {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 0.42rem 0.82rem;
border-radius: 999px;
font-weight: 800;
letter-spacing: 0.01em;
opacity: 1;
}
.featured-card__speaker {
color: #fff;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.18)), rgba(15, 23, 42, 0.34));
border: 1px solid color-mix(in srgb, var(--accent) 36%, rgba(255, 255, 255, 0.16));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 12px 24px rgba(15, 23, 42, 0.18);
}
.event-card__speaker {
margin-top: 0.35rem;
color: color-mix(in srgb, var(--accent) 20%, #0f172a 80%);
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, #ffffff 86%), rgba(255, 255, 255, 0.78));
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 10px 20px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .event-card__speaker {
color: #f8fafc;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, rgba(15, 23, 42, 0.88)), rgba(15, 23, 42, 0.74));
border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.14));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 12px 24px rgba(0, 0, 0, 0.24);
}
.featured-card__summary {
color: rgba(255, 255, 255, 0.82);
max-width: 42ch;
}
.meta-row,
.meta-grid,
.card-pills,
.inline-actions,
.toggle-row {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
}
.card-pills--featured {
align-items: flex-start;
}
.meta-row span,
.status-pill,
.tag-pill,
.room-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.58rem 1rem;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.01em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.meta-row span {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.08);
}
.tag-pill {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 88%, #111827 12%),
color-mix(in srgb, var(--accent) 66%, #0f172a 34%)
);
color: #fff;
border-color: color-mix(in srgb, var(--accent) 72%, white 28%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 12px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}
.room-pill {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.84));
color: #f8fafc;
border-color: rgba(255, 255, 255, 0.14);
}
.status-pill {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 12px 24px rgba(15, 23, 42, 0.18);
}
.status-pill--upcoming {
background: linear-gradient(135deg, #14b8a6, #0891b2);
border-color: rgba(153, 246, 228, 0.35);
}
.status-pill--soon {
background: linear-gradient(135deg, #f59e0b, #d97706);
border-color: rgba(253, 224, 71, 0.35);
}
.status-pill--live {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: rgba(187, 247, 208, 0.35);
}
.status-pill--finished {
background: linear-gradient(135deg, #ef4444, #b91c1c);
border-color: rgba(254, 202, 202, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 14px 28px rgba(185, 28, 28, 0.28);
}
.featured-card .card-pills--featured .status-pill {
min-height: 44px;
justify-content: center;
font-size: 0.95rem;
align-self: flex-start;
}
.attention-note {
display: grid;
gap: 0.35rem;
padding: 0.95rem 1rem;
border-radius: 20px;
border: 1px solid rgba(245, 158, 11, 0.34);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
color: color-mix(in srgb, #7c4b06 82%, var(--text) 18%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 14px 30px rgba(217, 119, 6, 0.12);
}
.attention-note strong {
font-family: "Space Grotesk", sans-serif;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #b45309;
}
.attention-note p {
margin: 0;
line-height: 1.5;
font-weight: 700;
}
.card-cta-bar {
display: grid;
gap: 0.5rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.inscricao-legenda {
display: block;
justify-self: center;
max-width: min(100%, 30ch);
margin: 0 auto;
padding: 0;
text-align: center;
font-size: 0.92rem;
line-height: 1.34;
font-weight: 800;
color: #1d4ed8;
color: color-mix(in srgb, #1d4ed8 82%, var(--text));
text-wrap: balance;
}
html[data-theme="dark"] .inscricao-legenda {
color: #bfdbfe;
}
.card-cta-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
padding: 0.75rem 1rem;
border-radius: 16px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
font-weight: 800;
letter-spacing: 0.01em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 18px 32px rgba(37, 99, 235, 0.24);
transition:
transform var(--motion-fast) var(--ease-premium-out),
box-shadow var(--motion-base) var(--ease-premium-soft),
filter var(--motion-fast) var(--ease-premium-out);
}
.card-cta-link:hover,
.card-cta-link:focus-visible {
transform: translateY(-1px);
filter: saturate(1.06);
}
.card-cta-link.is-disabled,
.card-cta-link[aria-disabled="true"] {
background: linear-gradient(135deg, #94a3b8, #64748b);
color: rgba(255, 255, 255, 0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 12px 24px rgba(71, 85, 105, 0.18);
cursor: not-allowed;
pointer-events: none;
filter: none;
}
.card-cta-bar--preview .card-cta-link {
pointer-events: none;
}
.featured-card .attention-note {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.26), rgba(245, 158, 11, 0.12));
border-color: rgba(251, 191, 36, 0.42);
color: #fff6d9;
}
.featured-card .attention-note strong {
color: #fbbf24;
}
html[data-theme="dark"] .event-card .attention-note,
html[data-theme="dark"] .attention-note--preview {
color: #fff6d9;
}
.timeline-list {
display: grid;
gap: 1.15rem;
content-visibility: auto;
contain-intrinsic-size: auto 1400px;
}
.timeline-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.timeline-row__time {
position: sticky;
top: 1rem;
padding: 1.1rem 1rem;
border-radius: 24px;
border: 1px solid var(--line);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 52%),
color-mix(in srgb, var(--surface-strong) 80%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 18px 34px rgba(22, 50, 79, 0.08);
}
.timeline-row__time strong {
display: block;
font-family: "Space Grotesk", sans-serif;
font-size: 1.5rem;
}
.timeline-row__time span {
color: var(--text-soft);
}
.timeline-row__cards,
.admin-card-list,
.tag-list {
display: grid;
gap: 0.9rem;
}
.timeline-row__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Perf mobile: a grade de cards so ganha pintura quando o horario entra na tela. */
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
.timeline-row__cards > :only-child,
.timeline-row__cards > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.event-card {
display: grid;
grid-template-rows: auto 1fr;
padding: 0;
height: 100%;
min-height: 100%;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)),
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
color-mix(in srgb, var(--surface-strong) 82%, transparent);
border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
box-shadow: 0 22px 46px rgba(22, 50, 79, 0.12);
--card-flip-transform: translate3d(0, 0, 0) scale(1, 1);
--card-reveal-y: 0px;
--card-lift-y: 0px;
--card-scale: 1;
transition:
transform var(--motion-slow) var(--ease-premium-soft),
opacity var(--motion-base) var(--ease-premium-out),
border-color var(--motion-base) var(--ease-premium-soft),
background-color var(--motion-base) var(--ease-premium-soft),
box-shadow var(--motion-base) var(--ease-premium-soft);
transform-origin: top left;
will-change: transform, opacity;
backface-visibility: hidden;
}
.event-card--image {
border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
box-shadow: 0 22px 48px rgba(22, 50, 79, 0.16);
}
/* Perf: cards entram com transform/opacity e a mudanca de altura e mascarada no JS via FLIP. */
.js .event-card {
opacity: 0;
--card-reveal-y: 18px;
--card-scale: 0.985;
transform:
var(--card-flip-transform)
translate3d(0, var(--card-reveal-y), 0)
translate3d(0, var(--card-lift-y), 0)
scale(var(--card-scale));
transition-delay: var(--stagger-delay, 0ms), var(--stagger-delay, 0ms), 0ms, 0ms;
}
.js .event-card.is-inview {
opacity: 1;
--card-reveal-y: 0px;
}
.js .event-card.is-focus {
--card-lift-y: -8px;
--card-scale: 1.022;
border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
box-shadow: 0 30px 64px rgba(22, 50, 79, 0.2);
}
.event-card__media {
position: relative;
min-height: 188px;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 24px 24px 0 0;
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.22), rgba(8, 17, 29, 0.08)),
radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 34%),
radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 30%),
linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 90%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
}
.event-card__media::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.18), rgba(8, 17, 29, 0.52)),
linear-gradient(125deg, rgba(255, 255, 255, 0.16), transparent 48%);
opacity: 0.78;
}
.event-card__media::after {
content: "";
position: absolute;
inset: auto -18% -32% auto;
width: 170px;
height: 170px;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 62%);
opacity: 0.4;
filter: blur(10px);
}
.event-card--image .event-card__media {
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.08), rgba(8, 17, 29, 0.02)),
var(--timeline-card-image) center/cover no-repeat;
}
.event-card--image .event-card__media::before {
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.18), rgba(8, 17, 29, 0.56)),
linear-gradient(125deg, rgba(255, 255, 255, 0.1), transparent 54%);
}
html[data-theme="dark"] .event-card--image {
border-color: color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, 0.08));
}
html[data-theme="dark"] .event-card {
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.94), rgba(8, 17, 29, 0.86)),
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
color-mix(in srgb, var(--surface-dark) 94%, transparent);
border-color: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08));
box-shadow: 0 26px 54px rgba(0, 0, 0, 0.32);
}
html[data-theme="dark"] .event-card.is-focus {
box-shadow: 0 30px 66px rgba(0, 0, 0, 0.42);
}
html[data-theme="dark"] .event-card__media {
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.24), rgba(8, 17, 29, 0.12)),
radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 34%),
radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 30%),
linear-gradient(135deg, rgba(14, 23, 39, 0.9), rgba(13, 29, 46, 0.82));
}
html[data-theme="dark"] .event-card__media::before {
background:
linear-gradient(180deg, rgba(8, 17, 29, 0.16), rgba(8, 17, 29, 0.56)),
linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 54%);
}
.event-card__media-top,
.event-card__media-bottom {
position: relative;
z-index: 1;
}
.event-card__media-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1rem 0;
}
.event-card__time-pill {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0.4rem 0.78rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: #16324f;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 10px 22px rgba(8, 17, 29, 0.16);
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
}
html[data-theme="dark"] .event-card__time-pill {
background: rgba(8, 17, 29, 0.78);
color: #f3f6fb;
border-color: rgba(255, 255, 255, 0.1);
}
.event-card .card-pills {
min-width: 0;
align-items: flex-start;
}
.event-card__body {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1rem;
height: 100%;
}
.event-card__summary-block {
display: grid;
gap: 0.7rem;
}
.event-card__summary-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.event-card__summary-head h3 {
margin: 0;
}
.room-pill--inline {
min-height: 38px;
padding: 0.42rem 0.82rem;
flex: 0 0 auto;
align-self: flex-start;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}
.event-card h3 {
font-size: clamp(1.2rem, 2vw, 1.6rem);
line-height: 1.15;
}
.event-card__speaker {
width: fit-content;
}
.event-card__summary {
margin: 0;
font-size: 0.98rem;
line-height: 1.55;
color: var(--text-soft);
}
.event-card__quick-meta {
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
}
.event-card__quick-meta div {
min-width: 0;
padding: 0.55rem 0.65rem;
border: 1px solid rgba(0, 83, 155, 0.12);
border-radius: 13px;
background: #f8fbff;
}
.event-card__quick-meta dt {
margin: 0 0 0.16rem;
color: #607086;
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.event-card__quick-meta dd {
margin: 0;
color: #0f2f4b;
font-size: 0.84rem;
font-weight: 900;
line-height: 1.25;
overflow-wrap: anywhere;
}
.event-card__expand {
display: grid;
margin-top: auto;
}
.event-card__expand-inner {
display: grid;
gap: 0.85rem;
min-height: 0;
}
.js .event-card__expand-inner {
opacity: 1;
transform: none;
}
.event-card__facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.event-card__fact {
display: grid;
gap: 0.2rem;
padding: 0.78rem 0.82rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.52)),
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%);
}
.event-card__fact span {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-soft);
font-weight: 700;
}
.event-card__fact strong {
font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
line-height: 1.15;
}
html[data-theme="dark"] .event-card__fact {
background:
linear-gradient(180deg, rgba(15, 28, 49, 0.88), rgba(10, 20, 35, 0.74)),
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 46%);
border-color: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.08));
}
.event-card .status-pill {
min-width: 0;
width: fit-content;
max-width: 100%;
justify-content: center;
align-self: flex-start;
margin-left: auto;
box-shadow: 0 14px 26px rgba(8, 17, 29, 0.18);
}
.tabs-nav {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
}
.tabs-nav--admin {
margin-top: 0;
}
.admin-workspace {
display: grid;
gap: 1rem;
margin-top: 1rem;
}
.tab-link,
.button,
.theme-toggle {
border: 1px solid var(--line);
border-radius: 999px;
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-base) var(--ease-premium-soft),
background-color var(--motion-base) var(--ease-premium-soft),
color var(--motion-base) var(--ease-premium-soft);
}
.tab-link {
padding: 0.85rem 1.1rem;
background: var(--bg-muted);
color: var(--text-soft);
font-weight: 700;
}
.tab-link.is-active,
.tab-link:hover {
color: var(--text);
border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
transform: translateY(-1px);
}
.admin-grid {
grid-template-columns: minmax(0, 1.95fr) minmax(300px, 0.82fr);
align-items: start;
gap: 1.15rem;
}
.panel,
.subpanel,
.auth-card {
padding: 1.25rem;
}
.admin-main,
.admin-side {
display: grid;
gap: 1rem;
min-width: 0;
}
.admin-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.form-steps {
display: grid;
gap: 1rem;
}
.form-step-rail {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.form-step-pill {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0.4rem 0.78rem;
border-radius: 999px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
font-family: "Space Grotesk", sans-serif;
font-size: 0.84rem;
font-weight: 700;
color: var(--text-soft);
}
.form-step {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 24px;
background: color-mix(in srgb, var(--surface-strong) 64%, transparent);
}
.form-step--accent {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
color-mix(in srgb, var(--surface-strong) 66%, transparent);
}
.form-step__header {
display: grid;
gap: 0.35rem;
margin-bottom: 1rem;
}
.form-step__header h3 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 1.18rem;
}
.form-step__header p {
margin: 0;
color: var(--text-soft);
line-height: 1.5;
}
.admin-form-grid--step {
gap: 1rem;
}
.appearance-form {
align-items: start;
}
.field-hint {
margin: 0;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-radius: 18px;
background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
color: var(--text-soft);
line-height: 1.5;
}
.field {
display: grid;
gap: 0.45rem;
}
.field span {
font-weight: 700;
}
.field input,
.field textarea,
.field select {
width: 100%;
border: 1px solid var(--line);
border-radius: 16px;
background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
color: var(--text);
padding: 0.88rem 1rem;
outline: none;
}
.field textarea {
min-height: 132px;
resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.field small {
color: var(--text-soft);
}
.appearance-preview {
display: grid;
place-items: center;
min-height: 152px;
padding: 0.75rem;
background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}
.appearance-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.appearance-preview--hero {
min-height: 216px;
}
.appearance-preview--hero-mobile {
width: min(220px, 100%);
aspect-ratio: 9 / 16;
min-height: 0;
place-self: start;
}
.appearance-preview--icon {
width: min(152px, 100%);
aspect-ratio: 1;
min-height: 0;
place-self: start;
}
.appearance-preview--icon img {
object-fit: contain;
padding: 0.9rem;
}
.appearance-placeholder {
display: grid;
gap: 0.45rem;
place-items: center;
padding: 1rem;
text-align: center;
color: var(--text-soft);
}
.appearance-placeholder strong {
color: var(--text);
font-family: "Space Grotesk", sans-serif;
}
.appearance-preview__brand {
width: 72px;
height: 72px;
}
.field--wide {
grid-column: 1 / -1;
}
.field--file input {
padding: 0.6rem;
}
.media-editor {
gap: 0.8rem;
}
.media-upload-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.media-upload-card {
align-content: start;
padding: 1rem;
border: 1px solid var(--line);
border-radius: 22px;
background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
}
.media-upload-card > span {
font-family: "Space Grotesk", sans-serif;
font-size: 0.98rem;
}
.media-upload-card input[type="file"] {
min-height: 56px;
padding: 0.8rem 0.9rem;
}
.media-editor__hint {
color: var(--text-soft);
}
.upload-preview {
position: relative;
display: grid;
place-items: center;
min-height: 184px;
overflow: hidden;
border-radius: 20px;
border: 1px solid var(--line);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
color-mix(in srgb, var(--surface-strong) 78%, transparent);
}
.upload-preview img {
width: 100%;
height: 100%;
min-height: 184px;
object-fit: cover;
}
.upload-preview__placeholder {
display: grid;
gap: 0.45rem;
padding: 1rem;
text-align: center;
color: var(--text-soft);
}
.upload-preview__placeholder strong {
color: var(--text);
font-family: "Space Grotesk", sans-serif;
}
.toggle-field {
display: flex;
align-items: center;
gap: 0.75rem;
border: 1px solid var(--line);
border-radius: 20px;
padding: 0.95rem 1rem;
background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
}
.toggle-field--attention {
border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.toggle-field--cta {
border-color: color-mix(in srgb, #2563eb 44%, var(--line));
background: color-mix(in srgb, #2563eb 12%, transparent);
}
.toggle-field input {
width: 18px;
height: 18px;
}
.form-actions {
display: flex;
justify-content: flex-start;
}
.empty-state--compact .form-actions {
justify-content: center;
}
.empty-state__cta.button--ghost {
border-color: color-mix(in srgb, #60a5fa 34%, var(--line));
background:
linear-gradient(180deg, color-mix(in srgb, #eff6ff 92%, transparent), color-mix(in srgb, #dbeafe 74%, transparent));
color: color-mix(in srgb, #1d4ed8 78%, var(--text));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 10px 22px rgba(96, 165, 250, 0.12);
}
.empty-state__cta.button--ghost:hover,
.empty-state__cta.button--ghost:focus-visible {
border-color: color-mix(in srgb, #3b82f6 52%, var(--line));
background:
linear-gradient(180deg, color-mix(in srgb, #eff6ff 96%, transparent), color-mix(in srgb, #bfdbfe 78%, transparent));
}
html[data-theme="dark"] .empty-state__cta.button--ghost {
border-color: color-mix(in srgb, #60a5fa 42%, var(--line));
background:
linear-gradient(180deg, rgba(59, 130, 246, 0.24), rgba(56, 189, 248, 0.14));
color: #eff6ff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 12px 24px rgba(37, 99, 235, 0.16);
}
html[data-theme="dark"] .empty-state__cta.button--ghost:hover,
html[data-theme="dark"] .empty-state__cta.button--ghost:focus-visible {
border-color: color-mix(in srgb, #93c5fd 54%, var(--line));
background:
linear-gradient(180deg, rgba(59, 130, 246, 0.3), rgba(56, 189, 248, 0.18));
}
.button,
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 46px;
padding: 0.75rem 1.2rem;
background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
color: var(--text);
font-weight: 700;
}
.hero-surface--schedule-image .button,
.hero-surface--schedule-image .theme-toggle {
background: rgba(8, 17, 29, 0.42);
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px);
}
.hero-surface--schedule-image .button--ghost {
background: rgba(8, 17, 29, 0.3);
}
.hero-surface--schedule-image .brand__mark--image {
background: transparent;
box-shadow: none;
}
.hero-surface--schedule-image .brand__mark--image img {
padding: 0;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
}
.theme-toggle {
width: 46px;
min-width: 46px;
padding: 0;
}
.theme-toggle__icon {
display: none;
width: 20px;
height: 20px;
}
html[data-theme="light"] .theme-toggle__icon--light,
html[data-theme="dark"] .theme-toggle__icon--dark {
display: block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.button:hover,
.theme-toggle:hover,
.button:focus-visible,
.theme-toggle:focus-visible {
transform: translateY(-1px);
}
.button--primary {
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
color: #fff;
border-color: transparent;
}
.button--danger {
background: color-mix(in srgb, var(--danger) 18%, transparent);
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}
.button--ghost {
background: transparent;
}
.button--full {
width: 100%;
}
.button:disabled,
.button[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.58;
transform: none;
box-shadow: none;
}
.selector-grid {
grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
align-items: start;
gap: 1.25rem;
}
.admin-filter-panel {
display: grid;
gap: 0.9rem;
min-width: 0;
}
.admin-filter-panel--delete {
gap: 1rem;
}
.admin-filter-form {
display: grid;
gap: 0.9rem;
}
.admin-filter-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.admin-filter-field {
margin: 0;
}
.admin-filter-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.admin-filter-actions .button {
min-width: 0;
}
.admin-filter-help {
display: block;
color: var(--text-soft);
}
.admin-filter-meta {
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 1.2rem;
color: var(--text-soft);
}
.admin-filter-spinner {
width: 0.95rem;
height: 0.95rem;
border: 2px solid color-mix(in srgb, var(--brand) 22%, rgba(255, 255, 255, 0.16));
border-top-color: var(--brand);
border-radius: 999px;
animation: admin-filter-spin 0.75s linear infinite;
flex: 0 0 auto;
}
.admin-filter-spinner[hidden] {
display: none;
}
.admin-filter-panel.is-filter-loading .selector-list,
.admin-filter-panel.is-filter-loading .delete-grid {
opacity: 0.72;
}
.admin-filter-panel [data-admin-filter-item].is-filter-hidden {
display: none !important;
}
.admin-filter-empty[hidden] {
display: none;
}
.selector-list {
display: grid;
gap: 0.8rem;
max-height: 720px;
overflow: auto;
padding-right: 0.3rem;
min-width: 0;
}
.selector-card {
display: grid;
gap: 0.35rem;
padding: 1rem;
min-height: 86px;
align-content: center;
overflow-wrap: anywhere;
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-base) var(--ease-premium-soft),
background-color var(--motion-base) var(--ease-premium-soft);
}
.selector-card strong {
font-size: 1.02rem;
line-height: 1.3;
}
.selector-card span {
display: block;
line-height: 1.45;
}
.selector-card.is-active {
border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
transform: translateY(-2px);
}
.selector-card.is-filter-match,
.admin-event-card.is-filter-match {
border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
background: color-mix(in srgb, var(--surface-elevated) 82%, rgba(82, 212, 197, 0.06));
}
.selector-card.is-filter-focus,
.admin-event-card.is-filter-focus {
border-color: color-mix(in srgb, var(--brand) 72%, var(--line));
background:
linear-gradient(180deg, rgba(82, 212, 197, 0.14), rgba(82, 212, 197, 0.04)),
color-mix(in srgb, var(--surface-elevated) 88%, rgba(255, 255, 255, 0.02));
box-shadow:
0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent),
0 22px 38px rgba(20, 69, 99, 0.22);
transform: translateY(-4px) scale(1.015);
}
.selector-card.is-filter-focus::after,
.admin-event-card.is-filter-focus::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.delete-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.subpanel h3,
.auth-card h2 {
margin-top: 0;
}
.admin-event-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
transition:
transform var(--motion-fast) var(--ease-premium-out),
border-color var(--motion-base) var(--ease-premium-soft),
background-color var(--motion-base) var(--ease-premium-soft),
box-shadow var(--motion-base) var(--ease-premium-soft),
opacity var(--motion-fast) var(--ease-premium-soft);
}
.admin-event-card--removed {
border-style: dashed;
}
@keyframes admin-filter-spin {
to {
transform: rotate(360deg);
}
}
.tag-form,
.tag-form--new {
display: grid;
gap: 0.85rem;
}
.color-field {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.8rem;
align-items: center;
}
.color-field__picker {
width: 58px;
min-width: 58px;
height: 58px;
padding: 0.25rem;
border-radius: 18px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
cursor: pointer;
}
.color-field__picker::-webkit-color-swatch-wrapper {
padding: 0;
}
.color-field__picker::-webkit-color-swatch {
border: 0;
border-radius: 14px;
}
.color-field__picker::-moz-color-swatch {
border: 0;
border-radius: 14px;
}
.color-field__value {
display: grid;
gap: 0.35rem;
}
.tag-editor {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 20px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
}
.inline-actions {
align-items: center;
}
.inline-actions--stretch > * {
flex: 1;
}
.current-image {
display: grid;
gap: 0.55rem;
padding: 0.85rem;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
overflow: hidden;
border-radius: 22px;
}
.current-image__label {
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
}
.image-preview-grid {
display: grid;
gap: 0.9rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.preview-stack {
display: grid;
gap: 0.9rem;
}
.current-image img {
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
border-radius: 18px;
}
.attention-note--preview {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.1));
border-color: rgba(245, 158, 11, 0.38);
}
body.page-event-dashboard,
body.page-event-registration {
background:
linear-gradient(135deg, rgba(15, 118, 110, 0.16), transparent 34%),
linear-gradient(180deg, #121820 0%, #0e131a 100%);
color: #edf2f7;
}
body.page-event-dashboard::before,
body.page-event-registration::before {
opacity: 0.18;
}
.event-admin-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
}
.event-admin-sidebar {
position: sticky;
top: 0;
align-self: start;
min-height: 100vh;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 1rem;
padding: 1.2rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(8, 12, 18, 0.88);
backdrop-filter: blur(18px);
}
.event-admin-sidebar__brand {
align-items: center;
}
.event-admin-profile,
.event-admin-panel,
.event-metric-card,
.checkin-card,
.registration-panel {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(18, 24, 32, 0.78);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(16px);
}
.event-admin-profile {
display: grid;
gap: 0.45rem;
padding: 0.95rem;
border-radius: 18px;
}
.event-admin-profile small,
.event-admin-menu a,
.event-metric-card span,
.managed-event-card dt,
.ticket-details dt {
color: rgba(237, 242, 247, 0.68);
}
.role-badge,
.managed-status-pill {
width: fit-content;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0.28rem 0.62rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.13);
background: rgba(255, 255, 255, 0.08);
color: #edf2f7;
font-size: 0.78rem;
font-weight: 800;
}
.role-badge--dev {
background: rgba(79, 209, 197, 0.18);
color: #81e6d9;
}
.role-badge--manager {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
}
.role-badge--checker {
background: rgba(96, 165, 250, 0.18);
color: #93c5fd;
}
.event-admin-menu {
display: grid;
align-content: start;
gap: 0.35rem;
}
.event-admin-menu a {
min-height: 42px;
display: flex;
align-items: center;
padding: 0.65rem 0.78rem;
border-radius: 14px;
font-weight: 800;
}
.event-admin-menu a:hover,
.event-admin-menu a.is-active {
color: #f8fafc;
background: rgba(255, 255, 255, 0.09);
}
.event-admin-sidebar__logout {
display: grid;
}
.event-admin-sidebar__links {
display: grid;
gap: 0.35rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.event-admin-sidebar__links a,
.event-admin-tab-button {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.65rem 0.78rem;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: rgba(237, 242, 247, 0.7);
text-align: left;
font-weight: 800;
}
.event-admin-tab-button:hover,
.event-admin-tab-button.is-active,
.event-admin-sidebar__links a:hover {
color: #f8fafc;
border-color: rgba(79, 209, 197, 0.28);
background: rgba(79, 209, 197, 0.1);
}
.event-admin-tab-button.is-active::after {
content: "";
width: 7px;
height: 7px;
margin-left: auto;
border-radius: 999px;
background: #4fd1c5;
}
.event-admin-main {
width: min(1440px, 100%);
display: grid;
gap: 1rem;
padding: 1.35rem;
}
.event-admin-tab-panel {
display: grid;
gap: 1rem;
}
.event-admin-tab-panel[hidden] {
display: none;
}
.event-admin-topbar,
.event-section-bar,
.checkin-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.event-admin-topbar h1,
.event-admin-panel h2,
.checkin-card h3,
.registration-panel h1,
.registration-panel h2,
.registration-hero h1 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
letter-spacing: 0;
}
.event-admin-topbar h1 {
font-size: clamp(1.85rem, 4vw, 3.2rem);
}
.event-metrics-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.85rem;
}
.event-metrics-grid--sketch {
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(220px, 0.62fr));
}
.event-metric-card {
display: grid;
gap: 0.45rem;
padding: 1rem;
border-radius: 6px;
}
.event-metric-card strong {
font-size: clamp(1.8rem, 3.2vw, 2.65rem);
line-height: 1;
}
.event-metric-card--active {
border-color: rgba(52, 211, 153, 0.38);
}
.event-metric-card--inactive {
border-color: rgba(248, 113, 113, 0.32);
}
.event-metric-card--checkin {
border-color: rgba(96, 165, 250, 0.36);
}
.event-admin-panel {
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 6px;
}
.event-overview-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 0.9rem;
}
.event-overview-focus,
.event-overview-mini {
min-height: 184px;
align-content: start;
}
.event-overview-focus p {
margin: 0;
color: rgba(237, 242, 247, 0.68);
}
.event-overview-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
margin: 0;
}
.event-overview-stats div {
display: grid;
gap: 0.12rem;
padding: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
}
.event-overview-stats dt {
color: rgba(237, 242, 247, 0.68);
}
.event-overview-stats dd {
margin: 0;
font-size: 1.55rem;
font-weight: 900;
}
.event-overview-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.event-admin-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.95rem;
}
.event-admin-form--compact {
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 0.7fr) auto;
align-items: end;
}
.event-feature-toggles {
display: grid;
gap: 0.65rem;
grid-column: 1 / -1;
}
.toggle-field {
display: flex;
align-items: center;
gap: 0.55rem;
min-height: 42px;
padding: 0.6rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
font-weight: 800;
}
.event-color-legend {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
color: rgba(237, 242, 247, 0.7);
font-weight: 800;
}
.event-color-legend span {
display: inline-flex;
align-items: center;
gap: 0.32rem;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #64748b;
}
.legend-dot--active {
background: #34d399;
}
.legend-dot--draft {
background: #fbbf24;
}
.legend-dot--inactive {
background: #f87171;
}
.legend-dot--checkin {
background: #60a5fa;
}
.managed-event-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.9rem;
}
.managed-event-card {
position: relative;
isolation: isolate;
min-height: 220px;
overflow: hidden;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.13);
background: #171f2a;
}
.managed-event-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--event-bg);
background-position: center;
background-size: cover;
opacity: 0.7;
}
.managed-event-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(8, 12, 18, 0.32), rgba(8, 12, 18, 0.88)),
rgba(15, 23, 42, 0.5);
}
.managed-event-card.is-selected {
outline: 2px solid rgba(79, 209, 197, 0.72);
outline-offset: 2px;
}
.managed-event-card.is-active {
border-color: rgba(52, 211, 153, 0.5);
}
.managed-event-card.is-draft {
border-color: rgba(251, 191, 36, 0.42);
}
.managed-event-card.is-inactive {
border-color: rgba(248, 113, 113, 0.42);
}
.managed-event-card.is-checkin {
border-color: rgba(96, 165, 250, 0.58);
}
.managed-event-card__content {
min-height: inherit;
display: grid;
align-content: space-between;
gap: 1rem;
padding: 1rem;
}
.managed-event-card__head,
.managed-event-card__actions,
.event-registration-row,
.checkin-person-row,
.team-user-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
}
.managed-event-card h3 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 1.22rem;
}
.managed-event-card__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
margin: 0;
}
.managed-event-card__stats div {
display: grid;
gap: 0.12rem;
padding: 0.62rem;
border-radius: 8px;
background: rgba(0, 0, 0, 0.28);
}
.managed-event-card dd {
margin: 0;
font-size: 1.25rem;
font-weight: 900;
}
.managed-event-card__actions {
flex-wrap: wrap;
justify-content: flex-start;
}
.managed-event-card__actions a {
min-height: 36px;
display: inline-flex;
align-items: center;
padding: 0.46rem 0.68rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.12);
font-weight: 900;
}
.managed-status-pill.is-checkin,
.managed-event-card.is-checkin .managed-status-pill {
background: rgba(96, 165, 250, 0.18);
color: #bfdbfe;
}
.event-search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 0.85rem;
}
.event-registration-table,
.raffle-history,
.team-user-list,
.checkin-manual-list {
display: grid;
gap: 0.65rem;
}
.event-registration-row,
.raffle-history article,
.team-user-row,
.checkin-person-row {
min-height: 64px;
padding: 0.78rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}
.event-registration-row strong,
.checkin-person-row strong,
.team-user-row strong,
.raffle-history strong {
display: block;
}
.event-registration-row span,
.checkin-person-row span,
.raffle-history span {
color: rgba(237, 242, 247, 0.68);
}
.checkin-grid {
display: grid;
grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
gap: 0.9rem;
}
.checkin-card {
display: grid;
align-content: start;
gap: 0.85rem;
padding: 1rem;
border-radius: 18px;
}
.checkin-scanner {
display: grid;
gap: 0.72rem;
}
.checkin-scanner video {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: #05070a;
}
.checkin-scanner p {
margin: 0;
color: rgba(237, 242, 247, 0.72);
}
.raffle-panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.06);
}
.raffle-panel p {
margin: 0;
color: rgba(237, 242, 247, 0.74);
}
.registration-shell {
width: min(1120px, calc(100% - 2rem));
display: grid;
gap: 1rem;
margin: 0 auto;
padding: 1rem 0 3rem;
}
.registration-hero {
position: relative;
isolation: isolate;
min-height: clamp(220px, 32vw, 360px);
display: flex;
align-items: flex-end;
overflow: hidden;
padding: clamp(1.1rem, 3vw, 2rem);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #17202b;
}
.registration-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--registration-bg);
background-position: center;
background-size: cover;
opacity: 0.7;
}
.registration-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(8, 12, 18, 0.12), rgba(8, 12, 18, 0.88));
}
.registration-hero__content {
max-width: 720px;
display: grid;
gap: 0.5rem;
}
.registration-hero h1 {
color: #ffffff;
font-size: clamp(2rem, 6vw, 4.6rem);
line-height: 0.96;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
}
.registration-hero p {
margin: 0;
color: rgba(237, 242, 247, 0.78);
font-size: 1.04rem;
}
.registration-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
align-items: start;
gap: 1rem;
}
.registration-panel {
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 18px;
}
.registration-panel--center {
min-height: 60vh;
place-content: center;
justify-items: start;
}
.registration-qr {
display: grid;
place-items: center;
padding: 1rem;
border-radius: 16px;
background: #ffffff;
}
.registration-qr img {
width: min(280px, 100%);
aspect-ratio: 1;
}
.local-qr {
display: grid;
place-items: center;
overflow: hidden;
background: #ffffff;
color: #334155;
}
.local-qr svg {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
shape-rendering: crispEdges;
}
.local-qr--registration {
width: min(280px, 100%);
}
.local-qr--ticket {
width: 168px;
}
.local-qr--modal {
width: min(420px, 100%);
}
.local-qr.is-unavailable {
min-height: 160px;
padding: 1rem;
border: 1px dashed #cbd5e1;
border-radius: 12px;
text-align: center;
}
.local-qr__fallback {
padding: 1rem;
font-size: 0.85rem;
text-align: center;
}
.ticket-details {
display: grid;
gap: 0.55rem;
margin: 0;
}
.ticket-details div {
display: grid;
gap: 0.14rem;
padding: 0.72rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
}
.ticket-details dd {
margin: 0;
font-weight: 900;
}
/* Dashboard de eventos alinhado as telas de referencia. */
body.page-event-dashboard {
--event-bg: #090a0d;
--event-panel: #191a1f;
--event-panel-strong: #1f2026;
--event-line: rgba(255, 255, 255, 0.1);
--event-muted: #aeb3c2;
--event-soft: #737887;
--event-blue: #2f80ed;
--event-green: #00d26a;
--event-orange: #ff7a18;
background: var(--event-bg);
color: #ffffff;
}
body.page-event-dashboard::before {
display: none;
}
body.page-event-dashboard .event-admin-shell {
grid-template-columns: 278px minmax(0, 1fr);
background: var(--event-bg);
}
body.page-event-dashboard .event-admin-sidebar {
padding: 0;
gap: 0;
border-right-color: var(--event-line);
background: #0b0c0f;
backdrop-filter: none;
}
body.page-event-dashboard .event-admin-profile {
min-height: 80px;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0.9rem;
border: 0;
border-bottom: 1px solid var(--event-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.event-admin-avatar,
.checkin-guide-card__avatar {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 999px;
background: linear-gradient(135deg, #27456b, #0f766e);
color: #ffffff;
font-weight: 900;
}
body.page-event-dashboard .event-admin-profile strong {
display: block;
color: #ffffff;
line-height: 1.1;
}
body.page-event-dashboard .event-admin-profile small {
display: block;
margin-top: 0.28rem;
color: #bfc6d8;
}
body.page-event-dashboard .role-badge {
min-height: 24px;
padding: 0.18rem 0.58rem;
border-radius: 8px;
}
body.page-event-dashboard .event-admin-menu {
padding: 1.1rem 0.7rem;
gap: 0.48rem;
}
body.page-event-dashboard .event-admin-tab-button,
body.page-event-dashboard .event-admin-sidebar__links a {
min-height: 39px;
gap: 0.68rem;
padding: 0.58rem 0.82rem;
border: 0;
border-radius: 7px;
background: transparent;
color: #c5cad8;
}
body.page-event-dashboard .event-admin-tab-button:hover,
body.page-event-dashboard .event-admin-tab-button.is-active {
background: #2a2b31;
color: #ffffff;
}
body.page-event-dashboard .event-admin-tab-button.is-active::after {
display: none;
}
.event-admin-menu-icon {
width: 1.7rem;
color: #a4a8b5;
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
}
.event-admin-menu-group {
display: grid;
gap: 0.45rem;
}
.event-admin-submenu {
display: grid;
gap: 0.28rem;
padding-left: 2.45rem;
}
.event-admin-submenu button {
min-height: 34px;
padding: 0.35rem 0.75rem;
border: 0;
border-radius: 7px;
background: transparent;
color: #c5cad8;
text-align: left;
}
.event-admin-submenu button.is-active,
.event-admin-submenu button:hover {
color: #ffffff;
background: #191a1f;
}
body.page-event-dashboard .event-admin-sidebar__links {
margin-top: auto;
padding: 0.8rem 0.7rem;
border-top-color: var(--event-line);
}
body.page-event-dashboard .event-admin-sidebar__logout {
padding: 0 0.7rem 1rem;
}
body.page-event-dashboard .event-admin-main {
width: 100%;
gap: 0;
padding: 0;
}
body.page-event-dashboard .event-admin-topbar {
min-height: 58px;
justify-content: flex-end;
padding: 0 1.55rem;
border-bottom: 1px solid var(--event-line);
background: #0b0c0f;
}
.event-role-switch {
display: flex;
align-items: center;
gap: 0.55rem;
color: #8f94a3;
}
.event-role-chip {
min-width: 48px;
min-height: 29px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.28rem 0.72rem;
border-radius: 999px;
background: #1a1b20;
color: #8f94a3;
font-weight: 800;
}
.event-role-chip.is-active {
border: 1px solid rgba(47, 128, 237, 0.58);
background: rgba(47, 128, 237, 0.22);
color: #d7e7ff;
}
.event-admin-content {
width: min(1326px, calc(100% - 3rem));
display: grid;
gap: 2.15rem;
margin: 0 auto;
padding: 3.85rem 0 3rem;
}
body.page-event-dashboard .event-metrics-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
}
body.page-event-dashboard .event-metric-card,
body.page-event-dashboard .event-admin-panel,
body.page-event-dashboard .checkin-quick-card,
body.page-event-dashboard .checkin-participant-guide,
body.page-event-dashboard .checkin-status-card {
border: 1px solid var(--event-line);
background: var(--event-panel);
box-shadow: none;
backdrop-filter: none;
}
body.page-event-dashboard .event-metric-card {
min-height: 112px;
padding: 1.35rem 1.3rem;
border-radius: 9px;
}
body.page-event-dashboard .event-metric-card span {
color: #bfc6d8;
font-size: 0.98rem;
}
body.page-event-dashboard .event-metric-card strong {
margin-top: 0.35rem;
font-size: 1.72rem;
letter-spacing: 0;
}
.event-directory {
display: grid;
gap: 2.2rem;
}
.event-directory-toolbar {
display: grid;
grid-template-columns: minmax(260px, 1fr) 158px 176px auto;
align-items: center;
gap: 0.82rem;
padding: 1.15rem 1.2rem;
border: 1px solid var(--event-line);
border-radius: 9px;
background: #121318;
}
.event-directory-search {
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 40px;
padding: 0 0.85rem;
border: 1px solid var(--event-line);
border-radius: 7px;
background: #090a0d;
}
.event-directory-search input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: #ffffff;
}
.event-search-icon,
.checkin-camera-icon,
.checkin-camera-button__icon {
position: relative;
display: inline-block;
}
.event-search-icon {
width: 14px;
height: 14px;
border: 2px solid #777d8d;
border-radius: 999px;
}
.event-search-icon::after {
content: "";
position: absolute;
right: -6px;
bottom: -4px;
width: 7px;
height: 2px;
border-radius: 999px;
background: #777d8d;
transform: rotate(45deg);
}
.event-directory-toolbar select {
min-height: 40px;
border: 1px solid var(--event-line);
border-radius: 7px;
background: #090a0d;
color: #ffffff;
}
.event-directory-toolbar .button {
min-height: 40px;
border-radius: 8px;
background: #f3f4f8;
color: #050609;
}
body.page-event-dashboard .event-section-bar {
align-items: end;
padding-bottom: 1rem;
border-bottom: 1px solid var(--event-line);
}
body.page-event-dashboard .event-section-bar h2 {
margin: 0;
font-size: 1.35rem;
}
body.page-event-dashboard .managed-event-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.3rem;
}
body.page-event-dashboard .managed-event-card {
min-height: 352px;
border-radius: 10px;
background: #15161b;
}
body.page-event-dashboard .managed-event-card::after {
background:
linear-gradient(180deg, rgba(11, 12, 15, 0.18), rgba(11, 12, 15, 0.88)),
rgba(18, 19, 24, 0.82);
}
body.page-event-dashboard .managed-event-card.is-active {
border-color: rgba(47, 128, 237, 0.74);
}
body.page-event-dashboard .managed-event-card.is-checkin {
border-color: rgba(0, 210, 106, 0.48);
}
body.page-event-dashboard .managed-event-card.is-draft {
border-color: rgba(255, 122, 24, 0.52);
}
body.page-event-dashboard .managed-event-card__content {
padding: 1.2rem;
}
body.page-event-dashboard .managed-event-card h3 {
font-size: 1.25rem;
line-height: 1.24;
}
.managed-event-card__meta {
display: grid;
gap: 0.65rem;
color: #bfc6d8;
}
.managed-event-card__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-top: 0.85rem;
border-top: 1px solid var(--event-line);
}
body.page-event-dashboard .managed-event-card__stats div {
border: 1px solid var(--event-line);
border-radius: 7px;
background: #08090c;
}
body.page-event-dashboard .managed-event-card__actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.35rem;
}
body.page-event-dashboard .managed-event-card__actions a {
min-height: 40px;
justify-content: center;
padding: 0.35rem;
border-radius: 7px;
background: transparent;
color: #c9cedb;
font-size: 0.72rem;
}
body.page-event-dashboard .managed-event-card__actions a.is-check-action {
color: var(--event-green);
}
.managed-event-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.managed-event-card__footer span {
padding: 0.28rem 0.56rem;
border-radius: 8px;
background: rgba(47, 128, 237, 0.24);
color: #bcd7ff;
font-weight: 800;
}
.managed-event-card__manage {
min-height: 36px;
display: inline-flex;
align-items: center;
padding: 0.45rem 0.95rem;
border-radius: 8px;
background: #f3f4f8;
color: #08090c;
font-weight: 900;
}
.managed-event-card.is-filter-hidden,
.checkin-person-row.is-filter-hidden,
.checkin-guide-card.is-filter-hidden {
display: none;
}
.checkin-page-heading {
display: grid;
gap: 0.72rem;
}
.checkin-page-heading h1 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 1.7rem;
}
.checkin-page-heading p {
margin: 0;
color: #bfc6d8;
}
.checkin-workspace {
display: grid;
grid-template-columns: minmax(420px, 492px) minmax(360px, 1fr);
align-items: start;
gap: 1.5rem;
}
.checkin-main-column {
display: grid;
gap: 4rem;
}
.checkin-quick-card {
overflow: hidden;
border-radius: 10px;
}
.checkin-quick-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.3rem 1.18rem 1rem;
}
.checkin-quick-card__title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.checkin-quick-card__title h2 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 1.28rem;
}
.checkin-qr-mark {
color: var(--event-green);
font-weight: 900;
}
.checkin-online-pill {
min-height: 26px;
display: inline-flex;
align-items: center;
padding: 0.22rem 0.66rem;
border-radius: 8px;
background: rgba(255, 122, 24, 0.16);
color: #ffbf91;
font-weight: 900;
}
.checkin-online-pill.is-online {
background: rgba(0, 210, 106, 0.16);
color: var(--event-green);
}
.checkin-mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.25rem;
margin: 0 1.18rem 1rem;
padding: 0.25rem;
border: 1px solid var(--event-line);
border-radius: 7px;
background: #191a1f;
}
.checkin-mode-tabs button {
min-height: 44px;
border: 0;
border-radius: 6px;
background: transparent;
color: #c8cede;
}
.checkin-mode-tabs button.is-active {
background: #2a2b31;
color: #ffffff;
}
.checkin-mode-panel {
border-top: 1px solid var(--event-line);
}
.checkin-mode-panel[hidden] {
display: none;
}
.checkin-scanner {
display: grid;
gap: 0.95rem;
padding: 1.6rem 1.55rem 1.55rem;
}
.checkin-scanner video {
width: min(244px, 100%);
aspect-ratio: 1;
justify-self: center;
border-radius: 12px;
}
.checkin-camera-placeholder {
width: min(244px, 100%);
aspect-ratio: 1;
justify-self: center;
display: grid;
place-items: center;
align-content: center;
gap: 1rem;
padding: 1rem;
border: 2px dashed rgba(162, 166, 181, 0.44);
border-radius: 13px;
color: #c8cede;
text-align: center;
}
.checkin-scanner.is-scanning .checkin-camera-placeholder {
display: none;
}
.checkin-camera-icon {
width: 38px;
height: 28px;
border: 4px solid #858a99;
border-radius: 6px;
}
.checkin-camera-icon::before {
content: "";
position: absolute;
left: 10px;
top: -9px;
width: 14px;
height: 8px;
border: 4px solid #858a99;
border-bottom: 0;
border-radius: 6px 6px 0 0;
}
.checkin-camera-icon::after {
content: "";
position: absolute;
left: 11px;
top: 5px;
width: 10px;
height: 10px;
border: 4px solid #858a99;
border-radius: 999px;
}
.checkin-scanner input[data-checkin-token] {
min-height: 42px;
border: 1px solid var(--event-line);
border-radius: 7px;
background: #090a0d;
color: #ffffff;
}
.checkin-camera-button {
width: 100%;
min-height: 44px;
border-radius: 8px;
background: #f3f4f8;
color: #050609;
}
.checkin-manual-search,
.checkin-manual-list {
margin: 1rem 1.18rem;
}
.checkin-manual-search {
display: grid;
gap: 0.45rem;
color: #c8cede;
}
.checkin-manual-search input {
min-height: 42px;
border: 1px solid var(--event-line);
border-radius: 7px;
background: #090a0d;
color: #ffffff;
}
.checkin-status-section {
display: grid;
gap: 0.9rem;
}
.checkin-status-section h2 {
margin: 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--event-line);
font-family: "Space Grotesk", sans-serif;
font-size: 1.15rem;
}
.checkin-status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem;
}
.checkin-status-card {
min-height: 94px;
display: grid;
align-content: center;
gap: 0.5rem;
padding: 1.05rem 1.18rem;
border-radius: 9px;
}
.checkin-status-card span {
color: #858a99;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.checkin-status-card strong {
color: #ffffff;
font-size: 1.62rem;
}
.checkin-status-card--confirmed strong {
color: var(--event-green);
}
.checkin-participant-guide {
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 10px;
}
.checkin-participant-guide header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
}
.checkin-participant-guide h2 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 1.25rem;
}
.checkin-participant-guide header > span {
color: #8f94a3;
}
.checkin-guide-list {
display: grid;
gap: 0.72rem;
max-height: 620px;
overflow: auto;
}
.checkin-guide-card {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: 0.72rem;
border: 1px solid var(--event-line);
border-radius: 9px;
background: #101116;
}
.checkin-guide-card__avatar {
width: 42px;
height: 42px;
}
.checkin-guide-card strong,
.checkin-guide-card span,
.checkin-guide-card small {
display: block;
}
.checkin-guide-card span,
.checkin-guide-card small {
color: #aeb3c2;
}
.flash--warning {
background: color-mix(in srgb, var(--warning) 14%, transparent);
color: var(--warning);
}
.flash-stack {
display: grid;
gap: 0.7rem;
margin-bottom: 1.4rem;
}
.flash {
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--line);
font-weight: 700;
}
.flash--success {
background: color-mix(in srgb, var(--success) 14%, transparent);
color: var(--success);
}
.flash--error {
background: color-mix(in srgb, var(--danger) 14%, transparent);
color: var(--danger);
}
.flash--info {
background: color-mix(in srgb, var(--brand) 14%, transparent);
color: var(--brand);
}
.empty-state {
padding: 2rem 1.25rem;
text-align: center;
}
.empty-state--compact {
padding: 1.25rem;
}
.auth-layout {
min-height: 100vh;
display: grid;
place-items: center;
padding: 1.5rem 0;
}
body.page-auth .auth-stage {
width: min(560px, calc(100% - 2rem));
}
.auth-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}
.auth-grid--single {
grid-template-columns: minmax(0, 440px);
justify-content: center;
}
.auth-card--login {
width: min(100%, 440px);
margin: 0 auto;
}
.auth-card--login .form-stack {
margin-top: 0.2rem;
}
.panel--hero {
padding: 1.35rem;
}
.hero-points {
display: grid;
gap: 0.85rem;
margin-top: 1.5rem;
}
.hero-point {
padding: 1rem;
}
.hero-point strong {
display: block;
margin-bottom: 0.35rem;
font-family: "Space Grotesk", sans-serif;
}
.form-stack {
display: grid;
gap: 1rem;
}
body.page-auth .auth-stage--wide {
width: min(760px, calc(100% - 2rem));
}
.security-auth-grid {
grid-template-columns: minmax(0, 680px);
}
.security-auth-card {
display: grid;
gap: 1.25rem;
}
.security-auth-card h3,
.security-auth-card p {
margin: 0;
}
.security-steps {
color: var(--text-soft);
line-height: 1.55;
}
.security-steps {
display: grid;
gap: 0.45rem;
margin: 0;
padding-left: 1.35rem;
}
@keyframes surface-rise {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1180px) {
.event-metrics-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.event-admin-form--compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.hero-surface,
.carousel-button,
.carousel-dot,
.featured-carousel__slide,
.event-card,
.event-card__expand-inner,
.public-socials a,
.participant-password-strength__track i {
animation: none;
transition: none;
}
.public-socials a:hover {
transform: none;
}
}
@media (min-width: 1080px) {
.featured-carousel {
--carousel-peek: clamp(1.25rem, 4vw, 2.6rem);
--carousel-slide-width: clamp(360px, 62%, 820px);
--carousel-scale-far: 0.86;
--carousel-scale-near: 0.94;
--carousel-scale-active: 1.055;
}
}
@media (max-width: 980px) {
.event-admin-shell {
grid-template-columns: 1fr;
}
.event-admin-sidebar {
position: static;
min-height: 0;
grid-template-rows: auto;
}
.event-admin-menu {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.event-metrics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-admin-form,
.event-admin-form--compact,
.event-overview-grid,
.checkin-grid,
.registration-layout {
grid-template-columns: 1fr;
}
.event-section-bar,
.raffle-panel {
align-items: flex-start;
flex-direction: column;
}
.hero-grid,
.featured-grid,
.admin-grid,
.auth-grid,
.delete-grid,
.selector-grid {
grid-template-columns: 1fr;
}
.timeline-row {
grid-template-columns: 1fr;
}
.timeline-toolbar {
grid-template-columns: 1fr;
}
.timeline-filter-bar__footer {
flex-direction: column;
}
.hero-stats,
.admin-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.timeline-row__time {
position: static;
width: fit-content;
min-width: min(100%, 220px);
}
.selector-list {
max-height: none;
}
.hero-stats--admin {
max-width: none;
margin-left: 0;
}
.hero-grid--schedule-image {
min-height: 0;
}
.hero-aside--overlay {
width: 100%;
justify-self: stretch;
}
.appearance-preview--icon {
width: min(120px, 100%);
}
.color-field {
grid-template-columns: 1fr;
}
.color-field__picker {
width: 100%;
height: 52px;
}
.media-upload-grid {
grid-template-columns: 1fr;
}
.admin-header {
grid-template-columns: 1fr;
align-items: start;
}
.admin-header__secondary,
.admin-header__actions {
justify-self: start;
}
.admin-header__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.public-activity-guide {
align-items: flex-start;
flex-direction: column;
}
.public-activity-guide__actions,
.public-activity-guide__actions .button {
width: 100%;
}
.event-admin-main,
.event-admin-sidebar,
.registration-shell {
padding-inline: 0.75rem;
}
.event-admin-topbar,
.managed-event-card__head,
.managed-event-card__actions,
.event-registration-row,
.checkin-person-row,
.team-user-row {
align-items: flex-start;
flex-direction: column;
}
.event-metrics-grid {
grid-template-columns: 1fr;
}
.event-search-form {
grid-template-columns: 1fr;
}
.managed-event-card {
min-height: 236px;
}
.managed-event-card__stats {
grid-template-columns: 1fr;
}
.event-overview-stats,
.event-overview-actions {
grid-template-columns: 1fr;
}
.hero-surface--schedule-image {
--hero-active-image: var(--hero-mobile-image, var(--hero-image));
}
.featured-carousel {
--carousel-peek: clamp(0.42rem, 2.8vw, 0.68rem);
--carousel-slide-width: clamp(286px, 90.5vw, 404px);
--carousel-scale-far: 0.88;
--carousel-scale-near: 0.94;
--carousel-scale-active: 1.08;
--carousel-frame-inset: clamp(0.14rem, 0.72vw, 0.28rem);
}
.featured-carousel,
.featured-carousel__slide {
/* Mobile: evita altura provisoria sobrando no primeiro paint do carrossel. */
content-visibility: visible;
contain-intrinsic-size: none;
}
.featured-carousel.is-native-mobile .featured-carousel__viewport {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel-button--overlay {
width: 36px;
min-width: 36px;
min-height: 36px;
font-size: 1.2rem;
opacity: 0.54;
}
.carousel-button--overlay[data-carousel-prev] {
left: 0.25rem;
}
.carousel-button--overlay[data-carousel-next] {
right: 0.25rem;
}
.featured-card--clean {
/* Mobile: usa a proporcao real da arte quando existir, com fallback 9:16. */
aspect-ratio: var(--carousel-media-ratio, 9 / 16);
min-height: auto;
}
.carousel-dots {
gap: 0.42rem;
min-height: 12px;
padding: 0.15rem 0;
}
.carousel-dot {
width: 7px;
height: 7px;
}
.carousel-dot.is-active {
transform: scale(1.08);
}
.timeline-list,
.timeline-row__cards {
content-visibility: visible;
contain-intrinsic-size: none;
}
.event-card {
height: auto;
min-height: 0;
}
}
@media (max-width: 640px) {
.page-shell,
.auth-stage {
width: min(100% - 1rem, 100%);
}
.schedule-header {
align-items: flex-start;
gap: 0.9rem;
}
.schedule-header__actions {
width: auto;
margin-left: auto;
}
.schedule-header__actions > * {
flex: 0 0 auto;
}
.schedule-header__brand .brand__mark {
width: 62px;
height: 62px;
}
.schedule-header__brand strong {
font-size: 1.42rem;
}
.scroll-top-button {
right: max(0.85rem, calc(env(safe-area-inset-right) + 0.55rem));
bottom: max(0.95rem, calc(env(safe-area-inset-bottom) + 0.55rem));
}
.timeline-filter-bar__fields {
grid-template-columns: 1fr;
}
.page-schedule .hero-surface {
padding: 0.8rem;
}
.hero-surface,
.panel,
.subpanel,
.auth-card,
.featured-card,
.event-card,
.admin-event-card {
border-radius: 20px;
}
.topbar,
.admin-event-card {
flex-direction: column;
align-items: stretch;
}
.topbar__actions,
.inline-actions {
width: 100%;
}
.topbar__actions > *,
.inline-actions > * {
flex: 1 1 auto;
}
.topbar__actions .theme-toggle {
flex: 0 0 46px;
}
body.page-admin .page-shell {
width: min(100% - 1rem, 100%);
}
.admin-header-surface {
padding: 0.88rem 0.9rem 0.95rem;
gap: 0.78rem;
}
.admin-header__identity {
align-items: flex-start;
}
.admin-header__brand .brand__mark {
width: 48px;
height: 48px;
border-radius: 16px;
}
.admin-header__copy h1 {
font-size: 1.42rem;
}
.admin-header__copy p {
font-size: 0.9rem;
line-height: 1.42;
}
.admin-header__actions {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) 46px;
align-items: stretch;
}
.admin-header__actions > * {
flex: initial;
min-width: 0;
}
.admin-header__actions form,
.admin-header__actions form .button {
width: 100%;
}
.admin-header__actions form {
grid-column: 1 / -1;
}
.admin-header__actions > .button {
width: 100%;
}
.admin-header__actions .theme-toggle {
flex: 0 0 46px;
justify-self: end;
}
.admin-header__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.stat-card--admin-mini {
padding: 0.72rem 0.82rem;
}
.stat-card--admin-mini strong {
font-size: 1.46rem;
}
body.page-admin .panel,
body.page-admin .subpanel {
padding: 1rem;
}
body.page-admin .section-heading {
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
}
.hero-copy h1 {
max-width: 100%;
font-size: 1.72rem;
}
.hero-grid--schedule-image {
min-height: 85svh;
align-content: end;
}
.hero-copy--schedule {
gap: 0.6rem;
}
.page-schedule .hero-copy p {
font-size: 0.98rem;
line-height: 1.48;
}
.hero-aside--overlay {
width: 100%;
}
.hero-stats,
.admin-form-grid {
grid-template-columns: 1fr;
}
.section-heading--timeline {
align-items: stretch;
justify-content: stretch;
margin-bottom: 0.75rem;
}
.section-stats--timeline {
width: 100%;
justify-content: flex-start;
}
.stat-card--section {
flex: 1 1 148px;
min-width: 0;
padding: 0.78rem 0.92rem;
}
.stat-card--section strong {
font-size: 1.42rem;
}
.carousel-controls {
width: 100%;
justify-content: flex-end;
}
.featured-card {
min-height: 360px;
padding: 1rem;
}
.featured-card__footer-stack {
gap: 0.72rem;
}
.card-cta-link {
min-height: 46px;
}
.form-step-rail {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.2rem;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
}
.form-step-rail::-webkit-scrollbar {
height: 6px;
}
.form-step {
padding: 0.92rem;
border-radius: 22px;
}
.timeline-row__time {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-width: 0;
padding: 0.92rem 1rem;
}
.timeline-row__time strong {
font-size: 1.32rem;
}
.timeline-row__cards {
grid-template-columns: 1fr;
gap: 0.85rem;
padding-inline: 0.22rem;
overflow: visible;
}
.event-card__media {
min-height: 172px;
border-radius: 20px 20px 0 0;
}
.js .event-card.is-expanded {
transform: translateY(-4px) scale(1);
}
.event-card__body {
padding: 0.92rem;
}
.event-card__media-top {
display: flex;
justify-content: space-between;
align-items: start;
gap: 0.55rem;
}
.event-card .card-pills {
gap: 0.45rem;
}
.event-card .status-pill {
align-self: flex-start;
margin-left: auto;
white-space: nowrap;
}
.event-card__summary {
font-size: 0.95rem;
}
.event-card__summary-head {
align-items: center;
}
.event-card__quick-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.48rem;
}
.event-card__quick-meta div:last-child {
grid-column: 1 / -1;
}
.event-card__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.card-cta-bar--stacked .card-cta-link,
.card-cta-bar--stacked form {
width: 100%;
}
.timeline-toolbar {
padding: 0.95rem;
border-radius: 20px;
}
.timeline-filter-bar__actions {
display: grid;
grid-template-columns: 1fr;
}
.timeline-filter-bar__actions .button {
width: 100%;
min-width: 0;
}
.event-card__fact {
padding: 0.72rem 0.68rem;
border-radius: 16px;
}
.js .event-card.is-focus {
--card-lift-y: -6px;
--card-scale: 1.028;
}
.js .event-card {
/* Firefox mobile fica mais estavel sem promover todos os cards a camadas proprias. */
will-change: auto;
backface-visibility: visible;
transform-origin: center top;
}
.event-card__fact span {
font-size: 0.62rem;
letter-spacing: 0.1em;
}
.event-card__fact strong {
font-size: 0.92rem;
}
.tabs-nav {
display: grid;
}
}
@media (max-width: 420px) {
.event-card__summary-head {
display: grid;
gap: 0.5rem;
}
.event-card__summary-head .room-pill--inline {
min-height: 34px;
margin: 0;
justify-self: start;
}
.event-card__quick-meta {
grid-template-columns: 1fr;
}
.event-card__quick-meta div:last-child {
grid-column: auto;
}
.admin-header__identity {
flex-direction: column;
gap: 0.72rem;
}
.admin-session-pill {
white-space: normal;
}
.admin-header__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.stat-card--admin-mini {
padding: 0.68rem 0.72rem;
}
.stat-card--admin-mini strong {
font-size: 1.3rem;
}
.stat-card--admin-mini span {
font-size: 0.78rem;
}
}
@media (max-width: 560px) {
.event-card__summary-head {
flex-wrap: wrap;
gap: 0.55rem;
}
}
/* -------------------------------------------------------------------------- */
/* Responsive refinement layer: mobile-first performance and layout tuning */
/* -------------------------------------------------------------------------- */
@media (max-width: 980px) {
.tabs-nav {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.25rem;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
scroll-snap-type: x proximity;
}
.tabs-nav::-webkit-scrollbar {
height: 6px;
}
.tab-link {
white-space: nowrap;
scroll-snap-align: start;
}
.admin-grid,
.auth-grid,
.selector-grid {
gap: 1rem;
}
}
@media (max-width: 768px) {
body::before {
opacity: 0.12;
background-size: 88px 88px;
}
.page-shell {
padding: 1.35rem 0 2.9rem;
}
.hero-surface,
.panel,
.subpanel,
.stat-card,
.timeline-toolbar,
.event-card,
.selector-card,
.admin-event-card,
.auth-card,
.hero-point,
.featured-card,
.empty-state,
.hero-showcase,
.appearance-preview {
backdrop-filter: blur(10px);
box-shadow: 0 16px 34px rgba(22, 50, 79, 0.12);
}
.section-block,
.tabs-nav,
.admin-grid {
margin-top: 1rem;
}
.timeline-toolbar {
content-visibility: visible;
contain-intrinsic-size: none;
}
.timeline-filter-bar__actions {
width: 100%;
}
.timeline-filter-bar__actions .button {
min-width: 0;
}
.timeline-filter-summary-pill {
flex: 1 1 180px;
min-width: 0;
}
.timeline-filter-menu__panel {
max-height: min(320px, 42vh);
}
.section-stats--timeline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.stat-card--section {
min-width: 0;
}
.toggle-field {
align-items: flex-start;
}
.field input,
.field textarea,
.field select {
padding: 0.82rem 0.92rem;
}
.admin-filter-grid {
grid-template-columns: 1fr;
}
.admin-filter-actions {
flex-wrap: wrap;
}
.admin-filter-actions .button {
flex: 1 1 180px;
}
body.page-admin .admin-workspace {
gap: 0.85rem;
}
.tabs-nav--admin {
position: sticky;
top: max(0.5rem, calc(env(safe-area-inset-top) + 0.45rem));
z-index: 16;
margin-top: 0;
padding: 0.32rem;
border: 1px solid var(--line);
border-radius: 20px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--surface-strong) 72%, transparent));
box-shadow: 0 14px 30px rgba(22, 50, 79, 0.14);
backdrop-filter: blur(12px);
}
.tabs-nav--admin .tab-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
.tabs-nav--admin .tab-link.is-active {
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, var(--surface-strong)), color-mix(in srgb, var(--brand) 9%, var(--surface-strong)));
border-color: color-mix(in srgb, var(--brand) 44%, var(--line));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.admin-header__secondary {
width: 100%;
}
.admin-session-pill {
width: 100%;
justify-content: center;
}
}
@media (max-width: 640px) {
body::before {
opacity: 0.08;
background-size: 112px 112px;
}
.selector-list {
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 82vw);
overflow-x: auto;
overflow-y: hidden;
padding-right: 0;
padding-bottom: 0.25rem;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
scroll-snap-type: x proximity;
}
.selector-list::-webkit-scrollbar {
height: 6px;
}
.selector-card {
scroll-snap-align: start;
min-height: 80px;
}
.topbar--auth .topbar__actions {
gap: 0.6rem;
}
.topbar--auth .topbar__actions > * {
flex: 0 0 auto;
}
.hero-points {
gap: 0.7rem;
margin-top: 1rem;
}
.timeline-filter-bar__summary {
display: grid;
grid-template-columns: 1fr;
}
.timeline-filter-summary-pill {
width: 100%;
}
}
@media (max-width: 480px) {
.page-shell,
.auth-stage {
width: min(100% - 0.75rem, 100%);
}
.page-shell {
padding: 1rem 0 2.35rem;
}
.hero-surface,
.panel,
.subpanel,
.auth-card,
.featured-card,
.event-card,
.admin-event-card,
.timeline-toolbar,
.selector-card,
.stat-card,
.hero-point {
border-radius: 18px;
backdrop-filter: none;
box-shadow: 0 12px 24px rgba(22, 50, 79, 0.1);
}
.schedule-header__brand .brand__mark {
width: 54px;
height: 54px;
border-radius: 16px;
}
.schedule-header__brand strong {
font-size: 1.26rem;
}
.schedule-header__brand small {
font-size: 0.72rem;
}
.scroll-top-button {
width: 48px;
min-width: 48px;
height: 48px;
border-radius: 16px;
box-shadow: 0 14px 28px rgba(22, 50, 79, 0.16);
}
.hero-copy h1 {
font-size: 1.56rem;
}
.hero-copy p,
.panel__lead,
.event-card__summary,
.featured-card__summary {
font-size: 0.96rem;
line-height: 1.48;
}
.featured-carousel {
--carousel-peek: 0.32rem;
--carousel-slide-width: clamp(300px, 93.5vw, 372px);
--carousel-scale-active: 1.055;
--carousel-frame-inset: 0.14rem;
}
.featured-card--clean {
min-height: auto;
}
.section-stats--timeline {
grid-template-columns: 1fr;
}
.timeline-row__time {
padding: 0.82rem 0.9rem;
}
.timeline-row__time span {
font-size: 0.92rem;
}
.timeline-filter-menu__summary {
min-height: 72px;
padding: 0.84rem 2.9rem 0.84rem 0.92rem;
border-radius: 18px;
}
.timeline-filter-menu__panel {
padding: 0.38rem;
border-radius: 18px;
}
.timeline-filter-option {
min-height: 54px;
padding: 0.74rem 0.82rem;
border-radius: 14px;
}
.button,
.theme-toggle {
min-height: 44px;
}
.tab-link {
padding: 0.75rem 0.95rem;
}
.tabs-nav--admin {
top: max(0.38rem, calc(env(safe-area-inset-top) + 0.32rem));
border-radius: 18px;
}
.admin-filter-actions {
flex-direction: column-reverse;
align-items: stretch;
gap: 0.65rem;
}
.admin-filter-actions .button {
flex: 0 0 auto;
width: 100%;
min-height: 52px;
padding: 0.88rem 1rem;
border-radius: 20px;
}
}
/* Confirmacao publica do cancelamento de inscricao. */
.registration-cancel-dialog {
width: min(460px, calc(100% - 32px));
max-width: none;
padding: 0;
overflow: hidden;
border: 1px solid #d9e4f0;
border-radius: 22px;
background: #ffffff;
color: #071426;
box-shadow: 0 28px 70px rgba(5, 28, 54, 0.24);
}
.registration-cancel-dialog::backdrop {
background: rgba(5, 22, 40, 0.62);
backdrop-filter: blur(3px);
}
.registration-cancel-dialog__panel {
display: grid;
}
.registration-cancel-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 22px 0;
}
.registration-cancel-dialog__icon {
display: inline-grid;
width: 46px;
height: 46px;
place-items: center;
border-radius: 14px;
background: #fee2e2;
color: #b91c1c;
font-size: 1.35rem;
}
.registration-cancel-dialog__close {
display: inline-grid;
width: 42px;
height: 42px;
padding: 0;
place-items: center;
border: 1px solid #d9e4f0;
border-radius: 50%;
background: #ffffff;
color: #42566f;
font-size: 1.2rem;
cursor: pointer;
}
.registration-cancel-dialog__close:hover,
.registration-cancel-dialog__close:focus-visible {
border-color: #0067ad;
color: #005b9f;
}
.registration-cancel-dialog__body {
padding: 18px 24px 22px;
}
.registration-cancel-dialog__body h2 {
margin: 0 0 8px;
color: #071426;
font-size: clamp(1.4rem, 4vw, 1.75rem);
line-height: 1.15;
}
.registration-cancel-dialog__body p {
margin: 0;
color: #52657d;
line-height: 1.6;
}
.registration-cancel-dialog__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 18px 24px 24px;
border-top: 1px solid #e2eaf2;
background: #f8fbfd;
}
.registration-cancel-dialog__confirm {
border-color: #b91c1c;
background: #b91c1c;
color: #ffffff;
}
.registration-cancel-dialog__confirm:hover,
.registration-cancel-dialog__confirm:focus-visible {
border-color: #991b1b;
background: #991b1b;
color: #ffffff;
}
@media (max-width: 520px) {
.registration-cancel-dialog {
width: calc(100% - 24px);
border-radius: 18px;
}
.registration-cancel-dialog__header {
padding: 18px 18px 0;
}
.registration-cancel-dialog__body {
padding: 16px 18px 20px;
}
.registration-cancel-dialog__actions {
grid-template-columns: minmax(0, 1fr);
display: grid;
padding: 16px 18px 18px;
}
.registration-cancel-dialog__actions .button {
width: 100%;
min-height: 48px;
justify-content: center;
}
.registration-cancel-dialog__confirm {
grid-row: 1;
}
}
@media (max-width: 700px) {
body.page-event-dashboard .admin-ticket-edit-modal {
padding: 10px;
}
body.page-event-dashboard .admin-ticket-edit-modal .admin-modal__panel {
width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
border-radius: 14px;
}
body.page-event-dashboard .admin-ticket-edit-modal .admin-modal__header {
padding: 18px;
}
body.page-event-dashboard .admin-ticket-edit-form > .admin-form-section__grid {
padding: 18px;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
body.page-event-dashboard .admin-ticket-edit-form__actions {
padding: 14px 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-event-dashboard .admin-ticket-edit-form__actions button {
width: 100%;
min-width: 0;
}
}
@media (max-width: 640px) {
.admin-raffle-header-actions,
.admin-raffle-candidate__actions,
.admin-raffle-candidate__actions form,
.admin-raffle-candidate__actions button {
width: 100%;
}
.admin-raffle-header-actions {
align-items: stretch;
flex-direction: column;
}
.admin-raffle-header-actions .admin-ghost-button,
.admin-raffle-candidate__actions button {
justify-content: center;
}
.admin-raffle-eligible {
margin-inline: 14px;
}
.admin-raffle-pagination {
align-items: stretch;
flex-direction: column;
text-align: center;
}
}
@media (max-width: 380px) {
body::before {
display: none;
}
.page-shell,
.auth-stage {
width: min(100% - 0.5rem, 100%);
}
body.page-auth .auth-stage {
width: min(100% - 0.5rem, 100%);
}
.featured-carousel {
--carousel-peek: 0.24rem;
--carousel-slide-width: clamp(286px, 94vw, 340px);
--carousel-scale-active: 1.045;
--carousel-frame-inset: 0.12rem;
}
.featured-card--clean {
min-height: auto;
}
.event-card__facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.event-card__fact {
padding: 0.62rem 0.45rem;
border-radius: 14px;
gap: 0.15rem;
}
.event-card__fact span {
font-size: 0.54rem;
letter-spacing: 0.08em;
white-space: nowrap;
}
.event-card__fact strong {
font-size: 0.84rem;
}
}
@media (max-width: 1280px) {
body.page-event-dashboard .event-metrics-grid,
body.page-event-dashboard .managed-event-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-event-dashboard .event-directory-toolbar {
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 0.45fr));
}
body.page-event-dashboard .event-directory-toolbar .button {
grid-column: 1 / -1;
justify-self: end;
}
body.page-event-dashboard .checkin-workspace {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
body.page-event-dashboard .event-admin-shell {
grid-template-columns: 1fr;
}
body.page-event-dashboard .event-admin-sidebar {
position: static;
min-height: 0;
}
body.page-event-dashboard .event-admin-menu {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
body.page-event-dashboard .event-admin-submenu {
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-left: 0;
}
body.page-event-dashboard .event-admin-content {
width: min(100% - 1.5rem, 100%);
padding-top: 1.6rem;
}
body.page-event-dashboard .event-metrics-grid,
body.page-event-dashboard .managed-event-grid,
body.page-event-dashboard .event-directory-toolbar,
body.page-event-dashboard .checkin-status-grid {
grid-template-columns: 1fr;
}
body.page-event-dashboard .event-directory-toolbar .button {
justify-self: stretch;
}
}
@media (max-width: 640px) {
body.page-event-dashboard .event-admin-profile {
grid-template-columns: 42px minmax(0, 1fr);
}
body.page-event-dashboard .event-admin-profile .role-badge {
grid-column: 2;
}
body.page-event-dashboard .event-role-switch {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
}
body.page-event-dashboard .event-admin-topbar {
justify-content: flex-start;
padding-inline: 0.8rem;
}
body.page-event-dashboard .event-section-bar,
body.page-event-dashboard .managed-event-card__head,
body.page-event-dashboard .managed-event-card__footer,
body.page-event-dashboard .checkin-participant-guide header,
body.page-event-dashboard .event-registration-row,
body.page-event-dashboard .checkin-person-row {
align-items: flex-start;
flex-direction: column;
}
body.page-event-dashboard .managed-event-card__actions,
body.page-event-dashboard .managed-event-card__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-event-dashboard .checkin-workspace {
grid-template-columns: minmax(0, 1fr);
}
}
/* Admin do quadro de horarios usando a mesma moldura visual clara da gestao de eventos. */
body.page-admin {
color-scheme: light;
--event-bg: #f5f7fb;
--event-panel: #ffffff;
--event-panel-strong: #f8fafc;
--event-line: #dbe5f0;
--event-muted: #5b6b82;
--event-soft: #7c8da3;
--event-blue: #004a8f;
--admin-bg: #f6f8fb;
--admin-surface: #ffffff;
--admin-blue: #004a8f;
--admin-blue-strong: #003f7c;
--admin-blue-soft: #e6f2ff;
--admin-blue-soft-2: #f0f7ff;
--admin-text: #061529;
--admin-muted: #4d5f78;
--admin-border: #d9e4f0;
--admin-shadow: 0 14px 34px rgba(15, 44, 78, 0.08);
--admin-gold: #f4c542;
--admin-success: #00875a;
--admin-success-soft: #dcfce7;
--admin-warning: #b45309;
--admin-warning-soft: #fef3c7;
--admin-danger: #b91c1c;
--admin-danger-soft: #fee2e2;
--bg: #f5f7fb;
--bg-muted: #eef4fb;
--surface: #ffffff;
--surface-strong: #f8fafc;
--text: #071426;
--text-soft: #5b6b82;
--line: var(--event-line);
--brand: #004a8f;
--brand-strong: #003a70;
--accent: #f4b740;
--danger: #dc2626;
--success: #059669;
--warning: #d97706;
background: var(--event-bg);
color: var(--text);
}
body.page-admin::before {
display: none;
}
body.page-admin .schedule-admin-shell {
grid-template-columns: 278px minmax(0, 1fr);
background: var(--event-bg);
gap: 26px;
padding: 24px;
}
body.page-admin .schedule-admin-sidebar {
min-height: calc(100vh - 48px);
padding: 0;
gap: 0;
overflow: hidden;
border: 1px solid var(--event-line);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
backdrop-filter: none;
}
body.page-admin .schedule-admin-brand {
padding: 1.05rem 1rem;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 0.72rem;
align-items: center;
border-bottom: 1px solid var(--event-line);
background: #ffffff;
}
body.page-admin .schedule-admin-brand > span {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--event-blue);
color: #ffffff;
font-weight: 900;
}
body.page-admin .schedule-admin-brand strong {
display: block;
color: #071426;
line-height: 1.1;
}
body.page-admin .schedule-admin-brand small {
display: block;
margin-top: 0.18rem;
color: var(--event-muted);
}
body.page-admin .event-admin-profile {
min-height: 92px;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 0;
border-bottom: 1px solid var(--event-line);
border-radius: 0;
background: #eef6ff;
box-shadow: none;
backdrop-filter: none;
}
body.page-admin .event-admin-profile strong {
display: block;
color: #071426;
line-height: 1.1;
}
body.page-admin .event-admin-profile small {
display: block;
margin-top: 0.28rem;
color: var(--event-muted);
}
body.page-admin .role-badge {
min-height: 24px;
padding: 0.18rem 0.58rem;
border-radius: 8px;
}
body.page-admin .event-admin-menu {
padding: 1.1rem 0.7rem;
gap: 0.48rem;
}
body.page-admin .event-admin-tab-button,
body.page-admin .event-admin-sidebar__links a {
min-height: 39px;
gap: 0.68rem;
padding: 0.58rem 0.82rem;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: #34465d;
}
body.page-admin .event-admin-tab-button:hover,
body.page-admin .event-admin-sidebar__links a:hover {
background: #eff6ff;
color: var(--event-blue);
}
body.page-admin .event-admin-tab-button.is-active {
border-color: var(--event-blue);
background: var(--event-blue);
color: #ffffff;
box-shadow: 0 10px 20px rgba(0, 74, 143, 0.16);
}
body.page-admin .event-admin-tab-button.is-active::after {
display: none;
}
body.page-admin .event-admin-sidebar__links {
margin-top: auto;
padding: 0.8rem 0.7rem;
border-top-color: var(--event-line);
}
body.page-admin .event-admin-sidebar__logout {
padding: 0 0.7rem 1rem;
}
body.page-admin .schedule-admin-main {
width: 100%;
gap: 20px;
padding: 0;
min-width: 0;
}
body.page-admin .schedule-admin-topbar {
min-height: 116px;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 22px 24px;
border: 1px solid var(--event-line);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}
body.page-admin .schedule-admin-content {
width: 100%;
display: grid;
gap: 20px;
margin: 0 auto;
padding: 0 0 3rem;
}
body.page-admin .schedule-admin-metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
body.page-admin .event-metric-card,
body.page-admin .panel,
body.page-admin .subpanel,
body.page-admin .selector-card,
body.page-admin .admin-event-card,
body.page-admin .tag-editor,
body.page-admin .empty-state,
body.page-admin .appearance-preview {
border: 1px solid var(--event-line);
background: var(--event-panel);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
backdrop-filter: none;
}
body.page-admin .event-metric-card {
min-height: 112px;
padding: 1.35rem 1.3rem;
border-radius: 9px;
}
body.page-admin .event-metric-card span {
color: var(--event-muted);
font-size: 0.98rem;
}
body.page-admin .event-metric-card strong {
font-size: 1.8rem;
}
body.page-admin .tabs-nav--admin {
display: none;
}
body.page-admin .admin-workspace {
gap: 1.2rem;
margin-top: 0;
}
body.page-admin .admin-grid {
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
gap: 1.2rem;
}
body.page-admin .panel,
body.page-admin .subpanel,
body.page-admin .selector-card,
body.page-admin .admin-event-card,
body.page-admin .tag-editor {
border-radius: 9px;
}
body.page-admin .section-heading h2,
body.page-admin .form-step__header h3 {
color: #071426;
}
body.page-admin .section-heading p,
body.page-admin .form-step__header p,
body.page-admin .field small,
body.page-admin .admin-filter-help,
body.page-admin .admin-filter-meta {
color: var(--event-muted);
}
body.page-admin .form-step,
body.page-admin .form-step-pill,
body.page-admin .field-hint,
body.page-admin .toggle-field,
body.page-admin .upload-preview,
body.page-admin .admin-filter-panel {
border-color: var(--event-line);
background: var(--event-panel-strong);
}
body.page-admin .field input,
body.page-admin .field textarea,
body.page-admin .field select {
border-color: var(--event-line);
background: #ffffff;
color: #071426;
}
body.page-admin .field input::placeholder,
body.page-admin .field textarea::placeholder {
color: #94a3b8;
}
body.page-admin .button:not(.button--primary):not(.button--danger) {
border-color: var(--event-line);
background: #f4f4f5;
color: #050609;
}
body.page-admin .event-admin-sidebar__logout .button {
background: #ffffff;
color: #34465d;
}
body.page-admin .event-admin-sidebar__logout .button:hover {
background: #eff6ff;
color: var(--event-blue);
}
body.page-admin .schedule-admin-page-heading {
min-width: 0;
display: grid;
gap: 0.28rem;
}
body.page-admin .schedule-admin-page-heading span {
color: var(--event-blue);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.page-admin .schedule-admin-page-heading h1 {
margin: 0;
color: #071426;
font-size: clamp(1.7rem, 2.8vw, 2.35rem);
line-height: 1.05;
}
body.page-admin .schedule-admin-page-heading p {
max-width: 46rem;
margin: 0;
color: var(--event-muted);
}
body.page-admin .admin-selected-event-card,
body.page-admin .admin-selected-event-card__body,
body.page-admin .admin-selected-event-card__empty {
background: #ffffff;
color: #071426;
}
body.page-admin .admin-selected-event-card__content h2,
body.page-admin .admin-selected-event-card__empty h2,
body.page-admin .admin-event-card strong,
body.page-admin .selector-card strong,
body.page-admin .tag-editor h2,
body.page-admin .panel h2,
body.page-admin .subpanel h3 {
color: #071426;
}
body.page-admin .admin-selected-event-card__content > p,
body.page-admin .admin-selected-event-card__details,
body.page-admin .admin-selected-event-card__footer,
body.page-admin .admin-card-list p,
body.page-admin .selector-card p {
color: var(--event-muted);
}
/* Area publica de eventos e participante. */
body.page-public-events,
body.page-public-event-detail,
body.page-event-registration,
body.page-participant-auth,
body.page-account {
background: #f4f7fb;
color: #15263a;
}
body.page-public-events::before,
body.page-public-event-detail::before,
body.page-event-registration::before,
body.page-participant-auth::before,
body.page-account::before {
display: none;
}
.public-header {
position: sticky;
top: 0;
z-index: 40;
border-bottom: 1px solid rgba(31, 65, 114, 0.12);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(14px);
}
.public-header__inner,
.public-page,
.public-footer__inner,
.account-shell,
.participant-auth-page {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
}
.public-header__inner {
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.public-brand,
.public-nav,
.public-nav form,
.public-hero__actions,
.account-next-event__actions,
.account-ticket-card__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.public-brand__mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 10px;
background: #1d4ed8;
color: #ffffff;
font-family: "Space Grotesk", sans-serif;
font-weight: 900;
}
.public-brand strong,
.public-brand small,
.account-sidebar__profile strong,
.account-sidebar__profile small {
display: block;
line-height: 1.1;
}
.public-brand small,
.public-footer p,
.public-footer a,
.participant-auth-card p,
.participant-auth-side p,
.account-page-heading p,
.account-hero p,
.account-ticket-card p,
.event-summary-card p,
.form-footnote {
color: #66768a;
}
.public-nav a,
.public-nav button {
min-height: 44px;
display: inline-flex;
align-items: center;
border: 0;
border-radius: 8px;
padding: 0.45rem 0.8rem;
background: transparent;
color: #334155;
font-weight: 800;
}
.public-nav a:hover,
.public-nav button:hover,
.public-nav__cta {
background: #eaf1ff;
color: #1d4ed8;
}
.public-nav__cta {
border: 1px solid rgba(29, 78, 216, 0.18);
}
.public-header__toggle {
display: none;
width: 44px;
min-height: 44px;
border: 1px solid rgba(31, 65, 114, 0.14);
border-radius: 10px;
background: #ffffff;
}
.public-header__toggle span:not(.sr-only) {
display: block;
width: 18px;
height: 2px;
margin: 4px auto;
border-radius: 999px;
background: #173b6d;
}
.public-page {
padding: 1.25rem 0 4rem;
}
.public-hero,
.public-event-banner {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(340px, 45vw, 520px);
display: flex;
align-items: flex-end;
border-radius: 14px;
padding: clamp(1.25rem, 4vw, 3rem);
background: #173b6d;
color: #ffffff;
}
.public-hero::before,
.public-event-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--public-hero-bg, var(--public-event-bg, none));
background-position: center;
background-size: cover;
opacity: 0.42;
}
.public-hero::after,
.public-event-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(120deg, rgba(12, 39, 84, 0.96), rgba(29, 78, 216, 0.72) 58%, rgba(180, 83, 9, 0.62)),
#173b6d;
}
.public-hero__content {
max-width: 760px;
display: grid;
gap: 0.9rem;
}
.public-hero h1 {
margin: 0;
max-width: 820px;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.15rem, 5.4vw, 4.8rem);
line-height: 0.98;
}
@media (prefers-reduced-motion: reduce) {
.admin-event-artwork-card__summary-action > i {
transition: none;
}
}
.public-hero p {
margin: 0;
max-width: 680px;
color: rgba(255, 255, 255, 0.84);
font-size: 1.08rem;
}
.public-catalog,
.public-detail-layout {
display: grid;
gap: 1.2rem;
margin-top: 2rem;
}
.public-section-heading,
.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.public-section-heading h2,
.account-page-heading h1,
.account-hero h1,
.participant-auth-card h1,
.participant-auth-card h2,
.participant-auth-side h1,
.public-copy-block h2 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
}
.public-filter-bar {
display: grid;
gap: 0.9rem;
padding: 1rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 16px 36px rgba(20, 46, 82, 0.08);
}
.public-filter-bar input,
.public-form input,
.public-form textarea,
.public-form select,
.account-card input {
width: 100%;
min-height: 46px;
border: 1px solid rgba(31, 65, 114, 0.14);
border-radius: 8px;
background: #ffffff;
color: #15263a;
padding: 0.72rem 0.85rem;
}
.public-filter-tabs {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.1rem;
}
.public-filter-tabs button {
flex: 0 0 auto;
min-height: 38px;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 999px;
background: #f8fafc;
color: #475569;
padding: 0.45rem 0.82rem;
font-weight: 900;
}
.public-filter-tabs button.is-active {
border-color: rgba(29, 78, 216, 0.32);
background: #eaf1ff;
color: #1d4ed8;
}
.public-event-list {
display: grid;
gap: 1rem;
}
.public-event-card {
display: grid;
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
overflow: hidden;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 16px 36px rgba(20, 46, 82, 0.08);
}
.public-event-card__media {
width: 100%;
min-width: 0;
min-height: 0;
aspect-ratio: 16 / 9;
align-self: start;
display: grid;
place-items: center;
overflow: hidden;
background: #dbe7f8;
}
.public-event-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.public-event-card__fallback {
width: 84px;
height: 84px;
display: grid;
place-items: center;
border-radius: 18px;
background: #1d4ed8;
color: #ffffff;
font-size: 2rem;
font-weight: 900;
}
.public-event-card__body,
.public-detail-main,
.event-summary-card,
.registration-panel,
.participant-auth-card,
.account-card,
.account-sidebar,
.account-ticket-card {
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 16px 36px rgba(20, 46, 82, 0.08);
}
.public-event-card__body {
display: grid;
gap: 0.9rem;
padding: 1.1rem;
}
.public-event-card h3,
.account-ticket-card h2,
.account-ticket-card h3,
.event-summary-card h2 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
}
.public-event-card p {
margin: 0;
color: #66768a;
}
.public-badges {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.public-badge {
display: inline-flex;
align-items: center;
min-height: 26px;
border-radius: 999px;
padding: 0.22rem 0.62rem;
background: #eef2f7;
color: #475569;
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.public-badge--open,
.public-badge--success {
background: #dcfce7;
color: #166534;
}
.public-badge--checkin,
.public-badge--blue {
background: #eaf1ff;
color: #1d4ed8;
}
.public-badge--closed,
.public-badge--warning {
background: #fef3c7;
color: #92400e;
}
.public-badge--amber {
background: #fff7db;
color: #9a5b00;
}
.public-event-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
margin: 0;
}
.public-event-meta--stacked {
grid-template-columns: 1fr;
}
.public-event-meta div,
.public-info-grid div {
display: grid;
gap: 0.18rem;
padding: 0.72rem;
border-radius: 9px;
background: #f8fafc;
}
.public-event-meta dt,
.public-info-grid span {
color: #66768a;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.public-event-meta dd {
margin: 0;
color: #15263a;
font-weight: 900;
}
.public-event-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 0.9rem;
border-top: 1px solid rgba(31, 65, 114, 0.1);
}
.public-event-card__footer > div {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.public-event-card__footer > span,
.ticket-instruction {
color: #66768a;
font-weight: 800;
}
.public-detail-layout {
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
align-items: start;
}
.public-detail-main,
.event-summary-card {
display: grid;
gap: 1.2rem;
padding: 1.2rem;
}
.event-summary-card {
position: sticky;
top: 92px;
}
.public-info-grid,
.account-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
}
.public-info-grid strong,
.account-metrics strong {
font-size: 1.2rem;
}
.public-copy-block {
display: grid;
gap: 0.65rem;
}
.public-copy-block p {
margin: 0;
color: #334155;
line-height: 1.7;
}
.public-alert {
display: grid;
gap: 0.25rem;
padding: 0.9rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 10px;
}
.public-alert p {
margin: 0;
}
.public-alert--blue {
background: #eaf1ff;
color: #173b8f;
}
.public-alert--success {
background: #dcfce7;
color: #166534;
}
.public-alert--warning {
border-color: #fde68a;
background: #fffbeb;
color: #92400e;
}
.public-alert a {
color: inherit;
font-weight: 900;
text-decoration: underline;
}
.public-schedule-list {
display: grid;
gap: 0.7rem;
}
.public-schedule-list article {
display: grid;
gap: 0.2rem;
padding: 0.85rem;
border-radius: 10px;
background: #f8fafc;
}
.public-schedule-list span,
.public-schedule-list small {
color: #66768a;
}
.public-empty-state {
display: grid;
gap: 0.6rem;
justify-items: center;
padding: 2rem;
border: 1px dashed rgba(31, 65, 114, 0.22);
border-radius: 12px;
background: #ffffff;
text-align: center;
}
.public-empty-state--large {
min-height: 52vh;
align-content: center;
}
.registration-shell {
padding-top: 1.25rem;
}
.registration-layout {
grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
}
.registration-side {
display: grid;
gap: 1rem;
}
.registration-form,
.registration-ticket {
padding: 1.1rem;
}
.registration-qr {
width: 100%;
border: 0;
cursor: pointer;
}
.registration-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.registration-flow li {
min-width: 0;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 10px;
background: #f8fafc;
color: #64748b;
}
.registration-flow span {
width: 26px;
height: 26px;
display: inline-grid;
flex: 0 0 auto;
place-items: center;
border-radius: 999px;
background: #e2e8f0;
color: #334155;
font-size: 0.78rem;
font-weight: 900;
}
.registration-flow strong {
overflow: hidden;
font-size: 0.86rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.registration-flow li.is-active {
border-color: color-mix(in srgb, var(--event-accent, #1d4ed8) 42%, rgba(31, 65, 114, 0.12));
background: color-mix(in srgb, var(--event-accent, #1d4ed8) 10%, #ffffff);
color: #0f172a;
}
.registration-flow li.is-complete span,
.registration-flow li.is-active span {
background: var(--event-accent, #1d4ed8);
color: #ffffff;
}
.registration-section {
display: grid;
gap: 0.85rem;
padding-top: 1rem;
border-top: 1px solid rgba(31, 65, 114, 0.1);
}
.registration-section__head {
display: grid;
gap: 0.2rem;
}
.registration-section__head span {
color: var(--event-accent, #1d4ed8);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.registration-section__head strong {
color: #0f172a;
font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
}
.registration-section__head small {
color: #66768a;
}
.registration-account-review {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
padding: 1rem;
border: 1px solid #d8e2ee;
border-radius: 12px;
background: #f8fafc;
}
.registration-account-review .field {
min-width: 0;
}
.registration-account-review input[readonly] {
color: #25364d;
border-color: #cad7e5;
background: #eef3f8;
cursor: default;
}
.registration-account-review__note {
margin: 0;
color: #5d6f85;
font-size: 0.88rem;
}
.registration-account-review__note a {
color: #005eaa;
font-weight: 800;
}
@media (max-width: 640px) {
.registration-account-review {
grid-template-columns: 1fr;
padding: 0.85rem;
}
}
.ticket-details--light div {
background: #f8fafc;
}
.qr-modal .ticket-details--light dt {
color: #3f4b5c;
}
.participant-auth-page {
min-height: calc(100vh - 70px);
display: grid;
align-content: center;
gap: 1rem;
padding: 2rem 0 4rem;
}
.participant-auth-page--split {
grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
align-items: center;
}
.participant-auth-side {
min-height: 460px;
display: grid;
align-content: end;
gap: 0.85rem;
padding: 2rem;
border-radius: 14px;
background:
linear-gradient(120deg, rgba(12, 39, 84, 0.96), rgba(29, 78, 216, 0.8)),
#173b6d;
color: #ffffff;
}
.participant-auth-card {
display: grid;
gap: 1.1rem;
padding: clamp(1.2rem, 4vw, 2rem);
}
.participant-auth-card--wide {
width: min(760px, 100%);
justify-self: center;
}
.public-form {
display: grid;
gap: 0.9rem;
}
.public-form--grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-form .field--wide {
grid-column: 1 / -1;
}
.public-form small {
color: #66768a;
}
.participant-register-form {
align-items: start;
}
.participant-register-form .field {
min-width: 0;
align-content: start;
}
.participant-register-form .field input {
height: 48px;
}
.participant-register-form__paired-field {
align-self: start;
}
.participant-password-strength {
display: grid;
gap: 0.35rem;
margin-top: 0.1rem;
}
.participant-password-strength__track {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e3e9f1;
}
.participant-password-strength__track i {
width: 100%;
height: 100%;
display: block;
border-radius: inherit;
background: #94a3b8;
transform: scaleX(0);
transform-origin: left center;
transition: transform 180ms ease, background-color 180ms ease;
}
.participant-password-strength__label {
color: #66768a;
font-size: 0.78rem;
font-weight: 800;
}
.participant-password-strength[data-strength="weak"] .participant-password-strength__track i {
background: #dc3f4f;
transform: scaleX(0.34);
}
.participant-password-strength[data-strength="medium"] .participant-password-strength__track i {
background: #d68a00;
transform: scaleX(0.67);
}
.participant-password-strength[data-strength="strong"] .participant-password-strength__track i {
background: #16896f;
transform: scaleX(1);
}
.participant-password-strength[data-strength="weak"] .participant-password-strength__label {
color: #b42332;
}
.participant-password-strength[data-strength="medium"] .participant-password-strength__label {
color: #9a6200;
}
.participant-password-strength[data-strength="strong"] .participant-password-strength__label {
color: #08745c;
}
.participant-auth-switch {
margin: 0;
text-align: center;
}
.participant-auth-switch a {
color: #1d4ed8;
font-weight: 900;
}
.privacy-acknowledgement {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.95rem 1rem;
border: 1px solid #cbd8e8;
border-radius: 12px;
background: #f7faff;
color: #24364c;
font-size: 0.9rem;
line-height: 1.5;
}
.privacy-acknowledgement input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
flex: 0 0 auto;
margin: 0.15rem 0 0;
padding: 0;
accent-color: #005da4;
}
.privacy-acknowledgement a {
color: #005da4;
font-weight: 850;
}
/* Cadastro publico do participante: composicao institucional e formulario compacto. */
body.page-participant-auth {
background: #e9eef4;
}
.participant-auth-page--register {
width: min(1180px, calc(100% - 2rem));
min-height: calc(100vh - 58px);
align-content: start;
padding: clamp(1.25rem, 3vw, 2.5rem) 0 4rem;
}
.participant-auth-page--register > .flash-stack {
width: 100%;
margin: 0;
}
.participant-register-shell {
display: grid;
grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.72fr);
overflow: hidden;
border: 1px solid var(--public-border);
border-radius: 24px;
background: #ffffff;
box-shadow: 0 26px 70px rgba(16, 53, 93, 0.14);
}
.participant-register-intro {
position: relative;
isolation: isolate;
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2rem;
overflow: hidden;
padding: clamp(1.6rem, 3vw, 2.5rem);
background:
linear-gradient(155deg, rgba(0, 63, 124, 0.98), rgba(0, 94, 157, 0.96) 58%, rgba(14, 125, 124, 0.93)),
var(--public-blue);
color: #ffffff;
}
.participant-register-intro::before,
.participant-register-intro::after {
position: absolute;
z-index: -1;
pointer-events: none;
content: "";
}
.participant-register-intro::before {
inset: 0;
background:
linear-gradient(122deg, transparent 0 46%, rgba(255, 255, 255, 0.07) 46.3% 64%, transparent 64.3%),
radial-gradient(circle at 90% 14%, rgba(255, 255, 255, 0.13), transparent 15rem);
}
.participant-register-intro::after {
right: -7rem;
bottom: -8rem;
width: 19rem;
height: 19rem;
border: 2.5rem solid rgba(255, 255, 255, 0.055);
border-radius: 50%;
}
.participant-register-intro__brand {
display: flex;
align-items: center;
gap: 0.75rem;
color: #ffffff;
font-size: 0.98rem;
font-weight: 850;
}
.participant-register-intro__brand img {
width: 46px;
height: 32px;
object-fit: contain;
}
.participant-register-intro__copy {
align-self: center;
display: grid;
gap: 0.85rem;
max-width: 24rem;
}
.participant-register-intro__copy h2 {
max-width: 10ch;
margin: 0;
color: #ffffff;
font-family: "Open Sans", sans-serif;
font-size: clamp(2rem, 3.5vw, 3.25rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.045em;
}
.participant-register-intro__copy p {
max-width: 29rem;
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 0.98rem;
line-height: 1.55;
}
.participant-register-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.participant-register-steps li {
display: grid;
gap: 0.16rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.participant-register-steps span {
color: var(--public-amber);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.09em;
}
.participant-register-steps strong {
color: #ffffff;
font-size: 0.76rem;
font-weight: 800;
}
.participant-register-panel {
min-width: 0;
display: grid;
align-content: start;
gap: 1.4rem;
padding: clamp(1.5rem, 3.4vw, 2.7rem);
}
.participant-register-heading {
display: grid;
gap: 0.36rem;
}
.participant-register-heading h1 {
max-width: 22ch;
margin: 0;
color: #071a31;
font-family: "Open Sans", sans-serif;
font-size: clamp(1.75rem, 3vw, 2.35rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.035em;
}
.participant-register-heading p {
margin: 0;
color: var(--public-muted);
}
.participant-register-form {
display: grid;
gap: 1.45rem;
}
.participant-register-section {
display: grid;
gap: 1rem;
margin: 0;
padding: 1.35rem 0 0;
border: 0;
border-top: 1px solid #e2eaf2;
}
.participant-register-section__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.participant-register-section__grid .field--wide {
grid-column: 1 / -1;
}
.participant-register-form .field {
min-width: 0;
align-content: start;
gap: 0.42rem;
}
.participant-register-form .field > label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.7rem;
color: #10243b;
font-size: 0.88rem;
font-weight: 800;
}
.participant-register-form .field input[type="text"],
.participant-register-form .field input[type="email"],
.participant-register-form .field input[type="tel"],
.participant-register-form .field input[type="password"],
.participant-register-form .participant-password-field input[type="text"] {
width: 100%;
height: 48px;
min-height: 48px;
border: 1px solid #cbd8e6;
border-radius: 10px;
background: #ffffff;
color: #15263a;
padding: 0.72rem 0.9rem;
outline: 0;
color-scheme: light;
}
.participant-register-form .participant-password-field input {
padding-right: 3.15rem;
}
.participant-register-form .field input::placeholder {
color: #8190a3;
opacity: 1;
}
.participant-register-form .field input:hover {
border-color: #9fb4ca;
}
.participant-register-form .field input:focus {
border-color: var(--public-blue);
box-shadow: 0 0 0 4px rgba(0, 74, 143, 0.11);
}
.participant-register-form .field input[aria-invalid="true"] {
border-color: #d92d20;
}
.participant-register-form .field input[aria-invalid="true"] {
box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.08);
}
.participant-register-form .field small {
color: #66768a;
font-size: 0.76rem;
line-height: 1.45;
}
.participant-password-requirements.participant-password-requirements--register,
.participant-password-requirements.participant-password-requirements--checklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.38rem 0.7rem;
margin: 0.05rem 0 0;
font-size: 0.75rem;
line-height: 1.35;
}
.participant-password-requirements.participant-password-requirements--register li,
.participant-password-requirements.participant-password-requirements--checklist li {
min-width: 0;
}
.participant-password-requirements.participant-password-requirements--register li i,
.participant-password-requirements.participant-password-requirements--checklist li i {
flex: 0 0 auto;
}
.participant-register-error {
color: #b42318 !important;
font-weight: 700;
}
.participant-register-consent {
display: grid;
gap: 0.38rem;
}
.participant-register-consent .privacy-acknowledgement {
border-radius: 10px;
padding: 0.85rem 0.95rem;
background: #f5f8fc;
}
.participant-register-consent .privacy-acknowledgement:has(input[aria-invalid="true"]) {
border-color: #d92d20;
background: #fff8f7;
}
.participant-register-submit {
min-height: 50px;
border-radius: 10px;
background: linear-gradient(135deg, var(--public-blue), #007d98);
box-shadow: 0 14px 30px rgba(0, 74, 143, 0.18);
font-size: 0.95rem;
}
.participant-register-submit:hover,
.participant-register-submit:focus-visible {
box-shadow: 0 18px 34px rgba(0, 74, 143, 0.23);
}
.participant-register-submit[aria-busy="true"] i {
animation: admin-filter-spin 0.75s linear infinite;
}
.participant-register-panel .participant-auth-switch {
padding-top: 0.1rem;
color: #5d6d82;
font-size: 0.9rem;
}
@media (max-width: 860px) {
.participant-register-shell {
grid-template-columns: 1fr;
}
.participant-register-intro {
min-height: 260px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr;
gap: 1.2rem 2rem;
}
.participant-register-intro__copy {
align-self: end;
}
.participant-register-intro__copy h2 {
max-width: 15ch;
font-size: clamp(1.85rem, 7vw, 2.75rem);
}
.participant-register-steps {
min-width: 250px;
align-self: end;
grid-column: 2;
grid-row: 1 / -1;
}
}
@media (max-width: 640px) {
.participant-auth-page--register {
padding-top: 0.75rem;
}
.participant-register-shell {
border-radius: 18px;
}
.participant-register-intro {
min-height: 230px;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
padding: 1.35rem;
}
.participant-register-intro__copy {
align-self: start;
}
.participant-register-intro__copy p {
max-width: 34rem;
}
.participant-register-steps {
min-width: 0;
grid-column: 1;
grid-row: auto;
}
.participant-register-panel {
padding: 1.25rem;
}
.participant-register-section__grid {
grid-template-columns: 1fr;
}
.participant-register-section__grid .field--wide {
grid-column: auto;
}
}
@media (max-width: 420px) {
.participant-auth-page--register {
width: min(100% - 0.75rem, 100%);
}
.participant-register-intro,
.participant-register-panel {
padding: 1rem;
}
.participant-register-intro__copy h2 {
font-size: 1.75rem;
}
.participant-register-steps strong {
font-size: 0.7rem;
}
.participant-register-heading h1 {
font-size: 1.65rem;
}
.participant-register-section {
padding-top: 1.1rem;
}
.participant-register-consent .privacy-acknowledgement {
padding: 0.8rem;
}
}
.account-shell {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
align-items: start;
gap: 1.2rem;
padding: 1.4rem 0 4rem;
}
.account-shell--single {
width: min(1040px, calc(100% - 2rem));
grid-template-columns: minmax(0, 1fr);
}
.account-sidebar {
position: sticky;
top: 92px;
display: grid;
gap: 0.85rem;
padding: 1rem;
}
.account-sidebar__profile {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid rgba(31, 65, 114, 0.1);
}
.account-sidebar__profile > span {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 999px;
background: #1d4ed8;
color: #ffffff;
font-weight: 900;
overflow: hidden;
}
.account-sidebar__profile > span img,
.public-user-menu__avatar img,
.account-profile-hero__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.account-sidebar nav {
display: grid;
gap: 0.35rem;
}
.account-sidebar nav a {
padding: 0.65rem 0.75rem;
border-radius: 8px;
color: #475569;
font-weight: 900;
}
.account-sidebar nav a.is-active,
.account-sidebar nav a:hover {
background: #eaf1ff;
color: #1d4ed8;
}
.account-main {
display: grid;
gap: 1.2rem;
}
.account-profile-hero {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) minmax(220px, auto);
align-items: center;
gap: 1rem;
padding: 1.25rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 14px;
background:
linear-gradient(135deg, #ffffff, #f1f7ff);
box-shadow: 0 16px 36px rgba(20, 46, 82, 0.08);
}
.account-profile-hero__avatar {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--public-blue);
color: #ffffff;
font-size: 1.35rem;
font-weight: 900;
overflow: hidden;
}
.account-profile-avatar-trigger {
position: relative;
width: 72px;
height: 72px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
cursor: pointer;
}
.account-profile-avatar-trigger:focus-visible {
outline: 3px solid rgba(0, 83, 155, 0.32);
outline-offset: 4px;
}
.account-profile-avatar-trigger__badge {
position: absolute;
right: -1px;
bottom: -1px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 3px solid #ffffff;
border-radius: 50%;
background: #00539b;
color: #ffffff;
font-size: 0.78rem;
box-shadow: 0 4px 12px rgba(11, 31, 58, 0.2);
}
.account-profile-hero h1,
.account-profile-form__header h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
}
.account-profile-hero p,
.account-profile-form__header p {
margin: 0.28rem 0 0;
color: #66768a;
line-height: 1.45;
}
.account-profile-hero__meta {
min-width: 0;
padding: 0.85rem 1rem;
border: 1px solid rgba(31, 65, 114, 0.1);
border-radius: 12px;
background: #ffffff;
}
.account-profile-hero__meta span {
display: block;
color: #66768a;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.account-profile-hero__meta strong {
display: block;
margin-top: 0.22rem;
overflow-wrap: anywhere;
color: #15263a;
}
.account-profile-form {
align-items: start;
gap: 1.05rem 1.15rem;
padding: clamp(1.1rem, 2.5vw, 1.55rem);
}
.account-profile-form__header {
padding-bottom: 1rem;
border-bottom: 1px solid rgba(31, 65, 114, 0.1);
}
.account-profile-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 1rem 1.15rem;
}
.account-profile-form .field {
align-self: start;
align-content: start;
gap: 0.5rem;
}
.account-profile-form .field > input {
height: 52px;
}
.account-profile-form .participant-password-field input {
width: 100%;
padding-right: 3rem;
}
.account-profile-form .field > span {
color: #102033;
font-size: 0.94rem;
font-weight: 900;
}
.account-profile-form input {
min-height: 52px;
border-radius: 12px;
padding: 0.82rem 0.95rem;
font-size: 1rem;
transition:
border-color var(--motion-fast) var(--ease-premium-out),
box-shadow var(--motion-fast) var(--ease-premium-out),
background-color var(--motion-fast) var(--ease-premium-out);
}
.account-profile-form input:focus {
border-color: color-mix(in srgb, var(--public-blue) 55%, var(--public-border));
box-shadow: 0 0 0 4px rgba(0, 74, 143, 0.1);
}
.account-profile-form input:disabled {
background: #f5f8fc;
color: #526174;
cursor: not-allowed;
}
.account-profile-form small {
margin: -0.08rem 0 0;
line-height: 1.35;
}
.account-profile-form__actions {
align-items: center;
justify-content: flex-end;
margin-top: 0.25rem;
padding-top: 0.95rem;
border-top: 1px solid rgba(31, 65, 114, 0.1);
}
.account-profile-form__submit {
min-height: 44px;
border-radius: 999px;
padding-inline: 1.25rem;
}
.account-hero {
display: grid;
gap: 0.75rem;
padding: 1.4rem;
border-radius: 14px;
background:
linear-gradient(120deg, rgba(12, 39, 84, 0.96), rgba(29, 78, 216, 0.8), rgba(180, 83, 9, 0.42)),
#173b6d;
color: #ffffff;
}
.account-hero p {
color: rgba(255, 255, 255, 0.82);
}
.account-metrics article {
display: grid;
gap: 0.35rem;
padding: 1rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 12px;
background: #ffffff;
}
.account-metrics span {
color: #66768a;
font-weight: 900;
}
.account-next-event {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
}
.account-agenda-card {
display: grid;
gap: 1rem;
padding: 1rem;
}
.account-agenda-card__heading {
margin: 0;
}
.account-agenda-card__heading p {
margin: 0.25rem 0 0;
color: #66768a;
}
.account-agenda-list {
display: grid;
gap: 0.75rem;
}
.account-agenda-item {
display: grid;
grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
padding: 0.9rem;
border: 1px solid rgba(31, 65, 114, 0.1);
border-radius: 14px;
background: #f8fbff;
}
.account-agenda-item--waitlist {
border-color: #fde68a;
background: #fffbeb;
}
.account-agenda-item__time,
.account-agenda-item__body {
display: grid;
min-width: 0;
gap: 0.3rem;
}
.account-agenda-item__time strong {
color: #004a8f;
font-size: 0.94rem;
}
.account-agenda-item__time span,
.account-agenda-item__body span,
.account-agenda-item__body p {
margin: 0;
color: #66768a;
font-size: 0.86rem;
font-weight: 800;
}
.account-agenda-item__body h3 {
margin: 0;
color: #0f172a;
font-size: 1rem;
}
.account-agenda-item__status {
display: inline-grid;
gap: 3px;
justify-items: center;
max-width: 190px;
padding: 0.55rem 0.75rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 900;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
}
.account-agenda-item__status small {
color: inherit;
font-size: 0.68rem;
letter-spacing: 0;
text-transform: none;
opacity: 0.82;
}
.account-agenda-item__status--checked {
background: #dcfce7;
color: #166534;
}
.account-agenda-item__status--pending {
background: #fff7ed;
color: #9a3412;
}
.account-agenda-item__status--waitlist {
background: #fffbeb;
color: #92400e;
}
.account-agenda-item__status--scheduled {
background: #eaf3ff;
color: #004a8f;
}
.account-agenda-empty {
display: grid;
gap: 0.7rem;
padding: 1rem;
border: 1px dashed rgba(0, 83, 155, 0.28);
border-radius: 14px;
background: #f8fbff;
}
.account-agenda-empty strong {
color: #0f172a;
}
.account-agenda-empty p {
margin: 0;
color: #66768a;
}
.account-agenda-card__more {
color: #004a8f;
font-weight: 900;
text-decoration: none;
}
.account-ticket-list {
display: grid;
gap: 0.9rem;
}
.account-ticket-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
}
.account-ticket-card--full {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px;
}
.account-ticket-card__qr {
display: grid;
place-items: center;
min-height: 190px;
border-left: 1px dashed rgba(31, 65, 114, 0.2);
}
.account-ticket-card__qr img {
width: 168px;
aspect-ratio: 1;
}
.qr-modal[hidden] {
display: none;
}
.qr-modal {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: 1rem;
}
.qr-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(6, 15, 30, 0.72);
}
.qr-modal__panel {
position: relative;
z-index: 1;
width: min(540px, 100%);
max-height: calc(100vh - 2rem);
overflow: auto;
display: grid;
gap: 1rem;
padding: 1.2rem;
border-radius: 14px;
background: #ffffff;
color: #15263a;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}
.qr-modal__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 36px;
min-height: 36px;
border: 0;
border-radius: 999px;
background: #eaf1ff;
color: #1d4ed8;
font-size: 1.4rem;
}
.qr-modal__code {
display: grid;
place-items: center;
border-radius: 12px;
background: #ffffff;
}
.qr-modal__code img {
width: min(420px, 100%);
aspect-ratio: 1;
}
body.has-qr-modal {
overflow: hidden;
}
/* Landpage publica inspirada na vitrine CRECI-CE. */
body.page-public-home,
body.page-public-events,
body.page-public-event-detail,
body.page-event-registration,
body.page-participant-auth,
body.page-account {
--public-blue: #004a8f;
--public-blue-strong: #003f7c;
--public-blue-soft: #e8f2ff;
--public-amber: #f4bf45;
--public-border: #d9e5f2;
--public-muted: #5d6d82;
--public-shadow: 0 18px 42px rgba(16, 53, 93, 0.1);
--brand: var(--public-blue);
--brand-strong: var(--public-blue-strong);
--accent: var(--public-amber);
background: #ffffff;
color: #15263a;
}
body.page-public-home {
background: #e9edf2;
}
body.page-participant-auth {
background: #e9eef4;
}
body.page-public-home::before,
body.page-public-events::before,
body.page-public-event-detail::before,
body.page-event-registration::before,
body.page-participant-auth::before,
body.page-account::before {
display: none;
}
.public-header {
border-bottom: 1px solid rgba(0, 74, 143, 0.12);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 8px 22px rgba(16, 53, 93, 0.06);
}
.public-header__inner {
position: relative;
min-height: 58px;
}
.public-header__menu {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-width: 0;
}
.public-brand {
min-width: max-content;
gap: 0.55rem;
}
.public-brand__mark {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--public-blue);
font-size: 0.78rem;
}
.public-brand strong {
font-size: 0.96rem;
color: #172033;
}
.public-brand small {
margin-top: 0.08rem;
color: #68778d;
font-size: 0.68rem;
}
.public-nav {
justify-content: center;
gap: 0.35rem;
margin-inline: auto;
}
.public-nav a,
.public-nav button,
.public-header__actions a,
.public-header__actions button {
min-height: 34px;
border: 0;
border-radius: 10px;
padding: 0.42rem 0.72rem;
background: transparent;
color: #475569;
font-size: 0.88rem;
font-weight: 800;
}
.public-nav a:hover,
.public-nav a.is-active,
.public-nav button:hover {
background: var(--public-blue-soft);
color: var(--public-blue);
}
.public-header__actions {
display: flex;
align-items: center;
gap: 0.55rem;
}
.public-header__actions form {
display: flex;
margin: 0;
}
.public-header__actions .public-nav__cta {
min-width: 98px;
justify-content: center;
border: 1px solid var(--public-blue);
background: var(--public-blue);
color: #ffffff;
}
.public-header__actions .public-nav__cta:hover {
background: var(--public-blue-strong);
color: #ffffff;
}
.public-user-menu {
position: relative;
}
.public-user-menu summary {
min-height: 42px;
display: flex;
align-items: center;
gap: 0.65rem;
border-radius: 999px;
padding: 0.18rem 0.48rem 0.18rem 0.18rem;
color: #172033;
cursor: pointer;
list-style: none;
}
.public-user-menu summary::-webkit-details-marker {
display: none;
}
.public-user-menu summary:hover,
.public-user-menu[open] summary {
background: #f1f6ff;
}
.public-user-menu__avatar {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 999px;
background: #64748b;
color: #ffffff;
font-weight: 900;
overflow: hidden;
}
.public-user-menu__name {
max-width: 160px;
overflow: hidden;
color: #172033;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-user-menu__chevron {
width: 9px;
height: 9px;
flex: 0 0 auto;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(45deg) translateY(-2px);
}
.public-user-menu[open] .public-user-menu__chevron {
transform: rotate(225deg) translateY(-2px);
}
.public-user-menu__panel {
position: absolute;
top: calc(100% + 0.7rem);
right: 0;
z-index: 70;
width: min(350px, calc(100vw - 2rem));
display: grid;
gap: 0.35rem;
padding: 1rem;
border: 1px solid rgba(31, 65, 114, 0.1);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 22px 54px rgba(20, 46, 82, 0.18);
}
.public-user-menu__panel a,
.public-user-menu__panel button {
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.8rem;
border: 0;
border-radius: 10px;
padding: 0.58rem 0.72rem;
background: transparent;
color: #536176;
font-size: 0.98rem;
font-weight: 800;
text-align: left;
}
.public-user-menu__panel a span,
.public-user-menu__panel button span {
width: 28px;
color: var(--public-blue);
font-weight: 900;
text-align: center;
}
.public-user-menu__panel a:hover,
.public-user-menu__panel a.is-active,
.public-user-menu__panel button:hover {
background: #f1f6ff;
color: var(--public-blue);
}
.public-user-menu__panel form {
display: grid;
margin: 0;
}
.home-page {
background: #e9edf2;
}
.home-page .flash-stack {
width: min(1180px, calc(100% - 2rem));
margin: 1rem auto 0;
}
.home-hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(430px, 47vw, 560px);
display: grid;
align-items: center;
border-radius: 0;
background:
radial-gradient(ellipse 80% 60% at 85% 25%, rgba(15, 139, 95, 0.3), transparent 60%),
radial-gradient(ellipse 70% 50% at 15% 75%, rgba(0, 150, 255, 0.22), transparent 55%),
linear-gradient(135deg, #041c33 0%, #004a8f 52%, #083c6c 100%);
color: #ffffff;
}
.home-hero::before {
content: "OFICIAL";
position: absolute;
left: -0.4rem;
top: 1rem;
z-index: -1;
color: rgba(255, 255, 255, 0.035);
font-family: "Space Grotesk", sans-serif;
font-size: clamp(5rem, 17vw, 13rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1;
}
.home-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.1), transparent 24rem),
linear-gradient(120deg, transparent 0 38%, rgba(255, 255, 255, 0.055) 38.2% 62%, transparent 62.2%);
}
.home-hero__content {
width: min(1180px, calc(100% - 2rem));
display: grid;
gap: 0;
margin: 0 auto;
padding: clamp(4rem, 7vw, 6rem) 0;
}
.home-hero h1 {
max-width: 860px;
margin: 0;
font-family: "Open Sans", sans-serif;
font-size: clamp(2.4rem, 4.5vw, 3.8rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
}
.home-hero h1 span {
color: #f4bf45;
}
.home-hero p.home-hero__lead {
max-width: 680px;
margin: 1.25rem 0 2rem;
color: rgba(231, 241, 255, 0.9);
font-size: clamp(1.05rem, 1.6vw, 1.22rem);
line-height: 1.6;
}
.home-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
.button--hero-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 52px;
padding: 0.85rem 1.85rem;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
background: #f4bf45;
border: 1px solid #f4bf45;
color: #061d36;
box-shadow: 0 8px 24px rgba(244, 191, 69, 0.32);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.button--hero-primary:hover,
.button--hero-primary:focus-visible {
background: #ffc94d;
border-color: #ffc94d;
color: #061d36;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(244, 191, 69, 0.42);
}
.button--hero-primary *,
.button--hero-primary span,
.button--hero-primary i,
.button--hero-primary .ti {
color: #061d36;
}
.button--hero-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 52px;
padding: 0.85rem 1.85rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #ffffff;
backdrop-filter: blur(10px);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.button--hero-ghost:hover,
.button--hero-ghost:focus-visible {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
transform: translateY(-2px);
}
.button--hero-ghost *,
.button--hero-ghost span,
.button--hero-ghost i,
.button--hero-ghost .ti {
color: #ffffff;
}
.home-hero__features {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.home-hero__feature-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(231, 241, 255, 0.85);
font-size: 0.9rem;
font-weight: 500;
}
.home-hero__feature-item .ti {
font-size: 1.15rem;
color: #f4bf45;
}
.home-history {
width: min(1180px, calc(100% - 2rem));
display: grid;
gap: clamp(1.5rem, 3vw, 2.25rem);
margin-inline: auto;
padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.home-history__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 2rem;
}
.home-history__header > div {
max-width: 760px;
}
.home-history__header h2 {
margin: 0;
color: #0f2742;
font-family: "Open Sans", sans-serif;
font-size: clamp(2rem, 3.8vw, 3.2rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
}
.home-history__header p {
max-width: 680px;
margin: 0.85rem 0 0;
color: var(--public-muted);
font-size: clamp(1rem, 1.4vw, 1.12rem);
line-height: 1.6;
}
.home-history__cta {
min-height: 48px;
white-space: nowrap;
border-radius: 8px;
}
.home-history__grid {
display: grid;
gap: 2rem;
border: none;
}
.home-history-banner {
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "image content";
min-height: clamp(340px, 36vw, 440px);
background: #ffffff;
border-radius: 0;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 39, 66, 0.05);
border: 1px solid rgba(220, 230, 242, 0.7);
}
.home-history-banner + .home-history-banner {
border-top: none;
}
.home-history-banner--reverse {
grid-template-areas: "content image";
}
.home-history-banner__media {
grid-area: image;
position: relative;
margin: 0;
border-radius: 0;
overflow: hidden;
background: #dce7f1;
}
.home-history-banner__media img {
width: 100%;
height: 100%;
display: block;
border-radius: 0;
object-fit: cover;
object-position: center 54%;
transition: transform 0.45s ease;
}
.home-history-banner__media--festival img {
object-position: center 48%;
}
.home-history-banner__content {
grid-area: content;
display: grid;
align-content: center;
gap: 1rem;
padding: clamp(2rem, 5vw, 4.5rem);
}
.home-history-banner__content h3 {
margin: 0;
color: #0f2742;
font-family: "Open Sans", sans-serif;
font-size: clamp(1.6rem, 2.5vw, 2.3rem);
font-weight: 800;
line-height: 1.1;
}
.home-history-banner__content p {
margin: 0;
color: var(--public-muted);
font-size: clamp(1rem, 1.5vw, 1.12rem);
line-height: 1.65;
}
@media (hover: hover) and (pointer: fine) {
.home-history-banner:hover .home-history-banner__media img {
transform: scale(1.025);
}
}
@media (prefers-reduced-motion: reduce) {
.home-history-banner__media img {
transition: none;
}
}
.public-listing-hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
gap: 0.75rem;
min-height: 260px;
align-content: end;
padding: clamp(1.5rem, 4vw, 3rem);
border-radius: 18px;
background: var(--public-blue);
color: #ffffff;
}
.public-listing-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--public-hero-bg, none);
background-position: center;
background-size: cover;
opacity: 0.34;
}
.public-listing-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(120deg, rgba(0, 63, 124, 0.96), rgba(0, 83, 155, 0.74));
}
.public-listing-hero .eyebrow {
color: var(--public-amber);
}
.public-listing-hero h1 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.2rem, 4vw, 4rem);
}
.public-listing-hero p {
max-width: 620px;
margin: 0;
color: rgba(255, 255, 255, 0.88);
line-height: 1.55;
}
.public-filter-bar,
.public-event-card,
.public-detail-main,
.event-summary-card,
.registration-panel,
.participant-auth-card,
.account-card,
.account-sidebar,
.account-ticket-card {
border-color: var(--public-border);
border-radius: 18px;
box-shadow: var(--public-shadow);
}
.public-event-card {
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
border-radius: 18px;
}
.public-event-card__media {
position: relative;
background:
linear-gradient(135deg, #dbeafe, #f8fafc);
}
.public-event-card__body {
border: 0;
border-radius: 0;
box-shadow: none;
padding: 1.25rem 1.35rem;
}
.public-event-card h3 {
color: #172033;
font-size: clamp(1.16rem, 2vw, 1.36rem);
overflow-wrap: anywhere;
}
.public-event-card p {
color: var(--public-muted);
display: -webkit-box;
overflow: hidden;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.public-event-card .public-event-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem 1.6rem;
}
.public-event-card .public-event-meta div {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 0.45rem;
align-items: baseline;
padding: 0;
background: transparent;
}
.public-event-card .public-event-meta div:last-child {
grid-column: 1 / -1;
}
.public-event-card .public-event-meta dt {
color: #2c6ba5;
font-size: 0.74rem;
letter-spacing: 0;
text-transform: none;
}
.public-event-card .public-event-meta dd {
color: #526174;
font-weight: 800;
}
.public-event-card__footer > span {
min-height: 28px;
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.25rem 0.65rem;
background: #f1f5f9;
color: #314862;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
}
.public-event-card__footer .button {
min-height: 38px;
border-radius: 10px;
}
.public-badge {
min-height: 24px;
padding: 0.18rem 0.58rem;
border-radius: 999px;
font-size: 0.7rem;
}
.public-badge--open,
.public-badge--success {
background: #dff8ed;
color: #078052;
}
.public-badge--closed {
background: #fee2e2;
color: #b42318;
}
.public-badge--draft {
background: #e8f2ff;
color: var(--public-blue);
}
.public-badge--warning {
background: #fff4da;
color: #a15d05;
}
.public-badge--amber {
background: #fff4cf;
color: #8a5a00;
}
.public-badge--blue,
.public-badge--checkin {
background: #e8f2ff;
color: var(--public-blue);
}
/* Personalizacao visual por evento nas telas publicas. */
.public-event-card {
border-color: color-mix(in srgb, var(--event-accent, var(--public-blue)) 18%, var(--public-border));
box-shadow:
var(--public-shadow),
0 0 0 1px color-mix(in srgb, var(--event-accent, var(--public-blue)) 8%, transparent);
}
.public-event-card__media {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--event-accent, var(--public-blue)) 18%, #dbeafe),
#f8fafc
);
}
.public-event-card__fallback {
background:
linear-gradient(
135deg,
var(--event-accent, var(--public-blue)),
color-mix(in srgb, var(--event-accent, var(--public-blue)) 45%, #0f172a)
);
}
.public-event-banner,
.registration-hero,
.public-detail-main,
.event-summary-card,
.registration-panel {
border-color: color-mix(in srgb, var(--event-accent, var(--public-blue)) 18%, var(--public-border));
}
.public-event-banner::after {
background:
linear-gradient(
90deg,
rgba(7, 28, 58, 0.9) 0%,
rgba(12, 48, 94, 0.72) 46%,
color-mix(in srgb, var(--event-accent, #173b6d) 24%, rgba(7, 28, 58, 0.36)) 100%
);
opacity: var(--event-overlay-opacity, 1);
}
.public-event-banner::before {
opacity: 1;
}
.registration-hero::after {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--event-accent, #0f172a) 10%, rgba(8, 12, 18, 0.12)),
color-mix(in srgb, var(--event-accent, #0f172a) 22%, rgba(8, 12, 18, 0.88))
);
}
.public-event-meta div,
.public-info-grid div,
.ticket-details div {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--event-accent, var(--public-blue)) 30%, transparent);
}
.public-event-card .public-event-meta div {
box-shadow: none;
}
.public-copy-block .eyebrow,
.registration-panel .eyebrow,
.event-summary-card .eyebrow {
color: color-mix(in srgb, var(--event-accent, var(--public-blue)) 76%, #0f172a);
}
.public-event-card .button--primary,
.event-summary-card .button--primary,
.registration-shell .button--primary {
background:
linear-gradient(
135deg,
var(--public-blue),
color-mix(in srgb, var(--event-accent, var(--public-blue)) 62%, var(--public-blue))
);
}
.public-footer {
background:
linear-gradient(
180deg,
rgba(0, 69, 127, 0.6) 0%,
rgba(0, 69, 127, 0.86) 54%,
#00345f 100%
),
#0d243d;
color: #ffffff;
}
.public-footer__inner {
display: grid;
grid-template-columns: minmax(260px, 1.15fr) minmax(130px, 0.55fr) minmax(170px, 0.65fr) minmax(250px, 1fr);
gap: clamp(1.5rem, 5vw, 4rem);
padding: 3rem 0 2.5rem;
}
.public-footer__brand,
.public-footer nav,
.public-footer__contact {
display: grid;
align-content: start;
gap: 0.75rem;
}
.public-brand--footer .public-brand__mark {
background: #ffffff;
color: var(--public-blue);
}
.public-brand--footer strong,
.public-footer strong {
color: #ffffff;
}
.public-footer nav strong,
.public-footer__contact strong {
color: var(--public-amber);
}
.public-footer p,
.public-footer a,
.public-footer address {
margin: 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.5;
}
.public-footer address {
display: grid;
gap: 0.15rem;
font-style: normal;
}
.public-footer address span {
display: block;
}
.public-footer a:hover,
.app-tabler .public-footer a:hover {
color: #ffffff;
}
.public-socials {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.3rem;
}
.public-socials a {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
border-radius: 9px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
font-size: 1.2rem;
transition: background-color 160ms ease, transform 160ms ease;
}
.public-socials a:hover {
background: rgba(255, 255, 255, 0.22);
transform: translateY(-2px);
}
.public-socials a:focus-visible {
outline: 3px solid rgba(255, 190, 49, 0.85);
outline-offset: 3px;
}
.public-footer__bottom {
width: min(1180px, calc(100% - 2rem));
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 0 auto;
padding: 1rem 0 1.35rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.72);
font-size: 0.82rem;
}
body.page-event-dashboard .managed-event-card__actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.page-event-dashboard .managed-event-card__actions button {
min-height: 40px;
justify-content: center;
padding: 0.35rem;
border: 0;
border-radius: 7px;
background: transparent;
color: #c9cedb;
font-size: 0.72rem;
font-weight: 900;
}
body.page-event-dashboard .managed-event-card__actions button:hover {
background: #2a2b31;
color: #ffffff;
}
@media (max-width: 1280px) {
body.page-admin .schedule-admin-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
body.page-admin .schedule-admin-shell {
grid-template-columns: 1fr;
}
body.page-admin .schedule-admin-sidebar {
position: static;
min-height: 0;
}
body.page-admin .event-admin-menu {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
body.page-admin .schedule-admin-content {
width: min(100% - 1.5rem, 100%);
padding-top: 1.6rem;
}
body.page-admin .admin-grid,
body.page-admin .selector-grid,
body.page-admin .admin-form-grid,
body.page-admin .schedule-admin-metrics {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
body.page-admin .event-admin-profile {
grid-template-columns: 42px minmax(0, 1fr);
}
body.page-admin .event-admin-profile .role-badge {
grid-column: 2;
}
body.page-admin .event-role-switch {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
}
body.page-admin .schedule-admin-topbar {
justify-content: flex-start;
padding-inline: 0.8rem;
}
body.page-admin .section-heading,
body.page-admin .inline-actions,
body.page-admin .inline-actions--stretch,
body.page-admin .form-actions {
align-items: stretch;
flex-direction: column;
}
}
@media (max-width: 980px) {
.public-event-card,
.public-detail-layout,
.participant-auth-page--split,
.account-shell,
.registration-layout {
grid-template-columns: 1fr;
}
.event-summary-card,
.account-sidebar {
position: static;
}
.public-info-grid,
.account-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.public-header__toggle {
display: block;
}
.public-nav {
position: absolute;
left: 1rem;
right: 1rem;
top: calc(100% + 0.45rem);
display: none;
flex-direction: column;
align-items: stretch;
padding: 0.75rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 16px 36px rgba(20, 46, 82, 0.14);
}
.public-header.is-open .public-nav {
display: flex;
}
.public-nav form,
.public-nav a,
.public-nav button {
width: 100%;
justify-content: flex-start;
}
.public-hero,
.public-event-banner {
min-height: 420px;
border-radius: 10px;
}
.public-event-card__footer,
.public-section-heading,
.section-heading,
.account-next-event,
.account-agenda-item,
.account-ticket-card {
align-items: stretch;
flex-direction: column;
}
.public-form--grid,
.public-event-meta,
.public-info-grid,
.account-metrics,
.account-profile-form__grid,
.account-agenda-item,
.account-ticket-card--full {
grid-template-columns: 1fr;
}
.account-agenda-item__status {
justify-items: start;
max-width: 100%;
width: fit-content;
text-align: left;
}
.account-profile-hero {
grid-template-columns: 1fr;
justify-items: start;
}
.account-profile-hero__meta {
width: 100%;
}
.account-ticket-card__qr {
border-left: 0;
border-top: 1px dashed rgba(31, 65, 114, 0.2);
padding-top: 1rem;
}
.account-profile-form {
padding: 1rem;
}
.account-profile-form__actions {
align-items: stretch;
justify-content: stretch;
}
.account-profile-form__submit {
width: 100%;
justify-content: center;
}
.participant-auth-side {
min-height: 320px;
}
}
/* Pagina publica Sobre. */
body.page-public-about {
background: #ffffff;
color: #15263a;
}
body.page-public-about::before {
display: none;
}
.about-page {
min-height: 448px;
display: grid;
align-items: start;
background: #ffffff;
}
.about-page .flash-stack {
width: min(690px, calc(100% - 2rem));
margin: 1rem auto 0;
}
.about-content {
width: min(690px, calc(100% - 2rem));
display: grid;
gap: 1rem;
margin: 0 auto;
padding: clamp(3.8rem, 7vw, 4.4rem) 0 clamp(7.5rem, 14vw, 10.6rem);
}
.about-content h1 {
margin: 0 0 0.25rem;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.15rem, 3.5vw, 2.6rem);
line-height: 1.1;
}
.about-content p {
margin: 0;
color: #24364c;
font-size: 1.02rem;
line-height: 1.6;
}
.about-content strong {
color: #0f2238;
font-weight: 900;
}
/* Aviso publico de privacidade. */
body.page-public-privacy {
background: #f4f7fb;
color: #15263a;
}
body.page-public-privacy::before {
display: none;
}
.privacy-page {
width: min(1120px, calc(100% - 2rem));
min-height: 520px;
display: grid;
gap: 1.25rem;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem);
}
.privacy-hero {
display: grid;
gap: 0.9rem;
padding: clamp(1.5rem, 4vw, 2.5rem);
border: 1px solid #d9e2ed;
border-radius: 20px;
background: linear-gradient(135deg, #ffffff 0%, #edf5fc 100%);
box-shadow: 0 20px 50px rgba(23, 50, 82, 0.08);
}
.privacy-hero h1 {
max-width: 780px;
margin: 0;
color: #0b1f3a;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
}
.privacy-hero > p {
max-width: 780px;
margin: 0;
color: #52647a;
font-size: 1.02rem;
line-height: 1.65;
}
.privacy-meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.privacy-meta span {
padding: 0.4rem 0.7rem;
border: 1px solid #cfdeed;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: #31536f;
font-size: 0.78rem;
font-weight: 800;
}
.privacy-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.privacy-section {
padding: 1.5rem;
border: 1px solid #dce4ed;
border-radius: 16px;
background: #ffffff;
}
.privacy-section h2,
.privacy-review-note h2 {
margin: 0 0 0.75rem;
color: #0b1f3a;
font-size: 1.12rem;
}
.privacy-section p,
.privacy-review-note p {
margin: 0;
color: #52647a;
line-height: 1.65;
}
.privacy-section p + p {
margin-top: 0.75rem;
}
.privacy-review-note {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 1rem;
padding: 1.35rem 1.5rem;
border: 1px solid #bcd4e8;
border-radius: 16px;
background: #eaf4fb;
}
.privacy-review-note > i {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 12px;
background: #ffffff;
color: #005da4;
font-size: 1.35rem;
}
.privacy-review-note small {
display: block;
margin-top: 0.65rem;
color: #46667e;
overflow-wrap: anywhere;
}
.public-footer__bottom a {
color: inherit;
}
@media (max-width: 760px) {
.privacy-grid {
grid-template-columns: minmax(0, 1fr);
}
.privacy-page {
width: min(100% - 1.5rem, 100%);
padding: 2rem 0 4.5rem;
}
.privacy-hero,
.privacy-section,
.privacy-review-note {
padding: 1.2rem;
}
}
@media (max-width: 760px) {
.about-content,
.about-page .flash-stack {
width: min(100% - 1.5rem, 100%);
}
.about-content {
padding: 3rem 0 5.5rem;
}
}
@media (max-width: 520px) {
.public-header__inner,
.public-page,
.public-footer__inner,
.account-shell,
.participant-auth-page,
.registration-shell {
width: min(100% - 1rem, 100%);
}
.public-hero h1 {
font-size: clamp(2rem, 11vw, 3rem);
}
.public-event-card__body,
.public-detail-main,
.event-summary-card,
.registration-form,
.registration-ticket,
.participant-auth-card {
padding: 0.9rem;
}
.qr-modal__panel {
padding: 0.9rem;
}
}
@media (max-width: 980px) {
.home-benefits {
grid-template-columns: 1fr;
}
.public-footer__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
width: min(1180px, calc(100% - 32px));
padding: 32px 0 24px;
}
.public-footer__brand,
.public-footer__contact {
grid-column: 1 / -1;
min-width: 0;
gap: 8px;
}
.public-footer nav {
min-width: 0;
gap: 4px;
}
.public-footer nav strong { margin-bottom: 4px; }
.public-footer nav a { display: flex; align-items: center; min-height: 36px; }
.public-footer__contact { gap: 4px; }
.public-footer__contact strong { margin-bottom: 4px; }
.public-footer__contact a { width: fit-content; min-height: 32px; overflow-wrap: anywhere; }
.public-footer address { gap: 0; }
.public-footer .public-footer__bottom { width: calc(100% - 32px); gap: 8px; padding: 16px 0; }
.home-history__header {
grid-template-columns: 1fr;
align-items: start;
gap: 1.25rem;
}
.home-history__cta {
width: fit-content;
}
.public-event-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 991.98px) {
.public-header__menu {
position: absolute;
left: 1rem;
right: 1rem;
top: calc(100% + 0.45rem);
display: none;
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
padding: 0.85rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-radius: 14px;
background: #ffffff;
box-shadow: 0 18px 42px rgba(20, 46, 82, 0.16);
}
.public-header.is-open .public-header__menu {
display: flex;
}
.public-nav {
position: static;
inset: auto;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
margin: 0;
}
.public-header.is-open .public-nav {
display: flex;
}
.public-header__actions {
flex-direction: column;
align-items: stretch;
padding-top: 0.7rem;
border-top: 1px solid rgba(31, 65, 114, 0.1);
}
.public-header__actions form,
.public-user-menu,
.public-header__actions a,
.public-header__actions button,
.public-header__actions .public-nav__cta {
width: 100%;
justify-content: flex-start;
}
.public-user-menu summary {
width: 100%;
justify-content: flex-start;
}
.public-user-menu__name {
max-width: none;
}
.public-user-menu__panel {
position: static;
width: 100%;
margin-top: 0.4rem;
padding: 0.65rem;
box-shadow: 0 14px 28px rgba(20, 46, 82, 0.1);
}
}
@media (max-width: 760px) {
.home-hero {
min-height: 500px;
}
.home-hero h1 {
font-size: clamp(2.3rem, 12vw, 3.5rem);
}
.home-hero__actions .button {
width: 100%;
justify-content: center;
}
.home-history {
gap: 1.4rem;
padding-block: 3.5rem 2.5rem;
}
.home-history__grid {
border-color: var(--public-border);
}
.home-history__cta {
width: 100%;
justify-content: center;
}
.home-history-banner,
.home-history-banner--reverse {
grid-template-columns: 1fr;
grid-template-areas:
"image"
"content";
min-height: 0;
}
.home-history-banner__media {
aspect-ratio: 4 / 3;
}
.home-history-banner__content {
min-height: 230px;
padding: 1.6rem;
}
.public-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
.public-event-card .public-event-meta,
.public-event-card .public-event-meta div {
grid-template-columns: 1fr;
gap: 0.15rem;
}
}
@media (max-width: 520px) {
.home-benefits,
.home-history,
.home-hero__content,
.home-page .flash-stack,
.public-footer__bottom {
width: min(100% - 1rem, 100%);
}
.home-benefit-card {
min-height: 132px;
padding: 1.1rem;
}
}
/* Aba publica de eventos no modelo da referencia CRECI-CE. */
.events-page {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
background: #ffffff;
}
body.app-tabler.page-public-events,
body.app-tabler.page-public-events > main.events-page,
body.app-tabler.page-public-events > main.events-page > .events-hero {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
.events-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background:
url("../images/events-hero-creci.jpg") center 48% / cover no-repeat,
#004a8f;
color: #ffffff;
}
.events-hero::before {
content: "eventos";
position: absolute;
left: -0.35rem;
top: -2.4rem;
z-index: 1;
pointer-events: none;
color: rgba(255, 255, 255, 0.035);
font-family: "Space Grotesk", sans-serif;
font-size: clamp(5rem, 13vw, 11rem);
font-weight: 900;
letter-spacing: 0;
}
.events-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: rgba(0, 74, 143, 0.45);
}
.events-hero__inner {
position: relative;
z-index: 2;
width: min(1180px, calc(100% - 2rem));
display: grid;
gap: 1rem;
margin: 0 auto;
padding: clamp(48px, 6vw, 80px) 0;
}
.events-breadcrumb {
display: flex;
align-items: center;
gap: 0.55rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.84rem;
font-weight: 800;
}
.events-breadcrumb strong {
color: #ffffff;
}
.events-hero h1 {
max-width: 780px;
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(3rem, 5vw, 4.7rem);
line-height: 0.98;
text-shadow: 0 14px 34px rgba(0, 28, 62, 0.32);
}
.events-hero h1 span {
display: inline-block;
white-space: nowrap;
color: var(--public-amber);
}
.events-hero p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.93);
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.5;
text-shadow: 0 10px 22px rgba(0, 28, 62, 0.26);
}
.events-featured,
.events-catalog {
width: min(1180px, calc(100% - 2rem));
margin-inline: auto;
}
.events-featured {
position: relative;
z-index: 2;
margin-top: 24px;
}
.events-featured-card {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
overflow: hidden;
border: 1px solid var(--public-border);
border-radius: 20px;
background: #ffffff;
box-shadow: 0 24px 56px rgba(16, 53, 93, 0.14);
}
.events-featured-card__media {
position: relative;
width: 100%;
min-width: 0;
min-height: 0;
aspect-ratio: 16 / 9;
align-self: start;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(135deg, #dbeafe, #f8fafc);
}
.events-featured-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.events-featured-card__body {
min-width: 0;
display: grid;
align-content: center;
gap: 1rem;
padding: clamp(1.4rem, 4vw, 2.4rem);
}
.events-featured-card__body h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.8rem, 3vw, 2.35rem);
line-height: 1.08;
overflow-wrap: anywhere;
}
.events-featured-card__body p {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: var(--public-muted);
font-size: 1.02rem;
line-height: 1.55;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.events-featured-meta {
display: grid;
gap: 0.62rem;
margin: 0;
}
.events-featured-meta div {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 0.65rem;
align-items: baseline;
}
.events-featured-meta dt {
color: var(--public-blue);
font-size: 0.75rem;
font-weight: 900;
}
.events-featured-meta dd {
margin: 0;
color: #172033;
font-weight: 800;
}
.events-vacancy-pill {
width: fit-content;
min-height: 28px;
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.25rem 0.68rem;
background: #f1f5f9;
color: #314862;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
}
.events-vacancy-pill--soldout {
border: 1px solid #fecdd3;
background: #fff1f2;
color: #9f1239;
}
.events-featured-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.6rem;
}
.events-featured-card__actions .button {
min-height: 44px;
border-radius: 10px;
padding-inline: 1.2rem;
}
.events-catalog {
display: grid;
gap: 1.2rem;
min-width: 0;
padding: clamp(24px, 4vw, 48px) 0 48px;
}
.events-catalog__toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
align-items: end;
gap: 1.2rem;
}
.events-catalog__heading h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.65rem, 3vw, 2rem);
}
.events-catalog__heading p {
margin: 0.35rem 0 0;
color: var(--public-muted);
}
.events-search label {
min-height: 44px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.55rem;
padding: 0 0.75rem;
border: 1px solid var(--public-border);
border-radius: 12px;
background: #ffffff;
color: #64748b;
}
.events-search input {
width: 100%;
min-height: 44px;
border: 0;
outline: 0;
appearance: none;
background: #ffffff;
color: #15263a;
caret-color: var(--public-blue);
color-scheme: light;
font: inherit;
}
.events-search input::placeholder {
color: #7b8798;
opacity: 1;
}
.events-filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.events-filter-tabs a {
min-height: 44px;
display: inline-flex;
align-items: center;
border: 1px solid var(--public-border);
border-radius: 999px;
padding: 0.42rem 1rem;
background: #ffffff;
color: #334155;
font-weight: 800;
}
.events-filter-tabs a:hover,
.events-filter-tabs a.is-active {
border-color: var(--public-blue);
background: var(--public-blue);
color: #ffffff;
}
.public-event-list--events {
gap: 1.1rem;
margin-top: 0.8rem;
}
.public-event-list--events .public-event-card {
grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
}
.events-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
margin-top: 1.4rem;
}
.events-pagination a {
min-width: 36px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--public-border);
border-radius: 9px;
padding: 0.45rem 0.75rem;
background: #ffffff;
color: #1e293b;
font-weight: 800;
}
.events-pagination a.is-active,
.events-pagination a:hover {
border-color: var(--public-blue);
background: var(--public-blue);
color: #ffffff;
}
.events-results-note {
margin: 0;
color: var(--public-muted);
text-align: center;
font-size: 0.86rem;
}
@media (max-width: 980px) {
.events-featured-card,
.events-catalog__toolbar,
.public-event-list--events .public-event-card {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.events-hero__inner,
.events-featured,
.events-catalog {
width: calc(100% - 32px);
}
.events-hero__inner {
padding: 32px 0;
}
.events-hero h1 {
font-size: clamp(2rem, 8vw, 3rem);
line-height: 1.12;
}
.events-featured-card {
border-radius: 16px;
}
.events-featured-meta div {
grid-template-columns: 1fr;
gap: 0.12rem;
}
.events-featured-card__actions .button,
.events-search,
.events-search label {
width: 100%;
}
.events-featured-card__actions {
flex-direction: column;
}
.events-filter-tabs {
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.15rem;
}
.events-filter-tabs a {
flex: 0 0 auto;
}
}
/* Login publico do participante no modelo split-screen. */
body.page-participant-login {
background: #ffffff;
color: #0f172a;
}
body.page-participant-login::before {
display: none;
}
.participant-login-shell {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
background: #ffffff;
}
.participant-login-brand {
position: relative;
isolation: isolate;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2rem;
padding: clamp(2rem, 4vw, 3.2rem);
overflow: hidden;
background:
linear-gradient(155deg, rgba(0, 74, 143, 0.98), rgba(0, 83, 155, 0.96) 58%, rgba(44, 126, 171, 0.93)),
#004a8f;
color: #ffffff;
}
.participant-login-brand::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.1), transparent 24rem),
linear-gradient(120deg, transparent 0 48%, rgba(255, 255, 255, 0.052) 48.2% 67%, transparent 67.2%);
}
.participant-login-brand__logo {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 0.65rem;
}
.participant-login-brand__logo > span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: #ffffff;
color: var(--public-blue);
font-weight: 900;
}
.participant-login-brand__logo strong,
.participant-login-brand__logo small {
display: block;
line-height: 1.08;
}
.participant-login-brand__logo strong {
color: #ffffff;
font-size: 0.96rem;
}
.participant-login-brand__logo small {
margin-top: 0.08rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.68rem;
}
.participant-login-brand__copy {
align-self: end;
display: grid;
gap: 0.7rem;
max-width: 620px;
padding-bottom: clamp(7rem, 17vw, 14rem);
}
.participant-login-brand__copy h1 {
margin: 0;
max-width: 760px;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.2rem, 4vw, 3rem);
line-height: 1.05;
}
.participant-login-brand__copy h1 span {
color: var(--public-amber);
}
.participant-login-brand__copy p,
.participant-login-brand__copyright {
margin: 0;
color: rgba(255, 255, 255, 0.9);
}
.participant-login-brand__copy p {
max-width: 520px;
font-size: 1.03rem;
line-height: 1.55;
}
.participant-login-brand__copyright {
font-size: 0.82rem;
}
.participant-login-panel {
display: grid;
place-items: center;
padding: clamp(2rem, 5vw, 4rem);
background: #ffffff;
}
.participant-login-card {
width: min(420px, 100%);
display: grid;
gap: 1rem;
}
.participant-login-card .flash-stack {
margin: 0 0 0.4rem;
}
.participant-login-card h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1.85rem;
line-height: 1.12;
}
.participant-login-card > p {
margin: -0.45rem 0 0.9rem;
color: #526174;
}
.participant-login-form {
display: grid;
gap: 1rem;
}
.participant-login-form .field {
display: grid;
gap: 0.42rem;
}
.participant-login-form .field > span,
.participant-login-form .field > label {
color: #0f172a;
font-weight: 800;
}
.participant-login-form input[type="email"],
.participant-login-form input[type="password"],
.participant-login-form .participant-password-field input[type="text"] {
width: 100%;
min-height: 40px;
border: 1px solid var(--public-border);
border-radius: 10px;
background: #ffffff;
color: #15263a;
padding: 0.65rem 0.85rem;
outline: 0;
}
.participant-login-form input[type="email"]:focus,
.participant-login-form input[type="password"]:focus,
.participant-login-form .participant-password-field input[type="text"]:focus {
border-color: color-mix(in srgb, var(--public-blue) 55%, var(--public-border));
box-shadow: 0 0 0 4px rgba(0, 74, 143, 0.1);
}
.participant-password-field {
position: relative;
display: block;
width: 100%;
}
.field .participant-password-field input {
width: 100%;
padding-right: 3rem;
}
.participant-login-form .participant-password-field input {
padding-right: 3rem;
}
.participant-password-field > button {
position: absolute;
top: 50%;
right: 0.45rem;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #526174;
cursor: pointer;
transform: translateY(-50%);
}
.participant-password-field > button:hover {
background: #eef4f9;
color: var(--public-blue);
}
.participant-password-field > button:focus-visible {
outline: 3px solid rgba(0, 74, 143, 0.18);
outline-offset: 1px;
}
.participant-password-requirements {
display: grid;
gap: 0.45rem;
margin: -0.15rem 0 0;
padding: 0;
color: #526174;
font-size: 0.84rem;
list-style: none;
}
.participant-password-requirements li {
display: flex;
align-items: center;
gap: 0.45rem;
}
.participant-password-requirements li i {
color: #8190a3;
font-size: 1rem;
}
.participant-password-requirements li.is-valid {
color: #067647;
font-weight: 700;
}
.participant-password-requirements li.is-valid i {
color: #079455;
}
.participant-password-requirements li.is-invalid,
.participant-password-error {
color: #b42318;
font-weight: 700;
}
.participant-password-error {
margin: -0.35rem 0 0;
font-size: 0.84rem;
}
.participant-login-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: #24364c;
font-size: 0.93rem;
}
.participant-login-options label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.participant-login-options input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin: 0;
padding: 0;
accent-color: #005da4;
}
.participant-login-help,
.participant-login-switch a {
color: var(--public-blue);
font-weight: 900;
}
.participant-login-help {
cursor: pointer;
}
.participant-login-form .button {
min-height: 46px;
border-radius: 10px;
background: var(--public-blue);
box-shadow: 0 14px 28px rgba(0, 74, 143, 0.12);
}
.participant-login-switch {
margin: 0.65rem 0 0;
color: #526174;
text-align: center;
}
@media (max-width: 860px) {
.participant-login-shell {
grid-template-columns: 1fr;
}
.participant-login-brand {
min-height: 360px;
}
.participant-login-brand__copy {
padding-bottom: 1rem;
}
.participant-login-panel {
min-height: 520px;
align-items: start;
}
}
@media (max-width: 520px) {
.participant-login-brand,
.participant-login-panel {
padding: 1.35rem;
}
.participant-login-brand {
min-height: 330px;
}
.participant-login-brand__copy h1 {
font-size: clamp(2rem, 10vw, 2.55rem);
}
.participant-login-panel {
min-height: auto;
}
.participant-login-options {
align-items: flex-start;
flex-direction: column;
gap: 0.55rem;
}
}
/* Admin redesign inspired by the CRECI-CE reference screens. */
html:has(body.page-event-dashboard) {
overflow-y: hidden;
}
body.page-event-dashboard {
--admin-bg: #f6f8fb;
--admin-surface: #ffffff;
--admin-blue: #004a8f;
--admin-blue-strong: #003f7c;
--admin-blue-soft: #e6f2ff;
--admin-blue-soft-2: #f0f7ff;
--admin-text: #061529;
--admin-muted: #4d5f78;
--admin-border: #d9e4f0;
--admin-shadow: 0 14px 34px rgba(15, 44, 78, 0.08);
--admin-gold: #f4c542;
--admin-success: #00875a;
--admin-success-soft: #dcfce7;
--admin-warning: #b45309;
--admin-warning-soft: #fef3c7;
--admin-danger: #b91c1c;
--admin-danger-soft: #fee2e2;
height: 100vh;
min-height: 100vh;
overflow-y: auto;
background: var(--admin-bg) !important;
color: var(--admin-text);
font-family: "Source Sans 3", system-ui, sans-serif;
}
body.page-event-dashboard::before {
display: none !important;
}
.admin-redesign {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 224px minmax(0, 1fr);
gap: 0;
}
.admin-mobile-bar,
.admin-mobile-backdrop,
.admin-sidebar-mobile-close,
.admin-sidebar-mobile-event,
.admin-workspace-mobile-breadcrumb {
display: none;
}
.admin-sidebar {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
}
.admin-sidebar-card,
.admin-page-topbar,
.admin-card,
.admin-metric-card {
background: var(--admin-surface);
border: 1px solid var(--admin-border);
box-shadow: var(--admin-shadow);
}
.admin-sidebar-card {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0;
}
.admin-sidebar-brand {
min-height: 58px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--admin-border);
text-decoration: none;
}
.admin-sidebar-brand:hover {
text-decoration: none;
}
.admin-sidebar-brand > span,
.admin-user-avatar {
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 11px;
background: var(--admin-blue);
color: #ffffff;
font-weight: 900;
}
.admin-sidebar-brand > span {
width: 34px;
height: 34px;
font-size: 0.86rem;
}
.admin-sidebar-brand strong,
.admin-sidebar-brand small,
.admin-sidebar-user strong,
.admin-sidebar-user small {
display: block;
line-height: 1.08;
}
.admin-sidebar-brand strong {
color: var(--admin-text);
font-size: 0.98rem;
}
.admin-sidebar-brand small,
.admin-sidebar-user small {
margin-top: 0.16rem;
color: var(--admin-muted);
font-size: 0.78rem;
font-weight: 600;
}
.admin-sidebar-user {
padding: 12px 14px;
display: grid;
gap: 8px;
background: #eef5fc;
border-bottom: 1px solid var(--admin-border);
}
.admin-user-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.admin-user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.05rem;
}
.admin-user-row div,
.admin-user-list article > div {
min-width: 0;
}
.admin-sidebar-user strong,
.admin-user-list strong {
overflow: hidden;
color: var(--admin-text);
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-role-badge,
.admin-status {
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.admin-role-badge {
min-height: 20px;
padding: 0.18rem 0.62rem;
background: #f6cc4f;
color: #4a3000;
}
.admin-role-badge--manager {
background: var(--admin-warning-soft);
color: var(--admin-warning);
}
.admin-role-badge--checker {
background: var(--admin-success-soft);
color: var(--admin-success);
}
.admin-sidebar-nav {
padding: 7px 10px;
display: grid;
gap: 2px;
}
.admin-sidebar-section-label {
padding: 12px 14px 2px;
color: #8fa9c0;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.admin-sidebar-access-note {
margin: 0;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: #b9cde0;
font-size: 0.8rem;
line-height: 1.45;
}
.admin-sidebar-link {
width: 100%;
min-height: 34px;
padding: 0 9px;
display: flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 7px;
background: transparent;
color: #334155;
font-size: 0.82rem;
font-weight: 800;
text-align: left;
transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.admin-sidebar-link span,
.admin-row-icon,
.admin-metric-card i,
.admin-check-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
}
.admin-sidebar-link span {
width: 20px;
height: 20px;
color: inherit;
font-size: 0.72rem;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.admin-sidebar-link:hover {
background: var(--admin-blue-soft-2);
color: var(--admin-blue);
}
.admin-sidebar-link.is-active {
background: var(--admin-blue);
color: #ffffff;
box-shadow: 0 10px 24px rgba(0, 74, 143, 0.18);
}
.admin-sidebar-link.is-disabled,
.admin-sidebar-link:disabled {
cursor: not-allowed;
opacity: 0.48;
}
.admin-sidebar-link.is-disabled:hover,
.admin-sidebar-link:disabled:hover {
background: transparent;
color: #334155;
}
.admin-sidebar-cycle {
min-height: 0;
padding: 2px 10px 10px;
display: grid;
align-content: start;
gap: 1px;
flex: 1 1 auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.admin-sidebar-cycle__group {
display: grid;
gap: 2px;
padding-top: 7px;
}
.admin-sidebar-cycle__label {
padding: 0 8px;
color: #8fa9c0;
font-size: 0.61rem;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.admin-sidebar-cycle__group nav {
display: grid;
gap: 2px;
}
.admin-sidebar-cycle a,
.admin-sidebar-cycle button {
width: 100%;
min-height: 30px;
padding: 0 8px;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 6px;
border: 0;
border-radius: 7px;
background: transparent;
color: #d7e4f2;
font-size: 0.77rem;
font-weight: 800;
text-align: left;
text-decoration: none;
transition: background var(--motion-fast), color var(--motion-fast);
}
.admin-sidebar-cycle a span,
.admin-sidebar-cycle button span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-sidebar-cycle a:hover,
.admin-sidebar-cycle button:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
text-decoration: none;
}
.admin-sidebar-cycle a.is-active,
.admin-sidebar-cycle button.is-active {
background: var(--admin-blue);
color: #ffffff;
}
.admin-sidebar-footer {
margin-top: auto;
padding: 8px 12px;
display: grid;
gap: 6px;
border-top: 1px solid var(--admin-border);
}
.admin-sidebar-footer a,
.admin-sidebar-footer button {
width: 100%;
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
background: transparent;
color: #475569;
font-size: 0.78rem;
font-weight: 800;
text-align: left;
}
.admin-sidebar-footer a:hover,
.admin-sidebar-footer button:hover {
color: var(--admin-blue);
}
.admin-workspace {
min-width: 0;
padding: 16px;
display: grid;
gap: 16px;
}
.admin-workspace-context {
position: sticky;
top: 12px;
z-index: 35;
min-width: 0;
overflow: visible;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 16px 40px rgba(15, 35, 64, 0.1);
backdrop-filter: blur(14px);
}
.admin-workspace-breadcrumb {
min-width: 0;
padding: 9px 16px;
border-bottom: 1px solid var(--admin-border);
background: #f8fbff;
border-radius: 18px 18px 0 0;
}
.admin-workspace-breadcrumb ol {
min-width: 0;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 7px;
overflow: hidden;
list-style: none;
}
.admin-workspace-breadcrumb li {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--admin-muted);
font-size: 0.76rem;
font-weight: 800;
white-space: nowrap;
}
.admin-workspace-breadcrumb li[hidden] {
display: none;
}
.admin-workspace-breadcrumb button {
max-width: min(34vw, 330px);
overflow: hidden;
padding: 0;
border: 0;
background: transparent;
color: var(--admin-blue);
font: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-workspace-breadcrumb button:hover {
text-decoration: underline;
}
.admin-workspace-breadcrumb strong {
max-width: min(28vw, 260px);
overflow: hidden;
color: var(--admin-text);
text-overflow: ellipsis;
}
.admin-workspace-context__bar {
min-width: 0;
padding: 12px 16px;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
align-items: center;
gap: 16px;
}
.admin-workspace-context__identity {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.admin-workspace-context__icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 42px;
border-radius: 12px;
background: var(--admin-blue-soft);
color: var(--admin-blue);
font-size: 1.15rem;
overflow: hidden;
}
.admin-workspace-context__icon img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.admin-workspace-context__identity > div {
min-width: 0;
}
.admin-workspace-context__identity small,
.admin-workspace-context__identity strong,
.admin-workspace-context__identity span {
display: block;
}
.admin-workspace-context__identity small {
color: var(--admin-blue);
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-workspace-context__identity strong {
overflow: hidden;
margin-top: 2px;
color: var(--admin-text);
font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-workspace-context__identity span {
overflow: hidden;
margin-top: 1px;
color: var(--admin-muted);
font-size: 0.76rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-workspace-context__controls {
min-width: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
gap: 8px;
}
.admin-workspace-context__controls > .admin-ghost-button,
.admin-workspace-context__controls > .admin-primary-button {
min-height: 34px;
padding-inline: 0.68rem;
gap: 6px;
white-space: nowrap;
}
.admin-event-switcher {
min-width: 270px;
display: grid;
grid-template-columns: minmax(170px, 1fr) auto;
gap: 4px 6px;
}
.admin-event-switcher label {
grid-column: 1 / -1;
color: var(--admin-muted);
font-size: 0.64rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-event-switcher select,
.admin-event-switcher__submit,
.admin-context-more {
min-height: 34px;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: #ffffff;
color: var(--admin-text);
font-weight: 800;
}
.admin-event-switcher select {
min-width: 0;
max-width: 320px;
padding: 0 2.1rem 0 0.72rem;
}
.admin-event-switcher__submit {
padding: 0 0.72rem;
color: var(--admin-blue);
}
.admin-event-switcher__submit:hover,
.admin-context-more:hover {
border-color: #9ec9f5;
background: var(--admin-blue-soft);
color: var(--admin-blue);
}
.admin-context-more {
width: 34px;
padding: 0;
flex: 0 0 34px;
}
.admin-context-open-event {
display: none;
}
.admin-workspace-context.is-portfolio-view .admin-context-open-event {
display: inline-flex;
}
.admin-event-phase-nav {
min-width: 0;
padding: 10px 12px 12px;
display: flex;
gap: 8px;
overflow-x: auto;
border-top: 1px solid var(--admin-border);
scrollbar-width: thin;
scrollbar-color: #b7c8da transparent;
}
.admin-workspace-context.is-portfolio-view .admin-event-phase-nav {
display: none;
}
.admin-event-phase-group {
min-width: 128px;
padding: 8px;
display: grid;
gap: 6px;
align-content: start;
border: 1px solid transparent;
border-radius: 12px;
background: #f7f9fc;
transition: border-color var(--motion-fast), background var(--motion-fast);
}
.admin-event-phase-group.is-active {
border-color: #a9cdee;
background: var(--admin-blue-soft);
}
.admin-event-phase-group header {
display: flex;
align-items: center;
gap: 6px;
color: #526179;
font-size: 0.69rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.admin-event-phase-group.is-active header {
color: var(--admin-blue);
}
.admin-event-phase-group__items {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.admin-event-phase-group__items button,
.admin-event-phase-group__items a {
min-height: 30px;
padding: 0 8px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid #d8e2ed;
border-radius: 8px;
background: #ffffff;
color: #334155;
font-size: 0.72rem;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}
.admin-event-phase-group__items button:hover,
.admin-event-phase-group__items button.is-active,
.admin-event-phase-group__items a:hover,
.admin-event-phase-group__items a.is-active {
border-color: var(--admin-blue);
background: var(--admin-blue);
color: #ffffff;
}
.admin-disabled-modules {
min-width: 0;
border-top: 1px solid var(--admin-border);
background: #f8fafc;
}
.admin-disabled-modules > summary {
min-height: 44px;
padding: 7px 14px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 20px;
align-items: center;
gap: 9px;
cursor: pointer;
color: #475569;
list-style: none;
}
.admin-disabled-modules > summary::-webkit-details-marker {
display: none;
}
.admin-disabled-modules > summary > span {
min-width: 0;
display: grid;
gap: 1px;
}
.admin-disabled-modules > summary strong,
.admin-disabled-modules > summary small {
overflow-wrap: anywhere;
}
.admin-disabled-modules > summary strong {
color: #334155;
font-size: 0.78rem;
}
.admin-disabled-modules > summary small {
color: #64748b;
font-size: 0.68rem;
}
.admin-disabled-modules[open] > summary > i:last-child {
transform: rotate(180deg);
}
.admin-disabled-modules__body {
padding: 0 14px 12px 43px;
}
.admin-disabled-modules__body > p {
margin: 0 0 8px;
color: #64748b;
font-size: 0.74rem;
line-height: 1.4;
}
.admin-disabled-modules__body ul {
margin: 0;
padding: 0;
display: grid;
gap: 6px;
list-style: none;
}
.admin-disabled-modules__body li {
min-width: 0;
padding: 7px 8px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border: 1px solid #dbe4ee;
border-radius: 9px;
background: #ffffff;
}
.admin-disabled-modules__body li > span {
min-width: 0;
display: grid;
gap: 1px;
}
.admin-disabled-modules__body li strong {
color: #334155;
font-size: 0.76rem;
}
.admin-disabled-modules__body li small {
color: #64748b;
font-size: 0.68rem;
line-height: 1.3;
}
.admin-disabled-modules__body li a {
min-height: 32px;
padding: 0 9px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #bfdbfe;
border-radius: 8px;
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
text-decoration: none;
}
.admin-disabled-modules__body li a:hover {
border-color: var(--admin-blue);
background: var(--admin-blue-soft);
}
.admin-disabled-modules--mobile {
overflow: hidden;
border: 1px solid var(--admin-border);
border-radius: 12px;
}
.admin-tab-panel {
display: grid;
gap: 24px;
}
.admin-tab-panel[hidden] {
display: none !important;
}
.admin-selected-event-card {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--admin-blue) 18%, var(--admin-border));
border-radius: 20px;
background: var(--admin-surface);
box-shadow: var(--admin-shadow);
}
.admin-selected-event-card__top {
min-height: 42px;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
border-bottom: 1px solid color-mix(in srgb, var(--admin-blue) 15%, var(--admin-border));
background: rgba(230, 242, 255, 0.72);
}
.admin-selected-event-card__top span,
.admin-selected-pill,
.admin-selected-action,
.admin-chip {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.admin-selected-event-card__top span {
min-height: 22px;
padding: 0 0.7rem;
background: var(--admin-blue);
color: #ffffff;
}
.admin-selected-event-card__top small {
color: color-mix(in srgb, var(--admin-blue) 82%, var(--admin-muted));
font-size: 0.78rem;
font-weight: 800;
}
.admin-selected-event-card__body {
padding: 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
gap: 22px;
align-items: start;
}
.admin-selected-event-card__identity {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 16px;
}
.admin-selected-event-card__thumb {
width: 96px;
height: 96px;
overflow: hidden;
display: grid;
place-items: center;
flex: 0 0 96px;
border-radius: 16px;
background: linear-gradient(135deg, var(--admin-blue-soft), #dbeafe);
color: var(--admin-blue);
font-size: 1.6rem;
font-weight: 900;
}
.admin-selected-event-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-selected-event-card__content {
min-width: 0;
}
.admin-selected-event-card__content > p {
margin: 0;
color: var(--admin-muted);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-selected-event-card__content h2 {
max-width: 44rem;
margin: 0.2rem 0 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
line-height: 1.12;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.admin-selected-event-card__details,
.admin-selected-event-card__chips {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.admin-selected-event-card__details {
gap: 8px 18px;
margin-top: 9px;
color: var(--admin-muted);
font-size: 0.92rem;
font-weight: 700;
}
.admin-selected-event-card__details span {
min-width: 0;
}
.admin-selected-event-card__chips {
gap: 7px;
margin-top: 13px;
}
.admin-chip {
min-height: 24px;
padding: 0 0.68rem;
letter-spacing: 0.02em;
}
.admin-chip--primary {
background: var(--admin-blue-soft);
color: var(--admin-blue);
}
.admin-chip--success {
background: var(--admin-success-soft);
color: var(--admin-success);
}
.admin-chip--gold {
background: #fff1c2;
color: #7a4a00;
}
.admin-chip--warning {
background: var(--admin-warning-soft);
color: var(--admin-warning);
}
.admin-chip--muted {
background: #eef2f7;
color: #475569;
}
.admin-selected-event-card__actions {
min-width: 0;
width: min(220px, 100%);
display: grid;
gap: 8px;
justify-self: end;
}
.admin-selected-event-card__actions form {
margin: 0;
}
.admin-link-button {
width: 100%;
min-height: 34px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--admin-muted);
font-weight: 900;
}
.admin-link-button:hover {
color: var(--admin-danger);
}
.admin-selected-event-card__footer {
padding: 13px 20px;
display: flex;
align-items: flex-start;
gap: 10px;
border-top: 1px solid var(--admin-border);
background: #f8fbff;
color: var(--admin-muted);
font-size: 0.82rem;
line-height: 1.42;
}
.admin-selected-event-card__footer span {
width: 18px;
height: 18px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
background: var(--admin-blue-soft);
color: var(--admin-blue);
font-size: 0.7rem;
font-weight: 900;
text-transform: uppercase;
}
.admin-selected-event-card__footer p {
margin: 0;
}
.admin-selected-event-card__footer strong {
color: #0f172a;
}
.admin-selected-event-card__empty {
padding: 20px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
background: #fffdf4;
}
.admin-selected-event-card__empty h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1.08rem;
letter-spacing: 0;
}
.admin-selected-event-card__empty p {
margin: 0.18rem 0 0;
color: var(--admin-muted);
}
.admin-selected-action {
min-height: 34px;
padding: 0 0.85rem;
background: var(--admin-blue-soft);
color: var(--admin-blue);
letter-spacing: 0.02em;
text-transform: none;
}
.admin-selected-pill {
min-height: 20px;
padding: 0 0.56rem;
background: var(--admin-blue);
color: #ffffff;
font-size: 0.62rem;
}
.admin-overview-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.admin-overview-heading h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1.08rem;
letter-spacing: 0;
}
.admin-overview-heading p {
margin: 0.18rem 0 0;
color: var(--admin-muted);
font-size: 0.86rem;
}
.admin-page-topbar {
min-height: 142px;
padding: 22px 24px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
border-radius: 20px;
}
.admin-page-title {
min-width: 0;
}
.admin-page-title span {
display: block;
margin-bottom: 0.36rem;
color: var(--admin-blue);
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.admin-page-title h1 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.9rem, 3vw, 2.25rem);
line-height: 1.02;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-page-title p {
max-width: 380px;
margin: 0.4rem 0 0;
color: var(--admin-muted);
font-size: 0.98rem;
line-height: 1.35;
}
.admin-page-tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
flex-wrap: wrap;
}
.admin-global-search,
.admin-inline-search {
position: relative;
display: block;
}
.admin-global-search input,
.admin-inline-search input {
width: 100%;
min-height: 38px;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: #ffffff;
color: var(--admin-text);
outline: 0;
padding: 0.58rem 0.85rem 0.58rem 2.35rem;
}
.admin-global-search {
width: min(340px, 32vw);
min-width: 292px;
}
.admin-inline-search {
width: min(300px, 100%);
}
.admin-global-search input:focus,
.admin-inline-search input:focus,
.admin-modern-form input:focus,
.admin-modern-form select:focus,
.admin-modern-form textarea:focus,
.admin-checkin-input-row input:focus,
.admin-user-create-form input:focus,
.admin-user-create-form select:focus,
.admin-user-edit-form input:focus,
.admin-user-edit-form select:focus {
border-color: #9ec9f5;
box-shadow: 0 0 0 4px rgba(0, 74, 143, 0.08);
}
.admin-global-search > span,
.admin-inline-search > span {
position: absolute;
left: 14px;
top: 50%;
width: 13px;
height: 13px;
border: 2px solid #64748b;
border-radius: 50%;
transform: translateY(-58%);
}
.admin-global-search > span::after,
.admin-inline-search > span::after {
content: "";
position: absolute;
right: -5px;
bottom: -4px;
width: 7px;
height: 2px;
border-radius: 2px;
background: #64748b;
transform: rotate(45deg);
}
.admin-notification-button {
position: relative;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: #ffffff;
}
.admin-notification-button span {
position: relative;
width: 13px;
height: 15px;
border: 2px solid #0f172a;
border-bottom: 0;
border-radius: 8px 8px 4px 4px;
}
.admin-notification-button span::before {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 17px;
height: 2px;
border-radius: 4px;
background: #0f172a;
transform: translateX(-50%);
}
.admin-notification-button span::after {
content: "";
position: absolute;
right: -7px;
top: -6px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--admin-gold);
}
.admin-role-switch,
.admin-role-current {
min-height: 38px;
padding: 4px 7px 4px 12px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 999px;
background: #dceeff;
color: var(--admin-blue);
font-size: 0.74rem;
font-weight: 800;
}
.admin-role-switch span,
.admin-role-current span {
line-height: 1.05;
}
.admin-role-current__icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ffffff;
color: var(--admin-blue);
font-size: 0.62rem;
font-weight: 900;
text-transform: uppercase;
}
.admin-role-switch b,
.admin-role-current b {
min-width: 76px;
min-height: 24px;
padding: 0 0.72rem;
display: grid;
place-items: center;
border-radius: 999px;
color: var(--admin-blue);
font-size: 0.72rem;
}
.admin-role-switch b.is-active,
.admin-role-current b {
background: var(--admin-blue);
color: #ffffff;
}
.admin-metrics-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.admin-metrics-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-metric-card {
min-height: 112px;
padding: 18px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
border-radius: 18px;
}
.admin-metric-card span {
color: #43506a;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-metric-card strong {
display: block;
margin-top: 0.35rem;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 2rem;
line-height: 1;
}
.admin-metric-card small {
display: block;
margin-top: 0.38rem;
color: var(--admin-muted);
}
.admin-metric-card i,
.admin-row-icon {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--admin-blue-soft);
color: var(--admin-blue);
font-size: 0.72rem;
font-style: normal;
font-weight: 900;
text-transform: uppercase;
}
.admin-metric-card--gold i,
.admin-metric-card--amber i {
background: #fff3cf;
color: #a15c00;
}
.admin-metric-card--green i {
background: #dcfce7;
color: #047857;
}
.admin-card {
border-radius: 18px;
overflow: hidden;
}
.admin-card-header,
.admin-board-heading,
.admin-list-toolbar,
.admin-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.admin-card-header,
.admin-board-heading {
padding: 22px;
border-bottom: 1px solid var(--admin-border);
}
.admin-card-header--compact {
padding: 0 0 14px;
border-bottom: 0;
}
.admin-card-header h2,
.admin-board-heading h2,
.admin-activity-card h2,
.admin-next-action h2,
.admin-checkin-validator h2,
.admin-last-checkins h2,
.admin-users-card h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1.18rem;
letter-spacing: 0;
}
.admin-card-header p,
.admin-board-heading p,
.admin-checkin-validator p {
margin: 0.18rem 0 0;
color: var(--admin-muted);
line-height: 1.32;
}
.admin-section-kicker {
display: inline-flex;
margin-bottom: 0.32rem;
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-card-header__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.admin-card-header button,
.admin-table-link {
border: 0;
background: transparent;
color: var(--admin-blue);
font-weight: 900;
}
.admin-event-config-card {
display: grid;
gap: 0;
}
.admin-event-config-alerts {
margin: 18px 22px 0;
display: grid;
gap: 8px;
}
.admin-event-config-alerts p {
margin: 0;
padding: 0.78rem 0.9rem;
border: 1px solid #fde68a;
border-radius: 12px;
background: #fffbeb;
color: #92400e;
font-size: 0.88rem;
font-weight: 800;
line-height: 1.35;
}
.admin-event-config-grid {
padding: 20px 22px 22px;
display: grid;
grid-template-columns: repeat(5, minmax(150px, 1fr));
gap: 12px;
}
.admin-event-config-item {
min-height: 124px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--admin-border);
border-radius: 16px;
background: #f8fafc;
}
.admin-event-config-item > div {
display: grid;
gap: 0.28rem;
}
.admin-event-config-item span {
color: #475569;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-event-config-item strong {
color: #020617;
font-size: 0.96rem;
font-weight: 900;
line-height: 1.15;
}
.admin-event-config-item p {
margin: 0;
color: #64748b;
font-size: 0.78rem;
line-height: 1.32;
}
.admin-event-config-item--success {
border-color: #bbf7d0;
background: #f0fdf4;
}
.admin-event-config-item--success strong {
color: #047857;
}
.admin-event-config-item--warning {
border-color: #fde68a;
background: #fffbeb;
}
.admin-event-config-item--warning strong {
color: #a15c00;
}
.admin-event-config-item--info {
border-color: #bfdbfe;
background: #eff6ff;
}
.admin-event-config-item--info strong {
color: var(--admin-blue);
}
.admin-event-config-item--muted {
background: #f8fafc;
}
.admin-form-field {
display: grid;
gap: 8px;
}
.admin-form-field span {
color: #0f172a;
font-weight: 900;
}
.admin-form-field textarea {
width: 100%;
min-height: 140px;
resize: vertical;
}
.admin-form-note {
margin: 0;
color: var(--admin-muted);
font-size: 0.92rem;
line-height: 1.45;
}
.admin-inline-action {
padding: 0.45rem 0.68rem;
border: 1px solid #bfdbfe;
border-radius: 999px;
background: #eff6ff;
color: var(--admin-blue);
font-size: 0.78rem;
font-weight: 900;
white-space: nowrap;
}
.admin-inline-action:hover {
border-color: #93c5fd;
background: #dbeafe;
}
.admin-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 0.95fr);
gap: 22px;
}
.admin-managed-list {
display: grid;
}
.admin-managed-row {
min-height: 102px;
padding: 20px 18px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
border-top: 1px solid var(--admin-border);
}
.admin-managed-row:first-child {
border-top: 0;
}
.admin-managed-row__body > div {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.admin-managed-row h3,
.admin-event-row h3 {
margin: 0;
overflow: hidden;
color: #020617;
font-size: 1.05rem;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-managed-row p,
.admin-event-row p {
margin: 0.28rem 0 0;
color: var(--admin-muted);
font-size: 0.88rem;
}
.admin-managed-row strong {
align-self: end;
color: #020617;
font-weight: 900;
}
.admin-progress {
height: 4px;
margin-top: 0.8rem;
overflow: hidden;
border-radius: 999px;
background: #eaf0f7;
}
.admin-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--admin-blue);
}
.admin-side-stack {
display: grid;
gap: 14px;
align-content: start;
}
.admin-activity-card {
padding: 22px 20px;
}
.admin-activity-list {
margin-top: 14px;
display: grid;
gap: 13px;
}
.admin-activity-list article {
display: grid;
grid-template-columns: 9px minmax(0, 1fr);
gap: 10px;
}
.admin-activity-list article > span {
width: 7px;
height: 7px;
margin-top: 0.45rem;
border-radius: 50%;
background: var(--admin-blue);
}
.admin-activity-list strong,
.admin-checkin-list strong {
display: block;
color: #020617;
font-weight: 900;
}
.admin-activity-list p,
.admin-checkin-list small {
margin: 0.04rem 0 0;
color: var(--admin-muted);
font-size: 0.84rem;
}
.admin-audit-meta {
display: block;
margin-top: 0.3rem;
color: #334155;
font-size: 0.78rem;
line-height: 1.35;
}
.admin-next-action {
padding: 22px 20px;
border-radius: 18px;
background: linear-gradient(135deg, var(--admin-blue), #216da6);
color: #ffffff;
box-shadow: 0 18px 38px rgba(0, 74, 143, 0.18);
}
.admin-next-action h2,
.admin-next-action p {
color: #ffffff;
}
.admin-next-action p {
margin: 0.55rem 0 1.1rem;
font-weight: 800;
line-height: 1.38;
}
.admin-next-action button {
min-height: 34px;
padding: 0 0.95rem;
border: 0;
border-radius: 8px;
background: #ffffff;
color: var(--admin-blue);
font-weight: 900;
}
/* Fase C: dashboard do evento orientado a proxima tarefa. */
.admin-event-focus-hero {
padding: clamp(22px, 3vw, 32px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(210px, 0.32fr);
align-items: stretch;
gap: 26px;
overflow: hidden;
border: 1px solid #bfdbfe;
border-radius: 22px;
background:
radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
linear-gradient(135deg, #eff6ff 0%, #f8fbff 58%, #e0f2fe 100%);
}
.admin-event-focus-hero--blocking {
border-color: #fed7aa;
background:
radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
linear-gradient(135deg, #fff7ed 0%, #fffdf8 58%, #ffedd5 100%);
}
.admin-event-focus-hero--complete {
border-color: #bbf7d0;
background:
radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
linear-gradient(135deg, #f0fdf4 0%, #fbfffc 58%, #dcfce7 100%);
}
.admin-event-focus-hero__content {
min-width: 0;
align-self: center;
}
.admin-event-focus-hero__eyebrow {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
}
.admin-event-focus-hero__eyebrow span,
.admin-event-focus-hero__eyebrow small {
min-height: 26px;
padding: 0 0.72rem;
display: inline-flex;
align-items: center;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 900;
}
.admin-event-focus-hero__eyebrow span {
background: var(--admin-blue);
color: #ffffff;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.admin-event-focus-hero__eyebrow small {
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.72);
color: #475569;
}
.admin-event-focus-hero h2 {
max-width: 820px;
margin: 1rem 0 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.55rem, 3vw, 2.35rem);
line-height: 1.08;
letter-spacing: -0.025em;
}
.admin-event-focus-hero__content > p {
max-width: 780px;
margin: 0.72rem 0 0;
color: #475569;
font-size: 1rem;
line-height: 1.55;
}
.admin-event-focus-hero__actions {
margin-top: 1.35rem;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.admin-event-focus-hero__actions .admin-ghost-button {
background: rgba(255, 255, 255, 0.78);
}
.admin-event-focus-hero__status {
min-height: 178px;
padding: 22px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid rgba(0, 74, 143, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.admin-event-focus-hero__status > span {
color: #64748b;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-event-focus-hero__status > strong {
margin-top: 0.35rem;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.4rem, 5vw, 3.7rem);
line-height: 1;
}
.admin-event-focus-hero__status > small {
margin-top: 0.48rem;
color: #475569;
font-weight: 800;
}
.admin-event-focus-progress,
.admin-event-readiness-card__progress {
height: 8px;
margin-top: 1rem;
overflow: hidden;
border-radius: 999px;
background: #e2e8f0;
}
.admin-event-focus-progress span,
.admin-event-readiness-card__progress span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--admin-blue), #0ea5e9);
}
.admin-event-focus-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.68fr);
gap: 20px;
align-items: start;
scroll-margin-top: 20px;
}
.admin-event-tasks-card,
.admin-event-readiness-card,
.admin-event-quick-actions,
.admin-event-secondary-details {
border: 1px solid var(--admin-border);
}
.admin-event-focus-card-header {
padding: 22px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--admin-border);
}
.admin-event-focus-card-header h2,
.admin-event-readiness-card h2,
.admin-event-quick-actions h2 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1.18rem;
}
.admin-event-focus-card-header p,
.admin-event-quick-actions header > p {
margin: 0.28rem 0 0;
color: var(--admin-muted);
line-height: 1.45;
}
.admin-event-focus-card-header > strong {
min-width: 42px;
min-height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #fff7ed;
color: #c2410c;
font-family: "Space Grotesk", sans-serif;
font-size: 1.28rem;
}
.admin-event-task-list {
display: grid;
}
.admin-event-task {
min-height: 116px;
padding: 18px 22px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 15px;
border-top: 1px solid var(--admin-border);
}
.admin-event-task:first-child {
border-top: 0;
}
.admin-event-task__icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #eff6ff;
color: var(--admin-blue);
font-size: 1.2rem;
}
.admin-event-task--blocking .admin-event-task__icon {
background: #fff7ed;
color: #c2410c;
}
.admin-event-task__body {
min-width: 0;
}
.admin-event-task__body small {
display: block;
margin-bottom: 0.25rem;
color: #64748b;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-event-task--blocking .admin-event-task__body small {
color: #c2410c;
}
.admin-event-task h3 {
margin: 0;
color: #0f172a;
font-size: 0.98rem;
}
.admin-event-task p {
margin: 0.28rem 0 0;
color: #64748b;
font-size: 0.86rem;
line-height: 1.4;
}
.admin-event-task > button {
min-height: 38px;
padding: 0 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid #bfdbfe;
border-radius: 9px;
background: #ffffff;
color: var(--admin-blue);
font-size: 0.78rem;
font-weight: 900;
white-space: nowrap;
}
.admin-event-task > button:hover,
.admin-event-task > button:focus-visible {
border-color: #93c5fd;
background: #eff6ff;
}
.admin-event-tasks-empty {
min-height: 170px;
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: #047857;
text-align: left;
}
.admin-event-tasks-empty > i {
font-size: 2.3rem;
}
.admin-event-tasks-empty strong {
color: #065f46;
}
.admin-event-tasks-empty p {
margin: 0.25rem 0 0;
color: #64748b;
}
.admin-event-readiness-card {
padding: 22px;
}
.admin-event-readiness-card__score {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.admin-event-readiness-card__score strong,
.admin-event-readiness-card__score span {
display: block;
}
.admin-event-readiness-card__score strong {
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 2.45rem;
line-height: 1;
}
.admin-event-readiness-card__score span {
margin-top: 0.36rem;
color: #475569;
font-size: 0.82rem;
font-weight: 800;
}
.admin-event-readiness-card__score > i {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 14px;
background: #ecfdf5;
color: #047857;
font-size: 1.45rem;
}
.admin-event-readiness-card h2 {
margin-top: 1rem;
font-size: 0.98rem;
}
.admin-event-readiness-list {
margin: 1rem 0 0;
padding: 0;
display: grid;
gap: 8px;
list-style: none;
}
.admin-event-readiness-list li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 8px;
color: #64748b;
font-size: 0.8rem;
line-height: 1.35;
}
.admin-event-readiness-list li i {
margin-top: 0.08rem;
color: #94a3b8;
font-size: 1rem;
}
.admin-event-readiness-list li.is-complete {
color: #334155;
}
.admin-event-readiness-list li.is-complete i {
color: #059669;
}
.admin-event-recommendations {
margin-top: 1.25rem;
padding-top: 1.1rem;
display: grid;
gap: 10px;
border-top: 1px solid var(--admin-border);
}
.admin-event-recommendations h3 {
margin: 0;
color: #334155;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-event-recommendations article {
padding: 12px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 9px;
border-radius: 12px;
background: #f8fafc;
}
.admin-event-recommendations article > i {
color: var(--admin-blue);
font-size: 1.08rem;
}
.admin-event-recommendations strong {
color: #0f172a;
font-size: 0.84rem;
}
.admin-event-recommendations p {
margin: 0.22rem 0 0;
color: #64748b;
font-size: 0.76rem;
line-height: 1.38;
}
.admin-event-recommendations button {
margin-top: 0.5rem;
padding: 0;
border: 0;
background: transparent;
color: var(--admin-blue);
font-size: 0.76rem;
font-weight: 900;
}
.admin-event-quick-actions > header {
padding: 20px 22px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--admin-border);
}
.admin-event-quick-actions header > p {
max-width: 520px;
text-align: right;
}
.admin-event-quick-actions > div {
padding: 16px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 10px;
}
.admin-event-quick-actions a,
.admin-event-quick-actions button {
min-width: 0;
min-height: 78px;
padding: 14px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 18px;
align-items: center;
gap: 10px;
border: 1px solid var(--admin-border);
border-radius: 13px;
background: #ffffff;
color: #0f172a;
text-align: left;
}
.admin-event-quick-actions a:hover,
.admin-event-quick-actions button:hover,
.admin-event-quick-actions a:focus-visible,
.admin-event-quick-actions button:focus-visible {
border-color: #93c5fd;
background: #f8fbff;
}
.admin-event-quick-actions a > i:first-child,
.admin-event-quick-actions button > i:first-child {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 11px;
background: #eff6ff;
color: var(--admin-blue);
font-size: 1.1rem;
}
.admin-event-quick-actions a > i:last-child,
.admin-event-quick-actions button > i:last-child {
color: #94a3b8;
}
.admin-event-quick-actions strong,
.admin-event-quick-actions small {
display: block;
}
.admin-event-quick-actions strong {
color: #0f172a;
font-size: 0.88rem;
}
.admin-event-quick-actions small {
margin-top: 0.2rem;
color: #64748b;
font-size: 0.74rem;
line-height: 1.35;
}
.admin-event-secondary-details > summary {
min-height: 70px;
padding: 18px 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 20px;
align-items: center;
gap: 16px;
cursor: pointer;
list-style: none;
}
.admin-event-secondary-details > summary::-webkit-details-marker {
display: none;
}
.admin-event-secondary-details > summary > span {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
color: #0f172a;
}
.admin-event-secondary-details > summary > span i {
color: var(--admin-blue);
font-size: 1.18rem;
}
.admin-event-secondary-details > summary > small {
color: #64748b;
}
.admin-event-secondary-details > summary > i {
color: #64748b;
transition: transform 160ms ease;
}
.admin-event-secondary-details[open] > summary > i {
transform: rotate(180deg);
}
.admin-event-secondary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--admin-border);
}
.admin-event-secondary-grid > section {
min-width: 0;
border-left: 1px solid var(--admin-border);
}
.admin-event-secondary-grid > section:first-child {
border-left: 0;
}
.admin-list-card {
display: grid;
overflow: visible;
}
.admin-schedule-board {
overflow: visible;
}
.admin-list-toolbar {
padding: 20px;
border-bottom: 1px solid var(--admin-border);
}
.admin-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-filter-pills button {
min-height: 34px;
padding: 0 0.92rem;
border: 1px solid var(--admin-border);
border-radius: 999px;
background: #ffffff;
color: #334155;
font-weight: 800;
}
.admin-filter-pills button.is-active {
border-color: var(--admin-blue);
background: var(--admin-blue);
color: #ffffff;
}
.admin-primary-button,
.admin-ghost-button,
.admin-export-button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
border-radius: 10px;
font-weight: 900;
white-space: nowrap;
}
.admin-primary-button {
border: 1px solid var(--admin-blue);
background: var(--admin-blue);
color: #ffffff;
padding: 0 1.05rem;
box-shadow: 0 12px 24px rgba(0, 74, 143, 0.14);
}
.admin-primary-button:hover {
background: var(--admin-blue-strong);
}
.admin-primary-button--small {
min-height: 38px;
padding-inline: 0.9rem;
}
.admin-ghost-button,
.admin-export-button {
border: 1px solid var(--admin-border);
background: #ffffff;
color: #0f172a;
padding: 0 0.95rem;
}
.admin-export-button:disabled,
.admin-table-link.is-disabled {
cursor: default;
opacity: 0.72;
}
.admin-event-list {
display: grid;
}
.admin-event-row {
min-height: 112px;
padding: 18px 20px;
display: grid;
grid-template-columns: 106px minmax(0, 1fr) auto auto;
align-items: center;
gap: 16px;
border-top: 1px solid var(--admin-border);
}
.admin-event-row:first-child {
border-top: 0;
}
.admin-event-thumb {
width: 106px;
height: 64px;
overflow: hidden;
display: grid;
place-items: center;
border-radius: 10px;
background: linear-gradient(135deg, var(--admin-blue-soft), #dbeafe);
color: var(--admin-blue);
font-weight: 900;
}
.admin-event-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-row-badges,
.admin-row-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.admin-status {
min-height: 19px;
padding: 0.14rem 0.55rem;
}
.admin-status--success {
background: var(--admin-success-soft);
color: var(--admin-success);
}
.admin-status--info {
background: var(--admin-blue-soft);
color: var(--admin-blue);
}
.admin-status--warning {
background: var(--admin-warning-soft);
color: var(--admin-warning);
}
.admin-status--danger {
background: var(--admin-danger-soft);
color: var(--admin-danger);
}
.admin-status--muted {
background: #eef2f7;
color: #475569;
}
.admin-empty {
padding: 2rem;
color: var(--admin-muted);
text-align: center;
}
.admin-empty--small {
padding: 1rem 0 0;
text-align: left;
}
.admin-table-card {
padding: 18px 20px 20px;
}
.admin-table-toolbar {
margin-bottom: 18px;
}
.admin-table-scroll {
overflow-x: auto;
}
.admin-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
border-bottom: 1px solid var(--admin-border);
padding: 14px 10px;
text-align: left;
vertical-align: middle;
}
.admin-table tr:last-child td {
border-bottom: 0;
}
.admin-table th {
color: #43506a;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-table td {
color: #334155;
}
.admin-table td strong,
.admin-table td small {
display: block;
}
.admin-table td strong {
color: #020617;
font-weight: 900;
}
.admin-table td small {
color: var(--admin-muted);
font-size: 0.82rem;
}
.admin-table td,
.admin-table th {
overflow-wrap: anywhere;
}
.admin-table .admin-progress {
min-width: 92px;
}
.admin-row-icon--small {
float: left;
width: 34px;
height: 34px;
margin-right: 12px;
}
.admin-board-heading {
min-height: 80px;
}
.admin-schedule-columns {
padding: 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.admin-schedule-column {
min-height: 330px;
padding: 16px;
border: 1px solid var(--admin-border);
border-radius: 16px;
background: #f9fbfe;
}
.admin-schedule-column > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.admin-schedule-column h3 {
margin: 0;
color: var(--admin-blue);
font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
letter-spacing: 0.03em;
}
.admin-schedule-column header span {
color: var(--admin-muted);
font-size: 0.8rem;
}
.admin-schedule-item {
padding: 14px;
display: grid;
gap: 7px;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 10px 20px rgba(15, 44, 78, 0.05);
}
.admin-schedule-item + .admin-schedule-item {
margin-top: 12px;
}
.admin-schedule-item > div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.admin-schedule-item span {
min-height: 18px;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: var(--admin-blue-soft);
color: var(--admin-blue);
font-size: 0.68rem;
font-weight: 900;
text-transform: uppercase;
}
.admin-schedule-item b {
color: #020617;
font-size: 0.84rem;
}
.admin-schedule-item h4 {
margin: 0;
color: #020617;
font-size: 0.98rem;
line-height: 1.25;
}
.admin-schedule-item p,
.admin-schedule-item small,
.admin-schedule-item em {
margin: 0;
color: var(--admin-muted);
font-style: normal;
font-size: 0.82rem;
}
.admin-checkin-grid {
display: grid;
grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.15fr);
gap: 22px;
}
.admin-checkin-scope-switch {
display: flex;
align-items: center;
gap: 8px;
padding: 4px;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #ffffff;
width: fit-content;
}
.admin-checkin-scope-card {
min-width: 0;
min-height: 42px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
border-radius: 9px;
background: transparent;
color: #52637a;
text-decoration: none;
}
.admin-checkin-scope-card i {
font-size: 1.05rem;
}
.admin-checkin-scope-card strong {
font-size: 0.86rem;
}
.admin-checkin-scope-card.is-active {
background: var(--admin-blue);
color: #ffffff;
box-shadow: 0 5px 12px rgba(0, 74, 143, 0.16);
}
.admin-checkin-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #ffffff;
}
.admin-checkin-metrics article {
min-height: 78px;
padding: 15px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.admin-checkin-metrics article + article {
border-left: 1px solid var(--admin-border);
}
.admin-checkin-metrics span {
color: #60718a;
font-size: 0.82rem;
font-weight: 700;
}
.admin-checkin-metrics strong {
color: #0f2c4e;
font-size: 1.65rem;
line-height: 1;
}
.admin-checkin-validator,
.admin-last-checkins {
padding: 24px 22px;
}
.admin-checkin-validator--clean {
display: grid;
align-content: start;
gap: 14px;
}
.admin-checkin-validator--clean > h2,
.admin-last-checkins > h2 {
margin: 0;
}
.admin-checkin-validator--clean > p {
margin: -6px 0 0;
color: var(--admin-muted);
}
.admin-checkin-summary-card {
padding: 16px;
display: grid;
gap: 6px;
border: 1px solid #bfdbfe;
border-radius: 18px;
background: #f8fbff;
}
.admin-checkin-summary-card > span {
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-checkin-summary-card strong {
color: #0f172a;
font-size: 1.12rem;
}
.admin-checkin-summary-card small {
color: var(--admin-muted);
}
.admin-checkin-summary-card div {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-checkin-summary-card b {
padding: 0.34rem 0.62rem;
border-radius: 999px;
background: #e6f2ff;
color: var(--admin-blue);
font-size: 0.78rem;
}
.admin-checkin-manual-form {
display: grid;
gap: 12px;
}
.admin-checkin-field {
display: grid;
gap: 0.38rem;
}
.admin-checkin-field span {
color: #0f172a;
font-weight: 900;
}
.admin-checkin-field input {
width: 100%;
min-height: 42px;
border: 1px solid var(--admin-border);
border-radius: 11px;
padding: 0.65rem 0.85rem;
outline: 0;
}
.admin-checkin-field input:focus {
border-color: #93c5fd;
box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.24);
}
.admin-checkin-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.admin-scanner-box {
min-height: 360px;
margin: 18px 8px;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border: 1px dashed #9ac5ef;
border-radius: 16px;
background: #eef6ff;
}
.admin-scanner-box--modal {
min-height: clamp(260px, 46vh, 430px);
margin: 0;
}
.admin-scanner-box video {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-scanner-placeholder {
display: grid;
place-items: center;
gap: 12px;
color: var(--admin-blue);
text-align: center;
}
.admin-scanner-icon {
position: relative;
width: 46px;
height: 46px;
border: 4px solid var(--admin-blue);
border-left-color: transparent;
border-right-color: transparent;
border-radius: 13px;
}
.admin-scanner-icon::before,
.admin-scanner-icon::after {
content: "";
position: absolute;
inset: 12px -4px;
border-left: 4px solid var(--admin-blue);
border-right: 4px solid var(--admin-blue);
border-radius: 8px;
}
.admin-checkin-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.admin-checkin-qr-form {
display: grid;
gap: 14px;
}
.admin-checkin-qr-help {
margin: 0;
color: var(--admin-muted);
font-size: 0.9rem;
}
.admin-modal-list--inline {
margin-top: 14px;
}
.admin-checkin-input-row input {
width: 100%;
min-height: 38px;
border: 1px solid var(--admin-border);
border-radius: 9px;
padding: 0.55rem 0.8rem;
outline: 0;
}
.admin-checkin-list {
margin: 18px -22px -24px;
display: grid;
}
.admin-checkin-participant-search {
position: relative;
display: block;
margin-top: 14px;
}
.admin-checkin-participant-search i {
position: absolute;
top: 50%;
left: 13px;
color: #718096;
transform: translateY(-50%);
pointer-events: none;
}
.admin-checkin-participant-search input {
width: 100%;
min-height: 44px;
padding: 0 14px 0 40px;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: #ffffff;
color: #0f172a;
font: inherit;
}
.admin-checkin-participant-search input:focus {
border-color: #79b8eb;
outline: 3px solid rgba(0, 105, 173, 0.12);
}
.admin-checkin-list article {
min-height: 64px;
padding: 12px 22px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border-top: 1px solid var(--admin-border);
}
.admin-checkin-participant-identity {
min-width: 0;
}
.admin-checkin-participant-identity strong,
.admin-checkin-participant-identity small {
display: block;
}
.admin-checkin-participant-identity small + small {
margin-top: 2px;
color: #3f536d;
font-weight: 700;
}
.admin-checkin-participant-status {
color: #64748b;
font-size: 0.82rem;
font-weight: 700;
text-align: right;
}
.admin-checkin-participant-status small {
display: block;
margin-top: 3px;
font-weight: 500;
}
.admin-checkin-participant-status.is-complete {
color: #087f5b;
}
.admin-check-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: #eef2f7;
border: 1px solid #dbe4ef;
}
.admin-check-icon::before {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(-45deg);
}
.admin-check-icon.is-valid {
background: var(--admin-success-soft);
border-color: #b7efcd;
}
.admin-check-icon.is-valid::before {
border-color: var(--admin-success);
}
.admin-checkin-list em {
color: var(--admin-muted);
font-size: 0.84rem;
font-style: normal;
}
.admin-raffle-layout {
padding: 22px;
display: grid;
grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
gap: 18px;
}
.admin-raffle-header-actions,
.admin-raffle-candidate__actions,
.admin-raffle-pagination {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.admin-raffle-header-actions {
flex-wrap: wrap;
}
.admin-raffle-action,
.admin-raffle-history {
min-width: 0;
padding: 18px;
border: 1px solid var(--admin-border);
border-radius: 14px;
background: #f9fbfe;
}
.admin-raffle-action {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-content: start;
gap: 12px;
}
.admin-raffle-action form {
grid-column: 1 / -1;
}
.admin-raffle-candidate {
display: grid;
gap: 5px;
}
.admin-raffle-candidate > span {
color: #9a6700;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-raffle-candidate h3 {
font-size: clamp(1.3rem, 2vw, 1.75rem);
}
.admin-raffle-candidate small {
color: var(--admin-muted);
line-height: 1.45;
}
.admin-raffle-candidate__actions {
grid-column: 1 / -1;
justify-content: flex-start;
flex-wrap: wrap;
padding-top: 8px;
}
.admin-raffle-candidate__actions form {
grid-column: auto;
margin: 0;
}
.admin-ghost-button--warning {
border-color: #e8c66c;
color: #875900;
}
.admin-raffle-feedback {
grid-column: 1 / -1;
margin: 0;
padding: 10px 12px;
border-radius: 10px;
background: #e8f7ef;
color: #126640;
font-weight: 800;
}
.admin-raffle-feedback.is-error {
background: #fff0ef;
color: #a23a34;
}
.admin-raffle-eligible {
margin: 0 22px 22px;
overflow: hidden;
border: 1px solid var(--admin-border);
border-radius: 14px;
background: #ffffff;
}
.admin-raffle-eligible > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 20px;
border-bottom: 1px solid var(--admin-border);
}
.admin-raffle-eligible > header span {
color: var(--admin-muted);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-raffle-eligible > header h3 {
margin: 4px 0 0;
color: #0f2942;
font-size: 1.05rem;
}
.admin-raffle-eligible > header > strong {
display: grid;
place-items: center;
min-width: 46px;
height: 38px;
padding-inline: 10px;
border-radius: 999px;
background: #eaf4fd;
color: #00539b;
font-size: 1.05rem;
}
.admin-raffle-eligible__table {
max-height: 430px;
overflow: auto;
scrollbar-gutter: stable;
}
.admin-raffle-eligible__table table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
}
.admin-raffle-eligible__table th,
.admin-raffle-eligible__table td {
padding: 13px 20px;
border-bottom: 1px solid var(--admin-border);
text-align: left;
vertical-align: middle;
}
.admin-raffle-eligible__table th {
position: sticky;
z-index: 1;
top: 0;
background: #f6f9fd;
color: #496078;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.admin-raffle-eligible__table th:first-child,
.admin-raffle-eligible__table td:first-child {
width: 55%;
}
.admin-raffle-eligible__table tbody tr:last-child td {
border-bottom: 0;
}
.admin-raffle-eligible__table td strong,
.admin-raffle-eligible__table td small {
display: block;
}
.admin-raffle-eligible__table td small {
margin-top: 2px;
color: var(--admin-muted);
}
.admin-raffle-pagination {
justify-content: space-between;
padding: 14px 18px;
border-top: 1px solid var(--admin-border);
}
.admin-raffle-pagination > span {
color: var(--admin-muted);
font-size: 0.84rem;
font-weight: 800;
}
.admin-raffle-pagination .is-disabled {
cursor: not-allowed;
opacity: 0.5;
}
.admin-raffle-action h3,
.admin-raffle-history h3 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1.02rem;
}
.admin-raffle-action p {
margin: 0.25rem 0 0;
color: var(--admin-muted);
line-height: 1.35;
}
.admin-checkin-list--compact {
margin: 14px -18px -18px;
}
.admin-primary-button:disabled,
.admin-ghost-button:disabled {
cursor: not-allowed;
opacity: 0.58;
box-shadow: none;
}
.admin-users-card {
overflow: hidden;
}
.admin-users-card .admin-list-toolbar {
padding: 16px 20px;
}
.admin-user-list {
display: grid;
}
.admin-user-list article {
min-height: 58px;
padding: 11px 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
align-items: center;
gap: 20px;
border-top: 1px solid var(--admin-border);
}
.admin-user-list__identity {
min-width: 0;
}
.admin-user-list__sector {
color: var(--admin-muted);
font-size: 0.86rem;
}
.admin-user-list small {
display: block;
margin-top: 0.12rem;
color: var(--admin-muted);
font-size: 0.84rem;
}
.admin-user-list time {
color: var(--admin-muted);
font-size: 0.86rem;
text-align: right;
}
.admin-user-create-form,
.admin-user-edit-form {
padding: 20px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: end;
gap: 12px;
border-top: 1px solid var(--admin-border);
background: #f9fbfe;
}
.admin-user-create-form .admin-form-subsection,
.admin-user-create-form .admin-toggle-grid,
.admin-user-edit-form .admin-form-subsection,
.admin-user-edit-form .admin-toggle-grid,
.admin-user-edit-form .admin-modal__footer {
grid-column: 1 / -1;
}
.admin-user-create-form .admin-checkbox-line input[type="checkbox"],
.admin-user-edit-form .admin-checkbox-line input[type="checkbox"] {
width: 18px;
min-height: 18px;
margin: 0;
flex: 0 0 18px;
}
.admin-user-create-form label,
.admin-user-edit-form label,
.admin-modern-form .field {
display: grid;
gap: 0.38rem;
}
.admin-user-create-form span,
.admin-user-edit-form span,
.admin-modern-form .field > span,
.admin-modern-form .admin-toggle-grid span,
.admin-checkbox-line span {
color: #0f172a;
font-weight: 900;
}
.admin-user-create-form input,
.admin-user-create-form select,
.admin-user-edit-form input,
.admin-user-edit-form select,
.admin-modern-form input:not([type="checkbox"]):not([type="radio"]),
.admin-modern-form select,
.admin-modern-form textarea {
width: 100%;
min-height: 44px;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: #ffffff;
color: var(--admin-text);
padding: 0.62rem 0.78rem;
outline: 0;
}
.admin-form-card {
padding: 22px;
}
.admin-modern-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.admin-modern-form .field--wide,
.admin-modern-form .admin-toggle-grid,
.admin-modern-form .form-actions {
grid-column: 1 / -1;
}
.admin-toggle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.admin-toggle-grid label,
.admin-checkbox-line {
min-height: 44px;
padding: 0.75rem 0.85rem;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #f9fbfe;
}
.admin-checkbox-line input[type="checkbox"],
.admin-checkbox-line input[type="radio"],
.admin-toggle-grid input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
flex: 0 0 18px;
margin: 0;
padding: 0;
accent-color: #005da4;
}
.registration-waiver {
align-items: flex-start;
cursor: pointer;
}
.registration-waiver input[type="checkbox"] {
margin-top: 2px;
}
.registration-waiver span {
line-height: 1.45;
}
.admin-users-card .admin-user-list__actions .admin-table-link {
min-height: 36px;
padding: 0 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--admin-border);
border-radius: 9px;
background: #ffffff;
font-family: inherit;
font-size: 0.84rem;
font-weight: 700;
}
.admin-modern-form .admin-switch-field,
.admin-modern-form .admin-toggle-grid .admin-switch-field {
min-height: 64px;
padding: 12px 14px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
border-radius: 14px;
}
.admin-modern-form .form-actions {
display: flex;
align-items: center;
gap: 10px;
}
.admin-form-subsection {
grid-column: 1 / -1;
display: grid;
gap: 0.22rem;
padding-top: 14px;
border-top: 1px solid var(--admin-border);
}
.admin-form-subsection span {
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-form-subsection strong {
color: #0f172a;
font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
}
.admin-form-subsection small {
color: var(--admin-muted);
line-height: 1.5;
}
@media (max-width: 991.98px) {
.admin-table-scroll {
overflow: visible;
}
.admin-table {
min-width: 0;
border-collapse: separate;
border-spacing: 0 12px;
}
.admin-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.admin-table tbody,
.admin-table tr,
.admin-table td {
display: block;
width: 100%;
}
.admin-table tr {
padding: 12px;
border: 1px solid var(--admin-border);
border-radius: 14px;
background: #ffffff;
box-shadow: 0 12px 28px rgba(15, 44, 78, 0.06);
}
.admin-table tr.is-filter-hidden {
display: none;
}
.admin-table td {
display: grid;
grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.admin-table tr:last-child td:not(:last-child) {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.admin-table td:last-child,
.admin-table tr:last-child td:last-child {
border-bottom: 0;
}
.admin-table td::before {
content: attr(data-label);
color: var(--admin-muted);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-table td[colspan] {
display: block;
color: var(--admin-muted);
}
.admin-table td[colspan]::before {
display: none;
}
.admin-table td > * {
min-width: 0;
}
.admin-table td .admin-status,
.admin-table td .admin-progress {
justify-self: start;
max-width: 100%;
}
.admin-row-icon--small {
float: none;
margin: 0 0 8px;
}
.registration-flow {
grid-template-columns: 1fr;
}
.registration-flow li {
min-height: 44px;
}
}
.admin-selector-card.is-selected {
border-color: #9ec9f5;
background: #eff6ff;
box-shadow: 0 12px 28px rgba(0, 74, 143, 0.12);
}
.admin-schedule-checkin-picker {
margin-top: 16px;
display: grid;
gap: 12px;
}
.admin-schedule-checkin-picker h3 {
margin: 0;
color: #020617;
font-family: "Space Grotesk", sans-serif;
font-size: 1rem;
}
.admin-checkin-context--schedule {
align-items: flex-start;
flex-wrap: wrap;
}
.admin-checkin-context--schedule small {
flex-basis: 100%;
color: var(--admin-muted);
line-height: 1.35;
}
.admin-scanner-box.is-disabled {
opacity: 0.72;
}
.admin-schedule-presence {
display: grid;
gap: 4px;
padding: 8px 10px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid var(--admin-border);
}
.admin-schedule-presence strong {
color: #020617;
font-size: 0.84rem;
}
.admin-schedule-presence small {
color: var(--admin-muted);
}
.admin-toolbar-hint,
.admin-form-card__intro {
margin: 0.6rem 0 0;
color: var(--admin-muted);
font-size: 0.86rem;
max-width: 620px;
}
.admin-form-card__intro {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid #dbeafe;
border-radius: 14px;
background: #eff6ff;
color: #16406f;
}
.admin-action-menu {
position: relative;
}
.admin-action-menu summary {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0 0.85rem;
border: 1px solid var(--admin-border);
border-radius: 11px;
background: #fff;
color: #0f2f57;
font-weight: 800;
font-size: 0.82rem;
cursor: pointer;
list-style: none;
}
.admin-action-menu summary::-webkit-details-marker {
display: none;
}
.admin-action-menu summary::after {
content: "...";
letter-spacing: 0.08em;
color: var(--admin-muted);
}
.admin-action-menu__panel {
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 40;
width: min(230px, 86vw);
padding: 8px;
display: grid;
gap: 4px;
border: 1px solid var(--admin-border);
border-radius: 14px;
background: #fff;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
.admin-action-menu.is-dropup .admin-action-menu__panel {
top: auto;
bottom: calc(100% + 8px);
}
.admin-action-menu__panel a,
.admin-action-menu__panel button,
.admin-action-menu__panel span {
width: 100%;
min-height: 34px;
padding: 0.48rem 0.62rem;
border: 0;
border-radius: 9px;
background: transparent;
color: #17324d;
text-align: left;
text-decoration: none;
font: inherit;
font-size: 0.85rem;
}
.admin-action-menu__panel a:hover,
.admin-action-menu__panel button:hover {
background: #eff6ff;
color: var(--admin-blue);
}
.admin-action-menu__panel .is-danger {
color: #b91c1c;
}
.admin-action-menu__panel span {
color: var(--admin-muted);
}
.admin-modal {
position: fixed;
inset: 0;
z-index: 2000;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 24px;
place-items: center;
box-sizing: border-box;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
}
.admin-modal[open],
.admin-modal.is-open {
display: grid;
}
.admin-modal::backdrop {
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
}
.admin-modal:not([open]):not(.is-open) {
display: none;
}
body.is-admin-modal-open {
overflow: hidden;
}
body.is-admin-navigation-open {
overflow: hidden;
overscroll-behavior: none;
}
.admin-modal__panel {
width: min(720px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 24px;
background: #fff;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}
.admin-modal__header {
padding: 22px 24px;
display: flex;
flex: 0 0 auto;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--admin-border);
background: linear-gradient(135deg, #f8fbff, #eff6ff);
}
.admin-modal__header span {
display: block;
margin-bottom: 0.3rem;
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-modal__header h2,
.admin-form-section h3,
.admin-schedule-active-card h3 {
margin: 0;
color: #020617;
}
.admin-modal__header p,
.admin-form-section p,
.admin-schedule-active-card p {
margin: 0.32rem 0 0;
color: var(--admin-muted);
}
.admin-modal__header > button {
width: 36px;
height: 36px;
flex: 0 0 auto;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #fff;
color: #0f172a;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.admin-modal__body {
padding: 22px 24px;
min-height: 0;
flex: 1 1 auto;
overflow: auto;
overscroll-behavior: contain;
}
.admin-modal__footer {
margin-top: 8px;
padding-top: 16px;
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid var(--admin-border);
}
.admin-modal--drawer {
margin: 0;
}
.admin-modal--drawer .admin-modal__panel {
width: min(1200px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
}
.admin-modal--large .admin-modal__panel {
width: min(960px, calc(100vw - 48px));
}
.admin-modal--scanner .admin-modal__panel {
width: min(720px, calc(100vw - 48px));
}
.admin-modal--danger .admin-modal__header {
background: linear-gradient(135deg, #fff7ed, #fef2f2);
}
.admin-danger-button {
min-height: 38px;
padding: 0 1rem;
border: 0;
border-radius: 11px;
background: #b91c1c;
color: #fff;
font-weight: 900;
cursor: pointer;
}
.admin-danger-button:disabled {
opacity: .48;
cursor: not-allowed;
}
.admin-danger-copy {
margin: 0;
color: #7f1d1d;
}
.admin-modal-form {
display: grid;
gap: 18px;
}
.admin-event-wizard__steps {
position: sticky;
top: -24px;
z-index: 3;
margin: -4px 0 2px;
padding: 10px;
display: flex;
gap: 8px;
flex-wrap: wrap;
border: 1px solid #dbeafe;
border-radius: 16px;
background: rgba(248, 251, 255, 0.94);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
backdrop-filter: blur(10px);
}
.admin-event-wizard__steps button {
min-height: 38px;
padding: 0 13px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--admin-muted);
font-weight: 900;
cursor: pointer;
}
.admin-event-wizard__steps button:hover,
.admin-event-wizard__steps button.is-active {
border-color: #bfdbfe;
background: #dbeafe;
color: var(--admin-blue);
}
.admin-modal .admin-modal-form > .admin-modal__footer {
grid-column: 1 / -1;
position: sticky;
z-index: 2;
bottom: -22px;
margin: 8px -24px -22px;
padding: 16px 24px;
background: #ffffff;
}
.admin-form-section {
padding: 16px;
display: grid;
gap: 14px;
border: 1px solid var(--admin-border);
border-radius: 18px;
background: #fff;
}
.admin-form-section > header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: flex-start;
}
.admin-form-section > header > span {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #dbeafe;
color: var(--admin-blue);
font-weight: 900;
}
.admin-form-section__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.admin-readonly-context {
padding: 12px 14px;
display: grid;
gap: 4px;
border: 1px solid #dbeafe;
border-radius: 14px;
background: #eff6ff;
}
.admin-readonly-context span {
color: var(--admin-muted);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.admin-readonly-context strong {
color: #0f2f57;
}
.admin-flow-steps {
margin: 16px 0 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-flow-steps span {
padding: 0.45rem 0.75rem;
border: 1px solid var(--admin-border);
border-radius: 999px;
color: var(--admin-muted);
font-size: 0.82rem;
font-weight: 900;
}
.admin-flow-steps span.is-active {
border-color: #bfdbfe;
background: #dbeafe;
color: var(--admin-blue);
}
.admin-schedule-active-card,
.admin-checkin-ready-note {
margin: 14px 0;
padding: 16px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 14px;
align-items: center;
border: 1px solid #bfdbfe;
border-radius: 18px;
background: #f8fbff;
}
.admin-schedule-active-card--empty {
grid-template-columns: minmax(0, 1fr) auto;
border-style: dashed;
}
.admin-schedule-active-card--checkin {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.admin-schedule-active-card > div:first-child > span {
width: fit-content;
max-width: 100%;
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0.18rem 0.56rem;
border-radius: 999px;
background: #e6f2ff;
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-schedule-active-card__main {
min-width: 0;
}
.admin-schedule-active-card__main h3 {
margin-top: 0.55rem;
overflow-wrap: anywhere;
}
.admin-schedule-active-card__details {
margin: 12px 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.admin-schedule-active-card__details div {
min-width: 0;
padding: 10px 12px;
border: 1px solid #dbeafe;
border-radius: 12px;
background: #ffffff;
}
.admin-schedule-active-card__details dt {
color: var(--admin-muted);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-schedule-active-card__details dd {
margin: 0.24rem 0 0;
color: #0f172a;
font-weight: 900;
overflow-wrap: anywhere;
}
.admin-schedule-active-card__stats {
padding: 11px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
border: 1px solid #dbeafe;
border-radius: 12px;
background: #ffffff;
color: #0f2f57;
}
.admin-schedule-active-card__stats small {
color: var(--admin-muted);
}
.admin-schedule-active-card__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
}
.admin-checkin-ready-note {
grid-template-columns: auto minmax(0, 1fr);
background: #f0fdf4;
border-color: #bbf7d0;
}
.admin-modal-list {
display: grid;
gap: 10px;
}
.admin-modal-list__item {
padding: 14px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
border: 1px solid var(--admin-border);
border-radius: 16px;
background: #fff;
color: inherit;
text-decoration: none;
}
.admin-modal-list__item:hover,
.admin-modal-list__item.is-selected {
border-color: #bfdbfe;
background: #eff6ff;
}
.admin-modal-list__item strong {
display: block;
color: #020617;
}
.admin-modal-list__item span,
.admin-modal-list__item small {
color: var(--admin-muted);
}
.admin-modal-list__item--attendance {
align-items: start;
}
.admin-schedule-absence-form {
display: grid;
gap: 8px;
width: min(360px, 42vw);
}
.admin-schedule-absence-form label:not(.admin-checkbox-line) {
display: grid;
gap: 5px;
font-size: 0.78rem;
font-weight: 800;
color: #334155;
}
.admin-schedule-absence-form input[type="text"] {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--admin-border);
border-radius: 10px;
background: #fff;
color: #0f172a;
}
.admin-attendance-summary {
display: grid;
gap: 8px;
}
.admin-attendance-summary span {
padding: 12px 14px;
border: 1px solid var(--admin-border);
border-radius: 14px;
background: #f8fafc;
color: #17324d;
font-weight: 800;
}
.admin-progress--presence span {
background: #059669;
}
.admin-card-actions,
.admin-user-edit-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.admin-card-actions {
margin-top: 16px;
}
.is-filter-hidden {
display: none !important;
}
@media (max-width: 1360px) {
.page-event-dashboard .admin-page-topbar {
grid-template-columns: 1fr;
align-items: flex-start;
}
.page-event-dashboard .admin-page-tools {
width: 100%;
justify-content: flex-start;
}
.page-event-dashboard .admin-global-search {
width: auto;
min-width: min(100%, 260px);
flex: 1 1 300px;
}
}
@media (max-width: 1180px) {
.admin-redesign {
grid-template-columns: 210px minmax(0, 1fr);
gap: 0;
padding: 0;
}
.admin-page-topbar {
grid-template-columns: 1fr;
align-items: flex-start;
}
.admin-page-tools {
align-items: flex-start;
}
.admin-page-tools,
.admin-global-search {
width: 100%;
}
.admin-workspace-context__bar {
grid-template-columns: 1fr;
align-items: stretch;
}
.admin-workspace-context__controls {
justify-content: flex-start;
flex-wrap: wrap;
}
.admin-global-search {
min-width: 0;
}
.admin-selected-event-card__body {
grid-template-columns: 1fr;
}
.admin-selected-event-card__actions {
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
justify-self: stretch;
}
.admin-metrics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-dashboard-grid,
.admin-checkin-grid {
grid-template-columns: 1fr;
}
.admin-event-focus-layout {
grid-template-columns: 1fr;
}
.admin-event-config-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-checkin-scope-switch {
grid-template-columns: 1fr;
}
.admin-raffle-layout {
grid-template-columns: 1fr;
}
.admin-event-row {
grid-template-columns: 96px minmax(0, 1fr);
}
.admin-row-badges,
.admin-row-actions {
justify-content: flex-start;
grid-column: 2;
}
.admin-schedule-columns {
grid-template-columns: 1fr;
}
.admin-schedule-active-card {
grid-template-columns: 1fr;
}
.admin-schedule-active-card__actions {
justify-content: flex-start;
}
}
@media (max-width: 991.98px) {
.admin-redesign {
position: relative;
grid-template-columns: 1fr;
gap: 16px;
padding: 12px;
}
.admin-workspace {
padding: 0;
}
.admin-sidebar-cycle {
display: none;
}
.admin-event-focus-hero {
grid-template-columns: 1fr;
}
.admin-event-focus-hero__status {
min-height: 0;
}
.admin-event-quick-actions > header {
align-items: flex-start;
flex-direction: column;
}
.admin-event-quick-actions header > p {
max-width: none;
text-align: left;
}
.admin-event-secondary-details > summary {
grid-template-columns: minmax(0, 1fr) 20px;
}
.admin-event-secondary-details > summary > small {
grid-column: 1 / -1;
grid-row: 2;
}
.admin-event-secondary-details > summary > i {
grid-column: 2;
grid-row: 1;
}
.admin-event-secondary-grid {
grid-template-columns: 1fr;
}
.admin-event-secondary-grid > section {
border-top: 1px solid var(--admin-border);
border-left: 0;
}
.admin-event-secondary-grid > section:first-child {
border-top: 0;
}
.admin-workspace-context {
position: static;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 16px;
}
.admin-workspace-breadcrumb {
display: none;
}
.admin-workspace-mobile-breadcrumb {
min-width: 0;
padding: 12px 14px;
display: grid;
gap: 3px;
border: 1px solid var(--admin-border);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}
.admin-workspace-mobile-breadcrumb > span {
min-width: 0;
display: flex;
align-items: center;
gap: 4px;
color: var(--admin-blue);
font-size: 0.72rem;
font-weight: 900;
}
.admin-workspace-mobile-breadcrumb > strong {
overflow: hidden;
color: var(--admin-text);
font-size: 1rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-workspace-context__bar {
display: none;
}
.admin-event-phase-nav {
display: none;
}
.admin-disabled-modules--desktop {
display: none;
}
.admin-disabled-modules--mobile .admin-disabled-modules__body {
padding: 0 8px 8px;
}
.admin-disabled-modules--mobile .admin-disabled-modules__body li {
grid-template-columns: 20px minmax(0, 1fr);
}
.admin-disabled-modules--mobile .admin-disabled-modules__body li a {
min-height: 44px;
grid-column: 1 / -1;
}
.admin-event-switcher {
min-width: min(100%, 270px);
flex: 1 1 270px;
}
.admin-event-switcher select {
max-width: none;
}
.admin-event-phase-group {
min-width: 152px;
}
.admin-mobile-bar {
position: sticky;
top: 10px;
z-index: 70;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid var(--admin-border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(12px);
}
.admin-mobile-menu-button,
.admin-mobile-primary-action {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 900;
text-decoration: none;
}
.admin-mobile-menu-button {
gap: 8px;
padding: 0 14px;
border: 1px solid #bfdbfe;
background: #eff6ff;
color: #004a8f;
}
.admin-mobile-menu-button span {
width: 16px;
height: 2px;
display: block;
border-radius: 999px;
background: currentColor;
box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.admin-mobile-primary-action {
padding: 0 14px;
gap: 7px;
background: var(--admin-blue);
color: #ffffff;
}
.admin-mobile-context {
min-width: 0;
display: grid;
gap: 1px;
}
.admin-mobile-context small {
color: var(--admin-muted);
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-mobile-context strong {
overflow: hidden;
color: var(--admin-text);
font-size: 0.92rem;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-mobile-backdrop {
position: fixed;
inset: 0;
z-index: 79;
display: block;
border: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(4px);
}
.admin-mobile-backdrop[hidden] {
display: none;
}
.admin-sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 80;
width: min(330px, calc(100vw - 38px));
max-width: 100%;
padding: 12px;
overflow: hidden;
transform: translateX(-108%);
transition: transform var(--motion-normal);
}
.admin-redesign.is-admin-menu-open .admin-sidebar {
transform: translateX(0);
}
.admin-sidebar-card {
position: relative;
height: calc(100dvh - 24px);
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 20px;
}
.admin-sidebar-mobile-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 44px;
height: 44px;
display: inline-grid;
place-items: center;
border: 1px solid #d7e3ef;
border-radius: 12px;
background: #ffffff;
color: var(--admin-blue);
font-size: 1.2rem;
}
.admin-sidebar-brand {
padding-right: 66px;
}
.admin-sidebar-user {
display: none;
}
.admin-sidebar-nav {
grid-template-columns: 1fr;
}
.admin-sidebar-mobile-event {
padding: 0 12px 12px;
display: grid;
gap: 12px;
border-top: 1px solid var(--admin-border);
}
.admin-sidebar-mobile-event__context {
min-width: 0;
margin-top: 12px;
padding: 12px;
display: grid;
gap: 3px;
border: 1px solid #cfe0f2;
border-radius: 14px;
background: var(--admin-blue-soft);
}
.admin-sidebar-mobile-event__context small,
.admin-sidebar-mobile-event__label strong,
.admin-sidebar-mobile-switcher label {
color: var(--admin-blue);
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.admin-sidebar-mobile-event__context strong,
.admin-sidebar-mobile-event__context span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-sidebar-mobile-event__context strong {
color: var(--admin-text);
font-size: 0.92rem;
}
.admin-sidebar-mobile-event__context span {
color: var(--admin-muted);
font-size: 0.76rem;
font-weight: 750;
}
.admin-sidebar-mobile-switcher {
display: grid;
gap: 6px;
}
.admin-sidebar-mobile-switcher > div {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
gap: 6px;
}
.admin-sidebar-mobile-switcher select,
.admin-sidebar-mobile-switcher button {
min-width: 0;
min-height: 44px;
border: 1px solid var(--admin-border);
border-radius: 11px;
background: #ffffff;
color: var(--admin-text);
font-weight: 800;
}
.admin-sidebar-mobile-switcher select {
width: 100%;
padding: 0 2rem 0 0.72rem;
}
.admin-sidebar-mobile-switcher button {
display: inline-grid;
place-items: center;
color: var(--admin-blue);
}
.admin-sidebar-mobile-event__label {
display: grid;
gap: 2px;
}
.admin-sidebar-mobile-event__label small {
color: var(--admin-muted);
font-size: 0.72rem;
line-height: 1.35;
}
.admin-mobile-phase-navigation {
display: grid;
gap: 6px;
}
.admin-mobile-phase-group {
overflow: hidden;
border: 1px solid var(--admin-border);
border-radius: 12px;
background: #ffffff;
}
.admin-mobile-phase-group.is-active,
.admin-mobile-phase-group.is-expanded {
border-color: #a9cdee;
background: #f7fbff;
}
.admin-mobile-phase-group__toggle {
width: 100%;
min-height: 44px;
padding: 0 12px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 20px;
gap: 8px;
align-items: center;
border: 0;
background: transparent;
color: #334155;
font-weight: 900;
text-align: left;
}
.admin-mobile-phase-group.is-active .admin-mobile-phase-group__toggle {
color: var(--admin-blue);
}
.admin-mobile-phase-group__items {
padding: 0 6px 6px 40px;
display: grid;
gap: 4px;
}
.admin-mobile-phase-group__items[hidden] {
display: none;
}
.admin-mobile-phase-group__items button,
.admin-mobile-phase-group__items a {
width: 100%;
min-height: 44px;
padding: 0 10px;
display: grid;
grid-template-columns: 18px minmax(0, 1fr) 18px;
gap: 8px;
align-items: center;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: #475569;
font-size: 0.82rem;
font-weight: 800;
text-align: left;
text-decoration: none;
}
.admin-mobile-phase-group__items button.is-active,
.admin-mobile-phase-group__items a.is-active {
border-color: var(--admin-blue);
background: var(--admin-blue);
color: #ffffff;
}
.admin-mobile-phase-group__items button > span,
.admin-mobile-phase-group__items a > span {
min-width: 0;
overflow-wrap: anywhere;
}
.admin-sidebar-mobile-event__actions {
display: grid;
gap: 6px;
}
.admin-sidebar-mobile-event__actions > button,
.admin-sidebar-mobile-more > summary,
.admin-sidebar-mobile-more > div a,
.admin-sidebar-mobile-more > div button {
width: 100%;
min-height: 44px;
padding: 0 12px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 20px;
gap: 8px;
align-items: center;
border: 0;
border-radius: 10px;
background: transparent;
color: #475569;
font-weight: 800;
text-align: left;
text-decoration: none;
}
.admin-sidebar-mobile-event__actions > button:hover,
.admin-sidebar-mobile-more > summary:hover,
.admin-sidebar-mobile-more > div a:hover,
.admin-sidebar-mobile-more > div button:hover {
background: var(--admin-blue-soft);
color: var(--admin-blue);
}
.admin-sidebar-mobile-more > summary {
cursor: pointer;
list-style: none;
}
.admin-sidebar-mobile-more > summary::-webkit-details-marker {
display: none;
}
.admin-sidebar-mobile-more[open] > summary > i:last-child {
transform: rotate(180deg);
}
.admin-sidebar-mobile-more > div {
padding: 0 0 4px 28px;
display: grid;
gap: 2px;
}
.admin-sidebar-mobile-more form {
margin: 0;
}
.admin-sidebar-operation-link {
display: none !important;
}
.admin-sidebar-footer {
grid-template-columns: 1fr;
}
.admin-list-toolbar,
.admin-table-toolbar,
.admin-board-heading,
.admin-card-header {
align-items: flex-start;
flex-direction: column;
}
.admin-inline-search {
width: 100%;
}
.admin-role-switch {
width: 100%;
overflow-x: auto;
justify-content: flex-start;
}
.admin-role-current {
width: 100%;
justify-content: flex-start;
}
.admin-selected-event-card__empty {
grid-template-columns: 1fr;
align-items: flex-start;
}
.admin-user-list article {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 12px;
}
.admin-user-list__sector {
grid-column: 1;
}
.admin-user-list__actions {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
.admin-user-create-form,
.admin-user-edit-form,
.admin-modern-form,
.admin-toggle-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.admin-redesign {
padding: 12px;
}
.admin-event-focus-hero {
padding: 20px;
gap: 18px;
border-radius: 18px;
}
.admin-event-focus-hero__actions,
.admin-event-focus-hero__actions > * {
width: 100%;
}
.admin-event-focus-hero__actions > * {
justify-content: center;
}
.admin-event-focus-card-header {
padding: 18px;
}
.admin-event-task {
padding: 16px 18px;
grid-template-columns: 38px minmax(0, 1fr);
align-items: start;
}
.admin-event-task__icon {
width: 38px;
height: 38px;
}
.admin-event-task > button {
width: 100%;
grid-column: 1 / -1;
}
.admin-event-readiness-card,
.admin-event-quick-actions > header,
.admin-event-secondary-details > summary {
padding: 18px;
}
.admin-event-quick-actions > div {
grid-template-columns: 1fr;
}
.admin-workspace-context__identity strong,
.admin-workspace-context__identity span {
white-space: normal;
}
.admin-workspace-context__controls {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
}
.admin-event-switcher {
min-width: 0;
grid-column: 1 / -1;
}
.admin-workspace-context__controls > .admin-ghost-button,
.admin-workspace-context__controls > .admin-primary-button {
width: 100%;
justify-content: center;
}
.admin-context-more {
width: 40px;
}
.admin-sidebar-nav {
grid-template-columns: 1fr;
}
.admin-metrics-grid,
.admin-metrics-grid--three {
grid-template-columns: 1fr;
}
.admin-page-topbar,
.admin-card-header,
.admin-board-heading,
.admin-list-toolbar,
.admin-table-card,
.admin-form-card,
.admin-checkin-validator,
.admin-last-checkins {
padding: 18px;
}
.admin-event-config-alerts,
.admin-event-config-grid {
margin-inline: 18px;
padding-inline: 0;
}
.admin-event-config-grid {
grid-template-columns: 1fr;
}
.admin-page-title h1 {
white-space: normal;
}
.admin-selected-event-card__body,
.admin-selected-event-card__top,
.admin-selected-event-card__footer,
.admin-selected-event-card__empty {
padding-inline: 16px;
}
.admin-selected-event-card__identity {
display: grid;
}
.admin-selected-event-card__thumb {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
flex-basis: auto;
}
.admin-selected-event-card__actions {
grid-template-columns: 1fr;
}
.admin-event-row,
.admin-managed-row {
grid-template-columns: 1fr;
}
.admin-checkin-scope-switch {
width: 100%;
}
.admin-checkin-scope-card {
flex: 1 1 0;
justify-content: center;
padding-inline: 10px;
}
.admin-checkin-metrics article {
min-height: 86px;
padding: 12px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 7px;
}
.admin-checkin-metrics span {
font-size: 0.72rem;
line-height: 1.25;
}
.admin-checkin-metrics strong {
font-size: 1.35rem;
}
.admin-checkin-list article {
grid-template-columns: 30px minmax(0, 1fr);
padding-inline: 18px;
}
.admin-checkin-list article > form,
.admin-checkin-participant-status {
grid-column: 1 / -1;
text-align: left;
}
.admin-checkin-list article > form .admin-primary-button {
width: 100%;
min-height: 44px;
justify-content: center;
}
.admin-action-menu__panel {
left: 0;
right: auto;
}
.admin-form-section__grid,
.admin-modal-list__item,
.admin-checkin-ready-note {
grid-template-columns: 1fr;
}
.admin-schedule-absence-form {
width: 100%;
}
.admin-modal,
.admin-modal--drawer,
.admin-modal--large,
.admin-modal--scanner {
width: 100vw;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 12px;
}
.admin-modal__panel,
.admin-modal--drawer .admin-modal__panel,
.admin-modal--large .admin-modal__panel,
.admin-modal--scanner .admin-modal__panel {
width: calc(100vw - 24px);
min-height: auto;
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
border-radius: 18px;
}
.admin-modal__header,
.admin-modal__body {
padding: 18px;
}
.admin-event-wizard__steps {
top: -18px;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: thin;
scrollbar-color: #9db3c9 #eef3f8;
}
.admin-event-wizard__steps::-webkit-scrollbar {
height: 6px;
}
.admin-event-wizard__steps button {
flex: 0 0 auto;
white-space: nowrap;
}
.admin-modal__footer {
flex-direction: column-reverse;
}
.admin-modal .admin-modal-form > .admin-modal__footer {
bottom: -18px;
margin: 8px -18px -18px;
padding: 14px 18px;
}
.admin-modal__footer > * {
width: 100%;
justify-content: center;
}
.admin-event-thumb {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.admin-row-badges,
.admin-row-actions {
grid-column: auto;
flex-wrap: wrap;
}
.admin-checkin-input-row,
.admin-sidebar-footer {
grid-template-columns: 1fr;
}
.admin-checkin-actions,
.admin-checkin-actions > *,
.admin-schedule-active-card__actions > * {
width: 100%;
justify-content: center;
}
.admin-schedule-active-card__details {
grid-template-columns: 1fr;
}
.admin-scanner-box {
min-height: 260px;
margin-inline: 0;
}
.admin-scanner-box--modal {
min-height: min(360px, 52vh);
}
}
@media (max-width: 991.98px) {
.admin-page-topbar {
gap: 14px;
padding: 18px;
border-radius: 18px;
}
.admin-page-title h1 {
font-size: clamp(1.55rem, 8vw, 2.05rem);
}
.admin-page-tools {
display: none;
}
.admin-selected-event-card {
border-radius: 18px;
}
.admin-selected-event-card__top {
min-height: 36px;
padding: 9px 14px;
}
.admin-selected-event-card__top small {
display: none;
}
.admin-selected-event-card__body {
padding: 16px;
gap: 14px;
}
.admin-selected-event-card__identity {
gap: 12px;
}
.admin-selected-event-card__thumb {
width: 58px;
height: 58px;
flex-basis: 58px;
border-radius: 14px;
font-size: 1.05rem;
}
.admin-selected-event-card__content h2 {
font-size: 1.1rem;
line-height: 1.22;
}
.admin-selected-event-card__details {
display: grid;
gap: 5px;
margin-top: 8px;
}
.admin-selected-event-card__chips {
gap: 6px;
margin-top: 10px;
}
.admin-selected-event-card__actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.admin-selected-event-card__footer {
padding: 12px 14px;
align-items: flex-start;
}
.admin-selected-event-card__footer p {
font-size: 0.82rem;
line-height: 1.35;
}
}
@media (max-width: 991.98px) {
body.page-event-dashboard .admin-tab-panel[id] {
scroll-margin-top: 100px;
}
body.page-event-dashboard .admin-redesign button,
body.page-event-dashboard .admin-redesign input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.page-event-dashboard .admin-redesign select,
body.page-event-dashboard .admin-redesign textarea,
body.page-event-dashboard .admin-redesign summary,
body.page-event-dashboard .admin-sidebar-brand,
body.page-event-dashboard .admin-sidebar-footer a,
body.page-event-dashboard .admin-mobile-primary-action,
body.page-event-dashboard .admin-event-phase-group__items a,
body.page-event-dashboard .admin-event-assistant__steps .admin-event-wizard__steps > a,
body.page-event-dashboard .admin-action-menu__panel a,
body.page-event-dashboard .admin-list-export-menu > div a,
body.page-event-dashboard .admin-list-active-filters > a,
body.page-event-dashboard .admin-list-page-sizes a,
body.page-event-dashboard .admin-list-pagination a,
body.page-event-dashboard .admin-table-link,
body.page-event-dashboard a.admin-primary-button,
body.page-event-dashboard a.admin-ghost-button,
body.page-event-dashboard a.admin-export-button {
min-height: 44px;
}
body.page-event-dashboard .skip-link,
body.page-event-dashboard .admin-mobile-primary-action {
min-height: 44px;
}
body.page-event-dashboard .admin-redesign button,
body.page-event-dashboard .admin-list-page-sizes a,
body.page-event-dashboard .admin-list-pagination a,
body.page-event-dashboard .admin-table-link {
min-width: 44px;
}
body.page-event-dashboard .admin-sidebar-footer a,
body.page-event-dashboard .admin-event-phase-group__items a,
body.page-event-dashboard .admin-action-menu__panel a,
body.page-event-dashboard .admin-list-export-menu > div a,
body.page-event-dashboard .admin-list-active-filters > a,
body.page-event-dashboard .admin-list-page-sizes a,
body.page-event-dashboard .admin-list-pagination a,
body.page-event-dashboard .admin-table-link {
display: inline-flex;
align-items: center;
}
body.page-event-dashboard .admin-context-more,
body.page-event-dashboard .admin-modal__header > button {
width: 44px;
min-width: 44px;
height: 44px;
flex-basis: 44px;
}
}
@media (max-width: 640px) {
body.page-event-dashboard .admin-tab-panel[id] {
scroll-margin-top: 152px;
}
.admin-mobile-bar {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.admin-mobile-primary-action {
grid-column: auto;
width: auto;
}
.admin-card,
.admin-table-card,
.admin-board-card,
.admin-panel-card {
border-radius: 18px;
}
.admin-metrics-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 430px) {
.admin-mobile-primary-action {
width: auto;
padding: 0 12px;
}
.admin-mobile-primary-action span {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: nowrap;
}
}
/* Alertas internos da area do participante. */
.public-alert-link {
position: relative;
min-width: 42px;
min-height: 42px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
border: 1px solid rgba(0, 74, 143, 0.14) !important;
border-radius: 999px !important;
background: #f7faff !important;
color: var(--public-blue, #004a8f) !important;
}
.public-alert-link:hover,
.public-alert-link.is-active {
border-color: rgba(0, 74, 143, 0.28) !important;
background: var(--public-blue-soft, #e8f2ff) !important;
}
.public-alert-link > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.public-alert-link > i {
font-size: 1.15rem;
}
.public-alert-link > strong {
position: absolute;
top: -0.28rem;
right: -0.2rem;
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
border-radius: 999px;
background: #c2410c;
color: #ffffff;
padding: 0 0.3rem;
font-size: 0.68rem;
line-height: 1;
}
.participant-alert-banner-stack {
display: grid;
gap: 0.7rem;
}
.participant-alert-banner {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
border: 1px solid #bfdbfe;
border-left-width: 4px;
border-radius: 14px;
background: #eff6ff;
padding: 0.9rem 1rem;
color: #173b6d;
box-shadow: 0 12px 28px rgba(20, 46, 82, 0.08);
}
.participant-alert-banner--success {
border-color: #86efac;
background: #f0fdf4;
color: #166534;
}
.participant-alert-banner--warning {
border-color: #fcd34d;
background: #fffbeb;
color: #92400e;
}
.participant-alert-banner--danger {
border-color: #fca5a5;
background: #fff1f2;
color: #991b1b;
}
.participant-alert-banner__icon,
.participant-alert-card__icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.78);
color: currentColor;
font-size: 1.25rem;
}
.participant-alert-banner__body {
min-width: 0;
}
.participant-alert-banner__body strong {
display: block;
color: currentColor;
line-height: 1.25;
}
.participant-alert-banner__body p {
margin: 0.2rem 0 0;
color: currentColor;
line-height: 1.45;
}
.participant-alert-banner__actions,
.participant-alert-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
.participant-alert-banner__actions form,
.participant-alert-card__actions form {
margin: 0;
}
.participant-alert-banner__actions a,
.participant-alert-banner__actions button {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
color: currentColor;
padding: 0.45rem 0.75rem;
font-size: 0.78rem;
font-weight: 900;
}
.account-alerts-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.account-alerts-heading > div {
display: grid;
gap: 0.35rem;
}
.account-alerts-heading p {
max-width: 720px;
margin: 0;
color: #66768a;
}
.account-alerts-heading form {
margin: 0;
}
.participant-alert-center {
display: grid;
gap: 0.8rem;
}
.participant-alert-card {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
border: 1px solid rgba(31, 65, 114, 0.12);
border-left: 4px solid #60a5fa;
border-radius: 14px;
background: #ffffff;
padding: 1rem;
box-shadow: 0 14px 32px rgba(20, 46, 82, 0.07);
}
.participant-alert-card.is-unread {
background: #f8fbff;
box-shadow: 0 16px 36px rgba(20, 46, 82, 0.11);
}
.participant-alert-card--success {
border-left-color: #22c55e;
}
.participant-alert-card--warning {
border-left-color: #f59e0b;
}
.participant-alert-card--danger {
border-left-color: #ef4444;
}
.participant-alert-card--info .participant-alert-card__icon {
background: #eaf1ff;
color: #1d4ed8;
}
.participant-alert-card--success .participant-alert-card__icon {
background: #dcfce7;
color: #166534;
}
.participant-alert-card--warning .participant-alert-card__icon {
background: #fef3c7;
color: #92400e;
}
.participant-alert-card--danger .participant-alert-card__icon {
background: #fee2e2;
color: #991b1b;
}
.participant-alert-card__body {
min-width: 0;
}
.participant-alert-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
color: #66768a;
font-size: 0.76rem;
font-weight: 800;
}
.participant-alert-card__meta em {
border-radius: 999px;
background: #eef2f7;
color: #475569;
padding: 0.16rem 0.5rem;
font-style: normal;
}
.participant-alert-card.is-unread .participant-alert-card__meta em {
background: #dbeafe;
color: #1d4ed8;
}
.participant-alert-card h2 {
margin: 0.25rem 0 0;
color: #102033;
font-family: "Space Grotesk", sans-serif;
font-size: 1.05rem;
}
.participant-alert-card p {
margin: 0.28rem 0 0;
color: #526174;
line-height: 1.5;
}
@media (max-width: 760px) {
.public-alert-link {
min-height: 44px !important;
justify-content: flex-start !important;
border-radius: 10px !important;
padding-inline: 0.72rem !important;
}
.public-alert-link > span {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
.public-alert-link > strong {
position: static;
margin-left: auto;
border-width: 0;
}
.participant-alert-banner,
.participant-alert-card {
grid-template-columns: 42px minmax(0, 1fr);
align-items: start;
}
.participant-alert-banner__actions,
.participant-alert-card__actions {
grid-column: 1 / -1;
justify-content: stretch;
}
.participant-alert-banner__actions a,
.participant-alert-banner__actions form,
.participant-alert-banner__actions button,
.participant-alert-card__actions a,
.participant-alert-card__actions form,
.participant-alert-card__actions button {
width: 100%;
}
.account-alerts-heading {
align-items: stretch;
flex-direction: column;
}
.account-alerts-heading form,
.account-alerts-heading button {
width: 100%;
}
}
/* Auditoria mobile administrativa - Fase 4: componentes. */
@media (max-width: 991.98px) {
body.page-event-dashboard .admin-table td.admin-table-mobile-context {
display: none;
}
}
@media (max-width: 640px) {
body.page-event-dashboard .flash,
body.page-event-dashboard .admin-event-config-alerts p {
max-width: 100%;
overflow-wrap: anywhere;
line-height: 1.45;
}
body.page-event-dashboard .admin-status,
body.page-event-dashboard .admin-role-badge {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.25;
text-align: center;
}
body.page-event-dashboard .admin-redesign input,
body.page-event-dashboard .admin-redesign select,
body.page-event-dashboard .admin-redesign textarea {
scroll-margin-top: 160px;
scroll-margin-bottom: 32vh;
}
}
@media (min-width: 375px) and (max-width: 640px) {
body.page-event-dashboard .admin-metrics-grid,
body.page-event-dashboard .admin-metrics-grid--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-event-dashboard .admin-metric-card {
min-height: 124px;
padding: 14px;
gap: 8px;
}
body.page-event-dashboard .admin-metric-card strong {
font-size: 1.65rem;
}
body.page-event-dashboard .admin-metric-card i {
width: 32px;
height: 32px;
flex: 0 0 32px;
}
}
@media (max-width: 560px) {
body.page-event-dashboard .admin-action-menu__panel {
right: 0;
left: auto;
width: min(230px, calc(100vw - 56px));
max-width: calc(100vw - 56px);
}
}
/* Auditoria mobile administrativa - Fase 5: operacao. */
body.page-checkin-operation .checkin-operation__brand {
min-height: 44px;
}
body.page-checkin-operation .skip-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
body.page-checkin-operation .checkin-operation-mode i {
display: none;
color: #0b69b7;
font-size: 1.35rem;
}
body.page-checkin-operation .checkin-operation-mode .is-disabled i {
color: #64748b;
}
body.page-checkin-operation .admin-checkin-input-row,
body.page-checkin-operation .admin-checkin-input-row > *,
body.page-checkin-operation .admin-checkin-input-row input {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
body.page-checkin-operation .admin-modal__close {
min-width: 44px;
min-height: 44px;
}
.checkin-operation-search {
margin-top: 22px;
border-top: 1px solid #d8e5f4;
}
.checkin-operation-search > summary {
min-height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 0 0;
color: #17263a;
cursor: pointer;
list-style: none;
}
.checkin-operation-search > summary::-webkit-details-marker {
display: none;
}
.checkin-operation-search > summary span {
display: grid;
gap: 3px;
min-width: 0;
}
.checkin-operation-search > summary strong {
font-size: 1rem;
}
.checkin-operation-search > summary small {
color: #52677f;
line-height: 1.4;
}
.checkin-operation-search > summary i {
flex: 0 0 auto;
color: #004a8f;
font-size: 1.25rem;
}
.checkin-operation-search[open] > summary i {
transform: rotate(180deg);
}
.checkin-operation-search__content,
.checkin-operation-search__form,
.checkin-operation-search-results {
display: grid;
gap: 12px;
}
.checkin-operation-search__content {
padding-top: 14px;
}
.checkin-operation-search__form label {
color: #17263a;
font-weight: 800;
}
.checkin-operation-search__form > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.checkin-operation-search__form input {
width: 100%;
min-width: 0;
min-height: 44px;
box-sizing: border-box;
border: 1px solid #cfdeef;
border-radius: 12px;
padding: 0 14px;
font: inherit;
}
.checkin-operation-search__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 4px;
}
.checkin-operation-search__heading a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: #004a8f;
font-weight: 850;
}
.checkin-operation-search-result {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
border: 1px solid #d8e5f4;
border-radius: 16px;
background: #f8fbff;
padding: 14px;
}
.checkin-operation-search-result > div:first-child {
display: grid;
gap: 3px;
min-width: 0;
}
.checkin-operation-search-result span,
.checkin-operation-search-result small {
overflow-wrap: anywhere;
color: #52677f;
}
.checkin-operation-search-result__action,
.checkin-operation-search-result__action form {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
}
.checkin-operation-search-result__action em {
border-radius: 999px;
background: #e8f1fb;
color: #334155;
padding: 8px 11px;
font-size: 0.82rem;
font-style: normal;
font-weight: 850;
text-align: center;
}
@media (max-width: 991.98px) {
body.page-checkin-operation .checkin-operation {
padding-right: max(12px, env(safe-area-inset-right));
padding-bottom: max(12px, env(safe-area-inset-bottom));
padding-left: max(12px, env(safe-area-inset-left));
}
body.page-checkin-operation .checkin-operation__topbar {
top: max(12px, env(safe-area-inset-top));
}
body.page-checkin-operation .checkin-operation-mode {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.page-checkin-operation .checkin-operation-mode i {
display: block;
}
body.page-checkin-operation .checkin-operation-mode > * {
min-width: 0;
}
body.page-checkin-operation .checkin-operation-camera-button {
order: -1;
}
}
@media (max-width: 560px) {
body.page-checkin-operation .checkin-operation__topbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 6px 10px;
padding: 12px;
}
body.page-checkin-operation .checkin-operation__brand {
min-width: 0;
}
body.page-checkin-operation .checkin-operation__brand strong {
min-width: 0;
}
body.page-checkin-operation .checkin-operation__user {
grid-column: 1;
min-width: 0;
font-size: 0.82rem;
}
body.page-checkin-operation .checkin-operation__user > span {
display: none;
}
body.page-checkin-operation .checkin-operation__user div,
body.page-checkin-operation .checkin-operation__user strong {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
body.page-checkin-operation .checkin-operation__nav {
grid-column: 2;
grid-row: 1 / span 2;
align-self: stretch;
flex-direction: row;
}
body.page-checkin-operation .checkin-operation__nav form,
body.page-checkin-operation .checkin-operation__nav button {
width: auto;
height: 100%;
min-width: 54px;
justify-content: center;
}
body.page-checkin-operation .checkin-operation__hero {
gap: 10px;
margin: 12px 0;
padding: 14px;
}
body.page-checkin-operation .checkin-operation__hero h1 {
margin-bottom: 0;
font-size: clamp(1.7rem, 9vw, 2.15rem);
}
body.page-checkin-operation .checkin-operation__hero > div > p {
display: none;
}
body.page-checkin-operation .checkin-operation__event {
padding: 11px 12px;
}
body.page-checkin-operation .checkin-operation__event strong {
font-size: 1.05rem;
}
body.page-checkin-operation .checkin-operation__event-switcher > div {
grid-template-columns: minmax(0, 1fr);
}
body.page-checkin-operation .checkin-operation__event-switcher .admin-ghost-button {
width: 100%;
justify-content: center;
}
body.page-checkin-operation .checkin-operation-feedback {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
margin: 0 0 14px;
padding: 14px;
}
body.page-checkin-operation .checkin-operation-feedback--idle {
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
padding: 10px 12px;
}
body.page-checkin-operation .checkin-operation-feedback--idle .checkin-operation-feedback__icon {
width: 32px;
height: 32px;
}
body.page-checkin-operation .checkin-operation-feedback--idle p {
display: none;
}
body.page-checkin-operation .checkin-operation-mode {
display: grid;
gap: 8px;
overflow: visible;
padding-bottom: 0;
}
body.page-checkin-operation .checkin-operation-mode > * {
min-height: 76px;
align-content: center;
justify-items: center;
gap: 5px;
padding: 10px 6px;
text-align: center;
}
body.page-checkin-operation .checkin-operation-mode > * > span,
body.page-checkin-operation .checkin-operation-mode > * > small {
display: none;
}
body.page-checkin-operation .checkin-operation-mode strong {
overflow-wrap: anywhere;
font-size: 0.85rem;
}
body.page-checkin-operation .checkin-operation-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
}
body.page-checkin-operation .checkin-operation-metrics article {
min-width: 0;
padding: 12px 8px;
text-align: center;
}
body.page-checkin-operation .checkin-operation-metrics span {
overflow-wrap: anywhere;
font-size: 0.62rem;
letter-spacing: 0.04em;
}
body.page-checkin-operation .checkin-operation-metrics strong {
margin: 4px 0 0;
font-size: 1.5rem;
}
body.page-checkin-operation .checkin-operation-metrics small {
display: none;
}
body.page-checkin-operation .checkin-operation-card {
padding: 18px;
}
body.page-checkin-operation .checkin-operation-card__header {
margin-bottom: 14px;
}
body.page-checkin-operation .checkin-operation-validator-form {
display: flex;
flex-direction: column;
}
body.page-checkin-operation .checkin-operation-validator-form .checkin-operation-actions {
order: -1;
}
body.page-checkin-operation .checkin-operation-camera-button {
border-color: #004a8f;
background: #004a8f;
color: #ffffff;
}
body.page-checkin-operation .checkin-operation-manual-button {
border: 1px solid #b9d4f2;
background: #ffffff;
color: #004a8f;
box-shadow: none;
}
body.page-checkin-operation .checkin-operation-search__form > div,
body.page-checkin-operation .checkin-operation-search-result {
grid-template-columns: minmax(0, 1fr);
}
body.page-checkin-operation .checkin-operation-search__heading {
align-items: flex-start;
}
body.page-checkin-operation .checkin-operation-search-result__action,
body.page-checkin-operation .checkin-operation-search-result__action form,
body.page-checkin-operation .checkin-operation-search-result__action button {
width: 100%;
justify-content: center;
}
body.page-checkin-operation .admin-modal__header,
body.page-checkin-operation .admin-modal__body {
padding: 14px;
}
body.page-checkin-operation .operation-scanner {
min-height: clamp(180px, 38dvh, 260px);
}
body.page-checkin-operation .admin-checkin-input-row {
width: 100%;
}
}
/* Detalhe isolado da inscrição selecionada no perfil. */
.account-shell--registration-detail {
width: min(920px, calc(100% - 2rem));
}
.account-page-heading--registration-detail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 4px;
}
.account-page-heading--registration-detail > div {
min-width: 0;
}
.account-page-heading--registration-detail h1 {
overflow-wrap: break-word;
}
.account-page-heading--registration-detail > .button {
flex: 0 0 auto;
}
@media (max-width: 640px) {
.account-page-heading--registration-detail {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
.account-page-heading--registration-detail > .button {
width: 100%;
}
}
/* Correções de UX após a simulação — Etapa E: jornada de QR Codes do participante. */
body.page-account .account-ticket-card--journey {
display: block;
scroll-margin-top: 92px;
}
body.page-account .account-ticket-card--journey > div {
min-width: 0;
}
body.page-account .account-checkin-next {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
margin: 20px 0 14px;
padding: 18px;
border: 1px solid #b9d7f5;
border-radius: 18px;
background: linear-gradient(135deg, #edf6ff 0%, #ffffff 100%);
box-shadow: 0 12px 30px rgba(0, 74, 143, 0.08);
}
body.page-account .account-checkin-next--complete {
border-color: #bbebcc;
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
box-shadow: none;
}
body.page-account .account-checkin-next__copy {
display: grid;
min-width: 0;
gap: 5px;
}
body.page-account .account-checkin-next__copy h3,
body.page-account .account-checkin-next__copy p,
body.page-account .account-checkin-next__copy small {
margin: 0;
}
body.page-account .account-checkin-next__copy h3 {
color: #0f3157;
font-size: clamp(1.05rem, 2vw, 1.25rem);
}
body.page-account .account-checkin-next__copy p,
body.page-account .account-checkin-next__copy small {
color: #526179;
}
body.page-account .account-checkin-next__copy small {
font-weight: 800;
}
body.page-account .account-checkin-next__button {
min-width: 180px;
justify-content: center;
}
body.page-account .account-checkin-next__done {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 999px;
background: #dcfce7;
color: #166534;
font-size: 1.35rem;
font-weight: 900;
}
body.page-account .account-ticket-activity-group {
margin-top: 10px;
overflow: hidden;
border: 1px solid #d9e7f7;
border-radius: 16px;
background: #ffffff;
}
body.page-account .account-ticket-activity-group--completed {
border-color: #dfe5ec;
background: #f8fafc;
}
body.page-account .account-ticket-activity-group--waitlist {
border-color: #f7dc8c;
background: #fffdf4;
}
body.page-account .account-ticket-activity-group > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 32px;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 0 14px;
color: #17324f;
cursor: pointer;
font-weight: 900;
list-style: none;
}
body.page-account .account-ticket-activity-group > summary::-webkit-details-marker {
display: none;
}
body.page-account .account-ticket-activity-group > summary::after {
content: "+";
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: #eaf3ff;
color: #004a8f;
font-size: 1.1rem;
line-height: 1;
}
body.page-account .account-ticket-activity-group[open] > summary::after {
content: "−";
}
body.page-account .account-ticket-activity-group > summary:focus-visible {
outline: 3px solid rgba(0, 83, 155, 0.3);
outline-offset: -3px;
}
body.page-account .account-ticket-activity-group > summary strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
min-height: 30px;
padding: 0 9px;
border-radius: 999px;
background: #eaf3ff;
color: #004a8f;
font-size: 0.76rem;
}
body.page-account .account-ticket-activity-group--credential > summary strong {
max-width: min(44vw, 280px);
padding-inline: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.page-account .account-ticket-activity-group__body {
margin: 0;
padding: 14px;
border: 0;
border-top: 1px solid #e5edf7;
border-radius: 0;
background: transparent;
}
body.page-account .account-ticket-activity-group--credential .account-ticket-activity-group__body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
body.page-account .account-ticket-activity-group--credential .account-ticket-activity-group__body p {
margin: 0;
color: #526179;
}
body.page-account .account-ticket-activity-group:not([open]) > .account-ticket-activity-group__body {
display: none;
}
body.page-account .account-ticket-activities__item--next {
margin-inline: -8px;
padding-inline: 8px;
border-radius: 12px;
background: #edf6ff;
}
body.page-account .account-ticket-activities__next-marker {
color: #004a8f;
font-weight: 900;
}
body.page-account .account-ticket-card--journey .account-ticket-card__actions {
margin-top: 16px;
}
body.page-account .account-next-event > div > small {
display: block;
margin-top: 6px;
color: #004a8f;
font-weight: 900;
}
body.page-account .qr-modal__close {
width: 44px;
min-height: 44px;
}
/* Cadastro de evento em página única. */
.admin-event-single-page .admin-event-assistant__steps,
.admin-event-single-page .admin-event-assistant__summary {
position: sticky;
top: 16px;
align-self: start;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.admin-event-single-page .admin-event-assistant__content {
display: grid;
gap: 0;
}
.admin-event-single-page .admin-event-assistant__content > .admin-form-section {
padding-block: 30px;
scroll-margin-top: 24px;
}
.admin-event-single-page .admin-event-assistant__content > .admin-form-section:first-child {
padding-top: 0;
}
.admin-event-single-page .admin-event-assistant__content > .admin-form-section + .admin-form-section {
border-top: 1px solid #e4ecf4;
}
.admin-event-single-page .admin-event-wizard__steps > a:focus-visible {
outline: 3px solid rgba(0, 83, 155, 0.22);
outline-offset: 2px;
}
.admin-event-date-group,
.admin-race-option-field {
min-width: 0;
margin: 0;
padding: 18px;
border: 1px solid #d8e3ed;
border-radius: 15px;
background: #f9fbfd;
}
.admin-event-date-group > legend,
.admin-race-option-field > legend {
padding-inline: 6px;
color: #193853;
font-size: 0.84rem;
font-weight: 900;
}
.admin-event-date-group > div {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.admin-event-date-group input[type="date"],
.admin-event-date-group input[type="time"] {
min-height: 46px;
cursor: pointer;
}
.admin-event-date-group.has-error {
border-color: #dc6f6f;
background: #fff8f8;
}
.admin-field-error {
min-height: 1.1em;
margin: 8px 0 0;
color: #ae2d2d;
font-size: 0.78rem;
font-weight: 750;
}
.admin-event-team-summary {
min-width: 0;
padding: 17px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border: 1px solid #d8e3ed;
border-radius: 15px;
background: #f9fbfd;
}
.admin-event-team-summary > div {
min-width: 0;
display: grid;
gap: 8px;
}
.admin-event-team-summary ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 7px;
list-style: none;
}
.admin-event-team-summary li {
padding: 5px 9px;
border: 1px solid #cbdce9;
border-radius: 999px;
background: #ffffff;
color: #496177;
font-size: 0.75rem;
font-weight: 800;
}
.admin-event-team-modal .admin-modal__body {
display: grid;
gap: 16px;
}
.admin-event-team-picker {
max-height: min(52vh, 430px);
overflow-y: auto;
display: grid;
gap: 8px;
}
.admin-event-team-picker > label {
min-width: 0;
padding: 12px 14px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
border: 1px solid #dce6ef;
border-radius: 12px;
background: #ffffff;
cursor: pointer;
}
.admin-event-team-picker > label:has(input:checked) {
border-color: #78b6d8;
background: #edf7fb;
}
.admin-event-team-picker input {
width: 18px;
height: 18px;
accent-color: #00539b;
}
.admin-event-team-picker span,
.admin-event-team-picker strong,
.admin-event-team-picker small {
min-width: 0;
}
.admin-event-team-picker span {
display: grid;
gap: 2px;
}
.admin-event-team-picker small {
color: #6a7a8e;
overflow-wrap: anywhere;
}
.admin-race-option-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.admin-race-settings-grid textarea {
min-height: 112px;
resize: vertical;
}
.admin-race-waiver-setting {
grid-column: 1 / -1;
}
.admin-race-option-grid label {
min-width: 0;
cursor: pointer;
}
.admin-race-option-grid input {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
}
.admin-race-option-grid span {
min-height: 46px;
display: grid;
place-items: center;
border: 1px solid #cbdce9;
border-radius: 12px;
background: #ffffff;
color: #37536e;
font-weight: 900;
}
.admin-race-option-grid input:checked + span {
border-color: #00539b;
background: #eaf4fd;
color: #00539b;
box-shadow: inset 0 0 0 1px #00539b;
}
.admin-race-option-grid input:focus-visible + span {
outline: 3px solid rgba(0, 83, 155, 0.22);
outline-offset: 2px;
}
.admin-race-option-field > small {
display: block;
margin-top: 10px;
color: #64758a;
}
.registration-choice-group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.registration-choice-group > legend {
margin-bottom: 8px;
color: var(--ink, #14283d);
font-size: 0.84rem;
font-weight: 850;
}
.registration-choice-group > div {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.registration-choice-group--shirts > div {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.registration-choice-group label {
min-width: 0;
cursor: pointer;
}
.registration-choice-group input {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
}
.registration-choice-group span {
min-height: 44px;
display: grid;
place-items: center;
border: 1px solid #cbdce9;
border-radius: 11px;
background: #ffffff;
color: #37536e;
font-weight: 900;
}
.registration-choice-group input:checked + span {
border-color: #00539b;
background: #eaf4fd;
color: #00539b;
box-shadow: inset 0 0 0 1px #00539b;
}
.registration-choice-group input:focus-visible + span {
outline: 3px solid rgba(0, 83, 155, 0.24);
outline-offset: 2px;
}
.registration-contact-group {
min-width: 0;
display: grid;
gap: 5px;
margin: 0;
padding: 14px;
border: 1px solid #d5e2ec;
border-radius: 13px;
background: #f8fbfd;
}
.registration-contact-group > legend {
padding: 0 6px;
color: var(--ink, #14283d);
font-size: 0.86rem;
font-weight: 850;
}
.registration-contact-group > p {
margin: 0 0 7px;
color: #64758a;
font-size: 0.8rem;
}
.registration-contact-group > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.registration-contact-group .field {
min-width: 0;
}
.registration-child-companion {
min-width: 0;
display: grid;
gap: 14px;
margin: 0;
padding: 18px;
border: 1px solid #d8e3ed;
border-radius: 15px;
background: #f7fafc;
}
.registration-child-companion > legend {
padding-inline: 6px;
color: var(--ink, #14283d);
font-size: 0.9rem;
font-weight: 850;
}
.registration-child-companion__toggle {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
cursor: pointer;
}
.registration-child-companion__toggle input {
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--brand, #00539b);
}
.registration-child-companion__toggle > span {
min-width: 0;
display: grid;
gap: 2px;
}
.registration-child-companion__toggle small {
color: var(--muted, #64758a);
line-height: 1.4;
}
/* Conditional child data is driven by input state; JS only updates validation/disabled state. */
.registration-child-companion__details {
display: none;
gap: 14px;
padding-top: 14px;
border-top: 1px solid var(--app-line, #d8e3ed);
}
.registration-child-companion:has([name="bringing_child"]:checked) .registration-child-companion__details:not([hidden]) {
display: grid;
}
.registration-child-companion__shirt { display: none; }
.registration-child-companion:has([name="child_participates"][value="1"]:checked) .registration-child-companion__shirt:not([hidden]) {
display: grid;
}
[data-kids-capacity-field]:not([hidden]) { margin-top: 12px; }
.admin-participants-table__child { width: 200px; }
.admin-race-summary {
margin: 14px 0;
display: grid;
grid-template-columns: minmax(150px, 0.55fr) repeat(2, minmax(240px, 1fr));
gap: 10px;
}
.admin-race-summary > div {
min-width: 0;
padding: 14px 16px;
display: grid;
gap: 7px;
border: 1px solid #dce6ef;
border-radius: 13px;
background: #f8fbfd;
}
.admin-race-summary span {
color: #68798e;
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.admin-race-summary strong {
color: #0b568c;
font-size: 1.55rem;
}
.admin-race-summary p {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.admin-race-summary b {
padding: 4px 8px;
border-radius: 999px;
background: #ffffff;
color: #38536d;
font-size: 0.75rem;
}
.admin-race-filters {
margin: 0 0 14px;
padding: 13px 14px;
display: grid;
grid-template-columns: repeat(2, minmax(150px, 220px)) auto;
align-items: end;
gap: 10px;
border: 1px solid #dce6ef;
border-radius: 13px;
background: #ffffff;
}
@media (max-width: 640px) {
body.page-account .account-ticket-card--journey {
padding: 14px;
}
body.page-account .account-checkin-next {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
padding: 15px;
}
body.page-account .account-checkin-next__button {
width: 100%;
min-width: 0;
}
body.page-account .account-checkin-next__done {
width: 44px;
height: 44px;
}
body.page-account .account-ticket-activity-group > summary {
grid-template-columns: minmax(0, 1fr) auto 30px;
padding-inline: 12px;
}
body.page-account .account-ticket-activity-group--credential > summary {
grid-template-columns: minmax(0, 1fr) 30px;
}
body.page-account .account-ticket-activity-group--credential > summary strong {
grid-column: 1;
grid-row: 2;
justify-self: start;
max-width: 100%;
margin-bottom: 9px;
}
body.page-account .account-ticket-activity-group--credential > summary::after {
grid-column: 2;
grid-row: 1 / span 2;
}
body.page-account .account-ticket-activity-group--credential .account-ticket-activity-group__body {
align-items: stretch;
flex-direction: column;
}
body.page-account .account-ticket-activity-group--credential .button,
body.page-account .account-ticket-card--journey .account-ticket-card__actions,
body.page-account .account-ticket-card--journey .account-ticket-card__actions .button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 1180px) {
.admin-event-single-page .admin-event-assistant__summary {
position: static;
max-height: none;
overflow: visible;
}
}
@media (max-width: 760px) {
.admin-event-single-page .admin-event-assistant__steps {
position: static;
max-height: none;
overflow: visible;
}
.admin-event-date-group > div,
.admin-race-option-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-event-team-summary {
align-items: stretch;
flex-direction: column;
}
.admin-event-team-summary .admin-ghost-button {
width: 100%;
justify-content: center;
}
.registration-choice-group > div,
.registration-contact-group > div,
.admin-race-summary,
.admin-race-filters {
grid-template-columns: minmax(0, 1fr);
}
.admin-race-filters .admin-primary-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.admin-event-date-group > div,
.admin-race-option-grid {
grid-template-columns: minmax(0, 1fr);
}
}