/* ISHITO · Encabezado, alertas y ajustes responsive (15/10/2026). Alcance: header.app-topbar.ix-tb */
header.app-topbar.ix-tb { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; height: 64px !important; padding: 0 24px !important; background: #FFFFFF !important; border-bottom: 1px solid #E1E7F0 !important; box-shadow: 0 1px 3px rgba(10,42,94,.06) !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
header.app-topbar.ix-tb .header-left { display: flex !important; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; height: 64px; }
header.app-topbar.ix-tb .ix-tb-titulo { min-width: 0; line-height: 1.2; }
header.app-topbar.ix-tb .ix-tb-titulo b { display: block; font-size: 17px; font-weight: 800; color: #0A2A5E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.app-topbar.ix-tb .ix-tb-titulo small { display: block; font-size: 12px; font-weight: 600; color: #7A879C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.app-topbar.ix-tb .header-right { display: flex !important; align-items: center !important; flex: 0 0 auto; height: 64px !important; margin: 0 !important; position: static !important; }
header.app-topbar.ix-tb .user-menu { display: flex !important; align-items: center !important; gap: 10px; height: 64px !important; position: relative; flex-wrap: nowrap !important; }
header.app-topbar.ix-tb .notification-wrapper { position: relative; margin: 0 !important; display: flex; align-items: center; }
header.app-topbar.ix-tb .notification-bell, header.app-topbar.ix-tb #notificationCount { display: none !important; }

/* Campana */
header.app-topbar.ix-tb .ix-tb-bell { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid #E1E7F0; background: #F6F9FE; color: #0A2A5E; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; transition: background .15s, border-color .15s; padding: 0; }
header.app-topbar.ix-tb .ix-tb-bell:hover, header.app-topbar.ix-tb .ix-tb-bell[aria-expanded="true"] { background: #EAF1FC; border-color: #9DB4DA; }
header.app-topbar.ix-tb .ix-tb-bell.activa i { color: #F58220; }
header.app-topbar.ix-tb .ix-tb-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #B42318; color: #FFFFFF; font-size: 11px; font-weight: 800; line-height: 16px; border: 2px solid #FFFFFF; text-align: center; }
header.app-topbar.ix-tb .ix-tb-badge[hidden] { display: none; }

/* Usuario */
header.app-topbar.ix-tb .user-profile-card { display: flex !important; align-items: center !important; gap: 10px; height: auto !important; padding: 4px 10px 4px 4px; border-radius: 12px; cursor: pointer; transition: background .15s; }
header.app-topbar.ix-tb .user-profile-card:hover { background: #F3F6FB; }
header.app-topbar.ix-tb .user-info-text { display: block !important; order: 2; text-align: left !important; margin: 0 !important; line-height: 1.2; max-width: 170px; }
header.app-topbar.ix-tb .user-info-text #user-name { display: block; font-size: 14px; font-weight: 800; color: #0A2A5E !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.app-topbar.ix-tb .user-info-text #user-role { display: block; font-size: 12px; color: #7A879C !important; }
header.app-topbar.ix-tb .user-avatar-container { order: 1; position: relative; flex: none; }
header.app-topbar.ix-tb .user-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #0A2A5E !important; color: #FFFFFF !important; display: flex !important; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin: 0 !important; }
header.app-topbar.ix-tb .status-indicator { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #16A34A; border: 2px solid #FFFFFF; }
header.app-topbar.ix-tb .user-profile-card > .fa-chevron-down { order: 3; margin: 0 !important; color: #7A879C !important; font-size: 11px; }
header.app-topbar.ix-tb .user-dropdown-menu { top: calc(100% - 6px) !important; right: 0 !important; left: auto !important; min-width: 220px; border-radius: 12px !important; }

/* Panel de alertas */
header.app-topbar.ix-tb .ix-tb-panel { position: absolute; top: calc(100% + 10px); right: -8px; width: 380px; max-width: calc(100vw - 24px); background: #FFFFFF; border: 1px solid #E1E7F0; border-radius: 14px; box-shadow: 0 18px 44px rgba(10,42,94,.20); z-index: 3200; overflow: hidden; }
header.app-topbar.ix-tb .ix-tb-panel[hidden] { display: none; }
header.app-topbar.ix-tb .ix-tb-ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: #0A2A5E; color: #FFFFFF; }
header.app-topbar.ix-tb .ix-tb-ph b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #FFFFFF; }
header.app-topbar.ix-tb .ix-tb-ph b i { color: #F58220; }
header.app-topbar.ix-tb .ix-tb-ph small { display: block; font-size: 12px; color: #C7D4EE; margin-top: 2px; }
header.app-topbar.ix-tb .ix-tb-ref { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #FFFFFF; cursor: pointer; }
header.app-topbar.ix-tb .ix-tb-lista { max-height: min(70vh, 480px); overflow-y: auto; }
header.app-topbar.ix-tb .ix-tb-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid #EEF2F8; background: #FFFFFF; text-align: left; cursor: pointer; font: inherit; color: #15233D; }
header.app-topbar.ix-tb .ix-tb-item:last-child { border-bottom: 0; }
header.app-topbar.ix-tb .ix-tb-item:hover { background: #F6F9FE; }
header.app-topbar.ix-tb .ix-tb-item .ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
header.app-topbar.ix-tb .ix-tb-item.azul .ic { background: #E3ECFA; color: #0E4AA4; }
header.app-topbar.ix-tb .ix-tb-item.verde .ic { background: #E7F4EC; color: #146C43; }
header.app-topbar.ix-tb .ix-tb-item.rojo .ic { background: #FDECEA; color: #B42318; }
header.app-topbar.ix-tb .ix-tb-item.naranja .ic { background: #FFF1E3; color: #C25E00; }
header.app-topbar.ix-tb .ix-tb-item.gris .ic { background: #EEF2F8; color: #5B6B86; }
header.app-topbar.ix-tb .ix-tb-item .tx { flex: 1; min-width: 0; }
header.app-topbar.ix-tb .ix-tb-item .tx b { display: block; font-size: 14px; font-weight: 700; color: #0A2A5E; }
header.app-topbar.ix-tb .ix-tb-item .tx small { display: block; font-size: 12px; color: #5B6B86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.app-topbar.ix-tb .ix-tb-item .val { font-weight: 800; font-size: 15px; color: #0A2A5E; white-space: nowrap; }
header.app-topbar.ix-tb .ix-tb-item.urg .val { color: #B42318; }
header.app-topbar.ix-tb .ix-tb-item.naranja .val { color: #C25E00; }
header.app-topbar.ix-tb .ix-tb-item .flecha { color: #A8B4C7; font-size: 11px; }
header.app-topbar.ix-tb .ix-tb-vacio { padding: 22px 16px; text-align: center; color: #5B6B86; font-size: 14px; }
header.app-topbar.ix-tb .ix-tb-vacio.ok { color: #146C43; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  header.app-topbar.ix-tb { left: 0 !important; width: 100% !important; height: 58px !important; padding: 0 12px !important; }
  header.app-topbar.ix-tb .header-left, header.app-topbar.ix-tb .header-right, header.app-topbar.ix-tb .user-menu { height: 58px !important; }
  header.app-topbar.ix-tb #mobileMenuToggleBtn { display: inline-flex !important; visibility: visible !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #E1E7F0; background: #FFFFFF; color: #0A2A5E; font-size: 18px; flex: none; padding: 0; margin: 0; }
  header.app-topbar.ix-tb .sidebar-toggle { display: none !important; }
  header.app-topbar.ix-tb .ix-tb-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; }
  #mobileCloseBtn.mobile-close-btn { position: absolute !important; top: 14px !important; right: 12px !important; left: auto !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,.25) !important; background: rgba(255,255,255,.1) !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 16px; padding: 0 !important; z-index: 5; }
}
@media (max-width: 767.98px) {
  header.app-topbar.ix-tb .user-info-text, header.app-topbar.ix-tb .user-profile-card > .fa-chevron-down { display: none !important; }
  header.app-topbar.ix-tb .user-profile-card { padding: 2px; }
  header.app-topbar.ix-tb .ix-tb-titulo b { font-size: 15px; }
  header.app-topbar.ix-tb .ix-tb-titulo small { display: none; }
  body .main-content { padding: 8px 10px 24px !important; }
  body .dashboard-container, body #dashboardContent, body .page-container { padding-left: 0 !important; padding-right: 0 !important; }
  body .ix-dash-hero { padding: 20px 18px !important; border-radius: 16px !important; }
  body .ix-rv, body .ix-rr { padding: 12px 2px !important; }
  body .ix-rv .ix-rv-head, body .ix-rr .ix-rr-head { padding: 18px 16px !important; }
  body .ix-rv .ix-rv-head h2, body .ix-rr .ix-rr-head h2 { font-size: 20px !important; }
  body .ix-rv .ix-rv-head p, body .ix-rr .ix-rr-head p { margin-left: 0 !important; }
}

/* Pagos a casa matriz en celular: filtros a todo el ancho y procesos como tarjetas */
@media (max-width: 767.98px) {
  #ixPagosCM .ix-rv-vistas { display: flex; gap: 8px; }
  #ixPagosCM .ix-rv-vistas > * { flex: 1 1 0; justify-content: center; font-size: 13px !important; padding-left: 8px !important; padding-right: 8px !important; }
  #ixPagosCM .ix-rv-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
  #ixPagosCM .ix-rv-filtros > .ix-rv-buscar, #ixPagosCM .ix-rv-filtros > select, #ixPagosCM .ix-rv-filtros > button { flex: 1 1 100%; width: 100%; max-width: none; }
  #ixPagosCM .ix-rv-filtros > .ix-rv-fe { flex: 1 1 calc(50% - 4px); min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; }
  #ixPagosCM .ix-rv-filtros > .ix-rv-fe input { flex: 1; min-width: 0; width: 100%; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) { min-width: 0 !important; width: 100%; }
  #ixPagosCM .ix-rv-scroll:has(#ixPgTodos) { overflow: visible; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) thead { display: none; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid #E1E7F0; border-radius: 12px; background: #FFFFFF; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; white-space: normal !important; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(1) { order: 1; flex: 0 0 auto; padding-top: 2px !important; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(3) { order: 2; flex: 1 1 calc(100% - 40px); }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(2) { order: 3; flex: 1 1 40%; font-size: 13px; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(4) { order: 4; flex: 1 1 40%; font-size: 13px; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(5) { order: 5; flex: 1 1 100%; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(6), #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(7), #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(8) { order: 6; flex: 1 1 28%; padding: 8px !important; background: #F6F9FE; border-radius: 8px; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(6)::before { content: 'Costo'; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(7)::before { content: 'Pagado'; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(8)::before { content: 'Saldo'; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(6)::before, #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(7)::before, #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(8)::before { display: block; font-size: 11px; font-weight: 700; color: #7A879C; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(9) { order: 7; flex: 1 1 auto; align-self: center; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:nth-child(10) { order: 8; flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
  #ixPagosCM .ix-rv-tabla:has(#ixPgTodos) tbody td:empty { display: none; }
  .ix-rv .ix-rv-kpis { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .ix-rv .ix-rv-kpi { min-width: 0; padding: 14px !important; }
  .ix-rv .ix-rv-kpi b { font-size: 20px !important; }
  #ixPagosCM .ix-rv-casas { grid-template-columns: 1fr !important; }
  #ixRvModal .ix-rv-mbox { width: calc(100vw - 20px) !important; max-height: calc(100vh - 40px); overflow-y: auto; }
  #ixRvModal .ix-rv-mgrid { grid-template-columns: 1fr !important; }
}