:root{--primary-color: #be7ee9;--primary-hover: #ac6bd9;--primary-dark: #9a5ac7;--primary-light: rgba(190, 126, 233, .12);--secondary-color: #8ed3f4;--secondary-color-light: rgba(142, 211, 244, .1);--secondary-dark: #5ba8d1;--text-dark: #001728;--text-medium: #4a5568;--text-light: #718096;--success-color: #9ae6b4;--success-light: rgba(154, 230, 180, .15);--success-dark: #68d391;--error-color: #feb2b2;--error-light: rgba(254, 178, 178, .15);--error-dark: #fc8181;--warning-color: #fbd38d;--warning-light: rgba(251, 211, 141, .15);--warning-dark: #f6ad55;--info-color: #a3bffa;--info-light: rgba(163, 191, 250, .15);--info-dark: #7c3aed;--neutral-grey: #a0aec0;--bg-main: #ffffff;--bg-light: #f7fafc;--card-bg: #ffffff;--border-color: #e2e8f0;--border-light: #edf2f7;--transition-standard: all .3s ease;--card-border: rgba(0, 31, 63, .08);--shadow-sm: 0 1px 3px rgba(0, 31, 63, .04);--shadow-md: 0 2px 6px rgba(0, 31, 63, .08);--shadow-lg: 0 4px 12px rgba(0, 31, 63, .12);--border-radius-xs: .25rem;--border-radius-sm: .5rem;--border-radius-md: .8rem;--border-radius-lg: 1rem;--primary-font: "Lato", sans-serif;--font-xsmall: .75rem;--font-small: .875rem;--font-medium: 1rem;--font-large: 1.25rem;--font-xlarge: 1.5rem;--font-xxlarge: 2rem;--spacing-xs: .5rem;--spacing-small: 1rem;--spacing-medium: 1.5rem;--spacing-large: 2rem;--spacing-xlarge: 2.5rem;--spacing-xxlarge: 3rem;--spacing-xxxlarge: 4rem;--primary-color-rgb: 190, 126, 233;--primary-gradient: linear-gradient(135deg, #be7ee9 0%, #ac6bd9 100%);--primary-translucent: rgba(190, 126, 233, .05);--secondary-color-rgb: 142, 211, 244;--secondary-gradient: linear-gradient(135deg, #8ed3f4 0%, #7ac1e2 100%);--secondary-translucent: rgba(142, 211, 244, .1);--success-color-rgb: 154, 230, 180;--success-gradient: linear-gradient(135deg, #9ae6b4 0%, #68d391 100%);--error-color-rgb: 254, 178, 178;--error-gradient: linear-gradient(135deg, #feb2b2 0%, #fc8181 100%);--warning-color-rgb: 251, 211, 141;--warning-gradient: linear-gradient(135deg, #fbd38d 0%, #f6ad55 100%);--info-color-rgb: 163, 191, 250;--info-gradient: linear-gradient(135deg, #a3bffa 0%, #7c3aed 100%);--neutral-grey-rgb: 160, 174, 192;--neutral-gradient: linear-gradient(to right, #a0aec0, #cbd5e0);--shadow-inner: inset 0 1px 2px rgba(0, 31, 63, .04);--shadow-glow: 0 0 8px rgba(190, 126, 233, .12);--shadow-hover: 0 4px 12px rgba(0, 31, 63, .08);--shadow-subtle: 0 1px 2px rgba(0, 31, 63, .02);--transition-fast: all .2s ease;--transition-medium: all .3s ease;--transition-slow: all .5s ease;--transition-spring: all .4s cubic-bezier(.34, 1.56, .64, 1);--accent-bg: rgba(190, 126, 233, .03);--accent-bg-hover: rgba(190, 126, 233, .06);--accent-border: rgba(190, 126, 233, .12);--surface-hover: rgba(248, 250, 252, .9);--surface-light: rgba(248, 250, 252, .5);--surface-active: rgba(241, 245, 249, .95);--text-muted: #8b9dc3;--focus-ring: 0 0 0 3px var(--primary-light);--focus-ring-error: 0 0 0 3px var(--error-light);--backdrop-blur: blur(8px);--shadow-float: 0 8px 32px rgba(0, 31, 63, .08);--shadow-pressed: 0 1px 2px rgba(0, 31, 63, .08);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-smooth: cubic-bezier(.25, .46, .45, .94);--ease-gentle: cubic-bezier(.33, 1, .68, 1)}body{font-family:var(--primary-font);color:var(--text-color);background-color:var(--background-color)}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:var(--text-color)}html.modal-active,body.modal-active{overflow:hidden;position:relative}.modal-overlay,.hold-confirm-overlay{isolation:isolate;position:fixed;top:0;left:0;width:100vw;height:100vh}.standalone-route{width:100%;min-height:100vh;padding:0;margin:0;display:flex;flex-direction:column}.standalone-route .app-container,.standalone-route .header-container,.standalone-route .main-content,.standalone-route .page-content{all:unset;width:100%;display:flex;flex:1;flex-direction:column}.sidebar{width:4rem;height:100vh;background-color:#fff;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;justify-content:space-between;position:fixed;top:0;left:0;z-index:1000;box-shadow:1px 0 1px #001f3f0d;overflow:hidden}.sidebar.expanded{width:11rem;z-index:1000;box-shadow:1px 0 30px #001f3f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.4);z-index:950;opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .3s forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar.expanded~.overlay{display:block;opacity:1}.sidebar-header,.sidebar-body,.sidebar-footer{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 .75rem}.sidebar.expanded .sidebar-header,.sidebar.expanded .sidebar-body,.sidebar.expanded .sidebar-footer{align-items:flex-start}.sidebar-header{padding-top:1.25rem;animation:sidebarFadeIn .5s ease forwards}.sidebar-body{flex-grow:1;overflow-y:auto;overflow-x:hidden;padding-top:.75rem;scrollbar-width:thin;scrollbar-color:rgba(172,75,231,.3) transparent}.sidebar-body::-webkit-scrollbar{width:4px}.sidebar-body::-webkit-scrollbar-thumb{background-color:#ac4be74d;border-radius:4px}.sidebar-footer{padding-bottom:1.5rem}.logo-container{width:100%;display:flex;justify-content:center;margin-bottom:.75rem}.sidebar.expanded .logo-container{justify-content:flex-start}.logo-container .sidebar-item{background:transparent!important;box-shadow:none!important}.logo-container .sidebar-item:hover{transform:none!important;background:transparent!important}.logo{width:2.5rem;height:2.5rem;display:block}.logo-text{font-weight:600;color:#2d3748;font-size:1.1rem;margin-top:.2rem;margin-left:.4rem;opacity:0;white-space:nowrap;transition:all .3s ease;position:absolute;visibility:hidden}.sidebar.expanded .logo-text{opacity:1;visibility:visible;position:static}.search-container{position:relative;width:100%;margin-top:1.25rem;display:flex;justify-content:center}.search-bar{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:10px;transition:all .2s ease;background:transparent;border:none;padding:0;cursor:pointer;overflow:hidden}.sidebar.expanded .search-bar{width:100%;justify-content:flex-start;padding-left:.75rem}.search-bar:hover{background-color:#ac4be70d}.search-bar:focus{outline:2px solid rgba(172,75,231,.3);background-color:#ac4be70d}.search-bar .item-text{opacity:0;visibility:hidden;position:absolute;transition:all .3s ease}.sidebar.expanded .search-bar .item-text{opacity:1;visibility:visible;position:static;margin-left:.6rem}.sidebar-item{display:flex;align-items:center;justify-content:center;height:3rem;margin-bottom:.5rem;border-radius:10px;width:3rem;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);position:relative;text-decoration:none;color:#4a5568;overflow:hidden}.sidebar.expanded .sidebar-item{justify-content:flex-start;width:100%;padding-left:.75rem}.item-text{opacity:0;white-space:nowrap;margin-left:.6rem;transition:all .3s ease;position:absolute;left:1.25rem;visibility:hidden;font-size:var(--font-small)}.item-text.logo-text{margin-left:.2rem}.sidebar.expanded .item-text{opacity:1;visibility:visible;position:relative;left:0}.sidebar-item.active{background:linear-gradient(135deg,#ac4be7,#9539d3);color:#fff;box-shadow:0 4px 10px #ac4be74d;font-weight:500}.icon-body.active,.icon-footer.active{filter:brightness(0) invert(1)}.icon-body,.icon-header,.icon-footer{width:1rem;height:1rem;transition:all .2s ease;display:block;opacity:1;margin:0 auto;position:relative;z-index:2}.sidebar.expanded .icon-body,.sidebar.expanded .icon-header,.sidebar.expanded .icon-footer{margin:0}.sidebar-items:hover:not(.active){background-color:#ac4be71a;transform:translateY(-2px);color:#9539d3}.sidebar-item.active:hover{background:linear-gradient(135deg,#ac4be7,#9539d3);transform:translateY(-2px);box-shadow:0 6px 12px #ac4be766}.sidebar-item:focus-visible{outline:2px solid #ac4be7;outline-offset:2px}.sidebar-separator{width:50%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(211,211,211,.5),transparent);margin:2rem auto;border-radius:1.5px}.sidebar-cuenta{position:relative;cursor:pointer}.sidebar-cuenta-menu{position:absolute;bottom:40px;left:100%;background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 10px #0000001f;z-index:10;width:160px;padding:.4rem 0;margin-left:.6rem}.sidebar-cuenta-menu-item{display:block;padding:.6rem .8rem;color:#4a5568;text-decoration:none;font-size:.8rem;text-align:left;transition:all .2s ease}.sidebar-cuenta-menu-item:hover{background-color:#ac4be70d;color:#9539d3}.sidebar-cuenta-menu-item:active{background-color:#ac4be71a}.custom-user-button .clerk-user-button-image{display:none}.custom-user-button .clerk-user-button-text{display:inline}@media (max-width: 599px){.sidebar{position:fixed;left:-12rem;top:0;transition:left .3s ease;width:12rem}.sidebar.expanded{left:0}.sidebar-tooltip{display:none}.sidebar .item-text{opacity:1;transform:translate(0)}.sidebar-body,.sidebar-footer{padding:0 .75rem;align-items:flex-start}.sidebar-footer{padding-bottom:2.5rem}.logo-container{padding-top:.75rem;justify-content:flex-start}.search-bar{justify-content:flex-start;padding-left:.75rem}.sidebar-item{width:100%;justify-content:flex-start;padding-left:.75rem}.sidebar-cuenta-menu{left:0;bottom:100%;margin-left:0;margin-bottom:.4rem}}@media (min-width: 600px){.overlay{display:none}}@keyframes sidebarFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sidebarItemSlideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.sidebar-body .sidebar-item:nth-child(1){animation:sidebarItemSlideIn .3s ease forwards;animation-delay:.1s}.sidebar-body .sidebar-item:nth-child(2){animation:sidebarItemSlideIn .3s ease forwards;animation-delay:.2s}.sidebar-body .sidebar-item:nth-child(3){animation:sidebarItemSlideIn .3s ease forwards;animation-delay:.3s}.sidebar-body .sidebar-item:nth-child(4){animation:sidebarItemSlideIn .3s ease forwards;animation-delay:.4s}.sidebar-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background:#2d3748;color:#fff;padding:.4rem .6rem;border-radius:4px;font-size:.7rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:1001;margin-left:.6rem;box-shadow:0 2px 6px #00000026}.sidebar-tooltip:before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);border-width:5px 5px 5px 0;border-style:solid;border-color:transparent #2d3748 transparent transparent}.sidebar-item:hover .sidebar-tooltip,.search-container:hover .sidebar-tooltip{opacity:1}.header{display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--header-height, 70px);padding:0 var(--spacing-xlarge);background-color:transparent;pointer-events:none}.header-left{display:flex;align-items:center;font-size:1.5rem;font-weight:700}.underline{position:relative;display:inline-block}.header-right{display:flex;align-items:center;gap:10px}.toggle-sidebar-button-header{background:none;border:none;cursor:pointer;margin-right:15px;display:none;pointer-events:auto}.toggle-sidebar-button-header img{width:1.5rem;height:1.5rem}@media (max-width: 599px){.toggle-sidebar-button-header{display:block}.header{padding:0 var(--spacing-medium)}}.profile-picture{width:2rem;height:2rem;border-radius:50%;margin-right:.5rem}.header-right span{font-size:1rem;color:#333}.header-user-dropdown-container{position:relative}.header-user-button{display:flex;align-items:center;gap:8px;background-color:#fff;border:1px solid #eaeaea;border-radius:8px;padding:8px 16px;font-size:.9rem;color:#333;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d;pointer-events:auto}.header-user-button:hover{background-color:#f9f9f9;border-color:#d1d1d1}.header-user-button:focus{outline:none;border-color:#4176ff;box-shadow:0 0 0 2px #4176ff33}.header-user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}.header-dropdown-arrow{transition:transform .2s ease}.header-dropdown-arrow.open{transform:rotate(180deg)}.header-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;width:220px;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px 0;z-index:1000;animation:dropdownAppear .2s ease;pointer-events:auto}@keyframes dropdownAppear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.header-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;text-align:left;font-size:.9rem;color:#333;cursor:pointer;transition:background-color .2s}.header-dropdown-item:hover{background-color:#f5f5f5}.header-dropdown-item svg{color:#666}.header-dropdown-divider{height:1px;background-color:#eaeaea;margin:4px 0}.header-logout-item{color:#e53935}.header-logout-item:hover{background-color:#ffebee}.header-logout-item svg{color:#e53935}@media (max-width: 480px){.header-user-button span{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.app-container{display:grid;grid-template-columns:5rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"sidebar header" "sidebar content";height:100vh;width:100%;position:relative;overflow:hidden;background-color:var(--bg-main)}@media (max-width: 599px){.app-container{grid-template-columns:0 1fr;grid-template-areas:"header header" "content content"}}.sidebar{grid-area:sidebar}.header-container{grid-area:header;position:fixed;top:0;right:0;left:5rem;z-index:900;background-color:transparent;height:var(--header-height, 70px);pointer-events:none}@media (max-width: 599px){.header-container{left:0}}.page-content{flex:1;padding:0;overflow-y:visible;position:relative;display:flex;flex-direction:column;align-items:center}.main-content{grid-area:content;flex-direction:column;flex-grow:1;overflow-y:auto;position:relative;padding:calc(var(--header-height) + var(--spacing-small)) var(--spacing-xxlarge) var(--spacing-xlarge);width:100%;background-color:var(--bg-main)}@media (max-width: 1024px){.main-content{padding:calc(var(--header-height) + var(--spacing-small)) var(--spacing-xlarge) var(--spacing-xlarge)}}@media (max-width: 768px){.main-content{padding:calc(var(--header-height) + var(--spacing-small)) var(--spacing-large) var(--spacing-large)}}@media (max-width: 480px){.main-content{padding:calc(var(--header-height) + var(--spacing-xs)) var(--spacing-small) var(--spacing-medium)}}@media (max-width: 320px){.main-content{padding:calc(var(--header-height) + var(--spacing-xs)) var(--spacing-xs) var(--spacing-medium)}}:root{--header-height: 70px}
