:root {
  --bg-app: #eef2f6;
  --sidebar-bg: linear-gradient(180deg, #2a4a6e 0%, #1e3a5f 50%, #1a3352 100%);
  --sidebar-solid: #1e3a5f;
  --sidebar-text: #fed7aa;
  --sidebar-text-muted: #fdba74;
  --sidebar-icon: #fb923c;
  --accent-blue: #1e4a7a;
  --accent-blue-dark: #153556;
  --accent-orange: #f97316;
  --accent-orange-bright: #fb923c;
  --accent-orange-soft: #fff7ed;
  --accent-green: #22c55e;
  --accent-green-soft: #ecfdf5;
  --accent-red: #ef4444;
  --accent-red-soft: #fef2f2;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --card-shadow: 0 4px 24px rgba(30, 58, 95, 0.08);
  --sidebar-width: 280px;
  --sidebar-collapsed: 78px;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-success: #22c55e;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;
}

body {
  background: var(--bg-app);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text-main);
}

/* ─── Login ─── */
.login-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #e8f4fc 0%, #f4f7f9 50%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-shell {
  display: flex;
  max-width: 900px;
  width: 100%;
  min-height: 480px;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 48px -16px rgba(30, 58, 95, 0.18);
  background: #fff;
}

.login-shell-clean {
  border: 1px solid #e8eef4;
}

.login-panel-form {
  flex: 1;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.login-panel-visual {
  flex: 1;
  position: relative;
  min-height: 320px;
  display: none;
  background: linear-gradient(145deg, #9fd0ef 0%, #5aa8d8 55%, #3d8cc4 100%);
}

.login-panel-visual-clean {
  display: none;
  align-items: center;
  justify-content: center;
}

.login-visual-content {
  text-align: center;
  color: #fff;
  padding: 2rem;
}

.login-visual-icon {
  font-size: 4.5rem;
  opacity: 0.9;
  margin-bottom: 1rem;
  display: block;
}

.login-visual-tagline {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.92;
}

.login-brand .login-logo-img {
  max-width: 72px;
  max-height: 72px;
}

.login-panel-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-visual-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(transparent, rgba(15, 39, 68, 0.75));
  color: #fff;
}

@media (min-width: 768px) {
  .login-panel-visual,
  .login-panel-visual-clean {
    display: flex;
    max-width: none;
    flex: 1 1 auto;
  }
}

.login-card-inner {
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}

.logo-drop {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--accent-green-soft), #e0f2fe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-drop 2.5s ease-in-out infinite;
  border: 2px solid rgba(74, 159, 217, 0.25);
}

.logo-drop i {
  font-size: 2.25rem;
  color: var(--accent-blue);
}

.login-logo-wrap {
  background: #fff;
  border: 2px solid rgba(74, 159, 217, 0.2);
  animation: none;
}

.login-logo-img {
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
}

.login-panel-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.login-visual-brand {
  position: relative;
  z-index: 2;
  max-width: 70%;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

@keyframes pulse-drop {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 159, 217, 0.3); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(74, 159, 217, 0); }
}

.input-group-icon .form-control {
  padding-left: 2.75rem;
  border-color: #e2e8f0;
}

.input-group-icon .form-control:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0.2rem rgba(74, 159, 217, 0.2);
}

.input-group-icon .input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  z-index: 5;
}


/* ─── Layout ─── */
.wrapper {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background-color: #1e3a5f !important;
  background-image: var(--sidebar-bg) !important;
  color: var(--sidebar-text);
  flex-shrink: 0;
  transition: width 0.25s ease, transform 0.25s ease;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1040;
  overflow: hidden;
  box-shadow: 4px 0 28px rgba(15, 33, 55, 0.45);
}

.sidebar-nav {
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 0.25rem 0 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .brand-text {
  display: none;
}

.sidebar-header {
  padding: 1.35rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: transparent;
}

.sidebar-header .brand-text {
  color: var(--accent-orange-bright);
  letter-spacing: 0.02em;
  font-size: 1.1rem !important;
  font-weight: 800;
}

.sidebar-brand-icon {
  width: 40px;
  height: 40px;
  background: rgba(249, 115, 22, 0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-orange-bright) !important;
  border: 1px solid rgba(251, 146, 60, 0.35);
}

.sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
  margin: 0.1rem 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}

.sidebar .nav-link i {
  font-size: 1.1rem;
  color: var(--sidebar-icon);
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.sidebar .nav-link:hover {
  background: rgba(249, 115, 22, 0.12);
  color: #fff;
}

.sidebar .nav-link:hover i {
  color: var(--accent-orange-bright);
}

.sidebar .nav-link.active {
  background: rgba(249, 115, 22, 0.22) !important;
  color: #fff !important;
  border-left-color: var(--accent-orange-bright) !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.2);
}

.sidebar .nav-link.active i {
  color: #fff !important;
}

.nav-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(251, 146, 60, 0.75);
  padding: 0 1.35rem 0.3rem;
  margin-top: 1.15rem;
  font-weight: 700;
}
.sidebar-nav > .nav-section-title:first-child {
  margin-top: 0.75rem;
}

.nav-section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent-orange-bright);
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  opacity: 0.9;
}

.nav-section-priority {
  color: var(--sidebar-text-muted) !important;
}

.nav-link-priority {
  background: rgba(249, 115, 22, 0.12) !important;
  border-left: 3px dashed var(--accent-orange-bright) !important;
  font-weight: 600;
  color: #fff !important;
  animation: caja-pulse 2s ease-in-out infinite;
}

.nav-link-priority i {
  color: var(--accent-orange-bright) !important;
}

.nav-link-priority:not(.active) {
  box-shadow: none;
}

@keyframes caja-pulse {
  0%, 100% { border-left-color: var(--accent-orange-bright); }
  50% { border-left-color: #fde68a; }
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  padding: 0.85rem !important;
}

.btn-sidebar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
  border-radius: 0.65rem;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  text-decoration: none;
}

.btn-sidebar-logout:hover {
  color: #fff !important;
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45);
  transform: translateY(-1px);
}

.sidebar.collapsed .btn-sidebar-logout {
  padding: 0.65rem 0.5rem;
}

.sidebar.collapsed .btn-sidebar-logout .sidebar-text {
  display: none;
}

.sidebar .submenu {
  padding-left: 0.25rem;
  margin-bottom: 0.15rem;
  background: transparent;
  border: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

.sidebar .submenu-link {
  padding-left: 2.1rem !important;
  font-size: 0.88rem;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  margin-left: 0.55rem;
  margin-right: 0.55rem;
  color: rgba(253, 186, 116, 0.92) !important;
}

.sidebar .sidebar-toggle {
  cursor: pointer;
  font-weight: 600;
  margin-top: 0.35rem;
  color: var(--sidebar-text);
}

.sidebar .sidebar-toggle .bi-chevron-down {
  transition: transform 0.2s ease;
  opacity: 0.7;
  color: #fff;
}

.sidebar .sidebar-toggle[aria-expanded="true"] {
  background: rgba(249, 115, 22, 0.12);
  color: #fff;
}

.sidebar .sidebar-toggle[aria-expanded="true"] i {
  color: var(--accent-orange-bright);
}

.sidebar .sidebar-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
  color: #fff;
  opacity: 0.9;
}

.sidebar .submenu .nav-link i {
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Modo colapsado: solo iconos centrados, sin submenús ni chevrons */
.sidebar.collapsed .submenu {
  display: none !important;
}
.sidebar.collapsed .sidebar-toggle .bi-chevron-down {
  display: none;
}
.sidebar.collapsed .nav-link {
  justify-content: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  gap: 0;
}
.sidebar.collapsed .nav-link i {
  font-size: 1.25rem;
}
.sidebar.collapsed .nav-section-title {
  padding: 0.4rem 0;
  text-align: center;
  min-height: 2px;
  font-size: 0;
}
.sidebar.collapsed .nav-section-title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: rgba(251, 146, 60, 0.45);
  border-radius: 2px;
  margin: 0;
}
.sidebar.collapsed .sidebar-header {
  padding: 1.15rem 0.4rem;
}

.layout-caja-minimal {
  background: var(--bg-app);
  min-height: 100vh;
}

.caja-gate-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.caja-gate-header {
  background: #fff;
  border-bottom: 1px solid #e8eef4;
  box-shadow: 0 1px 3px rgba(30, 58, 95, 0.06);
}

.caja-gate-body {
  flex: 1;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.25s ease;
  min-width: 0;
}

.sidebar.collapsed + .main-content {
  margin-left: var(--sidebar-collapsed);
}

.top-navbar {
  background: #fff;
  border-bottom: 1px solid #e8eef4;
  padding: 0.7rem 1.35rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 0 rgba(30, 58, 95, 0.04);
}

.page-body {
  padding: 1.5rem;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sidebar-solid);
  margin-bottom: 0.25rem;
}

.page-header .text-muted {
  color: var(--text-muted) !important;
}

/* Cards */
.card-app {
  border: none;
  border-radius: 0.75rem;
  box-shadow: var(--card-shadow);
  background: #fff;
}

.metric-card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: var(--card-shadow);
  border-left: 4px solid transparent;
  transition: transform 0.15s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
}

.metric-card.metric-green { border-left-color: var(--accent-green); }
.metric-card.metric-green .metric-value { color: var(--accent-green); }
.metric-card.metric-orange { border-left-color: var(--accent-orange); }
.metric-card.metric-orange .metric-value { color: var(--accent-orange); }
.metric-card.metric-blue { border-left-color: var(--accent-blue); }
.metric-card.metric-blue .metric-value { color: var(--accent-blue-dark); }
.metric-card.metric-red { border-left-color: var(--accent-red); }
.metric-card.metric-red .metric-value { color: var(--accent-red); }

.btn-accent {
  background: linear-gradient(135deg, var(--accent-orange), #ea580c);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.28);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #fff;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.38);
}

.btn-soft-green {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #fff;
}

.btn-soft-orange {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
}

.badge-caja-open {
  background: var(--accent-green) !important;
  color: #fff !important;
}

.badge-caja-closed {
  background: var(--accent-red) !important;
  color: #fff !important;
}

.caja-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
}
.caja-chip:hover { color: inherit; }
.caja-chip.is-open {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.caja-chip.is-closed {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}
.caja-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}
.caja-chip.is-open .caja-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: caja-dot-blink 1.4s ease-in-out infinite;
}
.caja-chip.is-closed .caja-dot { background: #ef4444; }
@keyframes caja-dot-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); opacity: 0.8; }
}

.scan-input-lg {
  font-size: 1.35rem;
  padding: 0.85rem 1rem;
  font-family: ui-monospace, monospace;
  border: 2px solid #e2e8f0;
}

.scan-input-lg:focus {
  border-color: var(--accent-blue);
}

.total-pago {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent-blue-dark);
}

.caja-bloqueo {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  background: #f8fafc;
}

.nav-pills .nav-link.active {
  background: var(--accent-blue);
}

.progress-bar {
  background: linear-gradient(90deg, var(--accent-blue), #7dd3fc);
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.show-mobile {
    transform: translateX(0);
  }
  .main-content,
  .sidebar.collapsed + .main-content {
    margin-left: 0 !important;
  }
}

/* Dashboard enriquecido */
.metric-card-rich {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
}

.metric-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.metric-icon-green { background: var(--accent-green-soft); color: var(--accent-green); }
.metric-icon-orange { background: var(--accent-orange-soft); color: var(--accent-orange); }
.metric-icon-blue { background: #e0f2fe; color: var(--accent-blue-dark); }
.metric-icon-red { background: var(--accent-red-soft); color: var(--accent-red); }

.dash-status-pill {
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.dash-status-open {
  background: var(--accent-green);
  color: #fff;
}

.dash-status-closed {
  background: var(--accent-red);
  color: #fff;
}

.table-dashboard thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}

.dash-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e8eef4;
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  height: 100%;
}

.dash-flow-step:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 4px 16px rgba(74, 159, 217, 0.15);
  color: inherit;
}

.dash-flow-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.dash-progress .progress-bar {
  border-radius: 4px;
}

.page-dashboard .page-body {
  background: linear-gradient(135deg, #faf6ef 0%, #f3f7f4 42%, #eef6f8 100%);
  min-height: calc(100vh - 64px);
}
.page-dashboard .card-app {
  border-radius: 16px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.dashboard-wrapper { max-width: 1280px; }

.dash-navbar-resumen {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.dash-resumen-title {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  flex-shrink: 0;
}
.dash-resumen-title span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #0f172a;
}
.dash-resumen-title small {
  font-size: 0.65rem;
  color: #64748b;
  letter-spacing: 0;
  font-weight: 500;
  white-space: nowrap;
}
.dash-mini-bulbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.32rem;
}
.mini-bulb {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.22rem 0.5rem 0.22rem 0.36rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.mini-bulb i { font-size: 0.92rem; }
.mini-bulb b { font-weight: 700; min-width: 0.7rem; }
.mini-bulb:hover { background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.mini-bulb.is-open { background: #fff; box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.18); }
.mini-bulb-yellow i { color: #ca8a04; }
.mini-bulb-red i { color: #dc2626; }
.mini-bulb-gold i { color: #d97706; }
.mini-bulb-orange i { color: #ea580c; }
.mini-bulb-gray i { color: #64748b; }
.mini-bulb-green i { color: #16a34a; }
.mini-bulb.bulb-encendido i {
  animation: bulb-blink-amber 1.15s ease-in-out infinite;
}
.mini-bulb-red.bulb-encendido i { animation-name: bulb-blink-red; }
.mini-bulb-orange.bulb-encendido i { animation-name: bulb-blink-orange; }
.mini-bulb-green.bulb-encendido i { animation-name: bulb-blink; }
.dash-pill-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
}
.dash-pill-refresh:hover { background: #fff; color: #0f172a; }

.dash-alert-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
  margin-bottom: 1rem;
  overflow: hidden;
}
.dash-alert-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eef2f7;
}
.dash-alert-panel-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.dash-alert-search { min-width: 220px; max-width: 320px; }

.dashboard-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.quick-link i { font-size: 0.95rem; }
.quick-link:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.ql-green { background: linear-gradient(180deg, #10b981, #059669); }
.ql-blue { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.ql-orange { background: linear-gradient(180deg, #f97316, #ea580c); }
.ql-red { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.ql-coral { background: linear-gradient(180deg, #f43f5e, #e11d48); }
.ql-teal { background: linear-gradient(180deg, #14b8a6, #0d9488); }
.ql-indigo { background: linear-gradient(180deg, #6366f1, #4f46e5); }
.ql-forest { background: linear-gradient(180deg, #0f766e, #115e59); }
.ql-purple { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }

.dash-alert-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fef9c3;
  color: #92400e;
  border-radius: 14px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.dash-alert-banner i { font-size: 1.05rem; }
.dash-alert-link {
  margin-left: auto;
  color: #92400e;
  font-weight: 800;
  text-decoration: underline;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 0.7rem 0.9rem 0.65rem;
  min-height: 0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
.kpi-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 0.15rem;
  display: block;
}
.kpi-value {
  display: block;
  align-self: flex-start;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-align: left;
}
.kpi-hint {
  margin-top: 0.2rem;
  padding-top: 0;
  font-size: 0.7rem;
  color: #64748b;
}
.kpi-day {
  font-size: 0.78rem;
  color: #475569;
  text-align: left;
}
.kpi-day .d-flex { gap: 0.25rem; }
.kpi-green { color: #10b981; }
.kpi-blue { color: #0ea5e9; }
.kpi-orange { color: #f59e0b; }
.dash-chart-body { padding-top: 0.35rem; }
.dash-chart-box {
  height: 224px;
  position: relative;
}
.dash-chart-box-wide { height: 240px; }
.dash-chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.page-dashboard .top-navbar { padding-right: 1.5rem; }
@media (max-width: 1199.98px) {
  .dash-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: 1.2rem; }
  .dash-alert-search { min-width: 160px; }
}
@media (max-width: 575.98px) {
  .dash-kpi-grid { grid-template-columns: 1fr; }
}

/* Tarjetas métricas con acento de color superior */
.metric-card-rich {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  border: 1px solid #eef2f7;
}
.metric-card-rich .metric-value {
  font-size: 1.55rem;
  font-weight: 800;
}
.metric-icon-green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
.metric-icon-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; }
.metric-icon-blue { background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #0369a1; }
.metric-icon-red { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }

.dash-kpi-secondary .metric-value {
  font-size: 1.65rem;
}

/* Tarjetas de datos: tono suave, misma altura, alineadas */
.dash-hero-grid .col-md-6,
#dashSemaforo .col-md-6,
.dash-kpi-secondary .col-md-4 {
  display: flex;
}
.dash-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 118px;
  padding: 0.9rem 1rem 0.85rem 1.05rem;
  border-radius: 0.9rem;
  color: #0f2744;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left-width: 4px;
  box-shadow: 0 4px 14px rgba(15, 39, 68, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 39, 68, 0.1);
  color: #0f2744;
}
.dash-hero-icon {
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 1;
  line-height: 1;
}
.dash-hero-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.15rem;
}
.dash-hero-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0f2744;
}
.dash-hero-sub {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.3;
  max-width: calc(100% - 2.4rem);
}
.dash-hero-compact {
  height: 110px;
  padding: 0.8rem 0.95rem;
}
.dash-hero-compact .dash-hero-value { font-size: 1.25rem; }
.dash-hero-day {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #475569;
}
.dash-hero-day .d-flex { gap: 0.35rem; }
.dash-hero-green { background: #f0fdf4; border-left-color: #16a34a; }
.dash-hero-green .dash-hero-value { color: #15803d; }
.dash-hero-green .dash-hero-icon { background: #dcfce7; color: #16a34a; }
.dash-hero-orange { background: #fff7ed; border-left-color: #ea580c; }
.dash-hero-orange .dash-hero-value { color: #c2410c; }
.dash-hero-orange .dash-hero-icon { background: #ffedd5; color: #ea580c; }
.dash-hero-blue { background: #f0f9ff; border-left-color: #0284c7; }
.dash-hero-blue .dash-hero-value { color: #0369a1; }
.dash-hero-blue .dash-hero-icon { background: #e0f2fe; color: #0284c7; }
.dash-hero-red { background: #fef2f2; border-left-color: #dc2626; }
.dash-hero-red .dash-hero-value { color: #b91c1c; }
.dash-hero-red .dash-hero-icon { background: #fee2e2; color: #dc2626; }
.dash-hero-teal { background: #f0fdfa; border-left-color: #0d9488; }
.dash-hero-teal .dash-hero-value { color: #0f766e; }
.dash-hero-teal .dash-hero-icon { background: #ccfbf1; color: #0d9488; }
.dash-hero-gold { background: #fffbeb; border-left-color: #d97706; }
.dash-hero-gold .dash-hero-value { color: #b45309; }
.dash-hero-gold .dash-hero-icon { background: #fef3c7; color: #d97706; }
.dash-hero-rose { background: #fff1f2; border-left-color: #e11d48; }
.dash-hero-rose .dash-hero-value { color: #be123c; }
.dash-hero-rose .dash-hero-icon { background: #ffe4e6; color: #e11d48; }
.dash-hero-slate { background: #f8fafc; border-left-color: #64748b; }
.dash-hero-slate .dash-hero-value { color: #334155; }
.dash-hero-slate .dash-hero-icon { background: #e2e8f0; color: #475569; }
.dash-hero-alert {
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.18), 0 4px 14px rgba(15, 39, 68, 0.06);
}
@media (max-width: 575.98px) {
  .dash-hero-card,
  .dash-hero-compact { height: auto; min-height: 104px; }
  .dash-hero-value { font-size: 1.2rem; }
}

.dash-lecturas-progress {
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
}

.dash-lecturas-progress .progress-bar {
  border-radius: 999px;
}

/* ─── Bombillos de alerta por estado de cliente ─── */
.alert-bulbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}

.alert-bulb {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left-width: 5px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.alert-bulb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(30, 58, 95, 0.14);
  color: inherit;
}

.bulb-light {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.bulb-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bulb-value {
  font-size: 1.5rem;
  font-weight: 800;
}

.bulb-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
}

.bulb-green { border-left-color: #22c55e; }
.bulb-green .bulb-light { background: #dcfce7; color: #15803d; }
.bulb-green .bulb-value { color: #15803d; }

.bulb-yellow { border-left-color: #f59e0b; }
.bulb-yellow .bulb-light { background: #fef3c7; color: #b45309; }
.bulb-yellow .bulb-value { color: #b45309; }

.bulb-gold { border-left-color: #eab308; }
.bulb-gold .bulb-light { background: #fef9c3; color: #a16207; }
.bulb-gold .bulb-value { color: #a16207; }

.bulb-orange { border-left-color: #ea580c; }
.bulb-orange .bulb-light { background: #ffedd5; color: #c2410c; }
.bulb-orange .bulb-value { color: #c2410c; }

.bulb-red { border-left-color: #ef4444; }
.bulb-red .bulb-light { background: #fee2e2; color: #b91c1c; }
.bulb-red .bulb-value { color: #b91c1c; }

.bulb-gray { border-left-color: #64748b; }
.bulb-gray .bulb-light { background: #e2e8f0; color: #475569; }
.bulb-gray .bulb-value { color: #475569; }

.bulb-blue { border-left-color: var(--sidebar-solid); }
.bulb-blue .bulb-light { background: #e0f2fe; color: #0369a1; }
.bulb-blue .bulb-value { color: var(--sidebar-solid); }

.alert-bulbs-sm {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
}

.alert-bulbs-sm .alert-bulb {
  padding: 0.65rem 0.85rem;
  gap: 0.65rem;
}

.alert-bulbs-sm .bulb-light {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.alert-bulbs-sm .bulb-value {
  font-size: 1.2rem;
}

.alert-bulbs-sm .bulb-label {
  font-size: 0.66rem;
}

/* El bombillo parpadea solo cuando hay algo que atender */
.alert-bulb.bulb-encendido .bulb-light {
  animation: bulb-blink 1.15s ease-in-out infinite;
}
.alert-bulb.bulb-encendido.bulb-yellow .bulb-light,
.alert-bulb.bulb-encendido.bulb-gold .bulb-light { animation-name: bulb-blink-amber; }
.alert-bulb.bulb-encendido.bulb-orange .bulb-light { animation-name: bulb-blink-orange; }
.alert-bulb.bulb-encendido.bulb-red .bulb-light { animation-name: bulb-blink-red; }

@keyframes bulb-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); filter: brightness(1); }
  50% { box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.35); filter: brightness(1.25); }
}
@keyframes bulb-blink-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); filter: brightness(1); }
  50% { box-shadow: 0 0 14px 5px rgba(245, 158, 11, 0.45); filter: brightness(1.3); }
}
@keyframes bulb-blink-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); filter: brightness(1); }
  50% { box-shadow: 0 0 14px 5px rgba(234, 88, 12, 0.45); filter: brightness(1.3); }
}
@keyframes bulb-blink-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); filter: brightness(1); }
  50% { box-shadow: 0 0 16px 6px rgba(239, 68, 68, 0.5); filter: brightness(1.35); }
}

/* ─── Caja: turno abierto, CTA y botonera ─── */
.caja-actions-toolbar .btn {
  font-weight: 600;
  border-radius: 0.7rem;
  padding: 0.6rem 1.15rem;
  border: none;
  display: inline-flex;
  align-items: center;
}

.btn-caja-abrir {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.28);
}

.btn-caja-abrir:hover {
  background: linear-gradient(135deg, #16a34a, #14532d);
  color: #fff;
}

.btn-caja-cobro {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: #fff;
  box-shadow: 0 6px 18px rgba(3, 105, 161, 0.25);
}

.btn-caja-cobro:hover {
  background: linear-gradient(135deg, #0284c7, #075985);
  color: #fff;
}

.btn-caja-cerrar {
  background: linear-gradient(135deg, #f97316, #c2410c);
  color: #fff;
  box-shadow: 0 6px 18px rgba(194, 65, 12, 0.28);
}

.btn-caja-cerrar:hover {
  background: linear-gradient(135deg, #ea580c, #9a3412);
  color: #fff;
}

.caja-turno-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.caja-turno-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid #dcfce7;
}

.caja-turno-dot {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3);
}

.caja-turno-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 0.1rem;
}

.caja-turno-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.caja-turno-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.caja-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  padding: 1.1rem 1.35rem;
}

.caja-stat {
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left-width: 4px;
}

.caja-stat-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.caja-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.caja-stat-neutral { border-left-color: #94a3b8; }
.caja-stat-green { border-left-color: var(--accent-green); }
.caja-stat-green .caja-stat-value { color: #15803d; }
.caja-stat-blue { border-left-color: #0ea5e9; }
.caja-stat-purple { border-left-color: #8b5cf6; }
.caja-stat-orange { border-left-color: var(--accent-orange); }

.caja-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e8eef4;
  border-left: 4px solid #0ea5e9;
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
}

.caja-hint i {
  color: #0284c7;
}

.caja-cta-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-orange-soft) 100%);
  border: 1px solid #fed7aa;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  text-align: center;
  padding: 2.75rem 1.5rem;
}

.caja-cta-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.caja-cta-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto 1.5rem;
}

.caja-cta-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fed7aa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--accent-orange);
  margin: 0 auto 1.1rem;
}

.flow-guide-card .flow-guide-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.flow-guide-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.report-card-action {
  border-left: 3px solid var(--accent-blue);
}


.reporte-item {
  border: 1px solid #e8eef4;
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
  background: #fafbfc;
}

.reporte-item h3 {
  margin-bottom: 0.75rem;
}

.reportes-grid .btn-group .btn {
  font-size: 0.75rem;
}

/* ─── Centro de reportes (estilo panel tipo referencia) ─── */
.reportes-page {
  margin: -0.5rem -0.25rem 0;
}

.reportes-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 45%, #3d5f8a 100%);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  color: #fff;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.2);
}

.reportes-hero-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.35rem;
}

.reportes-hero h1 {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #fff;
}

.reportes-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  max-width: 640px;
}

.reportes-hub {
  background: transparent;
  border: none;
  box-shadow: none;
}

.reportes-hub > .card-body {
  padding: 0;
}

.reportes-pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding: 0;
  border: none;
}

.reportes-pill-tabs .nav-item {
  margin: 0;
}

.reportes-pill-tabs .nav-link {
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #334155;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.2s;
  white-space: nowrap;
}

.reportes-pill-tabs .nav-link i {
  opacity: 0.85;
}

.reportes-pill-tabs .nav-link:hover {
  border-color: #93c5fd;
  background: #f8fafc;
  color: var(--accent-blue-dark);
}

.reportes-pill-tabs .nav-link.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.reportes-card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .reportes-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .reportes-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reporte-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.2rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 0.85rem;
  box-shadow: 0 2px 12px rgba(30, 58, 95, 0.06);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  cursor: pointer;
}

.reporte-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.1);
  border-color: #bfdbfe;
}

.reporte-card.active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 8px 24px rgba(37, 99, 235, 0.12);
}

.reporte-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #fff;
}

.reporte-card-icon--blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.reporte-card-icon--green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.reporte-card-icon--red { background: linear-gradient(135deg, #ef4444, #dc2626); }
.reporte-card-icon--orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.reporte-card-icon--purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.reporte-card-icon--teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.reporte-card-icon--indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.reporte-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.reporte-card-body strong {
  font-size: 0.95rem;
  color: #0f172a;
  line-height: 1.3;
}

.reporte-card-body small {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.35;
}

.reportes-workspace {
  margin-top: 0.5rem;
}

.reportes-workspace .reporte-panel {
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
}

.reporte-panel-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f4fc, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--accent-blue-dark);
  flex-shrink: 0;
}

.reporte-panel {
  scroll-margin-top: 1rem;
}

.reporte-panel .reporte-toolbar {
  background: #f8fafc;
  border: 1px solid #e8eef4;
  border-radius: 0.75rem;
  padding: 1rem;
}

.reporte-chart-wrap {
  background: #fff;
  border: 1px dashed #dee2e6;
  border-radius: 0.75rem;
  padding: 1rem;
}

.reporte-resultado {
  border-top: 1px solid #eef2f6;
  padding-top: 1rem;
}

/* ─── Modales globales ─── */
.modal-content-premium,
.modal-content.modal-app {
  border: none;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(15, 39, 68, 0.35);
}

.modal-header-premium,
.modal-app .modal-header {
  background: linear-gradient(135deg, var(--sidebar-solid) 0%, #1a3352 100%);
  color: var(--accent-orange-bright);
  border-bottom: 2px solid rgba(249, 115, 22, 0.35);
  padding: 1.1rem 1.35rem;
}

.modal-header-premium .modal-title,
.modal-app .modal-header .modal-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-header-premium .modal-title i,
.modal-app .modal-header .modal-title i {
  color: var(--accent-orange);
}

.modal-header-premium .btn-close,
.modal-app .modal-header .btn-close {
  filter: brightness(0) invert(1) opacity(0.85);
}

.modal-footer-premium,
.modal-app .modal-footer {
  border-top: 1px solid #e8eef4;
  background: #f8fafc;
  padding: 1rem 1.35rem;
}

.modal-app .modal-body {
  padding: 1.35rem;
}

/* ─── Pestañas de configuración / navegación ─── */
.nav-tabs-app,
#tabsConfig.nav-tabs {
  border-bottom: 2px solid #e2e8f0;
  gap: 0.35rem;
}

.nav-tabs-app .nav-link,
#tabsConfig .nav-link {
  border: none;
  border-radius: 0.65rem 0.65rem 0 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  transition: color 0.2s, background 0.2s;
}

.nav-tabs-app .nav-link:hover,
#tabsConfig .nav-link:hover {
  color: var(--sidebar-solid);
  background: rgba(249, 115, 22, 0.08);
}

.nav-tabs-app .nav-link.active,
#tabsConfig .nav-link.active {
  color: var(--sidebar-solid);
  background: #fff;
  border-bottom: 3px solid var(--accent-orange);
  box-shadow: 0 -2px 8px rgba(15, 39, 68, 0.06);
}

/* ─── Badges de rol ─── */
.role-admin { background: #7c3aed !important; color: #fff !important; }
.role-supervisor { background: #0f2744 !important; color: #fdba74 !important; }
.role-caja { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff !important; }
.role-lecturas { background: #0d9488 !important; color: #fff !important; }

.role-info-box {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
}

.role-info-box strong {
  color: #c2410c;
}

.role-modules-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.role-modules-list span {
  background: #fff;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
}

.top-navbar .badge-rol-usuario {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
}

.sidebar .submenu-link {
  color: rgba(253, 186, 116, 0.92);
}

.sidebar .submenu-link.active,
.sidebar .submenu-link:hover {
  color: #fff !important;
}

.sidebar .sidebar-toggle {
  color: var(--sidebar-text);
  font-weight: 700;
}

.sidebar .sidebar-toggle .bi-chevron-down {
  color: #fff;
  opacity: 0.9;
}

/* Resultados de búsqueda unificada */
.busqueda-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  box-shadow: 0 12px 32px rgba(15, 39, 68, 0.15);
  margin-top: 4px;
}

.busqueda-resultados .list-group-item {
  cursor: pointer;
  border-left: 3px solid transparent;
}

.busqueda-resultados .list-group-item:hover,
.busqueda-resultados .list-group-item.active {
  background: #fff7ed;
  border-left-color: var(--accent-orange);
}

.busqueda-resultados .codigo-tag {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: #64748b;
}

#resultadosBusqueda.show {
  display: block;
  max-height: 360px;
  overflow-y: auto;
}

#resultadosBusqueda .dropdown-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  font-weight: 700;
}

/* Anular Bootstrap nav-link active en sidebar */
aside.sidebar .nav-link.active,
aside.sidebar .nav-link.active:hover,
aside.sidebar .nav-link.active:focus {
  color: #fff !important;
  background: rgba(249, 115, 22, 0.22) !important;
}

.modal-form-control {
  border-radius: 0.65rem;
  border: 1.5px solid #e2e8f0;
  padding: 0.65rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-form-control:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.modal-form-control-lg {
  font-size: 1.05rem;
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

/* Mini stats (lecturas, dashboard) */
.stat-mini {
  border-radius: 14px;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  height: 100%;
}
.stat-mini-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.25rem;
}
.stat-mini-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f2744;
}
.stat-mini-blue { border-left: 4px solid #0284c7; }
.stat-mini-teal { border-left: 4px solid #0d9488; }
.stat-mini-orange { border-left: 4px solid #ea580c; }
.stat-mini-green { border-left: 4px solid #16a34a; }
.stat-mini-red { border-left: 4px solid #dc2626; }
.stat-mini-purple { border-left: 4px solid #7c3aed; }

.stat-mini-filled {
  position: relative;
  overflow: hidden;
  border-left-width: 0;
  border: none;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 39, 68, 0.12);
}
.stat-mini-filled .stat-mini-label { color: rgba(255, 255, 255, 0.85); }
.stat-mini-filled .stat-mini-value { color: #fff; font-size: 1.65rem; }
.stat-mini-icon {
  position: absolute;
  right: 0.7rem;
  top: 0.65rem;
  font-size: 1.55rem;
  opacity: 0.28;
}
.stat-mini-filled.stat-mini-blue {
  background: linear-gradient(135deg, #0284c7, #0369a1);
}
.stat-mini-filled.stat-mini-teal {
  background: linear-gradient(135deg, #0d9488, #0f766e);
}
.stat-mini-filled.stat-mini-orange {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}
.stat-mini-filled.stat-mini-green {
  background: linear-gradient(135deg, #16a34a, #15803d);
}
.stat-mini-filled.stat-mini-purple {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
.stat-mini-filled.stat-mini-red {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.lecturas-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr 1.3fr;
  gap: 0.75rem;
  align-items: end;
}
.lecturas-filter {
  border-radius: 0.85rem;
  padding: 0.55rem 0.75rem 0.7rem;
  border: 1px solid transparent;
}
.lecturas-filter-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.lecturas-filter .form-select {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.lecturas-filter-blue {
  background: #e0f2fe;
  border-color: #7dd3fc;
}
.lecturas-filter-blue .lecturas-filter-label { color: #0369a1; }
.lecturas-filter-teal {
  background: #ccfbf1;
  border-color: #5eead4;
}
.lecturas-filter-teal .lecturas-filter-label { color: #0f766e; }
.lecturas-filter-orange {
  background: #ffedd5;
  border-color: #fdba74;
}
.lecturas-filter-orange .lecturas-filter-label { color: #c2410c; }
.lecturas-filter-search {
  background: #ede9fe;
  border-color: #c4b5fd;
}
.lecturas-filter-search .lecturas-filter-label { color: #6d28d9; }
.lecturas-filter-search .form-control {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
.lecturas-filter-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #64748b;
  padding: 0.55rem 0.75rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 0.85rem;
}
.lecturas-filter-hint i { color: #f59e0b; }

/* Barra de filtros unificada (listas) */
.lista-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}
.lista-filters.lista-filters-5 {
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr));
}
.lista-filters.lista-filters-6 {
  grid-template-columns: minmax(180px, 1.8fr) repeat(5, minmax(110px, 1fr));
}
.lista-filters.lista-filters-4 {
  grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(130px, 1fr));
}
.lista-filters.lista-filters-3 {
  grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(140px, 1fr));
}
.lista-filter {
  border-radius: 0.85rem;
  padding: 0.55rem 0.75rem 0.7rem;
  border: 1px solid transparent;
  min-width: 0;
}
.lista-filter-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  white-space: nowrap;
}
.lista-filter .form-select,
.lista-filter .form-control {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.lista-filter-search { background: #ede9fe; border-color: #c4b5fd; }
.lista-filter-search .lista-filter-label { color: #6d28d9; }
.lista-filter-blue { background: #e0f2fe; border-color: #7dd3fc; }
.lista-filter-blue .lista-filter-label { color: #0369a1; }
.lista-filter-teal { background: #ccfbf1; border-color: #5eead4; }
.lista-filter-teal .lista-filter-label { color: #0f766e; }
.lista-filter-orange { background: #ffedd5; border-color: #fdba74; }
.lista-filter-orange .lista-filter-label { color: #c2410c; }
.lista-filter-green { background: #dcfce7; border-color: #86efac; }
.lista-filter-green .lista-filter-label { color: #15803d; }
.lista-filter-rose { background: #ffe4e6; border-color: #fda4af; }
.lista-filter-rose .lista-filter-label { color: #be123c; }
.lista-filter-slate { background: #f1f5f9; border-color: #cbd5e1; }
.lista-filter-slate .lista-filter-label { color: #475569; }
.lista-filter-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #64748b;
  padding: 0.55rem 0.75rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 0.85rem;
  align-self: stretch;
}
.modulos-grid {
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
}
.modulos-hint {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.3;
}
.modulos-grupo-title {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.2rem;
}
.modulos-grupo-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
}
.modulos-check {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.28rem 0.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  min-width: 0;
  height: 100%;
  margin-bottom: 0;
}
.modulos-check:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}
.modulos-check .form-check-input {
  margin-top: 0.12rem;
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
}
.modulos-check .form-check-label {
  line-height: 1.2;
  word-break: break-word;
  font-size: 0.78rem;
}
.modal-usuario-dialog {
  --bs-modal-width: min(1080px, 96vw);
}
.modal-usuario-body {
  max-height: calc(100vh - 8.5rem);
  overflow-y: auto;
}
.modal-usuario-layout {
  align-items: flex-start;
}
.modal-usuario-mods {
  border-left: 1px solid #e2e8f0;
  padding-left: 0.85rem;
}
.role-info-box-compact {
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.35;
}
.role-info-box-compact strong {
  display: inline;
  margin-right: 0.35rem;
}
.role-info-box-compact .role-info-desc {
  color: #9a3412;
  opacity: 0.9;
}
@media (min-width: 992px) {
  .modulos-grupo-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .modal-usuario-body {
    max-height: none;
    overflow: visible;
  }
}
@media (min-width: 1200px) {
  .modulos-grupo-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .modal-usuario-mods {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
  }
  .modulos-grupo-items {
    grid-template-columns: 1fr;
  }
}

.table-lecturas thead th {
  background: linear-gradient(135deg, #0f3a63, #155e75) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  letter-spacing: 0.05em;
}
.table-lecturas thead th:first-child { border-top-left-radius: 0.35rem; }
.table-lecturas thead th:last-child { border-top-right-radius: 0.35rem; }

/* Diferenciar pendientes vs lectura tomada */
.lecturas-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.lecturas-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lecturas-leyenda-pendiente { color: #b45309; }
.lecturas-leyenda-pendiente i { color: #f59e0b; font-size: 0.65rem; }
.lecturas-leyenda-ok { color: #047857; }
.lecturas-leyenda-ok i { color: #10b981; font-size: 0.65rem; }

.lectura-badge-pendiente {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d;
  font-weight: 600;
}
.lectura-badge-ok {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7;
  font-weight: 600;
}

.table-lecturas tbody tr.lectura-row-pendiente {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.04));
  border-left: 4px solid #f59e0b;
}
.table-lecturas tbody tr.lectura-row-pendiente .lectura-cliente-nombre {
  color: #b45309;
  font-weight: 700;
}
.table-lecturas tbody tr.lectura-row-ok {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03));
  border-left: 4px solid #10b981;
}
.table-lecturas tbody tr.lectura-row-ok .lectura-cliente-nombre {
  color: #047857;
  font-weight: 600;
}

.lectura-resultado-pendiente {
  border-left: 4px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
}
.lectura-resultado-pendiente .lectura-cliente-nombre { color: #b45309; }
.lectura-resultado-ok {
  border-left: 4px solid #10b981 !important;
  background: rgba(16, 185, 129, 0.1) !important;
}
.lectura-resultado-ok .lectura-cliente-nombre { color: #047857; }

.lectura-info-pendiente {
  outline: 2px solid rgba(245, 158, 11, 0.45);
  border-radius: 0.5rem;
}
.lectura-info-ok {
  outline: 2px solid rgba(16, 185, 129, 0.45);
  border-radius: 0.5rem;
}
.lectura-estado-aviso {
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
}
.lectura-estado-aviso-pendiente {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}
.lectura-estado-aviso-ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

/* Modal lectura — compacto, sin solapes */
.modal-lectura-dialog {
  max-width: min(640px, 96vw);
}
.modal-lectura-header {
  padding: 0.65rem 1rem !important;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.modal-lectura-header .modal-title {
  font-size: 0.95rem;
  flex: 1 1 auto;
  min-width: 0;
}
.modal-lectura-header .badge {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.modal-lectura-body {
  padding: 0.85rem 1rem 0.5rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.modal-lectura-footer {
  padding: 0.55rem 1rem 0.85rem !important;
  border-top: 1px solid #eef2f6;
  gap: 0.4rem;
}
.modal-lectura-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.modal-lectura-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  line-height: 1.2;
  position: static !important;
  transform: none !important;
}
.modal-lectura-label i {
  color: #0369a1;
  font-size: 0.75rem;
}
#modalLectura .form-control,
#modalLectura .form-control-sm {
  border-radius: 0.45rem;
  border: 1.5px solid #e2e8f0;
  min-height: 2.1rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  line-height: 1.3;
}
#modalLectura .search-contract > i.bi-search {
  top: 50%;
  left: 0.7rem;
  font-size: 0.85rem;
  pointer-events: none;
}
#modalLectura .search-contract input {
  padding-left: 2.1rem;
}
#modalLectura .search-contract { z-index: 5; }
#modalLectura .busqueda-resultados {
  display: none;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.25rem;
  border-radius: 0.45rem;
  box-shadow: 0 8px 20px rgba(15, 39, 68, 0.15);
}
#modalLectura .busqueda-resultados:not(.d-none) {
  display: block;
}
#modalLectura .invalid-feedback {
  display: none;
  font-size: 0.72rem;
  margin-top: 0.15rem;
}
#modalLectura .is-invalid ~ .invalid-feedback,
#modalLectura .was-validated .form-control:invalid ~ .invalid-feedback {
  display: block;
}

.lectura-medidas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.55rem;
  align-items: start;
}
#modalLectura .consumo-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.1rem;
  margin: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  border-radius: 0.45rem;
}
#modalLectura .consumo-value {
  font-size: 1.05rem;
}

.lectura-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  height: auto;
}
.lectura-info-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  padding: 0.3rem 0.5rem;
  min-height: 0;
}
.lectura-info-chip span {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  line-height: 1.2;
  margin-bottom: 0.1rem;
}
.lectura-info-chip strong {
  font-size: 0.8rem;
  color: #0f2744;
  word-break: break-word;
  line-height: 1.25;
  display: block;
}

.lectura-info-pendiente,
.lectura-info-ok {
  outline-offset: 2px;
  border-radius: 0.5rem;
  padding: 0.25rem;
}
.lectura-estado-aviso {
  border-radius: 0.4rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  margin-top: 0 !important;
}

@media (max-width: 575.98px) {
  .lectura-medidas { grid-template-columns: 1fr; }
  .lectura-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .lecturas-filters {
    grid-template-columns: 1fr 1fr;
  }
  .lecturas-filter-search { grid-column: 1 / -1; }
  .lecturas-filter-hint { grid-column: 1 / -1; }
  .lista-filters.lista-filters-5,
  .lista-filters.lista-filters-6,
  .lista-filters.lista-filters-4 {
    grid-template-columns: 1fr 1fr;
  }
  .lista-filters .lista-filter-search { grid-column: 1 / -1; }
  .lista-filters .lista-filter-hint { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .lecturas-filters { grid-template-columns: 1fr; }
  .lista-filters,
  .lista-filters.lista-filters-3,
  .lista-filters.lista-filters-4,
  .lista-filters.lista-filters-5,
  .lista-filters.lista-filters-6 {
    grid-template-columns: 1fr;
  }
}

/* Historial cliente modal */
.historial-cliente-header {
  background: linear-gradient(135deg, #f8fafc, #fff);
  border-bottom: 1px solid #e2e8f0;
  padding: 1.25rem 1.5rem;
}
.historial-tabs .nav-link {
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  padding: 0.45rem 1rem;
}
.historial-tabs .nav-link.active {
  background: var(--sidebar-solid, #1e3a5f);
  color: #fff;
}
.historial-tabla thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
}

/* Reportes — alineado con marca SISCATEL */
.reportes-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 55%, #1e3a5f 100%) !important;
  border-radius: 24px;
}
.reportes-pill-tabs .nav-link.active {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.35) !important;
}
.btn-generar-reporte {
  background: linear-gradient(135deg, #1e3a5f, #0f2744) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.25);
}
.btn-generar-reporte:hover,
.btn-generar-reporte:focus {
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(30, 58, 95, 0.4) !important;
}
.btn-generar-reporte i { color: #ffd7b0; }

/* Botones de exportar (Excel / PDF) con contraste claro */
.btn-outline-export {
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  background: #fff !important;
  font-weight: 600;
}
.btn-outline-export:hover,
.btn-outline-export:focus {
  border-color: var(--accent-orange, #ea580c) !important;
  color: var(--accent-orange-dark, #c2410c) !important;
  background: #fff7ed !important;
}

/* Badge contador de filas del panel */
.reporte-badge-filas {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #c7d2fe;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
}

/* Ícono del encabezado del panel (círculo con gradiente) */
.reporte-panel-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: 0 3px 10px rgba(15, 39, 68, 0.2);
}
.reporte-panel-icon-wrap i { color: #fff; }

.reporte-card:hover .reporte-card-arrow {
  color: #ea580c !important;
}
.reporte-card:hover .reporte-card-inner {
  border-color: rgba(234, 88, 12, 0.25) !important;
}
.grad-blue { background: linear-gradient(135deg, #1e3a5f, #0284c7) !important; }
.grad-orange { background: linear-gradient(135deg, #ea580c, #c2410c) !important; }
.grad-teal { background: linear-gradient(135deg, #0d9488, #0f766e) !important; }
.grad-green { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
.grad-red { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; }
.grad-purple { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }
.grad-indigo { background: linear-gradient(135deg, #4338ca, #6366f1) !important; }

/* ─── Tablas compactas (listas densas) ─── */
.table-compact {
  font-size: 0.8125rem;
  margin-bottom: 0;
}
.table-compact thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 0.45rem 0.65rem;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.table-compact tbody td {
  padding: 0.4rem 0.65rem;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}
.table-compact tbody tr:hover {
  background: #fff7ed;
}
.table-compact .cell-muted {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.table-compact .cell-mono {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}

/* KPI chips en listados */
.kpi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15, 39, 68, 0.04);
}
.kpi-chip i { font-size: 0.9rem; }
.kpi-chip-blue { border-left: 3px solid var(--sidebar-solid); color: var(--sidebar-solid); }
.kpi-chip-orange { border-left: 3px solid var(--accent-orange); color: #c2410c; }
.kpi-chip-green { border-left: 3px solid var(--accent-green); color: #15803d; }
.kpi-chip-red { border-left: 3px solid var(--accent-red); color: #b91c1c; }
.kpi-chip strong { font-size: 0.95rem; }

/* Barra de herramientas de página */
.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.page-toolbar .form-control,
.page-toolbar .input-group {
  max-width: 420px;
  flex: 1;
  min-width: 200px;
}
.page-toolbar .form-control {
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
}

/* Botones de acción en tablas */
.btn-actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
  align-items: center;
}
.btn-action {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.btn-action:hover {
  transform: translateY(-1px);
}
.btn-action-view {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #93c5fd;
}
.btn-action-view:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.btn-action-edit {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fdba74;
}
.btn-action-edit:hover { background: #ea580c; color: #fff; border-color: #ea580c; }
.btn-action-del {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fca5a5;
}
.btn-action-del:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-action-suspend {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.btn-action-suspend:hover { background: #d97706; color: #fff; border-color: #d97706; }
.btn-action-activate {
  color: #065f46;
  background: #a7f3d0;
  border-color: #34d399;
}
.btn-action-activate:hover { background: #059669; color: #fff; border-color: #059669; }

/* ─── Tabla del padrón y píldoras de estado ─── */
.tabla-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tabla-toolbar-search {
  flex: 1 1 240px;
  max-width: 340px;
}

.tabla-toolbar-filtro {
  width: auto;
  min-width: 160px;
}

.table-padron tbody td {
  padding: 0.55rem 0.65rem;
}

.table-padron tbody tr:hover {
  background: #f8fafc;
}

.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.estado-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.estado-activo { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.estado-suspendido { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.estado-cortado { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.estado-baja { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }

.badge-tarifa {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

/* Lista de clientes agrupada: 1 persona + N domicilios (acordeón) */
.table-clientes-agrupados .cliente-row > td {
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
}
.cliente-dom-count {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cliente-dom-acordeon {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.btn-dom-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  border-radius: 0.55rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-dom-toggle:hover {
  background: #eef5ff;
  border-color: #bfdbfe;
}
.btn-dom-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.18s ease, background 0.15s ease;
}
.cliente-dom-acordeon.is-open .btn-dom-chevron {
  transform: rotate(180deg);
  background: #dbeafe;
  color: #1d4ed8;
}
.btn-dom-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.btn-dom-label strong {
  font-size: 0.8rem;
  color: #0f172a;
}
.btn-dom-hint {
  font-size: 0.68rem;
  color: #64748b;
}
.btn-dom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
  justify-content: flex-end;
}
.domicilio-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  white-space: nowrap;
}
.cliente-dom-panel {
  padding-left: 0.15rem;
}
.domicilios-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.domicilio-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
}
.domicilio-fila:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.domicilio-main {
  min-width: 0;
  flex: 1;
}
.domicilio-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.domicilio-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  color: #64748b;
}
.domicilio-meta i {
  margin-right: 0.15rem;
  opacity: 0.85;
}
.domicilio-dir {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #475569;
  max-width: 36rem;
}
.domicilio-acciones {
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.btn-action-add {
  color: #115e59;
  background: #ccfbf1;
  border-color: #5eead4;
}
.btn-action-add:hover { background: #0d9488; color: #fff; border-color: #0d9488; }
.btn-action-pay {
  color: #14532d;
  background: #86efac;
  border-color: #4ade80;
  text-decoration: none;
}
.btn-action-pay:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-action-history {
  color: #1e3a5f;
  background: #e2e8f0;
  border-color: #94a3b8;
}
.btn-action-history:hover { background: #334155; color: #fff; border-color: #334155; }
.historial-resumen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.historial-chip {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.historial-chip-pay {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.historial-tfoot td {
  border-top: 2px solid #cbd5e1;
  background: #f8fafc;
}
.pago-info-box {
  padding: 0.75rem 0.9rem;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
  border: 1px solid #bbf7d0;
}
.pago-totales {
  padding: 0.65rem 0.85rem;
  border-radius: 0.55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
  .btn-dom-chips {
    display: none;
  }
  .domicilio-fila {
    flex-direction: column;
  }
  .domicilio-acciones {
    align-self: flex-end;
  }
}

/* Modales más anchos y formularios en rejilla */
.modal-app.modal-dialog.modal-xl,
.modal-dialog.modal-form-wide {
  max-width: min(920px, 96vw);
}
.modal-form-grid .row {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.65rem;
}
.modal-form-grid .form-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.modal-form-grid .form-control,
.modal-form-grid .form-select {
  font-size: 0.875rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
}
.modal-form-section {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-solid);
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.35rem;
  margin: 0.75rem 0 0.5rem;
}
.modal-form-section:first-child { margin-top: 0; }
.modal-form-section i { color: var(--accent-orange); }

/* Reportes — layout compacto, filtros alineados, KPIs y totales */
.reportes-hero-compact {
  padding: 1.1rem 1.35rem !important;
  margin-bottom: 1rem !important;
  border-radius: 14px !important;
}
.reportes-hero-compact h1 {
  font-size: 1.35rem !important;
  margin-bottom: 0.25rem !important;
}
.reportes-hero-compact p {
  font-size: 0.82rem !important;
  max-width: 560px;
}
.reportes-pill-tabs {
  gap: 0.4rem !important;
  margin-bottom: 1rem !important;
}
.reportes-pill-tabs .nav-link {
  padding: 0.4rem 0.9rem !important;
  font-size: 0.8rem !important;
}
.reportes-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 0.65rem !important;
  margin-bottom: 0.85rem !important;
}
.reporte-card {
  padding: 0 !important;
}
a.reporte-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.reporte-card-link:hover {
  color: inherit;
}
.reporte-card-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.8rem !important;
}
.reporte-card-icon {
  width: 36px !important;
  height: 36px !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
}
.reporte-card-content {
  min-width: 0;
  flex: 1 1 auto;
}
.reporte-card-content h3 {
  font-size: 0.8rem !important;
  margin: 0 0 0.1rem !important;
  color: #0f172a;
  font-weight: 600;
  line-height: 1.25;
}
.reporte-card-content p {
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  color: #64748b;
  margin: 0;
}
.reporte-card-arrow {
  flex-shrink: 0;
  font-size: 1rem;
  color: #cbd5e1;
  transition: color 0.15s, transform 0.15s;
}
.reporte-panel-desc {
  font-size: 0.72rem;
  color: #64748b;
}
.reporte-panel-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  font-size: 0.95rem !important;
}
.reporte-toolbar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 0.75rem !important;
}
.reporte-filtros-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.55rem;
}
.rf-field {
  display: flex;
  flex-direction: column;
  min-width: 118px;
  max-width: 180px;
  flex: 0 1 auto;
}
.rf-field.rf-grow {
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 160px;
}
.rf-field.rf-field-wide {
  flex: 1 1 100%;
  max-width: none;
  min-width: 100%;
}
.rf-field .form-label {
  font-size: 0.58rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.1rem;
}
.rf-field .form-control,
.rf-field .form-select {
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  min-height: 30px;
}
.rf-note {
  font-size: 0.75rem;
  color: #64748b;
  padding: 0.35rem 0;
}
.reporte-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem !important;
  padding-top: 0.55rem;
  border-top: 1px dashed #e2e8f0;
}
.reporte-hint {
  font-size: 0.7rem;
  color: #94a3b8;
}
.reporte-export-btns {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
}
.reporte-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0.55rem 0 0.4rem;
  overflow-x: auto;
  padding-bottom: 2px;
}
.reporte-stat {
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  border-left: 2px solid #94a3b8;
  min-width: 0;
  flex: 1 1 0;
  max-width: none;
}
.reporte-stat-label {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  line-height: 1.15;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reporte-stat-value {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reporte-stat-blue { border-left-color: #2563eb; }
.reporte-stat-green { border-left-color: #16a34a; }
.reporte-stat-orange { border-left-color: #ea580c; }
.reporte-stat-purple { border-left-color: #7c3aed; }
.reporte-stat-red { border-left-color: #dc2626; }
.reporte-stat-teal { border-left-color: #0d9488; }
.reporte-stat-indigo { border-left-color: #4f46e5; }

.reporte-chart-wrap {
  margin-top: 0.45rem;
  padding: 0.4rem 0.55rem !important;
  background: #fff;
  border: 1px dashed #dee2e6;
  border-radius: 8px;
  height: 140px;
}
.reporte-resultado {
  border-top: 1px solid #eef2f6;
  padding-top: 0.75rem;
  margin-top: 0.65rem;
}
.reporte-resultado-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.reporte-busqueda-wrap {
  max-width: 280px;
  width: 100%;
}
.reporte-tabla-wrap {
  border: 1px solid #e8eef4;
  border-radius: 10px;
  max-height: 520px;
  overflow: auto;
}
.reporte-tabla {
  font-size: 0.78rem;
  margin-bottom: 0 !important;
}
.reporte-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  padding: 0.4rem 0.55rem;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}
.reporte-tabla tbody td {
  padding: 0.35rem 0.55rem;
  vertical-align: middle;
}
.reporte-tabla tfoot th {
  position: sticky;
  bottom: 0;
  background: #1e3a5f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.45rem 0.55rem;
  white-space: nowrap;
  border-top: 2px solid #0f2744;
}
.reporte-badge-filas {
  background: #eef2ff !important;
  color: #4338ca !important;
  font-weight: 600;
  font-size: 0.72rem;
}

@media (max-width: 768px) {
  .rf-field {
    min-width: calc(50% - 0.35rem);
    max-width: none;
    flex: 1 1 calc(50% - 0.35rem);
  }
  .rf-field.rf-grow {
    flex: 1 1 100%;
    max-width: none;
  }
  .reporte-export-btns {
    margin-left: 0;
    width: 100%;
  }
  .reporte-export-btns .btn { flex: 1; }
  .reporte-stats {
    flex-wrap: nowrap;
  }
  .reporte-stat {
    flex: 1 0 88px;
  }
  .reporte-busqueda-wrap { max-width: 100%; }
}

/* ── Cobros / POS ── */
.cobros-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.6rem;
}
.cobros-tabs .nav-link {
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #64748b;
  background: transparent;
  border: none;
}
.cobros-tabs .nav-link:hover {
  background: #f1f5f9;
  color: var(--accent-blue-dark);
}
.cobros-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}
.cobros-search-input {
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  font-size: 1rem;
}
.cobros-search-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.resultados-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-top: 0.75rem;
}
.cliente-seleccionado {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-top: 0.75rem;
  border-left: 4px solid var(--accent-blue);
}
.cliente-seleccionado.cliente-seleccionado-ok {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border-left-color: #16a34a;
}
.cliente-seleccionado.cliente-seleccionado-deuda {
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  border-left-color: #ea580c;
}
.cobro-cli-deuda {
  border-left: 4px solid #ea580c !important;
  background: #fff7ed;
}
.cobro-cli-deuda:hover {
  background: #ffedd5 !important;
}
.cobro-cli-ok {
  border-left: 4px solid #16a34a !important;
  background: #ecfdf5;
  color: #166534;
}
.cobro-cli-ok:hover {
  background: #d1fae5 !important;
}
.cobro-cli-ok-hint {
  color: #15803d;
  font-weight: 500;
}
.cobro-sin-pendiente-msg {
  background: #ecfdf5;
  color: #166534;
}
.badge-cobro-deuda {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 600;
  font-size: 0.68rem;
}
.badge-cobro-ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  font-weight: 600;
  font-size: 0.68rem;
}
.payment-panel {
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-radius: 12px;
  padding: 1rem;
}
.cambio-box {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-radius: 12px;
  padding: 0.85rem;
  text-align: center;
}
.cambio-box .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.06em;
}

/* ── Clases compartidas (lecturas / órdenes / contratos) ── */
.form-label-custom {
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.form-label-custom i { color: var(--accent-blue-dark); font-size: 0.8rem; }

.filters-card { background: #f8fafc; }

.btn-outline-teal {
  border: 1.5px solid var(--accent-green);
  color: var(--accent-green);
  background: transparent;
  border-radius: 0.5rem;
  font-weight: 600;
}
.btn-outline-teal:hover { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }

.btn-outline-blue {
  border: 1.5px solid var(--accent-blue-dark);
  color: var(--accent-blue-dark);
  background: transparent;
  border-radius: 0.5rem;
  font-weight: 600;
}
.btn-outline-blue:hover { background: var(--accent-blue-dark); color: #fff; border-color: var(--accent-blue-dark); }

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.search-contract { position: relative; }
.search-contract > i.bi-search {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  color: #94a3b8;
  z-index: 3;
}
.search-contract input { padding-left: 2.4rem; }

.consumo-alert {
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
  border: 1px dashed var(--accent-green);
  border-radius: 0.65rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  color: #0f766e;
  margin-top: 0.5rem;
}
.consumo-alert-warning {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: var(--accent-orange);
  color: #b45309;
}
.consumo-alert-danger {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: var(--accent-red);
  color: #b91c1c;
}
.consumo-value { font-weight: 800; font-size: 1.15rem; color: var(--accent-green); }

/* Tabla estilizada -> alias compacto */
.table-custom { margin-bottom: 0; }
.table-custom thead th {
  background: #f8fafc;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 0.75rem;
  color: var(--text-muted);
  border-bottom: 2px solid #e8eef4;
}
.table-custom tbody td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  font-size: 0.85rem;
}
.table-custom tbody tr:hover { background: #f8fbff; }

/* Badges de estado (órdenes) */
.badge-status {
  padding: 0.3rem 0.7rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #fff;
}
.badge-pendiente { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.badge-programada { background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; }
.badge-ejecutada { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
.badge-reconectado { background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; }

.btn-danger-custom {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
.btn-danger-custom:hover { color: #fff; filter: brightness(1.05); }

.modal-header-premium-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
}

.modal-header-premium-danger .modal-title i {
  color: #fff !important;
}

.modal-form-label {
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.modal-form-label i { color: var(--accent-orange); font-size: 0.8rem; }

.btn-outline-accent {
  border: 1.5px solid var(--accent-orange);
  color: #c2410c;
  background: transparent;
  border-radius: 0.5rem;
  font-weight: 600;
}
.btn-outline-accent:hover { background: var(--accent-orange); color: #fff; border-color: var(--accent-orange); }

/* ─── Backdrop del sidebar en móvil/tablet ─── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1035;
}
@media (max-width: 991.98px) {
  .sidebar {
    z-index: 1040;
  }
  .sidebar-backdrop.show {
    display: block;
  }
}

/* ─── Refinamientos responsive (tablet / móvil) ─── */
@media (max-width: 767.98px) {
  .top-navbar {
    padding: 0.6rem 0.9rem;
    gap: 0.5rem !important;
  }
  .page-body,
  .main-content > .container-fluid {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .reportes-hero {
    padding: 1.25rem 1.1rem;
    border-radius: 16px !important;
  }
  .reportes-hero h1 {
    font-size: 1.3rem;
  }
  .reportes-hero p {
    font-size: 0.85rem;
  }
  .reportes-pill-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
  }
  .reportes-pill-tabs .nav-link {
    flex: 0 0 auto;
  }
  .reporte-toolbar .reporte-acciones {
    width: 100%;
  }
  .reporte-toolbar .reporte-acciones .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }
  .reporte-toolbar .reporte-acciones .ms-auto .btn {
    flex: 1 1 auto;
  }
  .card-app .card-body,
  .card .card-body {
    padding: 1rem;
  }
  .h4, h1.h4 {
    font-size: 1.15rem;
  }
  .kpi-chips {
    gap: 0.4rem;
  }
}