/* Paginа: portal/aluno/sessions.html — CSS extraido automaticamente */
/* =====================================================
AYA APP — CORE
====================================================== */
:root {
--bg-main:#F5F2E9;
--bg-secondary:#181818;
--glass: rgba(255,255,255,.045);
--glass-strong: rgba(255,255,255,.065);
--gold:#16804A;
--gold-soft:rgba(22,128,74,.10);
--green:#16804A;
--green-soft:rgba(22,128,74,.10);
--red:#C93632;
--red-soft:rgba(201,54,50,.10);
--text:#111111;
--text-soft:#3b3b3b;
--text-muted:#6f6a5f;
--border:rgba(17,17,17,.10);
--radius: 18px;
--radius-small: 13px;
--nav-height: 72px;
--shadow:
0 18px 50px rgba(0,0,0,.28);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(
circle at 15% 0%,
rgba(34,139,34,.055),
transparent 30%
),
radial-gradient(
circle at 90% 15%,
rgba(255,215,0,.035),
transparent 28%
),
var(--bg-main);
color: var(--text);
font-family:
"Montserrat",
sans-serif;
overflow-x: hidden;
-webkit-tap-highlight-color:
transparent;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(
rgba(11,11,15,.93),
rgba(11,11,15,.975)
),
url("/imagens/logoaya2.png");
background-repeat: no-repeat;
background-position: center;
background-size:
min(500px,80vw);
opacity: .10;
z-index: -1;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select {
font-family: inherit;
}
/* =====================================================
CONTENT
====================================================== */
.app-content {
width: 100%;
max-width: 1180px;
margin: auto;
padding:
22px
16px
105px;
}
/* =====================================================
PAGE INTRO
====================================================== */
.page-intro {
margin-bottom: 21px;
}
.eyebrow {
color: var(--gold);
font-size: .54rem;
text-transform: uppercase;
letter-spacing: .15em;
font-weight: 600;
}
.page-title {
margin:
6px 0 0;
font-size:
clamp(1.35rem,6vw,2rem);
font-weight: 600;
letter-spacing: -.035em;
}
.page-description {
max-width: 620px;
margin:
7px 0 0;
color: var(--text-soft);
font-size: .66rem;
line-height: 1.65;
}
/* =====================================================
LOCATION SELECTOR
====================================================== */
.location-selector {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: 19px;
padding-bottom: 2px;
}
.location-selector::-webkit-scrollbar {
display: none;
}
.location-chip {
flex-shrink: 0;
padding:
9px
13px;
border-radius: 100px;
border:
1px solid var(--border);
background:
rgba(255,255,255,.032);
color: var(--text-muted);
font-size: .56rem;
cursor: pointer;
transition: .2s ease;
}
.location-chip.active {
color: var(--gold);
background:
var(--gold-soft);
border-color:
rgba(255,215,0,.20);
}
/* =====================================================
FILTER BAR
====================================================== */
.filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
}
.filter-group {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.filter-group::-webkit-scrollbar {
display: none;
}
.filter-button {
flex-shrink: 0;
border: 0;
padding:
8px
11px;
border-radius: 9px;
background:
rgba(255,255,255,.03);
color: var(--text-muted);
font-size: .53rem;
cursor: pointer;
}
.filter-button.active {
background:
rgba(34,139,34,.13);
color:
#70bc70;
}
.filter-date {
flex-shrink: 0;
width: 37px;
height: 37px;
border-radius: 10px;
border:
1px solid var(--border);
background:
rgba(255,255,255,.035);
color: var(--text-soft);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* =====================================================
SESSION LIST
====================================================== */
.session-section {
margin-top: 25px;
}
.section-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.section-heading h2 {
margin: 0;
font-size: .65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
}
.section-heading span {
color: var(--text-muted);
font-size: .53rem;
}
/* =====================================================
SESSION CARD
====================================================== */
.session-card {
position: relative;
overflow: hidden;
padding: 17px;
margin-bottom: 9px;
border:
1px solid var(--border);
border-radius:
var(--radius-small);
background:
linear-gradient(
145deg,
rgba(255,255,255,.052),
rgba(255,255,255,.025)
);
box-shadow:
0 12px 35px rgba(0,0,0,.17);
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease;
}
.session-card:hover {
border-color:
rgba(255,215,0,.12);
background:
rgba(255,255,255,.055);
}
.session-card:active {
transform:
scale(.985);
}
.session-card.today {
border-color:
rgba(255,215,0,.15);
}
.session-card.today::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background:
linear-gradient(
var(--green),
var(--gold)
);
}
.session-main {
display: flex;
align-items: flex-start;
gap: 13px;
}
.session-date {
width: 52px;
min-width: 52px;
text-align: center;
padding:
8px 4px;
border-radius: 11px;
background:
rgba(255,255,255,.035);
border:
1px solid rgba(255,255,255,.055);
}
.session-date-day {
font-size: 1rem;
line-height: 1;
font-weight: 600;
}
.session-date-month {
margin-top: 4px;
color: var(--text-muted);
font-size: .46rem;
text-transform: uppercase;
}
.session-info {
flex: 1;
min-width: 0;
}
.session-status {
display: inline-flex;
align-items: center;
gap: 4px;
color: #6eb96e;
font-size: .47rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.session-status.today {
color: var(--gold);
}
.session-title {
margin-top: 5px;
font-size: .79rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.session-meta {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 7px;
color: var(--text-muted);
font-size: .51rem;
}
.session-meta i {
color: var(--green);
margin-right: 2px;
}
.session-arrow {
color: var(--text-muted);
font-size: .75rem;
margin-top: 9px;
}
.session-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin:
13px 0 0 65px;
padding-top: 11px;
border-top:
1px solid rgba(255,255,255,.045);
}
.session-level {
color: var(--text-muted);
font-size: .49rem;
}
.session-capacity {
display: flex;
align-items: center;
gap: 5px;
color: var(--text-muted);
font-size: .49rem;
}
.capacity-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background:
var(--green);
}
.capacity-dot.warning {
background:
var(--gold);
}
.capacity-dot.full {
background:
var(--red);
}
/* =====================================================
EMPTY STATE
====================================================== */
.empty-state {
padding:
45px 20px;
text-align: center;
border:
1px solid var(--border);
border-radius:
var(--radius);
background:
rgba(255,255,255,.025);
}
.empty-icon {
width: 52px;
height: 52px;
margin:
0 auto 13px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(255,215,0,.07);
color: var(--gold);
font-size: 1.2rem;
}
.empty-title {
font-size: .75rem;
font-weight: 600;
}
.empty-description {
max-width: 350px;
margin:
6px auto 0;
color: var(--text-muted);
font-size: .56rem;
line-height: 1.6;
}
/* =====================================================
LOADING
====================================================== */
.loading-state {
display: none;
padding:
30px 0;
}
.skeleton {
height: 100px;
margin-bottom: 9px;
border-radius:
var(--radius-small);
background:
linear-gradient(
90deg,
rgba(255,255,255,.025),
rgba(255,255,255,.06),
rgba(255,255,255,.025)
);
background-size:
200% 100%;
animation:
skeleton 1.4s infinite;
}
@keyframes skeleton {
0% {
background-position:
200% 0;
}
100% {
background-position:
-200% 0;
}
}
/* =====================================================
MODAL
====================================================== */
.modal-content {
border:
1px solid var(--border);
border-radius:
20px;
background:
#111116;
color: var(--text);
box-shadow:
0 25px 80px rgba(0,0,0,.6);
}
.modal-header {
border-bottom:
1px solid rgba(255,255,255,.05);
}
.modal-footer {
border-top:
1px solid rgba(255,255,255,.05);
}
.btn-close {
filter:
invert(1);
opacity: .6;
}
.detail-row {
display: flex;
gap: 11px;
padding:
12px 0;
border-bottom:
1px solid rgba(255,255,255,.045);
}
.detail-row:last-child {
border-bottom: 0;
}
.detail-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(34,139,34,.10);
color:
#68b668;
}
.detail-label {
color: var(--text-muted);
font-size: .49rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.detail-value {
margin-top: 3px;
font-size: .62rem;
color: var(--text-soft);
}
.btn-aya {
border: 0;
border-radius: 10px;
padding:
10px 15px;
background:
linear-gradient(
90deg,
var(--green),
#2d9a2d
);
color: white;
font-size: .58rem;
font-weight: 600;
}
.btn-aya:hover {
color: white;
opacity: .9;
}
/* =====================================================
BOTTOM NAV
====================================================== */
.bottom-navigation {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height:
var(--nav-height);
z-index: 1000;
padding:
6px
max(10px,env(safe-area-inset-right))
max(6px,env(safe-area-inset-bottom))
max(10px,env(safe-area-inset-left));
background:
rgba(11,11,15,.95);
backdrop-filter:
blur(22px);
-webkit-backdrop-filter:
blur(22px);
border-top:
1px solid rgba(255,255,255,.06);
}
.bottom-navigation-inner {
width: 100%;
max-width: 520px;
height: 100%;
margin: auto;
display:
grid;
grid-template-columns:
repeat(5,1fr);
}
.nav-item {
position: relative;
border: 0;
background: transparent;
color: var(--text-muted);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
font-size: .49rem;
cursor: pointer;
}
.nav-item i {
font-size:
1.03rem;
transition: .2s ease;
}
.nav-item.active {
color: var(--gold);
}
.nav-item.active::before {
content: "";
position: absolute;
top: 0;
width: 20px;
height: 2px;
border-radius: 10px;
background:
var(--gold);
}
.nav-center {
color: white;
}
.nav-center-icon {
width: 44px;
height: 44px;
margin-top:
-18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
145deg,
#25252b,
#111116
);
border:
1px solid rgba(255,215,0,.23);
color: var(--gold);
box-shadow:
0 8px 25px rgba(0,0,0,.4);
}
/* =====================================================
DESKTOP
====================================================== */
@media (min-width: 768px) {
.app-content {
padding:
30px 40px 50px;
}
.bottom-navigation {
display: none;
}
}
@media (max-width: 370px) {
.session-date {
width: 47px;
min-width: 47px;
}
.session-footer {
margin-left: 60px;
}
}
/* =====================================================
SIDEBAR DO PORTAL (padrão do site, 270px)
====================================================== */
:root {
--sidebar-width:270px;
}
.sidebar {
position:fixed;
top:0;
left:0;
width:var(--sidebar-width);
height:100vh;
background:var(--bg-secondary,#111116);
border-right:1px solid var(--border);
z-index:1050;
display:flex;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
}
.sidebar-brand {
display:flex;
align-items:center;
gap:11px;
padding:20px 18px 18px;
border-bottom:1px solid var(--border);
text-decoration:none;
}
.sidebar-brand img {
width:38px;
height:38px;
object-fit:contain;
}
.sidebar-brand h5 {
margin:0;
color:var(--gold);
font-weight:800;
font-size:15px;
line-height:1.1;
}
.sidebar-brand small {
display:block;
color:var(--text-muted);
font-size:9px;
letter-spacing:.8px;
margin-top:2px;
}
.sidebar-menu {
flex:1;
padding:14px 12px;
display:flex;
flex-direction:column;
gap:2px;
}
.sidebar-section {
padding:14px 10px 5px;
color:var(--text-muted);
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.4px;
}
.sidebar-menu a {
display:flex;
align-items:center;
gap:11px;
padding:9px 10px;
border-radius:9px;
color:var(--text-soft);
font-size:12px;
font-weight:600;
text-decoration:none;
transition:.15s ease;
}
.sidebar-menu a i {
width:20px;
text-align:center;
font-size:16px;
flex-shrink:0;
}
.sidebar-menu a:hover {
color:var(--text);
background:rgba(255,255,255,.055);
}
.sidebar-menu a.active {
color:var(--gold);
background:rgba(255,215,0,.10);
}
.sidebar-menu a[data-exige] {
display:none;
}
.sidebar-menu a[data-exige].liberado {
display:flex;
}
.sidebar-footer {
padding:14px 18px;
border-top:1px solid var(--border);
color:var(--text-muted);
font-size:9px;
text-align:center;
}
.main-content {
margin-left:var(--sidebar-width);
min-height:100vh;
}
.topbar {
position:sticky;
top:0;
z-index:900;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:12px 22px;
background:rgba(17,17,22,.85);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}
.topbar .page-title {
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.topbar .page-title h4 {
margin:0;
font-size:15px;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.topbar .page-title small {
display:block;
color:var(--text-muted);
font-size:10px;
margin-top:1px;
}
#menuButton {
display:none;
width:38px;
height:38px;
border-radius:10px;
border:1px solid var(--border);
background:var(--bg-card,rgba(255,255,255,.045));
color:var(--text-soft);
align-items:center;
justify-content:center;
font-size:18px;
cursor:pointer;
flex-shrink:0;
}
.admin-profile {
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.admin-avatar {
width:38px;
height:38px;
border-radius:50%;
background:linear-gradient(135deg,var(--gold),var(--green));
display:flex;
align-items:center;
justify-content:center;
color:#111;
font-weight:800;
font-size:13px;
overflow:hidden;
flex-shrink:0;
}
.admin-avatar img {
width:100%;
height:100%;
object-fit:cover;
}
.admin-profile-info {
min-width:0;
}
.admin-profile-info strong {
display:block;
font-size:11px;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.admin-profile-info span {
display:block;
color:var(--text-muted);
font-size:9px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.btn-outline-aya {
border:1px solid rgba(255,215,0,.4);
color:var(--gold);
background:transparent;
border-radius:9px;
font-size:11px;
font-weight:600;
padding:6px 12px;
text-decoration:none;
transition:.15s ease;
white-space:nowrap;
}
.btn-outline-aya:hover {
background:rgba(255,215,0,.10);
color:var(--gold);
}
.sidebar-overlay {
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
z-index:1040;
}
@media(max-width:991px) {
.sidebar {
transform:translateX(-100%);
transition:transform .25s ease;
}
.sidebar.show {
transform:translateX(0);
}
.main-content {
margin-left:0;
}
.sidebar-overlay.show {
display:block;
}
#menuButton {
display:flex;
}
}
/* hide old bottom-nav on desktop (sidebar replaces it) */
@media(min-width:992px) {
.bottom-navigation {
display:none !important;
}
}
/* ===== IEPLUS_LIGHT_OVERRIDES : IÊ+ tema claro (estrutura/navegação preta com texto claro) ===== */
.topbar,.sidebar,.sidebar-header,.bottom-navigation,.bottom-nav,.side-nav,.nav-drawer,.app-nav{background:#111111 !important;}
.topbar,.topbar *,.sidebar *,.bottom-navigation *,.bottom-navigation a,.bottom-navigation i,.bottom-navigation span{color:rgba(255,255,255,.85) !important;}
.sidebar a.active,.sidebar .active,.bottom-navigation .active{color:#8FE6B4 !important;}
.sidebar a.active,.bottom-navigation .active{background:rgba(22,128,74,.30) !important;}