.mobile-admin-sidebar{display:none}
#portal:has(#nav-gestion:not([hidden])) #sidebar .side-help{display:none !important}
#portal.admin-wide #sidebar :is(#personal-nav-divider, #nav-inicio, #nav-asistencia, #team-nav-divider, #nav-equipo),
#portal:has(#nav-gestion:not([hidden])) #sidebar :is(#personal-nav-divider, #nav-inicio, #nav-asistencia, #team-nav-divider, #nav-equipo){display:none !important}
@media(max-width:900px){
  html:has(#portal.admin-wide:not([hidden])),
  body:has(#portal.admin-wide:not([hidden])),
  #portal.admin-wide,
  #portal.admin-wide .workspace{background:#f4f1ec !important}
  #portal #admin-overview-section .admin-overview-today .admin-kpi{min-height:82px;padding:12px 14px}
  #portal #admin-overview-section .admin-overview-today .admin-kpi b{font-size:28px !important;margin:5px 0 3px}
  #portal #admin-overview-section .admin-kpi small{font-size:9px;letter-spacing:0}
  #portal #admin-overview-section .admin-kpi span{font-size:10px !important;line-height:1.3}
  /* ══════════════════════════════════════════════════════════════════════════
     DRAWER SHELL: Acabado Glassmorphism ultra-premium, flexible y fluido
     ══════════════════════════════════════════════════════════════════════════ */
  #portal #sidebar{
    background:linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,247,254,0.95) 100%) !important;
    border:1px solid rgba(224,217,238,0.85) !important;
    border-radius:28px !important;
    box-shadow:0 24px 64px -10px rgba(36,25,60,0.26), 0 0 0 1px rgba(255,255,255,0.9) inset !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    backdrop-filter:blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
    padding:16px 14px 16px !important;
    width:min(315px, calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    box-sizing:border-box !important;
  }
  #portal #sidebar,
  #portal #sidebar *,
  #portal #sidebar *::-webkit-scrollbar{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  #portal #sidebar::-webkit-scrollbar,
  #portal #sidebar *::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  /* Cabecera / Marca */
  #portal #sidebar .side-brand{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex-shrink:0 !important;
    padding:4px 6px 14px !important;
    border-bottom:1px solid rgba(228,221,240,0.8) !important;
    margin-bottom:6px !important;
  }
  #portal #sidebar .side-brand img{
    width:40px !important;
    height:40px !important;
    padding:6px !important;
    border-radius:13px !important;
    background:linear-gradient(135deg, #ffffff 0%, #f4edfc 100%) !important;
    border:1px solid rgba(216,206,236,0.9) !important;
    box-shadow:0 4px 14px rgba(101,80,131,0.12), 0 1px 2px rgba(0,0,0,0.03) !important;
    object-fit:contain !important;
    transition:transform 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  }
  #portal #sidebar .side-brand:hover img{
    transform:scale(1.06) rotate(-2deg) !important;
  }
  #portal #sidebar .side-brand .sidebar-label{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    font-size:15px !important;
    font-weight:500 !important;
    color:#4b3d64 !important;
    letter-spacing:-0.015em !important;
  }
  #portal #sidebar .side-brand .sidebar-label b{
    font-weight:800 !important;
    background:linear-gradient(135deg, #004fb0 0%, #655083 50%, #f10075 100%) !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
  }

  /* Lista de Navegación */
  #portal #sidebar .side-nav{
    flex:0 0 auto !important;
    min-height:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    padding:6px 0 6px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    touch-action:pan-y !important;
  }
  #portal #sidebar .side-nav::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  /* Divisores de Sección con Línea Sutil */
  #portal #sidebar .side-nav-divider{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-shrink:0 !important;
    margin:12px 4px 4px !important;
    padding:0 6px !important;
    color:#8e7fa3 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:0.12em !important;
    text-transform:uppercase !important;
  }
  #portal #sidebar .side-nav-divider::after{
    content:'' !important;
    flex:1 1 0 !important;
    height:1px !important;
    background:linear-gradient(90deg, rgba(220,212,236,0.8) 0%, transparent 100%) !important;
  }

  /* Botones de Navegación */
  #portal #sidebar .side-nav>button{
    position:relative !important;
    flex-shrink:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    min-height:46px !important;
    padding:10px 14px !important;
    border-radius:15px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#53466a !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    letter-spacing:-0.01em !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    cursor:pointer !important;
    touch-action:pan-y !important;
    transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  }
  #portal #sidebar .side-nav button svg{
    width:20px !important;
    height:20px !important;
    flex-shrink:0 !important;
    color:#827197 !important;
    stroke:currentColor !important;
    transition:color 0.2s ease, transform 0.2s ease !important;
  }
  #portal #sidebar .side-nav>button:hover{
    background:rgba(238,232,248,0.7) !important;
    color:#352550 !important;
  }
  #portal #sidebar .side-nav>button:hover svg{
    color:#553e77 !important;
    transform:scale(1.08) !important;
  }
  #portal #sidebar .side-nav>button:active{
    transform:scale(0.99) !important;
    transition-duration:0.08s !important;
  }

  /* Botón Activo */
  #portal #sidebar .side-nav>button.active{
    background:linear-gradient(135deg, #f2eaf8 0%, #e6d9f3 100%) !important;
    border-color:rgba(175,150,214,0.5) !important;
    color:#32204e !important;
    font-weight:600 !important;
    box-shadow:0 4px 14px rgba(101,80,131,0.12), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  }
  #portal #sidebar .side-nav>button.active svg{
    color:#553e77 !important;
    transform:scale(1.06) !important;
  }
  #portal #sidebar .side-nav>button.active::before{
    content:'' !important;
    position:absolute !important;
    left:0 !important;
    top:25% !important;
    bottom:25% !important;
    width:3.5px !important;
    border-radius:0 4px 4px 0 !important;
    background:linear-gradient(180deg, #7c5ea8, #655083) !important;
  }

  /* Acordeón Gestión de Asistencia */
  #portal #sidebar #nav-gestion{
    background:rgba(246,241,252,0.65) !important;
    border:1px solid rgba(228,221,240,0.85) !important;
    border-radius:16px !important;
    margin-top:2px !important;
  }
  #portal #sidebar #nav-gestion:hover{
    background:rgba(240,233,249,0.85) !important;
    border-color:rgba(198,184,222,0.6) !important;
  }
  #portal #sidebar #nav-gestion[aria-expanded="true"]{
    background:linear-gradient(135deg, #f1e7f8 0%, #e5d6f2 100%) !important;
    border-color:rgba(175,150,214,0.6) !important;
    color:#32204e !important;
    font-weight:600 !important;
    box-shadow:0 4px 16px rgba(101,80,131,0.12), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  }
  #portal #sidebar #nav-gestion .sidebar-label{
    flex:1 1 0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }
  #portal #sidebar #nav-gestion .sidebar-label::after{
    content:"Ver secciones" !important;
    display:inline-flex !important;
    align-items:center !important;
    font-size:10.5px !important;
    font-weight:500 !important;
    color:#7b6a93 !important;
    letter-spacing:0 !important;
  }
  #portal #sidebar #nav-gestion[aria-expanded="true"] .sidebar-label::after{
    content:"Ocultar secciones" !important;
    color:#553e77 !important;
    font-weight:600 !important;
  }
  #portal #sidebar #nav-gestion::after{
    content:"" !important;
    display:block !important;
    position:static !important;
    width:8px !important;
    height:8px !important;
    flex:0 0 8px !important;
    border:solid #806e98 !important;
    border-width:0 2px 2px 0 !important;
    background:transparent !important;
    border-radius:1px !important;
    transform:rotate(45deg) !important;
    transition:transform 0.28s cubic-bezier(0.16,1,0.3,1), border-color 0.2s ease !important;
  }
  #portal #sidebar #nav-gestion[aria-expanded="true"]::after{
    border-color:#553e77 !important;
    transform:rotate(225deg) translateY(-2px) !important;
  }

  /* Submenú de Administración */
  #portal #sidebar .mobile-admin-sidebar{
    display:block !important;
    flex-shrink:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:2px 0 6px 0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }
  #portal #sidebar .mobile-admin-sidebar[hidden]{
    display:none !important;
  }
  #portal #sidebar .mobile-admin-sidebar>summary{
    display:none !important;
  }
  #portal #sidebar .mobile-admin-sidebar:not([open]) .mobile-admin-options{
    display:none !important;
  }
  #portal #sidebar .mobile-admin-options{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:4px 0 4px 10px !important;
    margin:0 !important;
    border:0 !important;
    border-left:2px solid rgba(198,184,222,0.55) !important;
    max-height:none !important;
    overflow:visible !important;
    animation:sidebarSubmenuFade 0.24s cubic-bezier(0.16,1,0.3,1) !important;
  }
  @keyframes sidebarSubmenuFade{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:translateY(0)}
  }
  #portal #sidebar .mobile-admin-options button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    min-height:40px !important;
    padding:9px 13px !important;
    color:#5e5077 !important;
    background:rgba(255,255,255,0.6) !important;
    border:1px solid rgba(228,221,240,0.5) !important;
    border-radius:12px !important;
    font-size:13px !important;
    line-height:1.4 !important;
    box-shadow:0 1px 3px rgba(101,80,131,0.04) !important;
    transition:background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    text-align:left !important;
    white-space:normal !important;
    touch-action:pan-y !important;
  }
  #portal #sidebar .mobile-admin-options button:hover{
    background:#ffffff !important;
    border-color:rgba(186,172,212,0.7) !important;
    color:#352550 !important;
    box-shadow:0 3px 10px rgba(101,80,131,0.08) !important;
  }
  #portal #sidebar .mobile-admin-options button:active{
    transform:scale(0.99) !important;
  }
  #portal #sidebar .mobile-admin-options button[aria-pressed="true"]{
    color:#ffffff !important;
    background:linear-gradient(135deg, #655083 0%, #4e3c6a 100%) !important;
    border-color:#655083 !important;
    font-weight:600 !important;
    box-shadow:0 4px 14px rgba(101,80,131,0.28) !important;
  }

  /* Sección de Ayuda */
  #portal #sidebar .side-help{
    flex-shrink:0 !important;
    margin:8px 0 !important;
    padding:12px 14px !important;
    background:linear-gradient(135deg, #f4eff9 0%, #ede5f5 100%) !important;
    border:1px solid rgba(220,212,236,0.85) !important;
    border-radius:16px !important;
  }
  #portal #sidebar .side-help :is(span,a,svg){
    color:#6b5a80 !important;
  }

  /* Tarjeta de Sesión / Usuario (Inferior) */
  #portal #sidebar #sidebar-session-actions{
    display:flex !important;
    align-items:center !important;
    position:relative !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    min-height:64px !important;
    margin:12px 0 4px !important;
    padding:10px 12px !important;
    gap:10px !important;
    background:linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(246,241,252,0.92) 100%) !important;
    border:1px solid rgba(220,212,236,0.85) !important;
    border-radius:20px !important;
    box-shadow:0 6px 18px rgba(45,32,68,0.06), inset 0 1px 0 rgba(255,255,255,0.95) !important;
    overflow:hidden !important;
    touch-action:pan-y !important;
  }
  #portal #sidebar #side-avatar{
    display:grid !important;
    place-items:center !important;
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    color:#553e77 !important;
    background-color:#e8def6 !important;
    border-radius:12px !important;
    font-weight:700 !important;
    font-size:13px !important;
    border:1.5px solid #ffffff !important;
    box-shadow:0 3px 8px rgba(101,80,131,0.16) !important;
    position:relative !important;
  }
  #portal #sidebar #side-avatar.has-photo{
    color:transparent !important;
    background-size:cover !important;
    background-position:center !important;
  }
  #portal #sidebar #side-profile-link{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    position:static !important;
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    text-align:left !important;
    cursor:pointer !important;
    transition:opacity 0.15s ease !important;
  }
  #portal #sidebar #side-profile-link:hover{
    opacity:0.85 !important;
  }
  #portal #sidebar #side-name{
    color:#352550 !important;
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:-0.01em !important;
    line-height:1.25 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #portal #sidebar #side-role{
    color:#6d5b86 !important;
    font-size:10px !important;
    font-weight:600 !important;
    background:rgba(101,80,131,0.09) !important;
    display:inline-block !important;
    padding:1px 7px !important;
    border-radius:999px !important;
    margin-top:3px !important;
    align-self:flex-start !important;
    line-height:1.4 !important;
  }
  #portal #sidebar #logout{
    position:static !important;
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
    background:rgba(255,255,255,0.85) !important;
    border:1px solid rgba(220,212,236,0.8) !important;
    border-radius:12px !important;
    color:#756884 !important;
    display:grid !important;
    place-items:center !important;
    cursor:pointer !important;
    box-shadow:0 2px 6px rgba(101,80,131,0.06) !important;
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
  }
  #portal #sidebar #logout:hover{
    background:#fef2f2 !important;
    border-color:#fecaca !important;
    color:#dc2626 !important;
    transform:translateY(-1px) scale(1.05) !important;
    box-shadow:0 4px 12px rgba(220,38,38,0.16) !important;
  }
  #portal #sidebar #logout:active{
    transform:scale(0.95) !important;
  }
  #portal #sidebar :is(button,a):focus-visible{
    outline:2px solid #845ec2 !important;
    outline-offset:2px !important;
  }
  #portal #admin-overview-section .admin-overview-today,
  #admin-overview-section .admin-overview-today{display:none !important}
  #portal #admin-overview-charts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #portal #admin-overview-charts .admin-chart{min-width:0;padding:14px 10px;border-radius:18px}
  #portal #admin-overview-charts .admin-chart h3{font-size:18px;overflow-wrap:anywhere}
  #portal #admin-overview-charts .admin-chart header p{font-size:10px;line-height:1.4;min-height:28px}
  #portal #admin-overview-charts .admin-chart-ring{width:min(120px,100%);height:auto;aspect-ratio:1;margin:14px auto}
  #portal #admin-overview-charts .admin-chart-ring>span{width:78%;min-width:0}
  #portal #admin-overview-charts .admin-chart-ring b{font-size:25px}
  #portal #admin-overview-charts .admin-chart-ring small{font-size:9px}
  #portal #admin-overview-charts .admin-chart ul{font-size:10px}
  #portal #admin-overview-charts .admin-chart li{gap:5px;align-items:start;font-size:10px;line-height:1.4}
  #portal #admin-overview-charts .admin-chart li span{min-width:0;overflow-wrap:anywhere}
  #portal #admin-overview-charts>.admin-empty{grid-column:1/-1}

  /* Prevenir zoom indeseado en móviles (iOS Safari) al enfocar o escribir en cualquier input */
  :is(
    #portal,
    .portal,
    body,
    .admin-view,
    #admin-overview-section,
    #view-gestion,
    [role="dialog"],
    .modal,
    .moonrow-modal,
    #admin-person-modal
  ) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea
  ),
  #portal input#admin-people-search,
  #portal input#admin-contract-search,
  #portal input#admin-control-search,
  #portal .admin-team-actions input,
  #portal .admin-team-actions select,
  #portal .admin-list-filters input,
  #portal .admin-list-filters select,
  #portal .admin-date-control input,
  #portal .admin-month-filters input,
  #portal .admin-month-filters select,
  #portal .admin-access-filters input,
  #portal .admin-access-filters select,
  #portal .admin-field input,
  #portal .admin-field select,
  #portal .admin-field textarea,
  #portal .admin-control-filters input,
  #portal .admin-control-filters select,
  #portal .admin-close-toolbar input,
  #portal .admin-close-status-head select,
  #portal .admin-close-fields input,
  #portal .admin-close-fields select,
  #portal .admin-close-fields textarea,
  #portal .admin-evidence-field input,
  #portal .admin-evidence-field textarea,
  #portal .attendance-export-tools input,
  #portal .attendance-export-search input,
  #portal #admin-assignments-section :is(input, select, textarea),
  #portal #admin-contracts-section :is(input, select, textarea),
  #portal #admin-people-section :is(input, select, textarea),
  #portal #admin-control-section :is(input, select, textarea),
  #admin-ranking-section :is(input, select),
  .role-picker-search input,
  .asg-picker-search input,
  .moonrow-search-input,
  #admin-person-modal :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea),
  #admin-month-modal .holiday-scheduler input,
  .admin-editor-sheet input,
  .admin-editor-sheet select,
  .admin-month-sheet input,
  .admin-month-sheet select {
    font-size: 16px !important;
  }
}