/* ==========================================================
   DATADOX RESPONSIVE ADD-ON
   Solo se agregan reglas responsive. No se cambia el diseño desktop.
   ========================================================== */
@media (max-width: 1180px) {
  .pr-main,
  .reniec-main,
  .tickets-main,
  .consultas-main,
  .panel-main,
  .sbs-main,
  .seguros-main,
  .denuncias-main,
  .deposito-main,
  .ajustes-main,
  .proximamente-main,
  .notificaciones-main,
  .dashboard-content {
    min-width: 0 !important;
  }

  .reniec-hero,
  .denuncias-hero,
  .sbs-hero,
  .seguros-hero,
  .proximamente-card,
  .ajustes-stage,
  .deposito-hero,
  .deposito-main-grid,
  .deposito-layout,
  .panel-hero,
  .tickets-hero,
  .consultas-hero {
    max-width: 100% !important;
  }
}

@media (max-width: 930px) {
  html,
  body,
  body.dashboard-body,
  body.reniec-body,
  body.tickets-body,
  body.notificaciones-body {
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .pr-dashboard,
  .reniec-shell,
  .tickets-shell,
  .consultas-shell,
  .panel-shell,
  .sbs-dashboard,
  .seguros-dashboard,
  .denuncias-shell,
  .deposito-shell,
  .ajustes-shell,
  .proximamente-shell,
  .dashboard-page {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  .pr-main,
  .reniec-main,
  .tickets-main,
  .consultas-main,
  .panel-main,
  .sbs-main,
  .seguros-main,
  .denuncias-main,
  .deposito-main,
  .ajustes-main,
  .proximamente-main,
  .notificaciones-main,
  .dashboard-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .pr-systembar,
  .reniec-systembar,
  .tickets-systembar,
  .consultas-systembar,
  .panel-systembar,
  .sbs-systembar,
  .seguros-systembar,
  .denuncias-systembar,
  .deposito-systembar,
  .proximamente-systembar,
  .topbar {
    width: 100% !important;
    min-height: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }

  .system-left,
  .tickets-system-title,
  .topbar > div:first-child {
    min-width: 0 !important;
    flex: 1 1 220px !important;
  }

  .system-left strong,
  .tickets-system-title strong,
  .topbar h1,
  .topbar h2 {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .system-actions,
  .topbar-actions {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .dashboard-theme,
  .theme-switch {
    width: min(100%, 236px) !important;
    min-width: 0 !important;
    height: 38px !important;
  }

  .countdown {
    min-width: 126px !important;
    height: 38px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
  }

  .system-icon,
  .reniec-systembar .system-icon,
  .tickets-systembar .system-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

@media (max-width: 640px) {
  .pr-main,
  .reniec-main,
  .tickets-main,
  .consultas-main,
  .panel-main,
  .sbs-main,
  .seguros-main,
  .denuncias-main,
  .deposito-main,
  .ajustes-main,
  .proximamente-main,
  .notificaciones-main,
  .dashboard-content {
    padding: 10px !important;
  }

  .pr-systembar,
  .reniec-systembar,
  .tickets-systembar,
  .consultas-systembar,
  .panel-systembar,
  .sbs-systembar,
  .seguros-systembar,
  .denuncias-systembar,
  .deposito-systembar,
  .proximamente-systembar,
  .topbar {
    border-radius: 16px !important;
  }

  .system-actions,
  .topbar-actions {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .system-actions::-webkit-scrollbar,
  .topbar-actions::-webkit-scrollbar {
    display: none !important;
  }

  .dashboard-theme,
  .theme-switch {
    flex: 0 0 214px !important;
  }

  .theme-option {
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  .countdown {
    flex: 0 0 auto !important;
    min-width: 122px !important;
  }

  h1 {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}


/* ==========================================================
   DATADOX SIDEBAR RESPONSIVE ADD-ON
   ========================================================== */
@media (max-width: 930px) {
  :root {
    --dd-sidebar-width: 100%;
  }

  .dd-sidebar.pr-sidebar,
  .dd-sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(128px, auto) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand profile"
      "menu menu" !important;
    gap: 10px !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--dd-sidebar-border) !important;
    z-index: 50 !important;
  }

  .dd-brand {
    grid-area: brand !important;
    width: auto !important;
    min-height: 46px !important;
    height: 46px !important;
  }

  .dd-brand-mark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  .dd-profile-menu {
    grid-area: profile !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  .dd-profile-card {
    width: 100% !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  .dd-profile-mask {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .dd-profile-kicker {
    font-size: 9px !important;
  }

  .dd-profile-copy strong {
    font-size: 12px !important;
  }

  .dd-profile-copy small {
    font-size: 10px !important;
  }

  .dd-profile-chevron {
    width: 24px !important;
    height: 24px !important;
    border-radius: 9px !important;
  }

  .dd-profile-panel {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    z-index: 10020 !important;
  }

  .dd-sidebar-menu {
    grid-area: menu !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 2px 2px 6px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  .dd-sidebar-menu::-webkit-scrollbar {
    display: none !important;
  }

  .dd-sidebar-menu > a,
  .dd-sidebar-submenu {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  .dd-sidebar-menu > a,
  .dd-sidebar-submenu-button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    display: inline-grid !important;
    grid-template-columns: 30px auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .dd-menu-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .dd-sidebar-submenu {
    position: relative !important;
  }

  .dd-sidebar-submenu-list {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 8px) !important;
    min-width: 160px !important;
    padding: 8px !important;
    z-index: 10010 !important;
    background: rgba(8, 7, 15, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  html[data-theme="light"] .dd-sidebar-submenu-list {
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .dd-sidebar-submenu-list a {
    width: 100% !important;
    min-height: 36px !important;
  }

  .dd-sidebar-boost {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .dd-sidebar.pr-sidebar,
  .dd-sidebar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "profile"
      "menu" !important;
  }

  .dd-brand {
    justify-content: flex-start !important;
  }

  .dd-profile-panel {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
  }
}


/* ==========================================================
   DATADOX MODULE RESPONSIVE ADD-ON
   ========================================================== */
@media (max-width: 1180px) {
  .reniec-hero,
  .denuncias-hero,
  .sbs-hero,
  .seguros-hero,
  .tickets-hero,
  .panel-hero,
  .proximamente-card,
  .ajustes-stage,
  .deposito-hero,
  .deposito-main-grid,
  .consultas-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .reniec-console,
  .reniec-output,
  .denuncias-console,
  .denuncias-result-layout,
  .sbs-result-grid,
  .sbs-detail-grid,
  .seguros-result-grid,
  .seguros-data-grid,
  .tickets-board,
  .panel-admin-grid,
  .panel-audit-grid,
  .deposito-grid,
  .deposito-layout,
  .ajustes-stage,
  .notificaciones-overview,
  .notificaciones-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .reniec-orbit,
  .denuncias-orbit,
  .proximamente-orbit,
  .panel-orbit {
    max-width: 220px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 930px) {
  .reniec-stage,
  .denuncias-stage,
  .sbs-stage,
  .seguros-stage,
  .tickets-stage,
  .panel-stage,
  .consultas-stage,
  .deposito-stage,
  .ajustes-stage,
  .proximamente-stage,
  .notificaciones-stage {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: none !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .reniec-hero,
  .denuncias-hero,
  .sbs-hero,
  .seguros-hero,
  .tickets-hero,
  .panel-hero,
  .proximamente-card,
  .consultas-hero,
  .deposito-hero,
  .ajustes-hero,
  .notificaciones-hero,
  .query-card,
  .result-panel,
  .signal-panel,
  .tickets-list-panel,
  .tickets-chat-panel,
  .tickets-create-card,
  .panel-section,
  .consultas-day,
  .denuncias-query-card,
  .denuncias-info-card,
  .sbs-result-panel,
  .seguros-result-panel,
  .deposito-card,
  .ajustes-card,
  .notificaciones-panel-page {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  .reniec-hero h1,
  .denuncias-hero h1,
  .tickets-hero h1,
  .panel-hero h1,
  .proximamente-card h1,
  .deposito-hero h1,
  .ajustes-hero h1,
  .sbs-hero h1,
  .seguros-hero h1,
  .notificaciones-hero h1 {
    font-size: clamp(28px, 10vw, 44px) !important;
    letter-spacing: -1px !important;
    line-height: 0.98 !important;
  }

  .reniec-hero p,
  .denuncias-hero p,
  .tickets-hero p,
  .panel-hero p,
  .proximamente-card p,
  .deposito-hero p,
  .ajustes-hero p,
  .sbs-hero p,
  .seguros-hero p,
  .notificaciones-hero p {
    font-size: 13px !important;
  }

  .reniec-console,
  .reniec-output,
  .denuncias-console,
  .denuncias-result-layout,
  .sbs-hero,
  .seguros-hero,
  .tickets-board,
  .panel-hero,
  .panel-stats,
  .panel-stats-grid,
  .panel-user-list,
  .panel-audit-grid,
  .consultas-counters,
  .deposito-plans,
  .deposito-vendors,
  .ajustes-grid,
  .proximamente-card,
  .notificaciones-list-stats,
  .products-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tickets-stats,
  .panel-stats,
  .panel-stats-grid,
  .consultas-counters,
  .sbs-summary-grid,
  .seguros-summary-grid,
  .denuncias-summary-grid,
  .identity-grid,
  .field-grid,
  .deposito-plans,
  .deposito-vendors,
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tickets-list-panel,
  .tickets-chat-panel,
  .panel-section,
  .consultas-day,
  .sbs-result-panel,
  .seguros-result-panel,
  .denuncias-results-page {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .tickets-list,
  .panel-users-list,
  .panel-consultas-list,
  .consultas-list,
  .notificaciones-page-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .reniec-table-wrap,
  .sbs-table-wrap,
  .seguros-table-wrap,
  .denuncias-table-wrap,
  .consultas-table-wrap,
  .panel-table-wrap,
  .notificaciones-table-wrap,
  .table-scroll,
  .table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .reniec-table-wrap table,
  .sbs-table-wrap table,
  .seguros-table-wrap table,
  .denuncias-table-wrap table,
  .consultas-table-wrap table,
  .panel-table-wrap table,
  .table-scroll table,
  .table-wrapper table {
    min-width: 720px !important;
  }
}

@media (max-width: 640px) {
  .reniec-orbit,
  .denuncias-orbit,
  .proximamente-orbit,
  .panel-orbit,
  .sbs-orbit,
  .seguros-orbit {
    display: none !important;
  }

  .reniec-hero,
  .denuncias-hero,
  .sbs-hero,
  .seguros-hero,
  .tickets-hero,
  .panel-hero,
  .proximamente-card,
  .consultas-hero,
  .deposito-hero,
  .ajustes-hero,
  .notificaciones-hero {
    min-height: auto !important;
    padding: 18px !important;
  }

  .tickets-stats,
  .panel-stats,
  .panel-stats-grid,
  .consultas-counters,
  .sbs-summary-grid,
  .seguros-summary-grid,
  .denuncias-summary-grid,
  .identity-grid,
  .field-grid,
  .deposito-plans,
  .deposito-vendors,
  .products-grid,
  .reniec-person-actions,
  .denuncias-cards-grid,
  .ajustes-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .input-launcher,
  .form-bottom,
  .tickets-reply,
  .tickets-chat-actions,
  .tickets-create-actions,
  .panel-user-actions,
  .deposito-actions,
  .ajustes-actions,
  .sbs-form-row,
  .seguros-form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .input-launcher button,
  .form-bottom button,
  .tickets-new-button,
  .tickets-list-head a,
  .tickets-create-card button,
  .tickets-reply button,
  .tickets-chat-actions button,
  .panel-user-actions button,
  .deposito-actions a,
  .deposito-actions button,
  .ajustes-actions button,
  .sbs-form-row button,
  .seguros-form-row button {
    width: 100% !important;
    min-height: 48px !important;
  }

  .tickets-ticket-card,
  .consultas-item,
  .notificaciones-item,
  .denuncias-card,
  .panel-user-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ticket-message,
  .ticket-message.is-admin,
  .ticket-message.is-user {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .reniec-results-summary,
  .denuncias-status-strip,
  .consultas-filters,
  .panel-filters,
  .sbs-status,
  .seguros-status {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 420px) {
  .reniec-hero h1,
  .denuncias-hero h1,
  .tickets-hero h1,
  .panel-hero h1,
  .proximamente-card h1,
  .deposito-hero h1,
  .ajustes-hero h1,
  .sbs-hero h1,
  .seguros-hero h1,
  .notificaciones-hero h1 {
    font-size: 28px !important;
  }

  .reniec-hero,
  .denuncias-hero,
  .sbs-hero,
  .seguros-hero,
  .tickets-hero,
  .panel-hero,
  .proximamente-card,
  .consultas-hero,
  .deposito-hero,
  .ajustes-hero,
  .notificaciones-hero,
  .query-card,
  .result-panel,
  .signal-panel,
  .tickets-list-panel,
  .tickets-chat-panel,
  .tickets-create-card,
  .panel-section,
  .consultas-day,
  .denuncias-query-card,
  .denuncias-info-card,
  .sbs-result-panel,
  .seguros-result-panel,
  .deposito-card,
  .ajustes-card,
  .notificaciones-panel-page {
    border-radius: 18px !important;
    padding: 14px !important;
  }
}


/* ==========================================================
   DATADOX NOTIFICATIONS RESPONSIVE ADD-ON
   ========================================================== */
@media (max-width: 930px) {
  .dd-notifications-panel {
    top: 118px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: min(76svh, 680px) !important;
    border-radius: 20px !important;
  }

  .notificaciones-page-list,
  .notificaciones-list,
  .dd-notifications-list {
    overflow-x: hidden !important;
  }
}

@media (max-width: 640px) {
  .dd-notifications-panel {
    top: 150px !important;
    max-height: calc(100svh - 166px) !important;
  }

  .dd-notifications-item,
  .notificaciones-item {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .dd-notifications-item-meta,
  .notificaciones-item-meta {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}


/* ==========================================================
   DATADOX PROFILE MENU RESPONSIVE ADD-ON
   ========================================================== */
@media (max-width: 640px) {
  .profile-dropdown-menu,
  .profile-menu-panel,
  [data-profile-menu-panel] {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: auto !important;
  }
}


/* ==========================================================
   DATADOX PRODUCTOS RESPONSIVE ADD-ON
   ========================================================== */
@media (max-width: 1100px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .products-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .products-count {
    width: 100% !important;
    height: auto !important;
    min-height: 82px !important;
  }

  .products-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .product-card {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
}


/* ==========================================================
   DATADOX LOGIN RESPONSIVE ADD-ON
   ========================================================== */
@media (max-width: 720px) {
  body {
    overflow-y: auto !important;
  }

  .login-page {
    min-height: 100svh !important;
    padding: 18px 12px !important;
    align-items: flex-start !important;
  }

  .login-card,
  .register-card {
    width: 100% !important;
    max-width: 430px !important;
    min-height: auto !important;
    padding: 24px 18px !important;
    border-radius: 28px !important;
  }

  .brand h1 {
    font-size: clamp(32px, 12vw, 52px) !important;
  }

  .login-form {
    gap: 14px !important;
  }

  .login-form input,
  .password-box,
  .captcha-box {
    min-width: 0 !important;
  }

  .theme-toggle,
  .theme-button {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .login-card,
  .register-card {
    padding: 20px 14px !important;
    border-radius: 24px !important;
  }

  .brand p {
    font-size: 13px !important;
  }
}


/* ==========================================================
   DATADOX MOBILE FINAL OVERRIDE - SIN HUECOS + MENU REAL
   Debe cargarse después de dashboard.css y datadox-sidebar.css.
   ========================================================== */
@media (max-width: 930px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.dashboard-body,
  body.reniec-body,
  body.tickets-body,
  body.notificaciones-body,
  body.consultas-body,
  body.panel-body,
  body.sbs-body,
  body.seguros-body,
  body.denuncias-body,
  body.deposito-body,
  body.ajustes-body,
  body.proximamente-body {
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.dd-mobile-menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .pr-dashboard,
  .dashboard-page,
  .reniec-shell,
  .telefonos-shell,
  .sbs-shell,
  .sbs-dashboard,
  .denuncias-shell,
  .consultas-shell,
  .panel-shell,
  .seguros-shell,
  .seguros-dashboard,
  .tickets-shell,
  .deposito-shell,
  .ajustes-shell,
  .proximamente-shell,
  .notificaciones-shell,
  .products-shell,
  main.pr-dashboard,
  main.dashboard-page,
  main.reniec-shell,
  main.telefonos-shell,
  main.sbs-shell,
  main.sbs-dashboard,
  main.denuncias-shell,
  main.consultas-shell,
  main.panel-shell,
  main.seguros-shell,
  main.seguros-dashboard,
  main.tickets-shell,
  main.deposito-shell,
  main.ajustes-shell,
  main.proximamente-shell,
  main.notificaciones-shell,
  main.products-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .pr-main,
  .dashboard-content,
  .reniec-main,
  .telefonos-main,
  .sbs-main,
  .denuncias-main,
  .consultas-main,
  .panel-main,
  .seguros-main,
  .tickets-main,
  .deposito-main,
  .ajustes-main,
  .proximamente-main,
  .notificaciones-main,
  .productos-main,
  .products-main {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(72px + env(safe-area-inset-top)) 12px 18px !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .pr-systembar,
  .topbar,
  .reniec-systembar,
  .telefonos-systembar,
  .sbs-systembar,
  .denuncias-systembar,
  .consultas-systembar,
  .panel-systembar,
  .seguros-systembar,
  .tickets-systembar,
  .deposito-systembar,
  .ajustes-systembar,
  .proximamente-systembar,
  .notificaciones-systembar,
  .productos-systembar {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    order: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  .system-left,
  .tickets-system-title,
  .topbar > div:first-child,
  .systembar-left {
    min-width: 0 !important;
    flex: 1 1 180px !important;
  }

  .system-left strong,
  .tickets-system-title strong,
  .topbar h1,
  .topbar h2,
  .systembar-left strong {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .system-actions,
  .topbar-actions,
  .systembar-actions {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }

  .system-actions::-webkit-scrollbar,
  .topbar-actions::-webkit-scrollbar,
  .systembar-actions::-webkit-scrollbar {
    display: none !important;
  }

  .system-icon,
  .pr-systembar .system-icon,
  .reniec-systembar .system-icon,
  .tickets-systembar .system-icon,
  .dd-notifications-trigger {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 13px !important;
  }

  .dashboard-theme,
  .theme-switch,
  .theme-selector {
    flex: 0 0 210px !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 38px !important;
  }

  .theme-option {
    height: 30px !important;
    min-width: 64px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .countdown,
  [data-plan-countdown] {
    flex: 0 0 auto !important;
    min-width: 122px !important;
    height: 38px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .reniec-stage,
  .telefonos-stage,
  .sbs-stage,
  .denuncias-stage,
  .consultas-stage,
  .panel-stage,
  .seguros-stage,
  .tickets-stage,
  .deposito-stage,
  .ajustes-stage,
  .proximamente-stage,
  .notificaciones-stage,
  .dashboard-grid,
  .dashboard-stage,
  .products-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .reniec-hero,
  .telefonos-hero,
  .sbs-hero,
  .denuncias-hero,
  .consultas-hero,
  .panel-hero,
  .seguros-hero,
  .tickets-hero,
  .deposito-hero,
  .ajustes-hero,
  .proximamente-card,
  .notificaciones-hero,
  .products-header,
  .query-card,
  .result-panel,
  .signal-panel,
  .tickets-list-panel,
  .tickets-chat-panel,
  .tickets-create-card,
  .panel-section,
  .consultas-day,
  .denuncias-query-card,
  .denuncias-info-card,
  .sbs-result-panel,
  .seguros-result-panel,
  .deposito-card,
  .ajustes-card,
  .notificaciones-panel-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .reniec-console,
  .reniec-output,
  .denuncias-console,
  .denuncias-result-layout,
  .sbs-hero,
  .sbs-result-grid,
  .sbs-detail-grid,
  .seguros-hero,
  .seguros-result-grid,
  .seguros-data-grid,
  .tickets-board,
  .panel-hero,
  .panel-stats,
  .panel-stats-grid,
  .panel-user-list,
  .panel-audit-grid,
  .consultas-counters,
  .deposito-plans,
  .deposito-vendors,
  .deposito-layout,
  .deposito-grid,
  .ajustes-grid,
  .proximamente-card,
  .notificaciones-list-stats,
  .notificaciones-overview,
  .notificaciones-layout,
  .products-grid,
  .field-grid,
  .identity-grid,
  .tickets-stats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .reniec-orbit,
  .denuncias-orbit,
  .proximamente-orbit,
  .panel-orbit,
  .sbs-orbit,
  .seguros-orbit {
    display: none !important;
  }

  h1,
  .reniec-hero h1,
  .telefonos-hero h1,
  .denuncias-hero h1,
  .tickets-hero h1,
  .panel-hero h1,
  .proximamente-card h1,
  .deposito-hero h1,
  .ajustes-hero h1,
  .sbs-hero h1,
  .seguros-hero h1,
  .notificaciones-hero h1 {
    font-size: clamp(27px, 9vw, 42px) !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    overflow-wrap: anywhere !important;
  }

  .reniec-hero p,
  .telefonos-hero p,
  .denuncias-hero p,
  .tickets-hero p,
  .panel-hero p,
  .proximamente-card p,
  .deposito-hero p,
  .ajustes-hero p,
  .sbs-hero p,
  .seguros-hero p,
  .notificaciones-hero p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .reniec-table-wrap,
  .sbs-table-wrap,
  .seguros-table-wrap,
  .denuncias-table-wrap,
  .consultas-table-wrap,
  .panel-table-wrap,
  .table-scroll,
  .table-wrapper,
  .reniec-results-table-wrap,
  .telefonos-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .reniec-table-wrap table,
  .sbs-table-wrap table,
  .seguros-table-wrap table,
  .denuncias-table-wrap table,
  .consultas-table-wrap table,
  .panel-table-wrap table,
  .table-scroll table,
  .table-wrapper table,
  .reniec-results-table-wrap table,
  .telefonos-table-wrap table {
    min-width: 680px !important;
  }

  .tickets-list,
  .panel-users-list,
  .panel-consultas-list,
  .consultas-list,
  .notificaciones-page-list,
  .dd-notifications-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .ticket-message,
  .ticket-message.is-admin,
  .ticket-message.is-user {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 640px) {
  .pr-main,
  .dashboard-content,
  .reniec-main,
  .telefonos-main,
  .sbs-main,
  .denuncias-main,
  .consultas-main,
  .panel-main,
  .seguros-main,
  .tickets-main,
  .deposito-main,
  .ajustes-main,
  .proximamente-main,
  .notificaciones-main,
  .productos-main,
  .products-main {
    padding: calc(66px + env(safe-area-inset-top)) 9px 14px !important;
  }

  .input-launcher,
  .form-bottom,
  .tickets-reply,
  .tickets-chat-actions,
  .tickets-create-actions,
  .panel-user-actions,
  .deposito-actions,
  .ajustes-actions,
  .sbs-form-row,
  .seguros-form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .input-launcher button,
  .form-bottom button,
  .tickets-new-button,
  .tickets-list-head a,
  .tickets-create-card button,
  .tickets-reply button,
  .tickets-chat-actions button,
  .panel-user-actions button,
  .deposito-actions a,
  .deposito-actions button,
  .ajustes-actions button,
  .sbs-form-row button,
  .seguros-form-row button {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ===== Botón móvil y sidebar offcanvas ===== */
@media (max-width: 930px) {
  .dd-mobile-menu-toggle {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    z-index: 10050 !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 30% 15%, rgba(40, 242, 195, 0.20), transparent 34%),
      rgba(5, 10, 15, 0.92) !important;
    border: 1px solid rgba(40, 242, 195, 0.42) !important;
    border-radius: 15px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 22px rgba(40, 242, 195, 0.10) !important;
    cursor: pointer !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .dd-mobile-menu-toggle .dd-mobile-menu-icon {
    width: 28px !important;
    height: 18px !important;
    position: relative !important;
    display: block !important;
  }

  .dd-mobile-menu-toggle .dd-mobile-menu-icon::before,
  .dd-mobile-menu-toggle .dd-mobile-menu-icon::after,
  .dd-mobile-menu-toggle .dd-mobile-menu-bar {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 28px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 0 10px rgba(40, 242, 195, 0.35) !important;
    transition: transform 160ms ease, opacity 160ms ease, top 160ms ease !important;
  }

  .dd-mobile-menu-toggle .dd-mobile-menu-icon::before { top: 0 !important; }
  .dd-mobile-menu-toggle .dd-mobile-menu-bar { top: 8px !important; }
  .dd-mobile-menu-toggle .dd-mobile-menu-icon::after { top: 16px !important; }

  .dd-mobile-menu-toggle .dd-mobile-menu-label {
    display: block !important;
    margin-top: -4px !important;
    color: #fff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-toggle .dd-mobile-menu-icon::before {
    top: 8px !important;
    transform: rotate(45deg) !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-toggle .dd-mobile-menu-bar {
    opacity: 0 !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-toggle .dd-mobile-menu-icon::after {
    top: 8px !important;
    transform: rotate(-45deg) !important;
  }

  .dd-mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: none !important;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-backdrop {
    display: block !important;
  }

  .dd-sidebar.pr-sidebar,
  .dd-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    z-index: 10030 !important;
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(78px + env(safe-area-inset-top)) 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(-108%) !important;
    transition: transform 210ms ease !important;
    pointer-events: auto !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: 0 !important;
    box-shadow: 24px 0 80px rgba(0,0,0,0.45) !important;
  }

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

  .dd-sidebar .dd-brand,
  .dd-sidebar .dd-profile-menu,
  .dd-sidebar .dd-sidebar-menu,
  .dd-sidebar .dd-sidebar-boost {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .dd-sidebar .dd-sidebar-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .dd-sidebar .dd-sidebar-menu > a,
  .dd-sidebar .dd-sidebar-submenu-button,
  .dd-sidebar .dd-sidebar-submenu-list a {
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
  }

  .dd-sidebar .dd-sidebar-submenu {
    position: relative !important;
    width: 100% !important;
    display: grid !important;
  }

  .dd-sidebar .dd-sidebar-submenu-list {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 4px 0 0 18px !important;
    padding: 0 0 0 12px !important;
    display: grid !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dd-sidebar .dd-sidebar-submenu-list[hidden] {
    display: none !important;
  }

  .dd-sidebar .dd-profile-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 8px !important;
    z-index: 1 !important;
  }
}

/* ==========================================================
   DATADOX MOBILE MENU CLICK FIX - SIN BLUR / SIN BLOQUEO
   Este bloque va al FINAL del responsive.
   - El overlay ya no se pone encima del menú.
   - El sidebar queda nítido y clickeable.
   - El cierre fuera del menú lo maneja datadox-sidebar.js.
   ========================================================== */
@media (max-width: 930px) {
  .dd-mobile-menu-backdrop,
  body.dd-mobile-menu-open .dd-mobile-menu-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
  }

  body.dd-mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10010 !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.46) !important;
  }

  body.dd-mobile-menu-open .dd-sidebar.pr-sidebar,
  body.dd-mobile-menu-open .dd-sidebar {
    z-index: 10040 !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .dd-sidebar.pr-sidebar,
  .dd-sidebar {
    isolation: isolate !important;
    will-change: transform !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .dd-sidebar *,
  .dd-sidebar a,
  .dd-sidebar button,
  .dd-sidebar summary {
    pointer-events: auto !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-toggle {
    z-index: 10060 !important;
  }

  body.dd-mobile-menu-open .pr-main,
  body.dd-mobile-menu-open .dashboard-content,
  body.dd-mobile-menu-open .reniec-main,
  body.dd-mobile-menu-open .telefonos-main,
  body.dd-mobile-menu-open .sbs-main,
  body.dd-mobile-menu-open .denuncias-main,
  body.dd-mobile-menu-open .consultas-main,
  body.dd-mobile-menu-open .panel-main,
  body.dd-mobile-menu-open .seguros-main,
  body.dd-mobile-menu-open .tickets-main,
  body.dd-mobile-menu-open .deposito-main,
  body.dd-mobile-menu-open .ajustes-main,
  body.dd-mobile-menu-open .proximamente-main,
  body.dd-mobile-menu-open .notificaciones-main {
    pointer-events: none !important;
  }
}

/* ==========================================================
   DATADOX MOBILE MENU FINAL CLEAN PATCH
   Corrige menú borroso/transparente y clicks bloqueados en celular.
   Mantiene el menú nítido y el overlay solo sobre el contenido.
   ========================================================== */
@media (max-width: 930px) {
  /* No usar ::before como overlay porque choca con los fondos de las páginas */
  body.dd-mobile-menu-open::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Overlay solo fuera del menú: no tapa ni desenfoca el sidebar */
  .dd-mobile-menu-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: min(86vw, 320px) !important;
    z-index: 10020 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-backdrop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Sidebar sólido y nítido en móvil, incluso en tema claro/sistema */
  body.dd-mobile-menu-open .dd-sidebar.pr-sidebar,
  body.dd-mobile-menu-open .dd-sidebar,
  .dd-sidebar.pr-sidebar,
  .dd-sidebar {
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background:
      radial-gradient(circle at 86% 10%, rgba(239, 68, 68, 0.20), transparent 32%),
      radial-gradient(circle at 72% 84%, rgba(147, 51, 234, 0.28), transparent 38%),
      linear-gradient(180deg, #170818 0%, #0d0714 48%, #07040d 100%) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dd-sidebar.pr-sidebar,
  .dd-sidebar {
    z-index: 10040 !important;
    transform: translate3d(-108%, 0, 0) !important;
    box-shadow: 26px 0 80px rgba(0, 0, 0, 0.58) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    touch-action: pan-y !important;
  }

  body.dd-mobile-menu-open .dd-sidebar.pr-sidebar,
  body.dd-mobile-menu-open .dd-sidebar {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body.dd-mobile-menu-open .dd-sidebar *,
  body.dd-mobile-menu-open .dd-sidebar a,
  body.dd-mobile-menu-open .dd-sidebar button,
  body.dd-mobile-menu-open .dd-sidebar summary,
  body.dd-mobile-menu-open .dd-sidebar [role=button] {
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* Que los textos del menú no queden apagados en claro/sistema */
  .dd-sidebar,
  .dd-sidebar .dd-brand,
  .dd-sidebar .dd-sidebar-menu > a,
  .dd-sidebar .dd-sidebar-submenu-button,
  .dd-sidebar .dd-sidebar-submenu-list a,
  .dd-sidebar .dd-profile-name,
  .dd-sidebar .dd-profile-role {
    color: #fff !important;
  }

  .dd-sidebar .dd-sidebar-menu > a:not(.active),
  .dd-sidebar .dd-sidebar-submenu-button,
  .dd-sidebar .dd-sidebar-submenu-list a {
    background: rgba(255, 255, 255, 0.035) !important;
  }

  .dd-sidebar .dd-sidebar-menu > a.active,
  .dd-sidebar .dd-sidebar-menu > a:hover,
  .dd-sidebar .dd-sidebar-submenu-button:hover,
  .dd-sidebar .dd-sidebar-submenu.is-open > .dd-sidebar-submenu-button {
    background: rgba(255, 255, 255, 0.105) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  .dd-sidebar .dd-menu-icon,
  .dd-sidebar .dd-sidebar-icon,
  .dd-sidebar .menu-icon {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.10) !important;
  }

  /* El contenido queda quieto detrás del overlay, pero no empuja ni crea hueco */
  body.dd-mobile-menu-open .pr-main,
  body.dd-mobile-menu-open .dashboard-content,
  body.dd-mobile-menu-open .reniec-main,
  body.dd-mobile-menu-open .telefonos-main,
  body.dd-mobile-menu-open .sbs-main,
  body.dd-mobile-menu-open .denuncias-main,
  body.dd-mobile-menu-open .consultas-main,
  body.dd-mobile-menu-open .panel-main,
  body.dd-mobile-menu-open .seguros-main,
  body.dd-mobile-menu-open .tickets-main,
  body.dd-mobile-menu-open .deposito-main,
  body.dd-mobile-menu-open .ajustes-main,
  body.dd-mobile-menu-open .proximamente-main,
  body.dd-mobile-menu-open .notificaciones-main {
    pointer-events: none !important;
  }

  body.dd-mobile-menu-open .dd-mobile-menu-toggle {
    z-index: 10070 !important;
  }
}