|
|
| Línea 1: |
Línea 1: |
|
| |
|
| |
| <html> | | <html> |
| <style>
| |
| :root{
| |
| --oroza-bg: #ffffff;
| |
| --oroza-panel: #ffffff;
| |
| --oroza-section: #fff8e1;
| |
| --oroza-row: #fbfcfe;
| |
| --oroza-row-hover: #f4f8fc;
| |
| --oroza-border: #e5ebf2;
| |
| --oroza-border-soft: #eef3f8;
| |
| --oroza-text: #223044;
| |
| --oroza-muted: #5e6b7a;
| |
| --oroza-gold: #e0b11f;
| |
| --oroza-gold-soft: rgba(224,177,31,.12);
| |
| --oroza-shadow: 0 10px 26px rgba(26, 39, 60, 0.08);
| |
| --oroza-shadow-soft: 0 4px 12px rgba(26, 39, 60, 0.05);
| |
| --oroza-radius: 18px;
| |
| }
| |
|
| |
| .oroza-sidebar-toggle{
| |
| width: 100%;
| |
| font-family: "Segoe UI", Tahoma, Arial, sans-serif;
| |
| color: var(--oroza-text);
| |
| }
| |
|
| |
| .toggle-checkbox{
| |
| display:none;
| |
| }
| |
|
| |
| .toggle-label{
| |
| display:none;
| |
| width:100%;
| |
| box-sizing:border-box;
| |
| padding:14px 16px;
| |
| margin-bottom:14px;
| |
| border:1px solid var(--oroza-border);
| |
| border-radius:14px;
| |
| background:#fff;
| |
| color:var(--oroza-text);
| |
| font-size:15px;
| |
| font-weight:700;
| |
| text-align:center;
| |
| cursor:pointer;
| |
| box-shadow: var(--oroza-shadow-soft);
| |
| transition:.22s ease;
| |
| }
| |
|
| |
| .toggle-label:hover{
| |
| border-color:#d8e2ec;
| |
| box-shadow:0 8px 20px rgba(26,39,60,.08);
| |
| }
| |
|
| |
| .oroza-sidebar{
| |
| background: var(--oroza-panel);
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: 22px;
| |
| padding: 16px;
| |
| box-shadow: var(--oroza-shadow);
| |
| }
| |
|
| |
| .menu-title{
| |
| display:flex;
| |
| align-items:center;
| |
| gap:10px;
| |
| margin: 18px 0 10px;
| |
| padding: 12px 14px;
| |
| background: linear-gradient(180deg, #fffaf0 0%, #fff5dc 100%);
| |
| border: 1px solid rgba(224,177,31,.30);
| |
| border-left: 4px solid var(--oroza-gold);
| |
| border-radius: 12px;
| |
| color: #2f3c4f;
| |
| font-size: 14px;
| |
| font-weight: 800;
| |
| letter-spacing: .2px;
| |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
| |
| }
| |
|
| |
| .menu-title:first-child{
| |
| margin-top:0;
| |
| }
| |
|
| |
| .oroza-sidebar ul{
| |
| list-style:none;
| |
| padding:0;
| |
| margin:0;
| |
| }
| |
|
| |
| .oroza-sidebar li{
| |
| margin:0;
| |
| padding:0;
| |
| }
| |
|
| |
| .oroza-sidebar li + li{
| |
| margin-top:6px;
| |
| }
| |
|
| |
| .oroza-sidebar li a{
| |
| display:flex;
| |
| align-items:center;
| |
| gap:10px;
| |
| width:100%;
| |
| box-sizing:border-box;
| |
| min-height:46px;
| |
| padding: 10px 12px;
| |
| background: var(--oroza-row);
| |
| border: 1px solid var(--oroza-border-soft);
| |
| border-radius: 12px;
| |
| color: var(--oroza-text);
| |
| text-decoration:none;
| |
| font-size:14px;
| |
| font-weight:600;
| |
| line-height:1.35;
| |
| box-shadow: var(--oroza-shadow-soft);
| |
| transition:
| |
| background .18s ease,
| |
| border-color .18s ease,
| |
| transform .18s ease,
| |
| box-shadow .18s ease,
| |
| color .18s ease;
| |
| }
| |
|
| |
| .oroza-sidebar li a:hover{
| |
| background: var(--oroza-row-hover);
| |
| border-color: #dce6ef;
| |
| color: #162234;
| |
| transform: translateX(3px);
| |
| box-shadow: 0 8px 18px rgba(26,39,60,.08);
| |
| }
| |
|
| |
| .oroza-sidebar li a:focus{
| |
| outline:none;
| |
| border-color: rgba(224,177,31,.55);
| |
| box-shadow: 0 0 0 4px rgba(224,177,31,.12);
| |
| }
| |
|
| |
| .menu-icon{
| |
| width: 22px;
| |
| min-width: 22px;
| |
| text-align:center;
| |
| font-size:16px;
| |
| line-height:1;
| |
| opacity:.95;
| |
| }
| |
|
| |
| .menu-text{
| |
| flex:1;
| |
| min-width:0;
| |
| }
| |
|
| |
| .menu-arrow{
| |
| color: var(--oroza-gold);
| |
| font-size: 14px;
| |
| font-weight: 900;
| |
| line-height:1;
| |
| opacity:.95;
| |
| }
| |
|
| |
| /* Compacta mejor la parte visual en desktop */
| |
| @media (min-width: 981px){
| |
| .oroza-sidebar{
| |
| max-width: 330px;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 980px){
| |
| .toggle-label{
| |
| display:block;
| |
| }
| |
|
| |
| .oroza-sidebar{
| |
| display:none;
| |
| padding:14px;
| |
| border-radius:18px;
| |
| }
| |
|
| |
| .toggle-checkbox:checked + .toggle-label + .oroza-sidebar{
| |
| display:block;
| |
| }
| |
|
| |
| .menu-title{
| |
| font-size:14px;
| |
| padding:11px 12px;
| |
| }
| |
|
| |
| .oroza-sidebar li a{
| |
| min-height:44px;
| |
| font-size:13.5px;
| |
| padding:10px 11px;
| |
| }
| |
|
| |
| .menu-icon{
| |
| width:20px;
| |
| min-width:20px;
| |
| font-size:15px;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
|
| <div class="oroza-sidebar-toggle"> | | <div class="oroza-sidebar-toggle"> |