/* ========================================================================= Daviana Piva — Estilos globales (sobre el tema de tema.css) ========================================================================= */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { color: var(--text); font-weight: 600; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: var(--accent); } .text-muted { color: var(--text-muted) !important; } hr { border-color: var(--border); opacity: 1; } /* ----- Scrollbars temáticos (claros, finos y sutiles) ----------------- */ * { scrollbar-width: thin; scrollbar-color: rgba(14,86,100,.28) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(14,86,100,.28); border-radius: 999px; border: 2px solid transparent; /* "padding" que adelgaza el thumb */ background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(14,86,100,.42); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ----- Layout: topbar + sidebar + contenido --------------------------- */ .layout { display: flex; min-height: 100vh; } /* Shell teal: re-mapeamos los tokens dentro del sidebar/topbar a la paleta profunda. Así todos los selectores hijos (que consumen --surface/--text/ --accent) heredan el shell sin reescribir cada regla. El --accent local fija el aqua del shell y le gana al [data-module] del , así el shell queda estable aunque el módulo recoloree el workspace. */ .sidebar, .topbar { --surface-1: var(--shell-bg); --surface-2: var(--shell-surface); --surface-3: rgba(255, 255, 255, .10); --surface-grad: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)); --border: var(--shell-border); --border-soft: rgba(255, 255, 255, .07); --text: var(--shell-text); --text-muted: #c4dde1; --text-faint: var(--shell-muted); --accent: var(--shell-accent); --accent-2: var(--shell-accent); --accent-soft: var(--shell-active-bg); --accent-line: rgba(127, 208, 207, .45); } .sidebar { width: var(--sidebar-w); background: linear-gradient(190deg, var(--shell-bg) 15%, var(--shell-bg-2)); border-right: 1px solid var(--shell-border); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 1030; transition: transform .25s ease; } /* Scrollbar del nav sobre teal: thumb claro translúcido (el global es oscuro) */ .sidebar__nav { scrollbar-color: rgba(255, 255, 255, .22) transparent; } .sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); background-clip: padding-box; } .sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); background-clip: padding-box; } .sidebar__brand { height: var(--topbar-h); display: flex; align-items: center; gap: .6rem; padding: 0 1.2rem; border-bottom: 1px solid var(--border); background-image: var(--surface-grad); } .sidebar__brand .brand-mark { flex: 0 0 auto; border-radius: 9px; box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .06); } .sidebar__brand .logo { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; letter-spacing: .3px; color: var(--shell-text); } .sidebar__brand .logo b { color: var(--shell-accent); font-weight: 700; } /* flex:1 + min-height:0 → el nav scrollea dentro del sidebar (sin min-height:0 el item flex crece con el contenido y no aparece el scroll en mobile). */ .sidebar__nav { padding: .7rem .55rem 1.4rem; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; } /* Encabezado de sección: agrupa visualmente, con divisor superior sutil */ .sidebar__section { text-transform: uppercase; font-size: .65rem; font-weight: 600; letter-spacing: .16em; color: var(--text-faint); padding: .55rem .85rem .4rem; margin: .7rem .35rem .15rem; border-top: 1px solid var(--border-soft); } .sidebar__nav > .nav-item-link:first-child + .sidebar__section, .sidebar__nav > .sidebar__section:first-child { border-top: 0; margin-top: .2rem; } .nav-item-link { position: relative; display: flex; align-items: center; gap: .65rem; padding: .6rem .85rem; margin: .14rem 0; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; font-size: .95rem; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* Barra de acento del item activo: pseudo-elemento (más prolijo que border-left) */ .nav-item-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; transform: translateY(-50%); border-radius: 0 3px 3px 0; background: var(--accent); transition: height var(--dur) var(--ease); } .nav-item-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; flex: 0 0 1.25rem; color: var(--text-faint); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .nav-item-link:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); } .nav-item-link:hover i { color: var(--accent); } .nav-item-link.active { background: var(--accent-soft); color: var(--text); font-weight: 600; } .nav-item-link.active::before { height: 60%; } .nav-item-link.active i { color: var(--accent); } /* ----- Grupos colapsables del sidebar -------------------------------- */ .nav-group { display: flex; flex-direction: column; } .nav-group__toggle { /* reusa .nav-item-link, resetea el