/* Paginа: portal/aluno/locations.html — CSS extraido automaticamente */
:root {
--bg-main:#F5F2E9;
--bg-secondary:#181818;
--bg-card: rgba(255,255,255,.045);
--bg-card-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;
--sidebar-width: 270px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(
circle at 80% 0%,
rgba(255,215,0,.045),
transparent 30%
),
radial-gradient(
circle at 0% 50%,
rgba(34,139,34,.035),
transparent 30%
),
var(--bg-main);
color: var(--text);
font-family: "Montserrat", sans-serif;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(
rgba(11,11,15,.94),
rgba(11,11,15,.98)
),
url("/portal/logo/logo.png");
background-position: center;
background-repeat: no-repeat;
background-size: 430px;
opacity: .07;
pointer-events: none;
z-index: -1;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
a {
color: inherit;
text-decoration: none;
}
/* =====================================================
SIDEBAR
===================================================== */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--bg-secondary);
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-divider {
height: 1px;
margin: 10px 8px;
background: var(--border);
}
.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
===================================================== */
.main-content {
min-height: 100vh;
margin-left: var(--sidebar-width);
}
/* =====================================================
TOPBAR
===================================================== */
.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);
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);
}
/* =====================================================
OVERLAY
===================================================== */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background:
rgba(0,0,0,.7);
z-index: 1040;
}
/* =====================================================
PAGE
===================================================== */
.app-main {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding:
32px
28px
50px;
}
.page-intro {
margin-bottom: 22px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 7px;
color: var(--gold);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 7px;
}
.page-intro h1 {
margin: 0;
font-size: 29px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -.5px;
}
.page-intro p {
margin: 8px 0 0;
color: var(--text-soft);
font-size: 12px;
line-height: 1.65;
max-width: 650px;
}
/* =====================================================
FILTERS
===================================================== */
.location-filters {
display: flex;
gap: 8px;
overflow-x: auto;
padding:
2px 0 8px;
margin-bottom: 22px;
scrollbar-width: none;
}
.location-filters::-webkit-scrollbar {
display: none;
}
.location-filter {
flex: 0 0 auto;
border:
1px solid var(--border);
background:
rgba(255,255,255,.035);
color:
var(--text-soft);
padding:
9px 14px;
border-radius: 30px;
font-family: inherit;
font-size: 10px;
font-weight: 600;
transition: .2s;
cursor: pointer;
}
.location-filter:hover {
border-color:
rgba(255,215,0,.22);
color:
var(--text);
}
.location-filter.active {
background:
var(--gold);
border-color:
var(--gold);
color: #111;
}
/* =====================================================
SECTION
===================================================== */
.section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin:
24px 0 11px;
}
.section-heading h2 {
margin: 0;
font-size: 14px;
font-weight: 700;
}
.section-heading span {
color: var(--text-muted);
font-size: 10px;
}
.locations-list {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 13px;
}
/* =====================================================
LOCATION CARD
===================================================== */
.location-card {
position: relative;
overflow: hidden;
border:
1px solid var(--border);
border-radius:
var(--radius);
background:
linear-gradient(
145deg,
rgba(255,255,255,.058),
rgba(255,255,255,.025)
);
transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;
}
.location-card:hover {
transform:
translateY(-2px);
border-color:
rgba(255,215,0,.18);
background:
rgba(255,255,255,.06);
}
/* =====================================================
IMAGE
===================================================== */
.location-image {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
background:
linear-gradient(
135deg,
#17171d,
#0f0f13
);
cursor: pointer;
}
.location-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .78;
transition:
transform .35s ease;
}
.location-card:hover
.location-image img {
transform:
scale(1.035);
}
.location-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
transparent 35%,
rgba(11,11,15,.85)
);
pointer-events: none;
}
.location-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color:
rgba(255,215,0,.45);
font-size: 42px;
}
.location-badge {
position: absolute;
left: 13px;
top: 13px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
padding:
6px 9px;
border-radius: 9px;
background:
rgba(11,11,15,.76);
border:
1px solid
rgba(255,255,255,.08);
backdrop-filter:
blur(10px);
color:
var(--gold);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
}
/* =====================================================
CONTENT
===================================================== */
.location-content {
padding: 15px;
}
.location-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.location-content h3 {
margin: 0;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
}
.location-map-button {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(255,215,0,.16);
background:
rgba(255,215,0,.07);
color:
var(--gold);
transition: .2s;
cursor: pointer;
}
.location-map-button:hover {
background:
rgba(255,215,0,.14);
}
.location-address {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 9px;
color:
var(--text-soft);
font-size: 10px;
line-height: 1.5;
}
.location-address i {
color:
var(--gold);
font-size: 12px;
margin-top: 1px;
flex-shrink: 0;
}
.location-description {
margin:
10px 0 0;
color:
var(--text-muted);
font-size: 9px;
line-height: 1.55;
}
/* =====================================================
INFO
===================================================== */
.location-info {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 13px;
}
.info-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding:
6px 8px;
border-radius: 8px;
background:
rgba(255,255,255,.035);
color:
var(--text-muted);
font-size: 8px;
}
.info-chip i {
color:
var(--text-soft);
font-size: 10px;
}
/* =====================================================
FOOTER
===================================================== */
.location-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding:
11px 15px;
border-top:
1px solid var(--border);
}
.training-summary {
color:
var(--text-muted);
font-size: 9px;
line-height: 1.5;
}
.details-button {
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: transparent;
color:
var(--gold);
font-family: inherit;
font-size: 9px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
/* =====================================================
EMPTY STATE
===================================================== */
.empty-state {
display: none;
text-align: center;
padding:
55px 20px;
border:
1px dashed var(--border);
border-radius:
var(--radius);
background:
rgba(255,255,255,.018);
}
.empty-state.show {
display: block;
}
.empty-icon {
width: 62px;
height: 62px;
margin:
0 auto 15px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(255,215,0,.07);
color:
var(--gold);
font-size: 27px;
}
.empty-state h3 {
margin:
0 0 7px;
font-size: 14px;
}
.empty-state p {
margin: 0;
color:
var(--text-muted);
font-size: 10px;
line-height: 1.6;
}
/* =====================================================
LOADING
===================================================== */
.loading-state {
display: none;
}
.loading-state.show {
display: block;
}
.skeleton {
height: 330px;
margin-bottom: 12px;
border-radius:
var(--radius);
background:
linear-gradient(
90deg,
rgba(255,255,255,.035) 25%,
rgba(255,255,255,.07) 50%,
rgba(255,255,255,.035) 75%
);
background-size:
200% 100%;
animation:
skeletonLoading 1.4s infinite;
}
@keyframes skeletonLoading {
0% {
background-position:
200% 0;
}
100% {
background-position:
-200% 0;
}
}
/* =====================================================
MODAL
===================================================== */
.modal-content {
background:
#111116;
border:
1px solid var(--border);
border-radius:
22px;
color:
var(--text);
overflow:
hidden;
}
.modal-header {
border-bottom:
1px solid var(--border);
padding:
17px 18px;
}
.modal-title {
font-size: 15px;
font-weight: 700;
}
.btn-close {
filter:
invert(1);
opacity:
.65;
}
.modal-body {
padding:
18px;
}
.modal-location-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius:
15px;
margin-bottom:
17px;
background:
#17171d;
}
.modal-location-placeholder {
width: 100%;
height: 180px;
border-radius:
15px;
margin-bottom:
17px;
background:
#17171d;
display: flex;
align-items: center;
justify-content: center;
color:
rgba(255,215,0,.45);
font-size: 42px;
}
.modal-address {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 13px;
border-radius:
14px;
background:
rgba(255,215,0,.055);
border:
1px solid
rgba(255,215,0,.10);
}
.modal-address-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius:
10px;
background:
var(--gold-soft);
color:
var(--gold);
}
.modal-address strong {
display: block;
font-size: 10px;
}
.modal-address span {
display: block;
margin-top: 3px;
color:
var(--text-muted);
font-size: 9px;
line-height: 1.45;
}
.modal-detail-list {
display: flex;
flex-direction: column;
gap: 11px;
margin-top:
17px;
}
.modal-detail {
display: flex;
align-items: center;
gap: 10px;
}
.modal-detail-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius:
10px;
background:
rgba(255,255,255,.045);
color:
var(--gold);
}
.modal-detail-text strong {
display: block;
font-size: 10px;
}
.modal-detail-text span {
display: block;
margin-top: 2px;
color:
var(--text-muted);
font-size: 9px;
}
.modal-notes {
margin-top:
18px;
padding-top:
16px;
border-top:
1px solid var(--border);
}
.modal-notes h4 {
margin:
0 0 7px;
font-size: 11px;
}
.modal-notes p {
margin: 0;
color:
var(--text-soft);
font-size: 10px;
line-height: 1.65;
}
.modal-footer {
display: flex;
gap: 8px;
border-top:
1px solid var(--border);
padding:
13px 18px;
}
.modal-action {
flex: 1;
border:
1px solid var(--border);
background:
rgba(255,255,255,.04);
color:
var(--text-soft);
border-radius:
11px;
padding:
10px 8px;
font-family: inherit;
font-size: 9px;
font-weight: 600;
transition:
.2s;
cursor: pointer;
}
.modal-action:hover {
background:
rgba(255,255,255,.08);
color:
var(--text);
}
.modal-action.primary {
background:
rgba(255,215,0,.09);
border-color:
rgba(255,215,0,.2);
color:
var(--gold);
}
/* =====================================================
MOBILE
===================================================== */
@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;
}
.topbar {
padding:
11px 14px;
}
.admin-profile-info {
display: none;
}
.btn-outline-aya {
display: none;
}
.app-main {
padding:
25px 18px 40px;
}
}
@media (max-width: 767px) {
.locations-list {
grid-template-columns:
1fr;
}
.page-intro h1 {
font-size: 25px;
}
}
@media (max-width: 380px) {
.app-main {
padding-left:
13px;
padding-right:
13px;
}
.location-image {
height:
150px;
}
}
/* ===== 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;}