/* =========================================================
   PIXELPRO VACACIONES - MOBILE APP FINAL FIX
   Reemplaza los problemas de ancho, zoom y orden visual.
   ========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

body {
  background: #eef6fb !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
svg,
canvas,
video,
table {
  max-width: 100%;
}

input,
select,
textarea,
button {
  font-size: 16px !important;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  .app-layout,
  .layout,
  .app,
  .main,
  .main-content,
  .content,
  .page-content,
  .dashboard-content,
  .admin-content,
  .employee-content {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .main-content {
    background: #eef6fb !important;
  }

  .main-content > section,
  .main-content > .hero-card,
  .main-content > .stats-grid,
  .main-content > .dashboard-grid,
  .main-content > .profile-grid,
  .main-content > .calendar-grid,
  .employee-dashboard-page,
  .employee-requests-page,
  .detail-page-wrap,
  .edit-employee-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow-x: hidden !important;
  }

  /* HEADER TIPO APP */
  .topbar,
  .page-header,
  .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 84px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid #dbeafe !important;
    backdrop-filter: blur(14px);
    overflow: hidden !important;
  }

  .topbar > div:first-child,
  .topbar-left,
  .page-header-left,
  .header-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .page-title,
  .header-title,
  .main-content h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: clamp(20px, 5.3vw, 25px) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar p,
  .page-subtitle,
  .header-subtitle {
    display: none !important;
  }

  .search-box,
  .topbar-search,
  .global-search {
    display: none !important;
  }

  .topbar-actions,
  .header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .topbar-actions .user-chip,
  .topbar-actions .user-menu,
  .profile-chip,
  .user-chip {
    display: none !important;
  }

  .menu-toggle,
  .circle-btn,
  .icon-btn,
  .theme-toggle,
  .notification-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #d9e7f6 !important;
    background: #ffffff !important;
    color: #26364d !important;
    font-size: 22px !important;
    box-shadow: none !important;
  }

  .notification-btn span,
  .notification-count {
    right: -4px !important;
    top: -7px !important;
    min-width: 23px !important;
    height: 23px !important;
    font-size: 12px !important;
  }

  /* SIDEBAR MOVIL */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 84vw !important;
    max-width: 320px !important;
    height: 100dvh !important;
    z-index: 200 !important;
    padding: 28px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
    transform: translateX(-106%) !important;
    transition: transform .25s ease !important;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .2) !important;
  }

  .sidebar.open,
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  body.sidebar-open {
    overflow: hidden !important;
  }

  .sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: none;
    z-index: 150 !important;
    background: rgba(15, 23, 42, .42) !important;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block !important;
  }

  .sidebar-logo-image,
  .sidebar-logo {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding-bottom: 20px !important;
    margin-bottom: 18px !important;
  }

  .sidebar-user {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .sidebar-menu {
    display: grid !important;
    gap: 12px !important;
  }

  .sidebar-menu a {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 22px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
  }

  /* CONTENEDORES GENERALES */
  .container,
  .page-container,
  .content-wrapper,
  .main-wrapper,
  .section,
  .dashboard-wrapper,
  .panel-card,
  .card,
  .glass-card,
  .form-card,
  .table-wrap,
  .report-card,
  .calendar-main-card,
  .side-card,
  .profile-info-card,
  .profile-history-card,
  .profile-stat-card,
  .employee-history-card,
  .employee-request-card,
  .employee-stat-card,
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 24px !important;
    overflow-x: hidden !important;
  }

  .panel-card,
  .card,
  .form-card,
  .table-wrap,
  .calendar-main-card,
  .side-card,
  .profile-info-card,
  .profile-history-card,
  .employee-history-card {
    padding: 22px !important;
  }

  .grid,
  .cards-grid,
  .stats-grid,
  .dashboard-grid,
  .reports-grid,
  .profile-grid,
  .calendar-layout,
  .form-grid,
  .form-row,
  .profile-lovable-grid,
  .profile-mini-stats,
  .employee-stats-grid,
  .employee-request-grid,
  .calendar-page,
  .settings-grid,
  .collective-grid,
  .detail-metrics-grid,
  .edit-summary-grid,
  .vacation-fields,
  .vacation-summary-grid,
  .mode-switch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }

  /* DASHBOARD EMPLEADO */
  .employee-hero-card {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    margin: 22px 18px 24px !important;
    padding: 30px 26px !important;
    border-radius: 28px !important;
    display: block !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .employee-balance-badge {
    margin-bottom: 18px !important;
    font-size: 13px !important;
  }

  .employee-hero-card h2 {
    margin: 0 0 14px !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  .employee-hero-card h2 small {
    font-size: 16px !important;
  }

  .employee-hero-card p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .employee-progress {
    margin-top: 18px !important;
    max-width: 100% !important;
  }

  .employee-new-request {
    width: 100% !important;
    margin-top: 28px !important;
    min-height: 56px !important;
    border-radius: 28px !important;
  }

  .employee-stats-grid {
    margin: 0 18px 22px !important;
    width: calc(100% - 36px) !important;
  }

  .employee-stat-card,
  .stat-card {
    min-height: 126px !important;
    padding: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .employee-stat-card h3,
  .stat-card h3 {
    font-size: 34px !important;
  }

  .employee-history-card {
    width: calc(100% - 36px) !important;
    margin: 0 18px 24px !important;
    padding: 24px !important;
  }

  .employee-history-row {
    grid-template-columns: 46px 1fr !important;
    gap: 14px !important;
  }

  .employee-history-row .status-pill {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .history-info h3 {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* SOLICITAR VACACIONES */
  .vacation-alert,
  .vacation-request-card {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .vacation-alert {
    padding: 18px !important;
    border-radius: 22px !important;
    display: flex !important;
  }

  .vacation-alert p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .vacation-request-card {
    margin-top: 22px !important;
    margin-bottom: 26px !important;
    padding: 28px 24px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .vacation-card-head {
    display: block !important;
  }

  .vacation-card-head h2 {
    font-size: 25px !important;
    line-height: 1.14 !important;
  }

  .vacation-card-head p {
    font-size: 16px !important;
  }

  .mini-balance-pill {
    width: 100% !important;
    margin-top: 18px !important;
  }

  .mode-option span {
    width: 100% !important;
    min-height: 64px !important;
    font-size: 18px !important;
  }

  .field-card input,
  .field-card select,
  .reason-box textarea,
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    border-radius: 18px !important;
  }

  .summary-card {
    min-height: 104px !important;
  }

  .vacation-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .vacation-actions .btn-outline,
  .vacation-actions .btn-primary,
  .vacation-submit {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* MIS SOLICITUDES */
  .employee-requests-page {
    padding: 22px 18px 48px !important;
  }

  .tabs,
  .request-tabs,
  .filters,
  .filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .tabs a,
  .filter-btn,
  .tab-btn {
    min-height: 42px !important;
    padding: 0 17px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  .employee-request-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .employee-request-card {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    min-height: auto !important;
    padding: 22px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .request-card-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 18px !important;
  }

  .request-card-body {
    min-width: 0 !important;
    width: 100% !important;
  }

  .request-card-head {
    display: block !important;
    padding-right: 0 !important;
  }

  .request-card-head h3 {
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 105px !important;
  }

  .request-card-head .badge,
  .employee-request-card .badge,
  .status-pill,
  .badge {
    position: static !important;
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
  }

  .request-card-head > .badge,
  .employee-request-card > .badge {
    position: absolute !important;
    right: 18px !important;
    top: 20px !important;
    margin-top: 0 !important;
  }

  .request-card-head p,
  .request-dates,
  .request-meta,
  .request-info {
    font-size: 15px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .request-chips {
    gap: 9px !important;
  }

  .request-chips span,
  .pill,
  .date-pill,
  .meta-pill {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
  }

  .request-decision-info {
    grid-template-columns: 1fr !important;
  }

  /* CALENDARIO */
  .calendar-page {
    width: calc(100% - 36px) !important;
    margin: 22px 18px !important;
    padding: 0 !important;
  }

  .calendar-main-card,
  .side-card {
    padding: 24px !important;
    border-radius: 26px !important;
  }

  .calendar-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }

  .calendar-header-row h2 {
    font-size: 22px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .calendar-nav-btn,
  .calendar-today-btn {
    height: 42px !important;
    min-width: 42px !important;
  }

  .calendar-weekdays,
  .calendar-month-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .calendar-weekdays {
    font-size: 12px !important;
  }

  .calendar-day {
    display: block !important;
    min-height: 52px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 8px 4px !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  .calendar-day.empty {
    display: none !important;
  }

  .calendar-events {
    margin-top: 5px !important;
  }

  .calendar-pill {
    max-width: 36px !important;
    margin: 0 auto !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
  }

  .absence-item {
    align-items: center !important;
  }

  /* PERFIL */
  .profile-hero {
    width: calc(100% - 36px) !important;
    margin: 22px 18px 24px !important;
    padding: 28px 24px !important;
    border-radius: 28px !important;
    display: block !important;
  }

  .profile-hero-avatar {
    width: 94px !important;
    height: 94px !important;
    border-radius: 28px !important;
    margin-bottom: 22px !important;
  }

  .profile-hero-info h2 {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .profile-lovable-grid,
  .employee-profile-grid {
    width: calc(100% - 36px) !important;
    margin: 0 18px 24px !important;
  }

  .profile-info-card,
  .profile-history-card,
  .profile-stat-card {
    padding: 24px !important;
  }

  .profile-history-item {
    grid-template-columns: 44px 1fr !important;
  }

  .profile-history-item .badge,
  .profile-history-item .status-pill {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  /* LOGIN MOVIL */
  .login-container {
    display: block !important;
    min-height: 100dvh !important;
    background: linear-gradient(180deg, #dff9ff 0%, #edf5ff 38%, #f6fbff 100%) !important;
    padding: 28px 18px 34px !important;
    overflow-x: hidden !important;
  }

  .login-left,
  .login-left-clean {
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    text-align: center !important;
  }

  .login-left::before,
  .login-left::after,
  .login-left-clean::before,
  .login-left-clean::after,
  .clean-copy,
  .login-benefit-grid,
  .clean-copyright,
  .login-copyright,
  .login-info-card {
    display: none !important;
  }

  .login-brand-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px auto 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .login-brand-main h1 {
    font-size: 27px !important;
    line-height: 1 !important;
    letter-spacing: -.8px !important;
    color: #0f172a !important;
    text-align: left !important;
  }

  .login-brand-main h1 .brand-pixel,
  .login-brand-main h1 span:not(.brand-pro) {
    color: #0f172a !important;
  }

  .login-brand-main h1 .brand-pro {
    color: #0284c7 !important;
  }

  .login-brand-main p {
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    letter-spacing: 4px !important;
    color: #334155 !important;
    text-align: left !important;
  }

  .login-company-logo,
  .sidebar-company-mark {
    display: block !important;
  }

  .login-company-logo {
    width: 64px !important;
    max-width: 64px !important;
    margin: 0 !important;
  }

  .login-right {
    padding: 0 !important;
    background: transparent !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
  }

  .login-card-box {
    width: 100% !important;
    padding: 32px 28px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.92) !important;
  }

  .login-card h2 {
    font-size: 28px !important;
  }

  .login-demo {
    display: none !important;
  }

  /* TABLAS Y REPORTES */
  .table-wrap,
  .table-wrapper,
  .responsive-table,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .reports-grid,
  .report-detail-card,
  .report-actions {
    width: calc(100% - 36px) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .bar-chart-box {
    height: 270px !important;
    grid-template-columns: 34px 1fr !important;
    padding-right: 0 !important;
  }

  .chart-lines {
    left: 34px !important;
  }

  .chart-bars {
    gap: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .bar-group small {
    max-width: 64px !important;
    font-size: 11px !important;
  }

  /* MODALES */
  .modal,
  .modal-content,
  .modal-card {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 430px) {
  .topbar,
  .page-header,
  .header {
    min-height: 78px !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .topbar h1,
  .page-title,
  .header-title,
  .main-content h1 {
    font-size: 21px !important;
  }

  .circle-btn,
  .icon-btn,
  .menu-toggle,
  .theme-toggle,
  .notification-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    font-size: 20px !important;
  }

  .topbar-actions,
  .header-actions {
    gap: 8px !important;
  }

  .main-content > section,
  .main-content > .hero-card,
  .main-content > .stats-grid,
  .main-content > .dashboard-grid,
  .main-content > .profile-grid,
  .main-content > .calendar-grid,
  .employee-dashboard-page,
  .employee-requests-page,
  .detail-page-wrap,
  .edit-employee-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .employee-hero-card,
  .employee-stats-grid,
  .employee-history-card,
  .vacation-alert,
  .vacation-request-card,
  .calendar-page,
  .profile-hero,
  .profile-lovable-grid,
  .reports-grid,
  .report-detail-card,
  .report-actions {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .employee-hero-card,
  .vacation-request-card,
  .profile-hero {
    padding: 24px 20px !important;
  }

  .employee-hero-card h2 {
    font-size: 30px !important;
  }

  .employee-stat-card,
  .stat-card {
    padding: 24px !important;
  }

  .vacation-actions {
    grid-template-columns: 1fr !important;
  }

  .employee-request-card {
    padding: 20px !important;
  }

  .request-card-head h3 {
    padding-right: 95px !important;
    font-size: 17px !important;
  }

  .request-card-head > .badge,
  .employee-request-card > .badge {
    right: 16px !important;
    top: 18px !important;
    font-size: 13px !important;
  }

  .calendar-main-card,
  .side-card,
  .profile-info-card,
  .profile-history-card {
    padding: 20px !important;
  }

  .calendar-weekdays,
  .calendar-month-grid {
    gap: 5px !important;
  }

  .calendar-day {
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  .login-container {
    padding: 24px 16px 32px !important;
  }

  .login-card-box {
    padding: 30px 26px !important;
  }
}

@media (max-width: 370px) {
  .topbar h1,
  .page-title,
  .header-title,
  .main-content h1 {
    font-size: 19px !important;
  }

  .circle-btn,
  .icon-btn,
  .menu-toggle,
  .theme-toggle,
  .notification-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}
/* FIX FINAL MOVIL - FECHAS Y BADGES TIPO LOVABLE */
@media (max-width: 520px){

  /* Inputs de fecha no se salen */
  .vacation-request-card,
  .vacation-fields,
  .field-card,
  .field-card input,
  .field-card select,
  .summary-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .field-card input[type="date"],
  input[type="date"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 0 0 !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
  }

  .vacation-request-card{
    overflow:hidden !important;
  }

  /* Tarjeta mis solicitudes igual a Lovable */
  .employee-request-card{
    display:grid !important;
    grid-template-columns:58px 1fr !important;
    gap:18px !important;
    padding:24px !important;
    border-radius:28px !important;
    align-items:start !important;
    position:relative !important;
  }

  .request-card-head{
    display:block !important;
    padding-right:0 !important;
  }

  .request-card-head h3{
    font-size:18px !important;
    line-height:1.25 !important;
    max-width:190px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .request-card-head p{
    font-size:14px !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Badge arriba a la derecha sin amontonarse */
  .request-card-head .badge,
  .employee-request-card .badge,
  .status-pill{
    position:absolute !important;
    top:26px !important;
    right:24px !important;
    margin:0 !important;
    width:auto !important;
    max-width:145px !important;
    white-space:nowrap !important;
    font-size:14px !important;
    padding:8px 13px !important;
    border-radius:999px !important;
    z-index:3 !important;
  }

  .request-chips{
    grid-column:2 !important;
    margin-top:14px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .request-chips span{
    font-size:13px !important;
    padding:7px 12px !important;
    white-space:nowrap !important;
  }

  .request-decision-info{
    grid-column:2 !important;
    grid-template-columns:1fr !important;
    margin-top:14px !important;
  }
}

/* =========================================================
   FIX FINAL: Inputs de fecha + badges estilo Lovable
   ========================================================= */
@media (max-width: 900px){
  .topbar-actions .user-menu{display:flex !important; position:relative !important;}
  .topbar-actions .user-chip{display:inline-flex !important; width:48px !important; height:48px !important; min-width:48px !important; padding:0 !important; border-radius:50% !important; overflow:visible !important;}
  .topbar-actions .user-chip > div:not(.avatar),
  .topbar-actions .user-chevron{display:none !important;}
  .topbar-actions .user-chip .avatar{width:48px !important; height:48px !important; min-width:48px !important; margin:0 !important;}
  .user-dropdown{position:fixed !important; top:76px !important; right:14px !important; z-index:99999 !important; min-width:230px !important;}
}

@media (max-width: 520px){
  /* Evita que cualquier input de fecha tenga ancho mayor al teléfono */
  .vacation-request-card,
  .vacation-request-card form,
  .vacation-fields,
  .range-fields,
  .custom-fields,
  .custom-dates-box,
  .custom-date-row,
  .vacation-summary-grid,
  .reason-box,
  .field-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .vacation-fields,
  .range-fields,
  .custom-date-row{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:18px !important;
  }

  .field-card{
    display:block !important;
    padding:0 !important;
  }

  .field-card input,
  .field-card select,
  .reason-box textarea,
  .custom-date-row input,
  input[type="date"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:10px 0 0 0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  .btn-add-date{
    width:100% !important;
    max-width:100% !important;
  }

  /* Mis solicitudes: tarjeta igual a Lovable y sin badges montados */
  .employee-request-card{
    display:grid !important;
    grid-template-columns:58px minmax(0, 1fr) !important;
    gap:16px !important;
    padding:24px !important;
    align-items:start !important;
    overflow:hidden !important;
  }

  .employee-request-card .request-card-body{
    min-width:0 !important;
    width:100% !important;
  }

  .employee-request-card .request-card-head{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    gap:10px !important;
    align-items:start !important;
    padding-right:0 !important;
    width:100% !important;
  }

  .employee-request-card .request-card-head h3{
    max-width:100% !important;
    padding-right:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:18px !important;
  }

  .employee-request-card .request-card-head p{
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:14px !important;
  }

  .employee-request-card .request-status-stack{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    gap:7px !important;
    min-width:max-content !important;
  }

  .employee-request-card .request-status-stack .badge,
  .employee-request-card .request-card-head .badge,
  .employee-request-card .badge{
    position:static !important;
    margin:0 !important;
    width:max-content !important;
    max-width:130px !important;
    white-space:nowrap !important;
    font-size:13px !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    line-height:1 !important;
  }

  .request-chips{
    grid-column:auto !important;
    margin-top:14px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:9px !important;
  }

  .request-chips span{
    width:max-content !important;
    max-width:100% !important;
    white-space:nowrap !important;
    font-size:13px !important;
    padding:7px 12px !important;
  }

  .request-decision-info{
    grid-template-columns:1fr !important;
    margin-top:14px !important;
  }

  /* Tabla admin en móvil o anchos estrechos */
  .solicitud-status-stack,
  .request-status-stack{
    gap:7px !important;
  }
}


/* =========================================================
   FIX 2026-06-18: menu de perfil móvil + responsive ventana media
   ========================================================= */
@media (max-width: 900px){
  .topbar, .page-header, .app-header{ overflow: visible !important; }
  .topbar-actions, .header-actions{ overflow: visible !important; }
  .topbar-actions .user-menu,
  .user-menu[data-user-menu]{
    display:flex !important;
    position:relative !important;
    z-index:100000 !important;
    overflow:visible !important;
  }
  .topbar-actions .user-chip,
  .user-chip.user-chip-btn{
    display:inline-flex !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    padding:0 !important;
    border-radius:50% !important;
    overflow:visible !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
  .user-chip.user-chip-btn > div:not(.avatar),
  .user-chip.user-chip-btn .user-chevron{display:none !important;}
  .user-chip.user-chip-btn .avatar{
    width:48px !important;height:48px !important;min-width:48px !important;
    margin:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;
  }
  .user-dropdown[data-user-dropdown]{
    position:fixed !important;
    top:78px !important;
    right:12px !important;
    width:min(260px, calc(100vw - 24px)) !important;
    min-width:220px !important;
    z-index:999999 !important;
    background:#fff !important;
    border:1px solid #dbeafe !important;
    border-radius:22px !important;
    box-shadow:0 24px 60px rgba(15,23,42,.22) !important;
    padding:10px !important;
    overflow:visible !important;
  }
  .user-dropdown[data-user-dropdown].open{display:grid !important;}
  .user-dropdown[data-user-dropdown] a{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    font-size:15px !important;
    text-decoration:none !important;
  }
}

/* Responsive para ventana a mitad en computadora/tablet horizontal */
@media (min-width: 901px) and (max-width: 1250px){
  .sidebar{width:250px !important; min-width:250px !important;}
  .main-content, .content, .page-content, .app-main{max-width:calc(100vw - 250px) !important; overflow-x:hidden !important;}
  .topbar, .page-header, .app-header{padding:18px 22px !important; gap:14px !important;}
  .topbar-search, .global-search, .search-box{max-width:320px !important; min-width:220px !important;}
  .topbar-actions, .header-actions{gap:10px !important; flex-shrink:0 !important; overflow:visible !important;}
  .user-chip-btn{min-width:190px !important; max-width:220px !important;}
  .user-chip-btn strong{max-width:128px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}

  .container, .page-container, .content-wrapper, .main-wrapper, .section, .dashboard-wrapper{padding-left:22px !important; padding-right:22px !important; max-width:100% !important;}
  .stats-grid, .cards-grid, .reports-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
  .profile-grid, .calendar-layout{grid-template-columns:1fr !important;}
  .chart-grid, .charts-grid{grid-template-columns:1fr !important;}
  .table-wrapper, .table-container, .responsive-table{overflow-x:auto !important; max-width:100% !important;}
  table{min-width:760px;}
  .employee-compact-table{min-width:850px;}
}

@media (min-width: 901px) and (max-width: 1050px){
  .sidebar{width:220px !important; min-width:220px !important;}
  .main-content, .content, .page-content, .app-main{max-width:calc(100vw - 220px) !important;}
  .topbar-search, .global-search, .search-box{display:none !important;}
  .stats-grid, .cards-grid, .reports-grid{grid-template-columns:1fr !important;}
  .hero-card, .balance-card{padding:28px !important;}
}
/* SAFE AREA IPHONE / ANDROID */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .topbar,
  .page-header,
  .mobile-header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }

  .sidebar {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .main-content,
  .page-content {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
}

/* FIX FINAL: panel de notificaciones en móvil y elementos montados */
@media (max-width: 768px){
  .topbar{ z-index: 3000 !important; overflow: visible !important; }
  .main-content, .content, .page-content{ overflow-x: hidden !important; }
  .status-badge, .badge, .state-badge, .tipo-badge{ z-index: 1 !important; }
  .notifications-wrap{ position: static !important; }
  .notifications-panel{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 86px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 520px) !important;
    border-radius: 24px !important;
    z-index: 4000 !important;
    overflow: auto !important;
    transform: translateY(8px) !important;
  }
  .notifications-panel.open{ transform: translateY(0) !important; }
  .notifications-head{
    padding: 16px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .notifications-head h3{ font-size: 16px !important; }
  .notifications-head p{ font-size: 12px !important; }
  .mark-read-btn{
    flex: 0 0 auto !important;
    max-width: 170px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    padding: 10px 14px !important;
    white-space: normal !important;
  }
  .push-device-card{
    margin: 12px !important;
    grid-template-columns: 40px minmax(0,1fr) !important;
    gap: 10px !important;
  }
  .push-device-btn{
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .push-device-copy strong,
  .push-device-copy p{
    overflow-wrap: anywhere !important;
  }
  .notification-item{
    grid-template-columns: 10px minmax(0,1fr) !important;
    padding: 14px 16px !important;
  }
  .notification-item strong,
  .notification-item p,
  .notification-item small{
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 430px){
  .notifications-panel{
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    left: 12px !important;
    right: 12px !important;
  }
}

/* Mantener ocultos los campos de rango cuando se usa fecha personalizada */
.hidden,
.range-fields.hidden,
.custom-fields.hidden,
.vacation-fields.hidden,
.custom-dates-box.hidden{
  display:none !important;
}