/* =====================================================================
   Celumavi · Dashboard theme (rediseño)
   Capa de estilos que se carga DESPUÉS del tema Vuexy para re-skinear
   el panel con la identidad de marca, sin tocar el markup.
   Marca: rojo #F3220A · naranja #FF6D14
   ===================================================================== */

:root{
  --cm-brand:#f3220a;
  --cm-brand-2:#ff6d14;
  --cm-grad:linear-gradient(135deg,#ff6d14 0%,#f3220a 100%);
  --cm-brand-soft:#fff1ec;
  --cm-ink:#101516;
  --cm-muted:#6b7280;
  --cm-bg:#f5f6f8;
  --cm-card:#ffffff;
  --cm-surface:#ffffff;
  --cm-line:#edeef1;
  --cm-radius:16px;
  --cm-shadow:0 1px 2px rgba(16,21,22,.04), 0 10px 28px rgba(16,21,22,.06);
}

/* ---------- Base ---------- */
html{ background:var(--cm-surface) !important; }
body.vertical-layout{ background:var(--cm-surface) !important; color:var(--cm-ink); }
.content-wrapper, .app-content, .content-body{ background:var(--cm-surface) !important; }
/* El área de contenido llena al menos toda la altura para que nunca asome gris al fondo */
.vertical-layout .app-content{ min-height:100vh; display:flex; flex-direction:column; }
/* La tarjeta principal (la que contiene la tabla) se estira para ocupar todo el alto
   disponible, sin dejar espacio en blanco debajo en módulos de lista. El filtro y demás
   quedan arriba con su alto natural. */
.vertical-layout .app-content > .content-wrapper{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.vertical-layout .app-content > .content-wrapper > .content-body{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.content-body > .card:has(table){ flex:1 1 auto; margin-bottom:0 !important; }

/* Oculta/neutraliza la banda de color superior del tema ecommerce */
.header.bg-primary{ background:transparent !important; height:0 !important; padding:0 !important; }

/* ---------- Sidebar (re-skin a claro/limpio) ---------- */
.main-menu.menu-dark,
.main-menu{
  background:var(--cm-card) !important;
  border-right:1px solid var(--cm-line);
  box-shadow:none !important;
}
.main-menu .navbar-header{ background:var(--cm-card) !important; padding-top:10px; }
.main-menu.menu-dark .navbar-header .brand-text,
.main-menu .navbar-header .brand-text{
  color:var(--cm-ink) !important; font-weight:750; letter-spacing:-.3px;
}
.cm-brand-mark{
  width:38px; height:38px; border-radius:11px; background:var(--cm-grad);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:17px;
  box-shadow:0 6px 16px rgba(243,34,10,.32);
}
.main-menu .navbar-header .navbar-brand .brand-text.cm-brand-name{
  font-weight:750; font-size:17px; letter-spacing:-.3px; margin:0; padding-left:11px;
}
.cm-brand-name span{ color:var(--cm-brand-2); }
.cm-brand-name b{ color:var(--cm-brand); }
.shadow-bottom{
  background:linear-gradient(#fff 44%, rgba(255,255,255,.7) 73%, rgba(255,255,255,0)) !important;
}

/* Items del menú */
.main-menu.menu-dark .navigation,
.main-menu .navigation{ background:transparent !important; }
.main-menu .navigation li a{ color:#5a6169 !important; }
.main-menu.menu-dark .navigation > li > a,
.main-menu .navigation > li > a{
  border-radius:9px; margin:2px 10px; padding:9px 14px;
  font-weight:500; font-size:13px; letter-spacing:.1px;
}
.main-menu .navigation > li > a > i,
.main-menu .navigation > li > a > svg{ color:#9aa0a6 !important; }
/* Íconos outline (feather → <svg>): tamaño contenido y trazo fino */
.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a i,
.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a svg{ font-size:1.15rem; }
.main-menu .navigation > li > a > svg{ width:19px !important; height:19px !important; stroke-width:2; }
.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before,
.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > svg:before{font-size:1.15rem}
.main-menu .navigation li.nav-item > a:hover{ background:#f7f7f8 !important; }

/* Item activo / abierto — resaltado claro de la sección actual */
.main-menu.menu-dark .navigation > li.active > a,
.main-menu .navigation > li.active > a{
  background:var(--cm-brand-soft) !important;
  color:var(--cm-brand) !important;
  box-shadow:0 2px 10px rgba(243,34,10,.14) !important;
  font-weight:600;
}
.main-menu .navigation > li.active > a > i,
.main-menu .navigation > li.active > a > svg{ color:var(--cm-brand) !important; stroke-width:2.4; }
.main-menu.menu-dark .navigation > li.open > a,
.main-menu .navigation > li.open > a{ background:#f7f7f8 !important; color:var(--cm-ink) !important; }

/* Submenús */
.main-menu.menu-dark .navigation .menu-content,
.main-menu .navigation ul.menu-content{ background:transparent !important; }
.main-menu .navigation .menu-content > li > a{ padding:8px 12px 8px 18px; margin:1px 12px; border-radius:9px; font-size:.92rem; }
.main-menu .navigation .menu-content > li.active > a{
  background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important;
}
/* Vuexy pinta el <li.active> del submenú con un gradiente morado + sombra detrás del
   enlace; lo neutralizamos (el resaltado lo lleva el <a> interno en brand-soft). */
.main-menu.menu-dark .navigation > li ul .active,
.main-menu .navigation > li ul .active,
.main-menu.menu-dark .navigation > li.open > ul .active,
.main-menu .navigation > li.open > ul .active{
  background:transparent !important; box-shadow:none !important;
}
.menu-content .nav-link.has-submenu, .menu-content .nav-link{ color:#5b626b !important; }

/* Encabezado de sección del menú (estilo mockup .nav-lbl) */
.main-menu.menu-dark .navigation .navigation-header.cm-nav-lbl,
.main-menu .navigation > li.navigation-header.cm-nav-lbl{
  margin:0; padding:14px 24px 6px; font-size:11px; line-height:1.4;
  text-transform:uppercase; letter-spacing:.06em; color:#9aa0a6; font-weight:650;
}
.main-menu .navigation > li.navigation-header span{ color:#9aa0a6 !important; font-weight:650; text-transform:uppercase; letter-spacing:.05em; }
.main-menu.menu-dark .navigation .navigation-header.cm-nav-lbl span{font-weight:650}
/* En modo colapsado (rail 80px) el label no tiene ícono de reemplazo: se oculta el li completo.
   El guard :not(.expanded) preserva el hover-expand de Vuexy (que re-muestra los spans). */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation .cm-nav-lbl{ display:none; }

/* Respiro al final del menú (el último item no queda pegado al borde) */
.main-menu .main-menu-content{ padding-bottom:16px; }

/* Ancho del sidebar expandido 236px (mockup) — Vuexy usa 260px.
   Solo estado expandido en escritorio; colapsado (80px) y overlay móvil intactos. */
@media (min-width: 1200px){
  .vertical-layout.vertical-menu-modern.menu-expanded .main-menu{ width:236px; }
  .vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navbar-header{ width:236px; }
  .vertical-layout.vertical-menu-modern.menu-expanded .content,
  .vertical-layout.vertical-menu-modern.menu-expanded .app-content,
  .vertical-layout.vertical-menu-modern.menu-expanded .footer{ margin-left:236px; }
  .vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.fixed-top,
  .vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.floating-nav{ left:236px; }
  .vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.floating-nav{
    /* a ras: ocupa todo el ancho a la derecha del sidebar, sin gaps laterales */
    width:calc(100vw - (100vw - 100%) - 236px);
  }
}

/* ---------- Navbar superior (a ras, sin flotar) ---------- */
.header-navbar.floating-nav{
  background:var(--cm-card) !important;
  /* sin gaps arriba/izquierda/derecha; sólo línea inferior de separación (como los cards) */
  margin:0 !important;
  top:0 !important;
  right:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--cm-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* Oculta el degradado flotante de fondo del navbar (ya no flota) */
.navbar-floating .header-navbar-shadow{ display:none !important; }
/* El contenedor interno del navbar tiene la clase .content, que recibe margin-left:236px
   (regla del sidebar) y empujaba el contenido (ej. "Comercio ID") a la derecha. El navbar
   ya está posicionado en left:236px, así que su contenedor no debe llevar margen extra. */
.header-navbar .navbar-container{ margin-left:0 !important; padding-left:1.75rem !important; padding-right:1.75rem !important; }
.header-navbar .navbar-nav .nav-link .ficon{ color:#6b7280; }
.code-business{ color:var(--cm-muted); font-size:.85rem; }
.header-navbar .user-name{ color:var(--cm-ink); }
.header-navbar .user-status{ color:var(--cm-muted); }

/* Contenido pegado al navbar (sin gap arriba) pero con aire lateral cómodo: el título y
   las tarjetas/tablas no quedan pegados al sidebar. Fondo blanco, así que el inset es
   espacio en blanco (no gris). El navbar mide ~4.45rem. */
html .content.app-content{ padding:4.45rem 0rem 0rem 0rem !important; }
/* El área de contenido llena el alto disponible para que no asome el fondo gris abajo */
.vertical-layout .app-content .content-wrapper{ min-height:calc(100vh - 4.45rem); }

/* Acciones del header del card pegadas a la esquina superior derecha (sin margen arriba/derecha).
   La columna de acciones (col-auto/col-sm-2 a la derecha) se ancla a la esquina del card-header. */
.card > .card-header{ position:relative; }
.card > .card-header > .row.w-100 > .col-auto.text-end:last-child,
.card > .card-header > .row.w-100 > .col-auto.text-right:last-child,
.card > .card-header > .row.w-100 > .col-sm-2.text-end:last-child,
.card > .card-header > .row.w-100 > .col-sm-2.text-right:last-child,
.card > .card-header > .row.w-100 > .col-auto:last-child:not(.col){
  position:absolute; top:0; right:0; padding:.75rem 1rem; z-index:3; width:auto;
}
.card > .card-header > .row.w-100 > .col-auto:last-child .btn-group{ margin:0; }

/* ---------- Tarjetas ---------- */
/* Sin borde visible: definición sutil sólo con sombra suave sobre fondo blanco. */
.card{
  border:0 !important;
  border-radius:var(--cm-radius) !important;
  box-shadow:var(--cm-shadow) !important;
}
/* El filtro deja de verse como tarjeta separada: se integra como barra sobre la tabla.
   Sólo aplica a cards que contienen el filtro y NO una tabla (no toca el card de la tabla,
   p.ej. vendedores/creditos donde el filtro vive dentro del mismo card de la tabla). */
.card:has(.cm-filters):not(:has(table)){
  background:transparent !important; box-shadow:none !important; border:0 !important; margin-bottom:.5rem !important;
}
.card:has(.cm-filters):not(:has(table)) > .card-body{ padding:.5rem 1.5rem !important; }
.card .card-title{ color:var(--cm-ink); font-weight:650; }

/* ---------- Botones ---------- */
.btn-primary{
  background:var(--cm-grad) !important;
  border:none !important;
  box-shadow:0 6px 16px rgba(243,34,10,.26) !important;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ filter:brightness(1.05); }
.btn-outline-primary{ color:var(--cm-brand) !important; border-color:#f7c3bb !important; }
.btn-outline-primary:hover{ background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }
.btn-relief-primary{ background:var(--cm-grad) !important; border:none !important; }
.text-primary{ color:var(--cm-brand) !important; }
.bg-primary{ background:var(--cm-brand) !important; }
a{ color:var(--cm-brand); }
a:hover{ color:var(--cm-brand-2); }

/* ---------- Badges / chips ---------- */
.badge.bg-primary, .badge.badge-primary{ background:var(--cm-brand) !important; }
.badge.bg-light-primary{ background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }

/* ---------- Tabs (usados en el home) ---------- */
.nav-tabs .nav-link.active{ color:var(--cm-brand) !important; border-color:transparent transparent var(--cm-brand) !important; }
.nav-tabs .nav-link{ color:var(--cm-muted); font-weight:560; }

/* ---------- Tablas ---------- */
.table thead th,
table.dataTable thead th,
table.dataTable thead td{
  text-align:left; text-transform:uppercase; letter-spacing:.04em; font-size:11px !important;
  color:var(--cm-muted) !important; font-weight:650; white-space:nowrap;
  border-bottom:1px solid var(--cm-line) !important; border-top:0 !important;
  background:transparent !important; padding:12px 16px;
}
.table tbody td, table.dataTable tbody td{ font-size:13px; }
.table td, table.dataTable td{ border-color:var(--cm-line) !important; vertical-align:middle; padding:12px 16px; }
.table tbody tr, table.dataTable tbody tr{ transition:background .12s; }
.table tbody tr:hover, table.dataTable tbody tr:hover{ background:#fafbfc !important; }
.table-bordered, .table-bordered td, .table-bordered th{ border-color:var(--cm-line) !important; }

/* Controles de DataTables (buscador, longitud, info, paginación) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--cm-line) !important; border-radius:10px !important;
  padding:6px 9px !important; font-size:12.5px !important; outline:none;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color:var(--cm-brand-2) !important; box-shadow:0 0 0 3px rgba(255,109,20,.12) !important;
}
.dataTables_wrapper .dataTables_info{ color:var(--cm-muted); font-size:.82rem; }
/* Paginación estilo prototipo: botones cuadrados redondeados, separados, activo en marca.
   CSS central → aplica a TODAS las tablas (DataTables bootstrap4) sin tocar blades. */
.dataTables_wrapper .dataTables_paginate{ padding-top:.5rem; }
.dataTables_wrapper .pagination{ display:flex; gap:5px; align-items:center; margin:0; }
.dataTables_wrapper .pagination .page-item{ margin:0; }
.dataTables_wrapper .pagination .page-link{
  min-width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  padding:0 9px; margin:0; line-height:1; font-weight:600; font-size:.82rem;
  color:#4b5158 !important; background:#fff !important;
  border:1px solid var(--cm-line) !important; border-radius:var(--cm-radius-sm) !important;
  transition:.15s ease;
}
.dataTables_wrapper .pagination .page-link:hover{
  background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; border-color:#f7c3bb !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link{
  background:var(--cm-grad) !important; border-color:transparent !important; color:#fff !important;
  box-shadow:0 4px 10px rgba(243,34,10,.28);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link{
  color:#c3c7cd !important; background:#fff !important; border-color:var(--cm-line) !important; opacity:.65;
}

/* Badges de estatus claros (Vuexy bg-light-*) un poco más redondeados */
.badge{ border-radius:999px; padding:.4em .7em; font-weight:650; }

/* ---------- Formularios ---------- */
.form-control, .custom-select{
  border:1px solid var(--cm-line) !important; border-radius:10px !important;
  padding:9px 11px !important; font-size:13px !important; height:auto !important;
  color:var(--cm-ink); background-color:var(--cm-card);
}
/* La variante "sm" (inputs dentro de tablas, filtros del home) sigue compacta */
.form-control-sm{ padding:6px 9px !important; font-size:12.5px !important; }
.form-control:focus{
  border-color:var(--cm-brand-2) !important;
  box-shadow:0 0 0 3px rgba(255,109,20,.12) !important;
}
/* intl-tel-input: el override !important de .form-control pisaba el padding-left que el plugin
   reserva para la bandera/código de país, dejando el número debajo de la bandera. Lo restauramos. */
.iti{ display:block; width:100%; }
.iti > input.form-control{ padding-left:50px !important; }
.iti--separate-dial-code > input.form-control{ padding-left:76px !important; }
.form-label, label{ color:#42474c; font-weight:550; }
.form-group label, .cm-form-grid label, .cm-fg label{ font-size:12px; font-weight:600; color:#42474c; }
/* Select2 (selección simple) alineado a los inputs nuevos */
.select2-container--default .select2-selection--single{
  border:1px solid var(--cm-line) !important; border-radius:10px !important;
  min-height:40px; padding:4px 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:30px; font-size:13px; color:var(--cm-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:38px !important; }

/* ---------- Modales (Nuevo/Editar en todos los módulos) ---------- */
.modal-content{ border:none; border-radius:18px; box-shadow:0 24px 60px rgba(16,21,22,.3); overflow:hidden; }
.modal-header{ border-bottom:1px solid var(--cm-line); padding:1.1rem 1.3rem; align-items:flex-start; }
.modal-title{ font-weight:700; font-size:1.05rem; color:var(--cm-ink); }
.modal-body{ padding:1.2rem 1.3rem; }
.modal-footer{ border-top:1px solid var(--cm-line); background:#fafbfc; padding:.9rem 1.3rem; }
/* Botón de cierre (× ) como cuadrito suave */
.modal-header .close,
.modal-header .btn-close{
  opacity:1; border:0; background:#f3f4f6; border-radius:9px;
  width:32px; height:32px; line-height:1; font-size:1.1rem; color:#6b7280;
  text-shadow:none; transition:.15s; margin:0;
}
.modal-header .close:hover, .modal-header .btn-close:hover{ background:#e9eaed; color:var(--cm-ink); }
.modal-header .close span{ display:inline; }

/* ---------- KPI / estadísticas (home) ---------- */
.card-statistics .card-title, .card-congratulation-medal .card-title{ color:var(--cm-ink); }

/* Fila de KPIs de cartera (rediseño) */
.cm-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1rem; }
.cm-kpi{
  background:var(--cm-card); border:1px solid var(--cm-line);
  border-radius:var(--cm-radius); box-shadow:var(--cm-shadow); padding:1.1rem 1.2rem;
}
.cm-kpi .cm-ic{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.1rem; margin-bottom:.75rem;
}
.cm-kpi .cm-l{ font-size:.78rem; color:var(--cm-muted); font-weight:550; }
.cm-kpi .cm-v{ font-size:1.5rem; font-weight:740; letter-spacing:-.5px; margin-top:.15rem; color:var(--cm-ink); }
.cm-kpi .cm-sub{ font-size:.72rem; color:var(--cm-muted); margin-top:.45rem; font-weight:600; }
.cm-ic.green{ background:#e7f7ee; color:#15a05a; }
.cm-ic.brand{ background:var(--cm-brand-soft); color:var(--cm-brand); }
.cm-ic.amber{ background:#fff4e2; color:#c97a05; }
.cm-ic.red{ background:#fdecec; color:#dc2626; }
@media(max-width:992px){ .cm-kpis{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:576px){ .cm-kpis{ grid-template-columns:1fr; } }

/* ----- Tarjeta "Más vendido" (igual al prototipo) ----- */
.cm-seller{ height:100%; }
.cm-seller .card-body{ padding:1.1rem 1.2rem; }
.cm-seller-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.cm-seller-head h4{ font-size:.95rem; font-weight:650; margin:0; color:var(--cm-ink); }
.cm-seller-head .cm-sub{ font-size:.78rem; color:var(--cm-muted); font-weight:500; }
.cm-hero{ display:flex; align-items:center; gap:.9rem; margin-top:.6rem; }
.cm-hero .cm-ph{
  width:60px; height:60px; border-radius:14px; background:var(--cm-brand-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; overflow:hidden; flex-shrink:0;
}
.cm-hero .cm-ph img{ width:100%; height:100%; object-fit:cover; }
.cm-hero .cm-name{ font-weight:650; font-size:.95rem; color:var(--cm-ink); }
.cm-hero .cm-meta{ color:var(--cm-muted); font-size:.8rem; margin-top:.1rem; }
.cm-hero .cm-big{ font-size:1.35rem; font-weight:740; color:var(--cm-brand); letter-spacing:-.5px; margin-top:.2rem; }

/* ----- Rediseño home: grid 2/1, barras de ranking, chips de variación y pestañas de movimientos ----- */
.cm-grid2{ display:grid; grid-template-columns:1fr 2fr; gap:1rem; margin-bottom:1rem; align-items:stretch; }
.cm-grid2 .cm-seller{ order:-1; } /* "Más vendido" a la izquierda, conservando su tamaño (1fr) */
@media(max-width:992px){ .cm-grid2{ grid-template-columns:1fr; } }

.cm-bars{ padding:.2rem 0 .3rem; }
.cm-bar-row{ display:flex; align-items:center; gap:.7rem; margin-top:.7rem; font-size:.8rem; }
.cm-bar-row .cm-bn{ width:96px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--cm-ink); }
.cm-bar{ flex:1; height:8px; border-radius:999px; background:#f1f2f4; overflow:hidden; }
.cm-bar > i{ display:block; height:100%; border-radius:999px; background:var(--cm-grad); }
.cm-bar-row .cm-bv{ width:34px; text-align:right; color:var(--cm-muted); font-weight:650; }
.dark-layout .cm-bar{ background:#3b4253; }

.cm-delta{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:650; margin-top:.55rem; padding:.18rem .55rem; border-radius:999px; }
.cm-delta.up{ color:#15a05a; background:#e7f7ee; }
.cm-delta.down{ color:#dc2626; background:#fdecec; }
.cm-delta.flat{ color:#c97a05; background:#fff4e2; }
.dark-layout .cm-delta.up{ background:rgba(21,160,90,.20); color:#4ad991; }
.dark-layout .cm-delta.down{ background:rgba(220,38,38,.22); color:#ff7a7a; }
.dark-layout .cm-delta.flat{ background:rgba(201,122,5,.22); color:#f0b44d; }

.cm-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }

/* Filtro compacto dentro de la tarjeta "Ingresos y cobros" */
.cm-ingresos-filtro{ display:flex; flex-direction:column; gap:.1rem; margin-bottom:.5rem; }
.cm-flabel{ font-size:.68rem; font-weight:600; color:var(--cm-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.1rem; }

/* Tarjeta de detalle de abajo con pestañas modernas (subrayado, estilo prototipo) */
.cm-detail-card{ border-radius:var(--cm-radius); }
.cm-detail-body{ padding:1rem 1.1rem; }
.cm-modern-tabs{ border-bottom:1px solid var(--cm-line); padding:.35rem .6rem 0; gap:0; flex-wrap:wrap; }
.cm-modern-tabs .nav-item{ margin:0; }
.cm-modern-tabs .nav-item:not(:first-child){ border-left:1px solid var(--cm-line); } /* separación entre cada tab */
.cm-modern-tabs .nav-link{
  border:0; background:transparent; color:var(--cm-muted); font-weight:600; font-size:.84rem;
  padding:.7rem .85rem; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0;
}
.cm-modern-tabs .nav-link:hover{ color:var(--cm-ink); border-color:transparent transparent transparent; }
.cm-modern-tabs .nav-link.active{ color:var(--cm-brand); background:transparent; border-color:transparent transparent var(--cm-brand); border-bottom-width:2px; }
.dark-layout .cm-modern-tabs .nav-link.active{ color:#ff8a73; border-bottom-color:#ff8a73; }

/* Home: la gráfica de Ingresos como héroe a la izquierda (sin tocar markup).
   :has() reordena la fila que contiene la gráfica para que el chart grande
   quede a la izquierda, estilo prototipo. Si el navegador no soporta :has,
   simplemente no reordena (sin efectos negativos). */
#dashboard-ecommerce .row.match-height:has(#revenue-report-chart){ flex-direction:row-reverse; }

/* Pulido de la tarjeta de estadísticas (Ventas/Créditos/Cobros/Adeudo) */
.statistics-body .avatar{ border-radius:12px !important; width:42px; height:42px; }
.statistics-body h4{ font-size:1.3rem !important; font-weight:740 !important; letter-spacing:-.4px; }
.statistics-body .card-text{ color:var(--cm-muted); font-weight:550; }

/* ---------- Scrollbar fina ---------- */
.main-menu-content::-webkit-scrollbar{ width:6px; }
.main-menu-content::-webkit-scrollbar-thumb{ background:#e2e4e8; border-radius:999px; }

/* =====================================================================
   AJUSTES FINOS (vistos en pantalla) — eliminar el morado/cian de Vuexy
   y compactar la tabla para acercarla al prototipo.
   ===================================================================== */

/* Variables Bootstrap/Vuexy a marca */
:root{ --bs-primary:#f3220a !important; --bs-primary-rgb:243,34,10 !important; }

/* Paginación (DataTables / Bootstrap / Vuexy) → marca */
.page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link,
ul.pagination li.active > a,
.dt-paging .dt-paging-button.current{
  background:var(--cm-grad) !important; border-color:transparent !important;
  color:#fff !important; box-shadow:0 4px 10px rgba(243,34,10,.28) !important;
}
.page-link{ color:#4b5158 !important; }
.page-link:hover{ background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }

/* Botón flotante (FAB) → marca (era morado) */
.floatingButton{
  background:var(--cm-grad) !important;
  box-shadow:0 8px 20px rgba(243,34,10,.35) !important; border:none !important;
  /* centrado por flex: el original centraba con line-height calculado para el borde de 5px que aquí eliminamos */
  display:flex !important; align-items:center; justify-content:center; line-height:1 !important;
}
.floatingButton .fa{ font-size:18px !important; }
.floatingMenu a:hover{ color:var(--cm-brand) !important; }
/* FAB más pegado a la esquina (menor huella sobre el contenido) */
.floatingButtonWrap{ bottom:24px !important; right:24px !important; }

/* Botón "Simular crédito" (era cian btn-info) → ghost limpio de marca */
#btnSimuladorCredit.btn-info{
  background:#fff !important; color:var(--cm-brand) !important;
  border:1px solid #f7c3bb !important; box-shadow:var(--cm-shadow) !important;
}
#btnSimuladorCredit.btn-info:hover{ background:var(--cm-brand-soft) !important; }

/* Leyenda de la gráfica de ingresos */
.bullet.bullet-primary{ background-color:var(--cm-brand) !important; }
.bullet.bullet-warning{ background-color:var(--cm-brand-2) !important; }

/* Tabla limpia con la métrica del mockup (12px vertical · 16px horizontal) */
table.dataTable td, table.dataTable th,
.table td, .table th{ padding:12px 16px !important; }
#dataTable img.img-fluid{ width:38px !important; height:38px !important; border-radius:9px !important; }
#dataTable.table-sm td, #dataTable.table-sm th{ vertical-align:middle; }
.table-bordered{ border-left:0 !important; border-right:0 !important; }
.table-bordered td, .table-bordered th{ border-left:0 !important; border-right:0 !important; }

/* =====================================================================
   PASADA GLOBAL DE COMPONENTES — aplica a TODOS los módulos del dashboard
   para eliminar el primario morado de Vuexy y unificar con la marca.
   ===================================================================== */

/* Color primario / acentos */
.text-primary{ color:var(--cm-brand) !important; }
.bg-primary{ background-color:var(--cm-brand) !important; }
.border-primary{ border-color:var(--cm-brand) !important; }
.bg-light-primary{ background-color:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }
.avatar.bg-light-primary{ color:var(--cm-brand) !important; }
.avatar.bg-primary{ background:var(--cm-grad) !important; }

/* Botones primarios en todas sus variantes Vuexy */
.btn-primary, .btn-relief-primary, .btn-gradient-primary, .btn-flat-primary:active, .btn-flat-primary:hover{
  background:var(--cm-grad) !important; border-color:transparent !important; color:#fff !important;
}
.btn-flat-primary, .btn-outline-primary{ color:var(--cm-brand) !important; }
.btn-outline-primary{ border-color:#f7c3bb !important; }
.btn-outline-primary:hover{ background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }
.btn-icon.btn-primary{ background:var(--cm-grad) !important; }

/* Checkboxes, radios y switches */
.form-check-input:checked, .custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--cm-brand) !important; border-color:var(--cm-brand) !important;
}
.form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(243,34,10,.18) !important; border-color:var(--cm-brand-2) !important; }

/* Nav pills / tabs activos */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  background:var(--cm-grad) !important; color:#fff !important; box-shadow:0 4px 10px rgba(243,34,10,.26) !important;
}

/* Progreso y spinners */
.progress-bar{ background:var(--cm-grad) !important; }
.spinner-border.text-primary, .text-primary .spinner-border{ color:var(--cm-brand) !important; }

/* Select2 (dropdowns en formularios de varios módulos) */
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color:var(--cm-brand) !important; }
.select2-container--default .select2-results__option[aria-selected=true]{ background-color:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus{ border-color:var(--cm-brand-2) !important; }

/* Flatpickr (selección de fechas) */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover{ background:var(--cm-brand) !important; border-color:var(--cm-brand) !important; }
.flatpickr-day.today{ border-color:var(--cm-brand-2) !important; }

/* SweetAlert2 — botón de confirmación */
.swal2-styled.swal2-confirm{ background:var(--cm-grad) !important; box-shadow:none !important; }
.swal2-styled.swal2-confirm:focus{ box-shadow:0 0 0 3px rgba(243,34,10,.3) !important; }

/* Toggle del menú y misceláneos primarios */
.text-primary i, i.text-primary{ color:var(--cm-brand) !important; }
.bullet-primary{ background-color:var(--cm-brand) !important; }
a.text-primary:hover{ color:var(--cm-brand-2) !important; }

/* =====================================================================
   MÓDULO CRÉDITOS
   Sobrescribe estilos de la vista (wizard A horizontal y panel de
   acciones). Se usa !important porque el <style> de la vista carga
   después de este archivo.
   ===================================================================== */

/* ----- Cliente con avatar de iniciales (igual al prototipo) ----- */
.cm-cust{ display:flex; align-items:center; gap:.6rem; }
.cm-av{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:var(--cm-brand-soft); color:var(--cm-brand);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:650; font-size:.72rem; letter-spacing:.02em;
}
.cm-cust-n{ font-weight:550; color:var(--cm-ink); }

/* ----- Píldoras de estatus en la tabla de créditos (igual al prototipo) ----- */
.cm-tag{
  display:inline-block; font-size:.72rem; font-weight:650;
  padding:.34em .75em; border-radius:999px; white-space:nowrap; line-height:1.2;
}
.cm-tag-ok{ color:#15a05a; background:#e7f7ee; }
.cm-tag-warn{ color:#c97a05; background:#fff4e2; }
.cm-tag-danger{ color:#dc2626; background:#fdecec; }
.cm-tag-brand{ color:var(--cm-brand); background:var(--cm-brand-soft); }
.cm-tag-muted{ color:#6b7280; background:#f1f2f4; }

/* ----- Wizard "Nuevo crédito" (pasos horizontales) ----- */
/* Estructura base (consolidada desde el <style> inline de form.blade.php) */
.wizard-steps-container{ overflow-x:auto; }
.wizard-steps{ display:flex; width:100%; position:relative; }
.wizard-steps:before{
  content:''; position:absolute; top:25px; left:0; right:0;
  height:2px; background-color:var(--cm-line) !important; z-index:1;
}
.wizard-steps.step-change{ animation:step-pulse .5s ease-in-out; }
@keyframes step-pulse{
  0%{ opacity:1; }
  50%{ opacity:.7; }
  100%{ opacity:1; }
}
.wizard-step{
  flex:1; text-align:center; position:relative; z-index:2; cursor:pointer;
  padding:0 5px; min-width:120px; transition:transform .2s, filter .3s;
}
.wizard-step:hover{ transform:translateY(-3px); }
.wizard-step-icon{
  width:50px; height:50px; border-radius:50%; background-color:#e0e0e0;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
  font-size:20px; color:#777; transition:all .3s;
  box-shadow:0 2px 5px rgba(0,0,0,.1); position:relative;
}
.wizard-step-label{ margin-top:8px; font-size:14px; color:#777; transition:all .3s; }
.wizard-navigation{ padding-top:15px; border-top:1px solid #e0e0e0; display:flex; justify-content:center; }
.wizard-navigation .btn{ min-width:120px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-wizard-finish{ font-weight:bold; box-shadow:0 2px 5px rgba(0,0,0,.2); }
/* Re-skin a colores de marca */
.wizard-step.active .wizard-step-icon,
.wizard-step.completed .wizard-step-icon{
  background:var(--cm-grad) !important; color:#fff !important;
  box-shadow:0 4px 10px rgba(243,34,10,.4) !important;
}
.wizard-step.active .wizard-step-label,
.wizard-step.completed .wizard-step-label{ color:var(--cm-brand) !important; font-weight:bold; }
.wizard-step:hover .wizard-step-icon{ box-shadow:0 4px 8px rgba(243,34,10,.3) !important; }

/* Botones de navegación del wizard a color de marca */
.btn-wizard-next, .btn-wizard-finish{
  background:var(--cm-grad) !important; border:none !important; color:#fff !important;
  box-shadow:0 6px 16px rgba(243,34,10,.26) !important;
}
.btn-wizard-next:hover, .btn-wizard-finish:hover{ filter:brightness(1.05); }

/* ----- Botón para ENTRAR al panel de acciones (en la tabla) ----- */
#btnOptions{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important;
  text-decoration:none; transition:.15s;
}
#btnOptions:hover{ background:var(--cm-grad) !important; color:#fff !important; box-shadow:0 4px 12px rgba(243,34,10,.3); }
#btnOptions i{ font-size:.95rem; }

/* ----- Panel de acciones del crédito: grilla de tiles UNIFORME ----- */
/* La columna estira para que todos los tiles midan igual de alto */
#consaldo .row.text-center > [class*="col-"]{ display:flex; }
.option-tile{
  width:100%; height:100%; min-height:108px;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem;
  background:var(--cm-card) !important;
  border:1px solid var(--cm-line);
  border-radius:14px !important;
  box-shadow:var(--cm-shadow) !important;
  padding:.85rem .5rem !important;
  text-align:center; line-height:1.2;
  transition:transform .15s, box-shadow .15s, border-color .15s !important;
}
.option-tile:hover{
  background:var(--cm-card) !important;
  border-color:#f7c3bb;
  box-shadow:0 8px 20px rgba(16,21,22,.10) !important;
  transform:translateY(-2px);
}
/* Ícono uniforme y centrado en todos los cuadros */
.option-tile i{ font-size:1.55rem !important; line-height:1; transition:transform .15s; }
.option-tile:hover i{ transform:scale(1.08); }
/* El <br> que separaba ícono/texto ya no hace falta (lo maneja el gap) */
.option-tile br{ display:none; }
/* Etiqueta del tile: tamaño parejo (conserva el color semántico del ícono) */
.option-tile{ font-size:.78rem; font-weight:600; }

/* ===== Créditos v2 · componentes del mockup (2026-06-11) ===== */

/* Tarjeta de filtros */
.cm-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px 20px}
.cm-fg{display:flex;flex-direction:column;gap:4px}
.cm-fg label{font-size:11px !important;font-weight:600;color:var(--cm-muted);text-transform:uppercase;letter-spacing:.03em;margin:0}
.cm-fg select,.cm-fg input{border:1px solid var(--cm-line);border-radius:9px;padding:8px 10px;font-size:13px;background:var(--cm-card);min-width:130px;color:var(--cm-ink);height:auto}
.cm-fg select:focus,.cm-fg input:focus{border-color:var(--cm-brand-2);box-shadow:0 0 0 3px rgba(255,109,20,.12)}

/* Montos coloreados en la tabla */
.cm-amount-ok{color:#15a05a !important;font-weight:650;font-variant-numeric:tabular-nums}
.cm-amount-brand{color:var(--cm-brand) !important;font-weight:650;font-variant-numeric:tabular-nums}

/* Franja de estado del panel de acciones */
.cm-acc-status{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.cm-acc-b{background:var(--cm-bg);border:1px solid var(--cm-line);border-radius:11px;padding:10px 12px}
.cm-acc-b .l{font-size:10.5px;color:var(--cm-muted);font-weight:650;text-transform:uppercase;letter-spacing:.03em}
.cm-acc-b .v{font-size:13.5px;font-weight:700;margin-top:2px;color:var(--cm-ink)}
.cm-acc-b .v.ok{color:#15a05a}.cm-acc-b .v.bad{color:#dc2626}.cm-acc-b .v.off{color:var(--cm-muted)}

/* Stats del detalle del crédito */
.cm-dt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.cm-dt-stat{background:var(--cm-bg);border:1px solid var(--cm-line);border-radius:12px;padding:12px 14px}
.cm-dt-stat .l{font-size:11px;color:var(--cm-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cm-dt-stat .v{font-size:18px;font-weight:740;margin-top:3px;color:var(--cm-ink)}
.cm-dt-stat .v.ok{color:#15a05a}.cm-dt-stat .v.brand{color:var(--cm-brand)}

/* Barra de progreso del plan */
.cm-progress{height:9px;border-radius:999px;background:#f1f2f4;overflow:hidden;margin:6px 0 14px}
.cm-progress i{display:block;height:100%;background:var(--cm-grad);border-radius:999px;transition:width .3s ease}
.cm-progress-lbl{font-size:11.5px;color:var(--cm-muted);font-weight:600}

/* Timeline de pagos */
.cm-timeline{margin-top:6px}
.cm-tline{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--cm-line)}
.cm-tline:last-child{border-bottom:0}
.cm-tline .d{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;background:#15a05a}
.cm-tline .d.p{background:#c97a05}
.cm-tline .info{flex:1}
.cm-tline .info b{font-size:13.5px;color:var(--cm-ink)}
.cm-tline .info small{color:var(--cm-muted);display:block;font-size:11.5px}
.cm-tline .amt{font-weight:700;font-variant-numeric:tabular-nums;color:#15a05a}

/* Secciones y form-grid de modales */
.cm-msec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cm-brand-2);margin:18px 0 10px}
.cm-msec:first-child{margin-top:0}
.cm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.cm-form-grid .cm-field-full{grid-column:1/-1}

/* Wizard A · línea de progreso y check de paso completado */
/* La estructura base del wizard (flex, :before, cursor) vive en MÓDULO CRÉDITOS */
.wizard-prog{position:absolute;top:25px;left:12.5%;height:2px;background:var(--cm-grad);z-index:1;width:0;transition:width .3s ease;max-width:75%}
/* .wizard-step.completed .wizard-step-icon ya tiene background:grad + color:#fff via regla existente */
.wizard-step.completed .wizard-step-icon i{display:none}
/* ::after hereda el contexto del flex parent; se centra explícitamente */
.wizard-step.completed .wizard-step-icon::after{content:'✓';font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Dropzone de archivos */
.cm-dropzone{display:block;border:1.5px dashed #d7dadf;border-radius:12px;padding:18px;text-align:center;color:var(--cm-muted);font-size:12.5px;background:var(--cm-bg);cursor:pointer;transition:.15s;margin-bottom:0}
.cm-dropzone:hover{border-color:var(--cm-brand-2);color:var(--cm-brand-2)}
.dark-layout .cm-dropzone{border-color:#3b4253}

/* Subida de avatar con preview (foto del cliente) */
.cm-avatar-upload{position:relative;width:120px;height:120px;margin:0 auto;border-radius:16px;overflow:hidden;border:1.5px dashed #d7dadf;background:var(--cm-bg);cursor:pointer;transition:.15s}
.cm-avatar-upload:hover{border-color:var(--cm-brand-2)}
.cm-avatar-upload img{width:100%;height:100%;object-fit:cover;display:block}
.cm-avatar-cam{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;background:var(--cm-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 8px rgba(243,34,10,.35);pointer-events:none}
.cm-avatar-hint{font-size:11.5px;color:var(--cm-muted);font-weight:600;margin-top:8px}
.dark-layout .cm-avatar-upload{border-color:#3b4253}

/* ===== POS de ventas (vendedores v2) ===== */

/* Utilidad .form-row (la aportaba Argon; el build Bootstrap de Vuexy no la trae) */
.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
.form-row>.col,.form-row>[class*="col-"]{padding-right:5px;padding-left:5px}

/* Zona de agregar producto del POS */
.cm-pos-add{background:var(--cm-bg);border:1px solid var(--cm-line);border-radius:12px;padding:14px 14px 2px;margin-bottom:6px}

/* Resumen de la venta del POS */
.cm-pos-resumen{background:var(--cm-bg);border:1px solid var(--cm-line);border-radius:12px;padding:14px}
.cm-pos-resumen label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--cm-muted);font-weight:650;margin-bottom:2px}

/* Contenedor con scroll para tablas largas (amortización) */
.cm-tbl-scroll{max-height:280px;overflow-y:auto;border:1px solid var(--cm-line);border-radius:10px}
.cm-tbl-scroll table{margin-bottom:0}
/* !important: el thead global usa background:transparent !important y rompería el sticky */
.cm-tbl-scroll thead th,.cm-tbl-scroll thead td{position:sticky;top:0;background:var(--cm-card) !important;z-index:2}

/* Tablas densas: minis de modales y contenedores con scroll (mockup mini-tbl: 9px 12px) */
.modal .table-sm td, .modal .table-sm th,
.cm-tbl-scroll td, .cm-tbl-scroll th{padding:9px 12px !important}

/* Avatar con foto en listados + subtexto de columna */
.cm-av-img{width:32px;height:32px;border-radius:9px;object-fit:cover;flex-shrink:0;cursor:pointer;border:1px solid var(--cm-line)}
.cm-sub-line{display:block;font-size:11px;color:var(--cm-muted);font-variant-numeric:tabular-nums;margin-top:2px}

/* Listados server-side un punto más compactos */
table.dataTable thead th{padding:10px 14px !important}
table.dataTable tbody td{font-size:12.5px;padding:10px 14px !important}

/* Botones de acción por fila (mockup .icon-act) */
.cm-icon-act{width:30px;height:30px;border-radius:8px;border:1px solid var(--cm-line);background:var(--cm-card);color:var(--cm-muted);font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;vertical-align:middle}
.cm-icon-act:hover{color:var(--cm-brand);border-color:#f7c3bb;text-decoration:none}
.dark-layout .cm-icon-act:hover{border-color:rgba(243,34,10,.45)}

/* Responsive Créditos */
@media (max-width: 991.98px){
  .cm-filters{display:grid;grid-template-columns:1fr 1fr;align-items:end}
}
@media (max-width: 767.98px){
  .cm-form-grid{grid-template-columns:1fr}
  .cm-dt-stats{grid-template-columns:1fr}
  .cm-acc-status{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 575.98px){
  .cm-filters{grid-template-columns:1fr;padding:12px 14px}
  .cm-fg select,.cm-fg input{min-width:0;width:100%}
  #mdlNew .modal-dialog,#mdlEdit .modal-dialog,#mdlEnrolamiento .modal-dialog,
  #mdlClienteInfo .modal-dialog,#mdlAgregarPago .modal-dialog{margin:8px;max-width:calc(100% - 16px)}
  .wizard-step .wizard-step-label{display:none}
  .wizard-step{min-width:0}
}

/* =====================================================================
   PASADA DE PULIDO — estados vacíos/carga, sidebar, dropdowns, toasts,
   micro-interacciones. Todo seguro (CSS), aplica a todos los módulos.
   ===================================================================== */

/* Transiciones suaves en botones */
.btn{ transition:transform .12s, box-shadow .15s, filter .15s, background-color .15s !important; }
.btn:active{ transform:translateY(1px); }

/* Estado VACÍO de las tablas (DataTables) */
table.dataTable td.dataTables_empty{
  padding:2.6rem 1rem !important; text-align:center;
  color:var(--cm-muted); font-weight:550; font-size:.9rem;
}
table.dataTable td.dataTables_empty::before{
  content:"📭"; display:block; font-size:1.9rem; margin-bottom:.45rem; opacity:.65;
}

/* Estado de CARGA (DataTables processing) como tarjeta con la marca */
.dataTables_processing{
  border:1px solid var(--cm-line) !important; border-radius:12px !important;
  box-shadow:var(--cm-shadow) !important; background:var(--cm-card) !important;
  color:var(--cm-brand) !important; font-weight:650 !important; padding:1rem 1.4rem !important;
}

/* Dropdowns de acciones (en todas las tablas) */
.dropdown-menu{
  border:1px solid var(--cm-line) !important; border-radius:12px !important;
  box-shadow:0 12px 30px rgba(16,21,22,.12) !important; padding:.35rem !important;
}
.dropdown-item{ border-radius:8px; padding:.5rem .7rem; font-weight:550; transition:.12s; }
.dropdown-item:hover{ background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; }

/* Toasts (toastr) — barra/acento de marca para info */
.toast-info{ background-color:var(--cm-brand) !important; }
#toast-container > .toast{ border-radius:12px !important; box-shadow:0 12px 30px rgba(16,21,22,.18) !important; }

/* Micro-interacción en tarjetas KPI y de estadísticas */
.cm-kpi, .cm-seller{ transition:transform .15s, box-shadow .15s; }
.cm-kpi:hover, .cm-seller:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,21,22,.10); }

/* =====================================================================
   RESPONSIVE / MÓVIL — ajustes para que se vea bien en teléfonos/tablets
   ===================================================================== */

/* Panel de acciones: los tiles col-2 (6 por fila) son diminutos en móvil.
   Tablet → 4 por fila; teléfono → 3 por fila. */
@media (max-width: 991.98px){
  #consaldo .row.text-center > [class*="col-"]{ flex:0 0 25%; max-width:25%; }
}
@media (max-width: 575.98px){
  #consaldo .row.text-center > [class*="col-"]{ flex:0 0 33.333%; max-width:33.333%; }
  .option-tile{ min-height:92px; }
  .option-tile i{ font-size:1.35rem !important; }
  .option-tile{ font-size:.72rem; }
}

/* Tablas anchas: permitir scroll horizontal en pantallas chicas */
@media (max-width: 991.98px){
  .dataTables_wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dataTables_wrapper > table.dataTable{ min-width:760px; }
}

/* En móvil, compactar paddings del contenido y KPIs */
@media (max-width: 575.98px){
  .cm-kpi{ padding:1rem; }
  .cm-kpi .cm-v{ font-size:1.35rem; }
  .card-header{ flex-wrap:wrap; gap:.5rem; }
}

/* Filtros (varios módulos) en columna en móvil para que no se aprieten */
@media (max-width: 767.98px){
  .filters, .form-inline{ gap:.6rem; }
}

/* =====================================================================
   MODO OSCURO (clase .dark-layout en <html>, que pone el toggle del navbar)
   Redefine las variables de marca con la paleta oscura de Vuexy; como casi
   todas las reglas usan esas variables, se adaptan automáticamente. Abajo,
   solo los puntos que tenían colores claros fijos.
   ===================================================================== */
.dark-layout{
  --cm-bg:#161d31;            /* fondo app (Vuexy dark) */
  --cm-card:#283046;          /* tarjetas / sidebar / navbar */
  --cm-surface:#161d31;       /* superficie de página (html/body/contenido) */
  --cm-ink:#d0d2d6;           /* texto principal */
  --cm-muted:#b4b7bd;         /* texto secundario */
  --cm-line:#3b4253;          /* bordes */
  --cm-brand-soft:rgba(243,34,10,.18);
}

/* Sidebar / navegación */
.dark-layout .shadow-bottom{
  background:linear-gradient(#283046 44%, rgba(40,48,70,.7) 73%, rgba(40,48,70,0)) !important;
}
.dark-layout .main-menu .navigation li.nav-item > a:hover,
.dark-layout .main-menu .navigation > li.open > a{ background:#161d31 !important; }
.dark-layout .main-menu .navigation li a{ color:#c2c6cf !important; }
.dark-layout .main-menu-content::-webkit-scrollbar-thumb{ background:#3b4253; }

/* Tablas */
.dark-layout .table tbody tr:hover,
.dark-layout table.dataTable tbody tr:hover{ background:#212840 !important; }
.dark-layout .table td, .dark-layout table.dataTable td,
.dark-layout .table th, .dark-layout table.dataTable th{ color:var(--cm-ink); }
/* Paginación / búsqueda / longitud en oscuro (tenían fondo blanco fijo) */
.dark-layout .pagination .page-link{ background:var(--cm-card) !important; color:var(--cm-ink) !important; border-color:var(--cm-line) !important; }
.dark-layout .pagination .page-item.active .page-link{ background:var(--cm-grad) !important; color:#fff !important; }
.dark-layout .pagination .page-item.disabled .page-link{ color:#6b7280 !important; background:var(--cm-card) !important; }
.dark-layout .dt-search input, .dark-layout .dt-length select,
.dark-layout .dataTables_filter input, .dark-layout .dataTables_length select{
  background:var(--cm-card) !important; color:var(--cm-ink) !important; border-color:var(--cm-line) !important;
}

/* Modales */
.dark-layout .modal-footer{ background:#212840 !important; }
.dark-layout .modal-header .close, .dark-layout .modal-header .btn-close{
  background:#161d31 !important; color:var(--cm-muted) !important;
}
.dark-layout .modal-header .close:hover{ background:#0e1426 !important; color:#fff !important; }

/* Inputs (mi regla clara forzaba borde gris; en oscuro lo ajusto) */
.dark-layout .form-control, .dark-layout .custom-select{
  background:#283046 !important; color:var(--cm-ink) !important; border-color:#3b4253 !important;
}
/* Labels: el #42474c claro sería ilegible sobre fondo oscuro */
.dark-layout .form-group label, .dark-layout .cm-form-grid label, .dark-layout .form-label{ color:var(--cm-ink); }

/* Select2 en dark */
.dark-layout .select2-container--default .select2-selection--single{background-color:#283046 !important}

/* Botón "Simular" en oscuro */
.dark-layout #btnSimuladorCredit.btn-info{
  background:#283046 !important; color:var(--cm-brand) !important; border-color:rgba(243,34,10,.45) !important;
}

/* Avatares y tarjetas de estadísticas */
.dark-layout .statistics-body .avatar{ background:#161d31 !important; }

/* Píldoras de estatus: fondos translúcidos para que no brillen en oscuro */
.dark-layout .cm-tag-ok{ background:rgba(21,160,90,.20); color:#4ad991; }
.dark-layout .cm-tag-warn{ background:rgba(201,122,5,.22); color:#f0b44d; }
.dark-layout .cm-tag-danger{ background:rgba(220,38,38,.22); color:#ff7a7a; }
.dark-layout .cm-tag-brand{ background:rgba(243,34,10,.22); color:#ff8a73; }
.dark-layout .cm-tag-muted{ background:rgba(180,183,189,.18); color:#b4b7bd; }

/* Íconos KPI con fondo translúcido en oscuro */
.dark-layout .cm-ic.green{ background:rgba(21,160,90,.18); color:#4ad991; }
.dark-layout .cm-ic.brand{ background:rgba(243,34,10,.18); }
.dark-layout .cm-ic.amber{ background:rgba(201,122,5,.20); color:#f0b44d; }
.dark-layout .cm-ic.red{ background:rgba(220,38,38,.20); color:#ff7a7a; }

/* Valores/estados extra en dark mode */
.dark-layout .cm-amount-ok,
.dark-layout .cm-acc-b .v.ok,
.dark-layout .cm-dt-stat .v.ok,
.dark-layout .cm-tline .amt{color:#4ad991}
.dark-layout .cm-tline .d{background:#4ad991}
.dark-layout .cm-acc-b .v.bad{color:#ff7a7a}
.dark-layout .cm-tline .d.p{background:#f0b44d}
.dark-layout .cm-progress{background:var(--cm-line)}

/* ============ Dashboard compacto: todo a la vista sin scroll ============ */
#dashboard-ecommerce .cm-kpis{ margin-bottom:.7rem; gap:.7rem; }
#dashboard-ecommerce .cm-kpi{ padding:.75rem .9rem; }
#dashboard-ecommerce .cm-kpi .cm-ic{ width:34px; height:34px; margin-bottom:.4rem; font-size:.95rem; border-radius:10px; }
#dashboard-ecommerce .cm-kpi .cm-v{ font-size:1.3rem; margin-top:.05rem; }
#dashboard-ecommerce .cm-kpi .cm-delta{ margin-top:.35rem; }
#dashboard-ecommerce .cm-grid2{ gap:.7rem; margin-bottom:.7rem; }
#dashboard-ecommerce .card-revenue-budget .card-header{ padding:.6rem .9rem .15rem; }
#dashboard-ecommerce .card-revenue-budget .card-title{ font-size:1rem; }
#dashboard-ecommerce .revenue-report-wrapper{ padding:.2rem .4rem; }
#dashboard-ecommerce .budget-wrapper{ padding:.5rem .7rem; }
/* Filtro de ingresos compacto: Desde/Hasta en una fila, Año debajo */
#dashboard-ecommerce .cm-ingresos-filtro{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem .5rem; margin-bottom:.45rem; }
#dashboard-ecommerce .cm-ingresos-filtro .form-group{ margin-bottom:0 !important; }
#dashboard-ecommerce .cm-ingresos-filtro .form-group:last-child{ grid-column:1 / -1; }
#dashboard-ecommerce .cm-flabel{ margin-bottom:.05rem; }
#dashboard-ecommerce .budget-wrapper #totalIngresos{ font-size:1.45rem; margin:.2rem 0 .05rem; }
#dashboard-ecommerce .budget-wrapper .btn{ padding:.32rem .6rem; font-size:.8rem; }
#dashboard-ecommerce .cm-seller .card-body{ padding:.8rem .95rem; }
#dashboard-ecommerce .cm-hero{ margin-top:.45rem; }
#dashboard-ecommerce .cm-bars{ padding:.1rem 0 .15rem; }
#dashboard-ecommerce .cm-bar-row{ margin-top:.5rem; }
/* Licencias + Órdenes compactos */
#dashboard-ecommerce .row.match-height{ margin-bottom:0; }
#dashboard-ecommerce .row.match-height .card-body{ padding:.7rem .95rem; }
#dashboard-ecommerce .row.match-height .card-title{ font-size:1rem; margin-bottom:.25rem; }

/* ============ Acentos 'info' (cian/azul Bootstrap) re-mapeados a la marca ============ */
/* El tema solo redefinía *-primary; los *-info salían azul/cian fuera de identidad.
   Se mantienen success (verde) y danger (rojo) por su semántica. */
.btn-info, .badge-info, .bg-info{ background-color:var(--cm-brand-2) !important; border-color:var(--cm-brand-2) !important; color:#fff !important; }
.btn-info:hover, .btn-info:focus, .btn-info:active{ background-color:var(--cm-brand) !important; border-color:var(--cm-brand) !important; }
.btn-outline-info{ color:var(--cm-brand-2) !important; border-color:var(--cm-brand-2) !important; background:transparent !important; }
.btn-outline-info:hover, .btn-outline-info:focus{ background-color:var(--cm-brand-2) !important; color:#fff !important; }
.text-info{ color:var(--cm-brand-2) !important; }
.border-left-info{ border-left-color:var(--cm-brand-2) !important; }

/* Escala de radios como tokens (para unificar inputs/cards/modales/tiles progresivamente) */
:root{ --cm-radius-sm:9px; --cm-radius-md:12px; --cm-radius-lg:16px; --cm-radius-pill:999px; }

/* ============ Dashboard envuelto en un único card blanco ============ */
/* Todo el dashboard vive dentro de un solo card blanco que arranca desde arriba.
   El margen superior de los KPIs es el padding del card (blanco, NO gris). */
.flex-grow-1.container-p-y:has(#dashboard-ecommerce){
  background:var(--cm-card) !important;
  border-radius:var(--cm-radius);
  box-shadow:var(--cm-shadow);
  padding:1.5rem 1.25rem 1.25rem !important;
}
/* Las tarjetas internas van planas (sin sombra) sobre el card contenedor, sólo con un
   borde sutil, para que se lea como UNA superficie y no como cards-dentro-de-card. */
.flex-grow-1.container-p-y:has(#dashboard-ecommerce) .card{
  box-shadow:none !important;
  border:1px solid var(--cm-line) !important;
}
.flex-grow-1.container-p-y:has(#dashboard-ecommerce) .cm-kpi{ box-shadow:none !important; }
/* Pequeño respiro superior de los KPIs dentro del card */
#dashboard-ecommerce .cm-kpis{ margin-top:.15rem; }

/* ============ Paginación DataTables 2.x + bootstrap4 (markup confirmado del CDN) ============
   <ul.pagination> > <li.dt-paging-button.page-item[.active|.disabled]> > <a.page-link>
   El BOTÓN visible es el <a.page-link>; el <li.dt-paging-button> es SOLO contenedor.
   Se le quita TODA caja al <li> (borde/fondo/padding/margen) para no duplicar el borde. */
.dt-container .dt-paging,
.dataTables_wrapper .dt-paging{ padding-top:.55rem; }
/* Espacio bajo el footer de la tabla para que el paginado (abajo-derecha) no quede
   debajo del FAB. Queda dentro del card (que sigue llenando el alto), no asoma gris. */
.dt-container,
.dataTables_wrapper{ padding-bottom:84px; }
.dt-container .pagination,
.dataTables_wrapper .pagination{ display:flex; gap:6px; align-items:center; margin:0; flex-wrap:wrap; }

/* <li> contenedor: SIN caja (esto elimina el doble borde / padding / margen extra) */
.pagination .dt-paging-button,
.pagination li.page-item{
  min-width:0 !important; height:auto !important; border:0 !important; background:transparent !important;
  margin:0 !important; padding:0 !important; box-shadow:none !important;
}

/* <a.page-link>: la ÚNICA cajita del botón (scope amplio para ganarle a bootstrap4) */
.pagination .page-link{
  min-width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  padding:0 9px !important; margin:0 !important; line-height:1; font-weight:600; font-size:.82rem;
  color:#4b5158 !important; background:#fff !important;
  border:1px solid var(--cm-line) !important; border-radius:var(--cm-radius-sm) !important;
  box-shadow:none !important; transition:.15s ease;
}
.pagination .page-item:not(.active):not(.disabled) .page-link:hover{
  background:var(--cm-brand-soft) !important; color:var(--cm-brand) !important; border-color:#f7c3bb !important;
}
.pagination .page-item.active .page-link{
  background:var(--cm-grad) !important; border-color:transparent !important; color:#fff !important;
  box-shadow:0 4px 10px rgba(243,34,10,.28) !important;
}
.pagination .page-item.disabled .page-link{ color:#c3c7cd !important; opacity:.55; box-shadow:none !important; }
.pagination .page-link svg{ width:15px; height:15px; }

/* Info / longitud / búsqueda (DT2 .dt-*) */
.dt-container .dt-info{ color:var(--cm-muted) !important; font-size:.82rem; }
.dt-container .dt-search input,
.dt-container .dt-length select{
  border:1px solid var(--cm-line) !important; border-radius:var(--cm-radius-sm) !important;
  padding:6px 9px !important; font-size:12.5px !important; outline:none;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus{
  border-color:var(--cm-brand-2) !important; box-shadow:0 0 0 3px rgba(255,109,20,.12) !important;
}

/* Pager limpio: ocultar primero («) y último (») — no llevan clase, van por posición */
.pagination li.page-item:first-child,
.pagination li.page-item:last-child{ display:none !important; }

/* ============ SweetAlert2 con diseño de marca (eliminar y alertas) ============ */
.swal2-popup{
  border-radius:var(--cm-radius) !important; padding:1.6rem 1.5rem 1.3rem !important;
  box-shadow:0 24px 60px rgba(16,21,22,.30) !important; font-family:inherit;
}
.swal2-title{ color:var(--cm-ink) !important; font-weight:740 !important; font-size:1.2rem !important; }
.swal2-html-container{ color:var(--cm-muted) !important; font-size:.92rem !important; }
.swal2-actions{ gap:.5rem; margin-top:1.1rem !important; }
/* Botón confirmar de marca (custom y el por defecto de cualquier alerta) */
.cm-swal-confirm, .swal2-styled.swal2-confirm{
  background:var(--cm-grad) !important; color:#fff !important; border:0 !important;
  border-radius:10px !important; padding:.6rem 1.15rem !important; font-weight:650 !important;
  box-shadow:0 6px 16px rgba(243,34,10,.28) !important;
}
.cm-swal-confirm:hover, .swal2-styled.swal2-confirm:hover{ filter:brightness(1.05); }
.cm-swal-cancel, .swal2-styled.swal2-cancel{
  background:#fff !important; color:#4b5158 !important; border:1px solid var(--cm-line) !important;
  border-radius:10px !important; padding:.6rem 1.15rem !important; font-weight:600 !important; box-shadow:none !important;
}
.cm-swal-cancel:hover, .swal2-styled.swal2-cancel:hover{ background:#f7f7f8 !important; }
.swal2-icon.swal2-warning{ border-color:#f0b44d !important; color:#c97a05 !important; }
/* Modo oscuro */
.dark-layout .swal2-popup{ background:var(--cm-card) !important; }
.dark-layout .swal2-html-container{ color:var(--cm-muted) !important; }
.dark-layout .cm-swal-cancel, .dark-layout .swal2-styled.swal2-cancel{
  background:var(--cm-card) !important; color:var(--cm-ink) !important; border-color:var(--cm-line) !important;
}
.dark-layout .cm-swal-cancel:hover, .dark-layout .swal2-styled.swal2-cancel:hover{ background:#212840 !important; }

/* ============ Botones CTA del sidebar (Comprar licencias / Soporte) ============ */
.main-menu .whatsapp-btn{
  display:flex; align-items:center; gap:.6rem; margin:4px 12px; padding:.62rem .85rem;
  border-radius:11px; font-size:.85rem; font-weight:650; text-decoration:none; line-height:1.2; transition:.15s ease;
}
/* Sidebar colapsado (rail 80px): solo ícono centrado */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .whatsapp-btn{ justify-content:center; padding:.62rem 0; }
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .whatsapp-btn .nav-link-text{ display:none; }
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .whatsapp-btn i{ width:auto; }
#whatsapp-btn-buy { background:var(--cm-grad); color:#fff!important; }
#whatsapp-btn-buy i{ color:inherit !important; }
#whatsapp-btn-buy svg{ stroke:currentColor; fill:currentColor; }
#whatsapp-btn-buy:hover { 
  background:white;
  color:var(--cm-brand)!important;
}
#whatsapp-btn-buy:hover i{ color:inherit !important; }
#whatsapp-btn-buy:hover svg{ stroke:currentColor; fill:currentColor; }
#whatsapp-btn-support { background:#25D366; color:#fff!important; }
#whatsapp-btn-support i{ color:inherit !important; }
#whatsapp-btn-support svg{ stroke:currentColor; fill:currentColor; }
#whatsapp-btn-support:hover { 
  background:white;
  color:#25D366!important;
}
#whatsapp-btn-support:hover i{ color:inherit !important; }
#whatsapp-btn-support:hover svg{ stroke:currentColor; fill:currentColor; }