.app-xhr-error { position:fixed; top:2px; left:50%; transform:translate(-50%, -130%); min-height:25px; padding:4px 30px 4px 10px; background:#fffde2; box-shadow:0px 1px 4px -1px #ccc; border:1px solid #e0ddbf; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:2px; z-index:9999999; transition:transform ease .5s; }
.app-xhr-error .close { font-family:'Material Symbols Rounded'; font-size:14px; line-height:1; position:absolute; right:6px; top:6px; cursor:pointer; }
.app-xhr-error.show { transform:translate(-50%, 0%); }
.app-ws-status { position:fixed; top:2px; left:50%; transform:translate(-50%, -130%); min-height:25px; padding:4px 10px; background:#fffde2; box-shadow:0px 1px 4px -1px #ccc; border:1px solid #e0ddbf; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:2px; z-index:9999998; transition:transform ease .5s; }
.app-ws-status.show { transform:translate(-50%, 0%); }
.app-header { display:flex; align-items:center; gap:10px; height:50px; background:#222532; color:#fff; position:relative; z-index:5; padding-right:10px; }
.app-header .logo { width:50px; height:50px; background:#000; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.app-header .logo img { height:40px; }
.app-header .menu-btn { width:44px; height:50px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; cursor:pointer; transition:color 0.5s; }
.app-header .menu-btn .msym-filled { font-size:32px; }
.app-header .menu-btn.open { color:#ff8500; }
.app-header .grow { flex:1 }
.app-header .title { display:flex; flex-direction:column; justify-content:center; padding-right:10px; overflow:hidden; color:#fff }
.app-header .title strong { font-size:18px; font-weight:800; line-height:1.3; }
.app-header .title span { font-size:10px; font-weight:500; line-height:14.3px; text-transform:uppercase; }
.app-header .title.xhr-sending:before { display:none }
.app-header .title.xhr-sending:after { display:none }
.app-header .user { display:flex; align-items:center; gap:5px; height:50px; overflow:hidden; flex-shrink:0; }
.app-header .user-name { display:flex; flex-direction:column; align-items:flex-end; padding-right:5px; }
.app-header .user-name strong { font-size:16px; font-weight:700; line-height:1.5; white-space:nowrap; }
.app-header .user-icon { width:37px; height:37px }
.app-header .user-links { display:flex; align-items:center; gap:5px; }
.app-header .user-links .link-icon { color:#fff; transition:color 0.5s; }
.app-header .user-links .link-icon:hover { color:#ff8500; }
.app-header .user-sep { width:5px; }
.app-header .user-options { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:50px; padding:0 10px; overflow:hidden; }
.app-header .user-options .msym-filled { font-size:11px; }
@media (max-width:780px) {
.app-header .user { display:none; }
body:not(.grp-interno) .app-header .user { display:flex; }
body:not(.grp-interno) .app-header .user-name > strong { display:none }
body:not(.grp-interno) .app-header .user-links { flex-direction:column; gap:2px; align-items:flex-end }
}
body { display:flex; flex-direction:column }
.app-layout { display:flex; flex:1; overflow:hidden; min-height:1px }
.app-panels { display:flex; overflow:hidden; min-height:1px; flex:1; position:relative }
.app-main { overflow:auto; width:100% }
.page-title { font-size:32px; font-weight:400; padding:15px 20px; }
.render-error { white-space:pre-wrap }
.app-menu { display:flex; position:fixed; width:0; z-index:90; pointer-events:none; left:0px; top:50px; bottom:0; min-height:1px; color:#fff; flex-direction:column }
.app-menu .hdr-button { position:fixed; pointer-events:all; top:0; left:55px; width:50px; height:50px; background:transparent; z-index:1; cursor:pointer }
.app-menu .hdr-button:after { content:'dock_to_right'; font-family:'Material Symbols Rounded'; font-style:normal; font-weight:normal; -webkit-font-smoothing:antialiased; position:absolute; bottom:0; left:54%; transform:translateX(-50%); font-size:10px; color:#fff; font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; opacity:0; transition:opacity .5s ease, color .5s ease }
.app-menu .hdr-button:hover:after { opacity:1 }
.app-menu .inner { visibility:hidden; position:relative; transform:translateX(-100%); pointer-events:all; display:flex; flex-direction:column; flex-grow:1; flex-shrink:1; min-height:1px; width:225px; background:#2c3044;  transition:transform .5s ease, visibility .5s ease }
.app-menu:hover .inner { transform:none; visibility:visible }
.app-menu.open { position:static; width:auto; height:100% }
.app-menu.open .inner { transform:none; position:static; visibility:visible }
.app-menu.open .hdr-button:after { color:#ff8500; font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.app-menu .special { display:flex; flex-wrap:wrap; gap:1px; background:#222532 }
.app-menu .special > a { flex:1; min-width:85px; display:flex; flex-direction:column; align-items:center; min-height:50px; padding:4px 0; overflow:hidden; background:#405a8b; color:#fff; text-decoration:none; text-align:center; transition:background .5s ease, color .5s ease }
.app-menu .special > a .msym { font-size:30px; line-height:30px; font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.app-menu .special > a span:last-child { font-size:9px; }
.app-menu .special > a:hover { color:#ff8500; background:#2a477f }
.app-menu .special > a.xhr-sending .msym { opacity:0 }
.app-menu .special > a.xhr-sending:before { display:none }
.app-menu .special > a.xhr-sending:after { top:38%; font-size:30px; font-weight:300 }
.app-menu .special .salir { display:none; background:#b23600 }
.app-menu .special .salir:hover { background:#ff8500; color:#fff }
.app-menu .special .perfil { display:none }
.app-menu .links { display:flex; flex-direction:column; padding:10px 0; flex-grow:1; flex-shrink:1; min-height:1px; overflow:auto }
.app-menu .links a { display:flex; flex-grow:0; flex-shrink:0; align-items:center; gap:10px; padding:4px 10px; color:#fff; text-decoration:none; font-size:13px; overflow:hidden; white-space:nowrap; border-right:1px dashed #222532; transition:color .5s ease, background .5s ease }
.app-menu .links a .msym { font-size:20px }
.app-menu .links a:hover { background:rgba(255,255,255,0.05); color:#ff8500 }
.app-menu .links a.xhr-sending .msym { opacity:0 }
.app-menu .links a.xhr-sending:before { display:none }
.app-menu .links a.xhr-sending:after { font-size:22px; left:20px; font-weight:300 }
.app-menu .group { position:relative }
.app-menu a.group-toggle { font-weight:600; cursor:default; padding:10px 10px 0px; border-bottom:1px; background:transparent !important }
.app-menu a.group-toggle > span { font-size:10px; text-transform:uppercase; color:#88cae3 }
.app-menu a.group-toggle .arrow { display:none; font-size:20px; width:15px; margin-left:auto; transition:transform 0.5s; transform-origin: 50% 50%; }
.app-menu a.group-toggle > .msym { display:none }
.app-menu .submenu { pointer-events:none; opacity:0; visibility:hidden; position:fixed;  transform:translate(0) translateY(-33px); padding:5px 0 10px; left:275px;  display:flex; flex-direction:column; transition:opacity .3s ease; max-height:calc(100vh - 50px - 10px); overflow-y:auto }
.app-menu .submenu a { padding:4px 10px }
.app-menu .group .submenu { display:flex; flex-direction:column; pointer-events:all; opacity:1; visibility:visible; position:static; transform:none; padding:5px 0 }
@media (max-width:780px) {
.app-menu:hover .inner {  transform:translateX(-100%); visibility:hidden }
.app-menu,
.app-menu.open { position:fixed; width:100%; }
.app-menu.open .inner {  transform:translateX(0) !important; visibility:visible !important }
.app-menu .inner { width:100% }
.app-menu .special .salir { display:flex }
.app-menu .special .perfil { display:flex }
}
.calendario-inputs { position:absolute; display:none; width:400px; height:250px; box-shadow:0 7px 10px -2px #bbb; z-index:9999999 }
.calendario-inputs .jbx-Calendar .jbx-viewer .jbx-title { font-size:20px; padding-right:100px }
.calendario-inputs .jbx-Calendar .jbx-dates .jbx-date { cursor:pointer }
.calendario-inputs .jbx-Calendar .jbx-dates .jbx-date .jbx-day { font-size:9px; width:14px; height:14px; padding:0; line-height:13px }
.calendario-inputs .jbx-Calendar .jbx-dates .jbx-date .jbx-label { font-size:8px; padding-top:11px; padding-right:0 }
.calendario-inputs .jbx-Calendar .jbx-dow .jbx-day { font-size:12px }
.calendario-inputs .jbx-Calendar .jbx-entry { display:none }
.calendario-inputs .jbx-Calendar .jbx-events { bottom:1px }
.calendario-inputs .jbx-Calendar .jbx-event { height:1.5px; background:#b23600; pointer-events:none; margin-bottom:0 }
.calendario-inputs .jbx-Calendar .jbx-label { color:#900; bottom:2px !important; left:5% !important; width:90% !important }
.calendario-inputs-focused input { border:1px solid #ccc !important }
.calendario-inputs-focused:before { content:''; width:100%; height:6px; background:#fff; position:absolute; bottom:-4px; left:0; box-sizing:border-box; z-index:999998; border-left:1px solid #ccc; border-right:1px solid #ccc }
.calendario-inputs-focused:after { content:''; width:0; height:0; border:5px solid transparent; border-top:5px solid #000; border-bottom:0; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); z-index:999999 }
.calendario-inputs.cal-disable-now [jbx-calendar="today"] { color:#ccc !important; cursor:default !important; opacity:.7 }
.calendario-inputs.cal-disable-past-dates [jbx-past="1"] { color:#ccc !important; cursor:default !important; opacity:.7 }
.calendario-inputs.small { width:300px; height:200px }
.calendario-inputs.small .jbx-Calendar .jbx-viewer .jbx-title { font-size:16px }
.win-login { display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.3); align-items:center; justify-content:center; padding:10px; }
.win-login .win-body { background:#fff; border-radius:15px; box-shadow:0 4px 8px rgba(0,0,0,0.25); padding:20px; width:100%; max-width:540px; }
.win-login .user { display:flex; align-items:center; padding-bottom:20px; }
.win-login .user .user-icon { width:80px; height:80px; flex-shrink:0; }
.win-login .text { flex:1; padding-left:20px; }
.win-login .text h2 { font-size:32px; font-weight:700; line-height:1.1; }
.win-login .text p { font-size:13px; line-height:1.3; }
.win-login .label { font-size:11px; display:block; padding-bottom:5px; }
.win-login .label.label-error { color:#c00; }
.win-login .links { display:flex; padding-top:5px; flex-direction:column; align-items: flex-end; }
.win-login .links a { font-size:11px; color:#b23600; text-decoration:none; line-height:1.3; display:inline-flex; align-items:center; gap:4px; }
.win-login .links a::after { font-family:'Material Symbols Rounded'; font-size:12px; content:attr(data-icon); width:0; overflow:hidden; transition:width 0.5s; }
.win-login .links a:hover { color:#ff8500; }
.win-login .links a:hover::after { width:14px; }
.win-login .links a.xhr-sending { position:static; }
.win-login .links a.xhr-sending::before { content:none; }
.win-login .links a.xhr-sending::after { content:'directory_sync'; font-variation-settings:'FILL' 1; width:12px; position:static; background:none; transform:none; display:inline-block; animation:xhr-btn-spin 1s linear infinite; }
.win-login .input-icon button.on .msym:before { content:'visibility' }
.win-login .input-icon .icon { width:40px; height:40px }
.win-login input[type=text],
.win-login input[type=password] { width:100%; height:40px }
.win-login .actions { margin-top:5px; display:flex; align-items:center  }
.win-login .actions .actions-grow { flex:1 }
.win-login .actions button { height:40px }