40 lines
2.8 KiB
CSS
40 lines
2.8 KiB
CSS
|
.app{display:flex;min-height:100vh;}
|
||
|
|
/* SIDEBAR */
|
||
|
|
.side{width:230px;background:var(--ancla);color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
|
||
|
|
.side-logo{padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,.12);}
|
||
|
|
.side-logo img{height:30px;width:auto;display:block;}
|
||
|
|
.side-logo .sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--palido);margin-top:8px;opacity:.85;}
|
||
|
|
.nav{padding:10px 0;overflow-y:auto;flex:1;}
|
||
|
|
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13.5px;color:#cfe0ef;cursor:pointer;border-left:3px solid transparent;user-select:none;}
|
||
|
|
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
|
||
|
|
.nav-item.active{background:rgba(30,113,184,.28);border-left-color:var(--marca);color:#fff;font-weight:700;}
|
||
|
|
.nav-item.soon{color:#6f8399;cursor:not-allowed;}
|
||
|
|
.nav-item.soon:hover{background:none;}
|
||
|
|
.nav-item .ico{width:16px;text-align:center;font-size:14px;}
|
||
|
|
.nav-item .tag{margin-left:auto;font-size:8.5px;letter-spacing:.05em;background:rgba(255,255,255,.12);color:#9db4c9;padding:2px 6px;border-radius:8px;text-transform:uppercase;}
|
||
|
|
.side-foot{padding:12px 20px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:10px;color:#7f95aa;}
|
||
|
|
/* MAIN */
|
||
|
|
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
|
||
|
|
.topbar{background:var(--panel);border-bottom:1px solid var(--linea);padding:14px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:sticky;top:0;z-index:10;}
|
||
|
|
.topbar h1{font-size:19px;font-weight:700;margin:0;color:var(--ancla);flex:1;min-width:180px;}
|
||
|
|
.content{padding:26px 28px 80px;max-width:1180px;}
|
||
|
|
.page{display:none;}
|
||
|
|
.page.active{display:block;}
|
||
|
|
.hamburger{display:none;background:none;border:1px solid var(--linea);border-radius:6px;padding:6px 10px;font-size:18px;cursor:pointer;color:var(--ancla);line-height:1;}
|
||
|
|
.backdrop{display:none;position:fixed;inset:0;background:rgba(1,32,91,.35);z-index:19;}
|
||
|
|
@media(max-width:820px){
|
||
|
|
.side{position:fixed;top:0;left:0;z-index:20;transform:translateX(-100%);transition:transform .2s ease;}
|
||
|
|
.side.open{transform:translateX(0);}
|
||
|
|
.backdrop.open{display:block;}
|
||
|
|
.hamburger{display:inline-block;}
|
||
|
|
.grid2,.grid3{grid-template-columns:1fr;}
|
||
|
|
.content{padding:20px 16px 80px;}
|
||
|
|
}
|
||
|
|
@media (prefers-reduced-motion: reduce){.side{transition:none;}}
|
||
|
|
@media print{
|
||
|
|
body.rep-print .side,body.rep-print .topbar,body.rep-print .backdrop,body.rep-print .content,body.rep-print #mapModalBd,body.rep-print #mapModal{display:none !important;}
|
||
|
|
body.rep-print #repModalBd{display:none !important;}
|
||
|
|
body.rep-print #repModal{position:static !important;inset:auto !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;max-height:none !important;overflow:visible !important;}
|
||
|
|
body.rep-print .rep-actions{display:none !important;}
|
||
|
|
}
|