DataScope26/WEB

1.sidebar {2    --sidebar-bg: var(--surface);3    --sidebar-border: var(--color-border);4    --sidebar-text: var(--muted);5    --sidebar-accent: var(--green);6    --sidebar-collapsed-w: 4.75rem;7    --sidebar-expanded-w: 15rem;8 9    position: sticky;10    top: var(--header-h);11    left: 0;12 13    /* CRÍTICO: Evita que el sidebar herede el alto completo del padre flex */14    align-self: flex-start;15 16    /* El cálculo que comprime la barra al detectar el footer */17    height: calc(100vh - var(--header-h) - var(--footer-offset, 0));18 19    width: var(--sidebar-collapsed-w);20    background-color: var(--sidebar-bg);21    border-right: 0.0625rem solid var(--sidebar-border);22    display: flex;23    flex-direction: column;24    justify-content: space-between;25 26    overflow-y: auto;27    overflow-x: hidden;28    flex-shrink: 0;29    transition: width 0.25s ease;30    z-index: 20;31    box-sizing: border-box;32}33.sidebar--expanded {34    width: var(--sidebar-expanded-w);35}36 37.sidebar-nav {38    padding-top: 1.5rem;39}40 41/* Company row + dropdown */42.sidebar-company {43    display: flex;44    flex-direction: column;45    gap: 0.375rem;46    padding: 0.375rem 0 0 0;47}48 49.sidebar-company-btn {50    padding: 0.625rem 1.125rem;51}52 53.sidebar-company-btn[disabled] {54    cursor: default;55    opacity: 1;56}57.sidebar-company-btn[disabled]:hover {58    background: transparent;59}60 61.company-avatar {62    display: inline-flex;63    align-items: center;64    justify-content: center;65    width: 2.25rem;66    height: 2.25rem;67    flex-shrink: 0;68    overflow: hidden;69}70 71.company-avatar--small {72    width: 2.25rem;73    height: 2.25rem;74}75 76.company-avatar__placeholder,77.company-avatar .company-logo-img {78    width: 100%;79    height: 100%;80    display: inline-flex;81    align-items: center;82    justify-content: center;83    object-fit: cover;84    border-radius: 0.5rem;85}86 87.company-avatar__placeholder {88    background: var(--color-border-soft);89    color: var(--color-text);90    font-weight: 700;91    line-height: 1;92    font-size: 1.1rem;93}94 95.sidebar-company-icon .company-logo-img {96    width: 1.75rem;97    height: 1.75rem;98    border-radius: 0.375rem;99    object-fit: cover;100}101.sidebar-company-item-icon {102    width: 2.25rem;103    height: 2.25rem;104    display: flex;105    align-items: center;106    justify-content: center;107    flex-shrink: 0;108}109 110.sidebar-company-icon .company-avatar .company-logo-img,111.sidebar-company-item-icon .company-avatar .company-logo-img,112.sidebar-company-icon .company-avatar__placeholder,113.sidebar-company-item-icon .company-avatar__placeholder {114    width: 100%;115    height: 100%;116    border-radius: 0.5rem;117}118 119.company-logo-placeholder {120    display: inline-flex;121    align-items: center;122    justify-content: center;123    width: 1.75rem;124    height: 1.75rem;125    border-radius: 0.375rem;126    background: var(--color-border-soft);127    color: var(--color-text);128    font-weight: 700;129}130 131.sidebar-company-list {132    display: flex;133    flex-direction: column;134    gap: 0.375rem;135    padding: 0.5rem 0.75rem 0.75rem 2.75rem; /* indent items under the company row */136    max-height: 13.75rem; /* allow up to ~5 items then scroll */137    overflow-y: auto;138    overflow-x: hidden; /* prevent horizontal scroll */139}140/* Inline variant (inside sidebar) */141.sidebar-company-list--inline {142    background: transparent;143    border: none;144    padding-top: 0.375rem;145}146 147/* Reuse styling from company cards so placeholders match CompanySettings */148.company-card__logo-placeholder {149    display: inline-flex;150    align-items: center;151    justify-content: center;152    width: 1.75rem;153    height: 1.75rem;154    border-radius: 0.375rem;155    background: var(--color-border-soft);156    color: var(--color-text);157    font-weight: 700;158}159 160/* Make the company-row placeholder match a normal (larger) logo */161.sidebar-company .company-card__logo-placeholder {162    width: 2.25rem;163    height: 2.25rem;164    border-radius: 0.5rem;165}166 167.sidebar-company-item {168    display: flex;169    align-items: center;170    gap: 0.625rem;171    padding: 0.5rem 1.625rem; /* align with sidebar link padding */172    background: transparent;173    border: none;174    color: var(--sidebar-text);175    text-align: left;176    width: calc(100% + 1.625rem); /* extend background to the left edge */177    margin-left: -1.625rem;178    min-width: 0; /* allow children to shrink for ellipsis */179    cursor: pointer;180    border-radius: 0.375rem;181    box-sizing: border-box;182}183 184.sidebar-company-item:hover {185    background: var(--color-border-soft);186    color: var(--color-text);187}188 189/* Current company - not interactive */190.sidebar-company-item--current {191    cursor: default;192    pointer-events: none;193}194.sidebar-company-item--current:hover {195    background: none;196}197 198.sidebar-company-item-label {199    font-weight: 600;200    font-size: 0.8125rem;201    display: block;202    overflow: hidden;203    text-overflow: ellipsis;204    white-space: nowrap;205    flex: 1 1 auto;206    min-width: 0;207}208 209.sidebar-company-empty {210    color: var(--muted);211    font-size: 0.8125rem;212    padding: 0.375rem 0.625rem;213}214 215/* Selected/current company styling: green text with underline (no bg) */216.sidebar-company-item--selected {217    background: transparent;218    color: var(--sidebar-accent);219}220.sidebar-company-item--selected .sidebar-company-item-label {221    color: var(--sidebar-accent);222    text-decoration: none;223    border-bottom: 0.125rem solid var(--sidebar-accent);224    padding-bottom: 0.125rem;225    display: inline-block;226}227 228/* Improved thin scrollbar for the company list */229.sidebar-company-list::-webkit-scrollbar {230    width: 0.5rem;231}232.sidebar-company-list::-webkit-scrollbar-track {233    background: transparent;234}235.sidebar-company-list::-webkit-scrollbar-thumb {236    background: rgba(16,24,40,0.06);237    border-radius: 62.4375rem;238}239.sidebar-company-list {240    scrollbar-width: thin;241    scrollbar-color: rgba(16,24,40,0.06) transparent;242}243 244.sidebar-list {245    list-style: none;246    margin: 0;247    padding: 0;248    display: flex;249    flex-direction: column;250    gap: 0.25rem;251}252 253.sidebar-item {254    width: 100%;255}256 257.sidebar-link {258    display: flex;259    align-items: center;260    gap: 0.875rem;261    height: 2.75rem;262    width: 100%;263    padding: 0 1.625rem;264    background: transparent;265    border: none;266    color: var(--sidebar-text);267    text-decoration: none;268    font-size: 0.8125rem;269    font-weight: 600;270    font-family: inherit;271    letter-spacing: 0.02em;272    white-space: nowrap;273    cursor: pointer;274    border-left: 0.1875rem solid transparent;275    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;276    border-radius: 0%;277}278 279.sidebar-link:hover {280    color: var(--color-text);281    background-color: var(--color-border-soft);282    transform: translateY(0px);283}284 285.sidebar-link--active {286    color: var(--sidebar-accent);287    background-color: var(--green-20);288    border-left-color: var(--sidebar-accent);289}290 291.sidebar-icon {292    display: flex;293    align-items: center;294    justify-content: center;295    flex-shrink: 0;296    width: 1.25rem;297}298 299.sidebar-label {300    opacity: 0;301    transform: translateX(-0.375rem);302    transition: opacity 0.2s ease, transform 0.2s ease;303    text-transform: uppercase;304}305 306.sidebar--expanded .sidebar-label {307    opacity: 1;308    transform: translateX(0);309}310 311.sidebar-footer {312    display: flex;313    flex-direction: column;314    gap: 0.25rem;315    padding-bottom: 1.5rem;316}317 318.sidebar-link--button {319    font-family: inherit;320}321.sidebar::-webkit-scrollbar {322    width: 0;323    background: transparent;324}