/* =========================================
   ventascrm – Estilos de la aplicación (layout, sidebar, componentes)
   ========================================= */

:root {
  /* ====================================================================
     PALETA DE MARCA PRIMEDLAB  (unificada 2026-08-27)
     Antes convivian 4 azules marino y 2 azules de accion distintos.
     Ahora todo el sistema sale de esta escala. Los ratios anotados son
     WCAG calculados, no estimados: el teal de marca (#12b3a6) NO sirve
     para texto ni para fondo de boton (2.62:1 con blanco encima), por eso
     la accion usa un teal mas oscuro y el #12b3a6 queda como decorativo.
     ==================================================================== */

  /* --- Teal de marca --- */
  --pm-teal-50:   #e2f7f3;   /* fondos suaves */
  --pm-teal-100:  #c8efe9;   /* bordes suaves */
  --pm-teal-200:  #7fd3c9;   /* acento sobre navy      10.41:1 */
  --pm-teal-300:  #34d3c4;   /* acento activo s/ navy   9.72:1 */
  --pm-teal-400:  #12b3a6;   /* teal de marca: SOLO decorativo */
  --pm-teal-500:  #0d7d72;   /* accion; blanco encima   5.01:1 */
  --pm-teal-600:  #0b6b62;   /* hover / texto s/ blanco 6.38:1 */
  --pm-teal-700:  #0a5f57;   /* active                  7.53:1 */

  /* --- Navy de marca --- */
  --pm-navy-900:  #0a1628;   /* sidebar */
  --pm-navy-700:  #0f2233;   /* tinta principal        16.19:1 */
  --pm-navy-500:  #143a5c;   /* navy de marca          11.74:1 */
  --pm-navy-300:  #1b4f7a;

  /* --- Alias semanticos: usar estos, no los numerados --- */
  --pm-primary:       var(--pm-teal-500);
  --pm-primary-hover: var(--pm-teal-600);
  --pm-primary-active:var(--pm-teal-700);
  --pm-primary-ink:   var(--pm-teal-600);   /* texto y enlaces sobre claro */
  --pm-primary-soft:  var(--pm-teal-50);
  --pm-primary-brd:   var(--pm-teal-100);
  --pm-primary-rgb:   13, 125, 114;

  --pm-navy:          var(--pm-navy-500);
  --pm-navy-deep:     var(--pm-navy-900);
  --pm-teal:          var(--pm-teal-400);
  --pm-teal-ink:      var(--pm-teal-600);
  --pm-teal-soft:     var(--pm-teal-50);

  /* --- Estado (no son marca: se mantienen reconocibles) --- */
  --pm-success:      #107d38;   /* era #16a34a = 3.05:1 como texto */
  --pm-success-deco: #16a34a;   /* el verde vivo, solo para rellenos y barras */
  --pm-warning:      #d97706;
  --pm-danger:       #dc2626;
  --pm-danger-soft:  #fdeaea;
  --pm-info:         #2563eb;

  /* --- Superficies y texto --- */
  --pm-bg:           #f4f6fb;
  --pm-surface:      #ffffff;
  --pm-ink:          var(--pm-navy-700);
  --pm-ink-2:        #5b6b7b;
  --pm-ink-3:        #64707b;   /* texto tenue. Era #8a99a8 = 2.92:1, fallaba AA.
                                   Todo lo que use este token es texto de 0.6-0.85rem,
                                   asi que exige 4.5:1; este da 5.07 sobre tarjeta y 4.69 sobre pagina. */
  --pm-border:       #eaeef3;
  --pm-border-2:     #e2e8f0;

  /* --- Radios y sombras --- */
  --pm-r-sm: 8px;
  --pm-r-md: 11px;
  --pm-r-lg: 15px;
  --pm-sh-1: 0 3px 14px rgba(20,58,92,.05);
  --pm-sh-2: 0 10px 22px rgba(20,58,92,.10);

  /* Anillo de foco: navy, NO teal. Un anillo del mismo color que el boton
     que rodea casi no se ve; el navy da 11.74:1 y se distingue siempre. */
  --pm-focus: var(--pm-navy-500);

  /* --- Layout --- */
  --sidebar-width: 260px;
  --sidebar-collapsed: 70px;
  --brand-primary: var(--pm-primary);
  --brand-dark: var(--pm-navy-900);
  --topbar-height: 58px;
  --footer-height: 48px;
}

/* ---- Layout ---- */
html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #f4f6fb;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

#wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ---- Sidebar ---- */
#sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--brand-dark);
  color: #c8d3e6;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  transition: width .25s ease;
  overflow: hidden;
}

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

#sidebar .sidebar-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  background: rgba(0,0,0,.25);
  white-space: nowrap;
  overflow: hidden;
}

#sidebar .brand-logo {
  width: 34px;
  height: 34px;
  background: var(--brand-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: #fff;
}

#sidebar .brand-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin-left: .75rem;
  transition: opacity .2s;
}

#sidebar.collapsed .brand-name { opacity: 0; width: 0; }

/* Marca con logo: mostrar el logo completo expandido y solo el ícono al colapsar */
#sidebar:not(.collapsed) .sidebar-brand .brand-icon { display: none; }
#sidebar.collapsed .sidebar-brand .brand-icon { display: inline-flex; margin: 0 auto; }

/* Nav links */
#sidebar .nav-section {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8096bd;
  padding: .9rem 1.1rem .3rem;
  white-space: nowrap;
  overflow: hidden;
}

#sidebar.collapsed .nav-section { opacity: 0; }

#sidebar .nav-link {
  color: #8fa3c4;
  padding: .55rem 1.1rem;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  transition: background .15s, color .15s;
  position: relative;
}

#sidebar .nav-link i {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

#sidebar .nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

#sidebar .nav-link.active {
  background: rgba(18,179,166,.18);
  color: var(--pm-teal-300);
  font-weight: 600;
}

#sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pm-teal-300);
  border-radius: 0 3px 3px 0;
}

#sidebar.collapsed .nav-link span { display: none; }

/* ---- Sub-menu (Paquetes, Solicitudes, etc.) ---- */
#sidebar .nav-group { margin: 0; }

#sidebar .nav-group-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
}

#sidebar .nav-group-toggle .collapse-icon {
  transition: transform .2s ease;
  font-size: .75rem;
  opacity: .6;
}

#sidebar .nav-group-toggle[aria-expanded="true"] .collapse-icon,
#sidebar .nav-group .collapse.show ~ .nav-group-toggle .collapse-icon {
  transform: rotate(180deg);
}

#sidebar .nav-group .collapse,
#sidebar .nav-group .collapsing { width: 100%; }

#sidebar .nav-sub,
#sidebar div.nav-sub {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  padding: .25rem 0 .5rem 0 !important;
  margin: 0 .5rem 0 1.6rem !important;
  border-left: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 0 6px 6px 0;
  list-style: none;
}

#sidebar .nav-sub > .nav-sub-link,
#sidebar a.nav-sub-link {
  display: flex !important;
  width: auto !important;
  align-items: center !important;
  gap: .65rem !important;
  color: #a3b3cf !important;
  text-decoration: none !important;
  font-size: .82rem !important;
  padding: .5rem .85rem !important;
  border-radius: 6px !important;
  margin: 2px .35rem !important;
  white-space: nowrap;
  transition: background .15s, color .15s, padding-left .15s;
  position: relative;
  border-bottom: 0 !important;
}

#sidebar .nav-sub-link i {
  font-size: .95rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: #6c83a8;
  transition: color .15s;
}

#sidebar .nav-sub-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff !important;
  padding-left: 1.1rem;
}

#sidebar .nav-sub-link:hover i {
  color: var(--pm-teal-200);
}

#sidebar .nav-sub-link.active {
  background: rgba(18,179,166,.20);
  color: var(--pm-teal-200) !important;
  font-weight: 600;
}

#sidebar .nav-sub-link.active i {
  color: var(--pm-teal-200);
}

/* Collapsed state: hide chevrons + sub-menus */
#sidebar.collapsed .nav-group-toggle { padding: .55rem 0; justify-content: center; }

/* Sidebar tooltip on collapsed */
#sidebar.collapsed .nav-link[data-bs-toggle="tooltip"] { }

/* ---- Main content ---- */
#main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
  min-width: 0;
  width: auto;
}

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

#main-content > main {
  flex: 1;
  padding: 1.25rem 1.5rem;
  overflow-x: hidden;
}

/* Hide sidebar text/sub-menus when collapsed */
#sidebar.collapsed .brand-text,
#sidebar.collapsed .sidebar-footer .flex-grow-1,
#sidebar.collapsed .sidebar-footer a,
#sidebar.collapsed .nav-link span,
#sidebar.collapsed .collapse-icon,
#sidebar.collapsed .nav-sub { display: none !important; }

#sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 .25rem; }
#sidebar.collapsed .sidebar-brand .brand-icon { margin: 0 !important; }
#sidebar.collapsed #sidebarToggle {
  margin: 0 !important; padding: .15rem .35rem;
}
#sidebar.collapsed .nav-link { justify-content: center; padding: .55rem 0; }
#sidebar.collapsed .sidebar-footer { padding: .75rem 0 !important; text-align: center; }
#sidebar.collapsed .sidebar-footer .user-avatar { margin: 0 auto; }

/* Floating button to re-expand the sidebar (always visible when collapsed) */
#sidebarExpand {
  display: none;
  position: fixed; top: 14px; left: calc(var(--sidebar-collapsed) - 12px);
  z-index: 1050;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-primary); color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-size: .8rem; line-height: 1;
}
body.sidebar-is-collapsed #sidebarExpand { display: flex; }

/* ---- Topbar ---- */
#topbar {
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

#topbar .topbar-title {
  font-weight: 600;
  color: #212529;
}

/* ---- Page body ---- */
.page-body {
  padding: 1.5rem;
  flex: 1;
}

/* ---- Stat cards ---- */
.stat-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding: 1.2rem 1.4rem;
  background: #fff;
  transition: transform .15s, box-shadow .15s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

/* KPI cards (clicables) */
a > .kpi-card { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
a:hover > .kpi-card {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(13,125,114,.14);
  border-color: var(--pm-teal-100) !important;
}
a > .kpi-card * { color: inherit; }
a > .kpi-card .text-muted { color: #6c757d !important; }
a > .kpi-card .text-danger { color: #dc3545 !important; }
a > .kpi-card .text-success { color: #198754 !important; }
a > .kpi-card .text-dark { color: #212529 !important; }

/* Items de "Últimos Pagos" en dashboard */
.pago-item { transition: background .15s; color: inherit !important; }
.pago-item:hover { background: rgba(13,125,114,.05); }
.pago-item .text-dark { color: #212529 !important; }
.pago-item .text-muted { color: #6c757d !important; }
.pago-item .text-success { color: #198754 !important; }

/* Topbar user (clicable → Mi Perfil) */
.topbar-user { padding: .25rem .5rem; border-radius: 8px; transition: background .15s; }
.topbar-user:hover { background: rgba(13,125,114,.06); }
.topbar-user .text-dark { color: #212529 !important; }
.topbar-user .text-muted { color: #6c757d !important; }

/* Sidebar footer link → Mi Perfil */
.sidebar-footer a { transition: opacity .15s; }
.sidebar-footer a:hover { opacity: .85; }

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: .8rem;
  color: #6c757d;
}

/* ---- Badges ---- */
.badge { font-weight: 500; }

/* ---- Tables ---- */
.table > :not(caption) > * > * { padding: .6rem .75rem; }

.table thead th {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pm-navy-500);
  background: var(--pm-teal-50);
  border-bottom: 2px solid var(--pm-primary);
}

/* Cabeceras de los DataTables: navy con texto blanco, bien diferenciadas de los datos */
table.datatable thead th {
  background: var(--pm-navy-500) !important;
  color: #fff !important;
  border-color: var(--pm-navy-300);
  vertical-align: middle;
}
table.datatable thead th:hover { background: #16305c !important; }
/* Flechas de ordenamiento visibles sobre la cabecera oscura */
table.datatable thead th span.dt-column-order::before,
table.datatable thead th span.dt-column-order::after { color: #fff !important; opacity: .6; }
table.datatable thead th.dt-orderable-asc:hover span.dt-column-order::before,
table.datatable thead th.dt-ordering-asc span.dt-column-order::before,
table.datatable thead th.dt-ordering-desc span.dt-column-order::after { opacity: 1 !important; }

/* ---- Cards ---- */
.card { border-radius: 12px !important; }

/* ---- Mobile overlay ---- */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;
}

#sidebar-overlay.show { display: block; }

/* ---- Alerts / Toasts ---- */
.alert { border-radius: 10px; font-size: .88rem; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c9d6; border-radius: 6px; }

/* ---- Login page ---- */
.login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--pm-navy-900) 0%, var(--pm-teal-500) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
}

/* ---- Footer ---- */
#app-footer {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--pm-navy-500) 60%, var(--pm-teal-700) 100%);
  border-top: 3px solid var(--brand-primary);
  padding: .9rem 1.5rem;
  font-size: .78rem;
  color: #8fa3c4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Decoración fondo footer */
#app-footer::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(13,125,114,.12);
  pointer-events: none;
}
#app-footer::after {
  content: '';
  position: absolute;
  bottom: -20px; left: 40%;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}

#app-footer .footer-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

#app-footer .footer-icon-wrap {
  width: 32px; height: 32px;
  background: var(--brand-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,125,114,.4);
}

#app-footer .footer-brand {
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .15s;
}
#app-footer .footer-brand:hover { color: var(--pm-teal-300); }

#app-footer .footer-sep {
  width: 1px; height: 16px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

#app-footer .footer-copy {
  color: #8096bd;
  font-size: .72rem;
}

#app-footer .footer-links {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

#app-footer .footer-links a {
  color: #8096bd;
  text-decoration: none;
  display: flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 6px;
  font-size: .75rem;
  transition: background .15s, color .15s;
  border: 1px solid transparent;
}
#app-footer .footer-links a:hover {
  color: var(--pm-teal-200);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}

#app-footer .footer-status {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem;
  color: #2dce89;
  background: rgba(45,206,137,.1);
  border: 1px solid rgba(45,206,137,.25);
  border-radius: 20px;
  padding: .2rem .65rem;
  white-space: nowrap;
}

#app-footer .footer-status .dot {
  width: 7px; height: 7px;
  background: #2dce89;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}

/* ---- QR por cuota ---- */
.qr-cuota-img {
  border: 3px solid #e9ecef;
  border-radius: 12px;
  padding: .5rem;
  background: #fff;
}

.qr-badge-usado {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  background: rgba(220,53,69,.85);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: .4rem 1rem;
  border-radius: 6px;
  pointer-events: none;
  letter-spacing: .05em;
}

/* ---- Responsive ---- */

/* Tablet landscape → sidebar colapsa automáticamente */
@media (max-width: 1199.98px) {
  :root { --sidebar-width: 230px; }
}

/* Tablet / móvil → sidebar fuera de pantalla, toggle manual */
@media (max-width: 991.98px) {
  #sidebar {
    left: calc(-1 * var(--sidebar-width));
    transition: left .25s ease, width .25s ease;
    width: var(--sidebar-width) !important;
  }

  #sidebar.mobile-open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
  }

  #main-content {
    margin-left: 0 !important;
    width: 100%;
  }

  #main-content > main {
    padding: 1rem;
  }

  #sidebarExpand { display: none !important; }

  #app-footer {
    padding: .75rem 1rem;
    gap: .5rem;
  }
  #app-footer .footer-copy { font-size: .68rem; }
}

/* Móvil pequeño */
@media (max-width: 575.98px) {
  #topbar { padding: 0 .75rem; gap: .5rem; }

  #main-content > main { padding: .75rem .6rem; }

  .stat-card { padding: .9rem 1rem; }
  .stat-card .stat-value { font-size: 1.35rem; }

  .table-responsive { font-size: .82rem; }

  /* Ocultar columnas secundarias en tablas en móvil */
  .table .d-none-xs { display: none !important; }

  .card { border-radius: 10px !important; }

  /* Formularios a pantalla completa */
  .card[style*="max-width"] { max-width: 100% !important; }

  /* Modal genérico: el padding de escritorio (1.25rem 1.5rem) se come
     demasiado viewport en un teléfono de 375px. */
  .app-form-modal .modal-body { padding: .75rem; }

  /* Área táctil mínima (~40px) para los botones de navegación del topbar,
     que son btn-sm (~30px) y son el control principal de cada página. */
  #sidebarToggleMobile,
  #btnVolver {
    min-height: 40px;
    min-width: 40px;
  }

  /* Botones de acción (Ver/Editar/Anular) dentro de tablas: btn-sm queda
     por debajo del mínimo táctil cómodo. Una sola regla cubre todas las
     tablas del sistema sin tocar plantillas. */
  .table .btn-sm {
    min-height: 38px;
    min-width: 38px;
  }
}

/* Mantener topbar sticky al hacer scroll */
#topbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Main content ocupa el ancho restante y permite scroll vertical */
#main-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100vh;
}

#main-content > main {
  flex: 1 0 auto;
}

/* Sidebar scroll interno */
#sidebar .sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 0;
  min-height: 0;
  /* Scrollbar delgada pero visible en el sidebar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) rgba(255,255,255,.06);
}
#sidebar .sidebar-nav::-webkit-scrollbar { width: 8px; }
#sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 4px; }
#sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.55); }
#sidebar .sidebar-nav::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }

/* Footer del sidebar siempre visible al fondo */
#sidebar .sidebar-footer {
  flex-shrink: 0;
}

/* ============================================================
   Documentos al cliente (cotización / nota de venta / pedido)
   Paleta de marca PRIMEDLAB: teal + azul marino
   ============================================================ */
:root{ --doc-teal:#159a8a; --doc-navy:#143a5c; }
.doc-wrap{ max-width:860px; margin:0 auto; }
.doc{ background:#fff; border:1px solid #e6ebf1; border-radius:14px; box-shadow:0 4px 22px rgba(20,58,92,.07); overflow:hidden; }
.doc-body{ padding:26px 30px; }
/* El cliente pide la hoja integramente en mayusculas. Se hace por CSS y no en
   la plantilla para que valga igual en pantalla, en la impresion y en el PDF,
   y para no tocar los datos guardados (el importe en letras, la razon social
   del cliente, etc. siguen almacenados tal cual se cargaron).
   Va con clase propia y no sobre .doc a secas: el documento de Pedido web usa
   el mismo layout y quedo fuera de este pedido del cliente. */
.doc.doc-mayus{ text-transform:uppercase; }
.doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.doc-brand{ display:flex; align-items:center; gap:14px; }
.doc-brand img{ height:56px; width:auto; max-width:300px; }
.doc-brand .info{ font-size:.72rem; color:#5b6b7b; line-height:1.55; }
/* Telefono y correo: el icono no debe separarse nunca de su valor. Antes iban
   unidos por   ENTRE los dos datos, que es justo al reves: impedia el
   corte natural entre telefono y correo y lo forzaba entre el sobre y la
   direccion, dejando el icono huerfano al final del renglon. */
.doc-brand .info .dato{ white-space:nowrap; margin-right:.7rem; }
.doc-brand .info b{ color:var(--doc-navy); font-size:.8rem; }
.doc-type{ text-align:center; border:2px solid var(--doc-navy); border-radius:14px; padding:.45rem 1.2rem; min-width:180px; }
.doc-type .t{ color:var(--doc-navy); font-weight:800; letter-spacing:1px; font-size:.95rem; text-transform:uppercase; line-height:1.1; }
.doc-type .n{ color:var(--doc-teal); font-weight:800; font-size:1.3rem; line-height:1.1; }
.doc-type .d{ font-size:.72rem; color:#5b6b7b; }
.doc-hr{ height:3px; background:linear-gradient(90deg,var(--doc-navy),var(--doc-teal)); border:0; border-radius:2px; margin:15px 0; opacity:1; }
.doc-client{ display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:7px 18px; font-size:.82rem; }
.doc-client .lbl{ font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--pm-ink-3); font-weight:700; display:block; }
.doc-client .val{ color:#1f2d3a; font-weight:600; }
.doc-table{ width:100%; border-collapse:collapse; margin-top:16px; font-size:.82rem; }
.doc-table thead th{ background:var(--doc-navy); color:#fff; padding:.5rem .6rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; font-weight:600; text-align:left; }
.doc-table thead th.num{ text-align:right; }
.doc-table tbody td{ padding:.48rem .6rem; border-bottom:1px solid #eef2f6; vertical-align:top; }
.doc-table tbody td.num{ text-align:right; white-space:nowrap; }
.doc-table tbody tr:nth-child(even){ background:#f7fafc; }
.doc-cod{ color:var(--doc-teal); font-weight:700; white-space:nowrap; }
.doc-foot-grid{ display:flex; justify-content:space-between; gap:22px; margin-top:16px; flex-wrap:wrap; }
.doc-son{ flex:1; min-width:240px; font-size:.8rem; }
.doc-son .cap{ font-size:.6rem; text-transform:uppercase; color:var(--pm-ink-3); font-weight:700; letter-spacing:.05em; }
.doc-son .val{ font-weight:700; color:var(--doc-navy); }
.doc-totals{ min-width:250px; }
.doc-totals table{ width:100%; font-size:.85rem; border-collapse:collapse; }
.doc-totals td{ padding:.28rem .6rem; }
.doc-totals .tot td{ background:var(--doc-navy); color:#fff; font-weight:800; font-size:1.05rem; padding:.5rem .6rem; }
/* El bloque de firmas va bien abajo: encima de cada linea tiene que caber el
   sello de la empresa y el del cliente, que antes no entraban. */
.doc-sign{ display:flex; gap:40px; justify-content:space-around; margin-top:64px; break-inside:avoid; }
.doc-sign .box{ text-align:center; flex:1; max-width:250px; }
/* 35 mm de hueco sobre la raya: en Bolivia se firma Y se estampa un sello de
   goma (~45x25 mm), que con el margen anterior no entraba. */
.doc-sign .hueco{ height:35mm; }
.doc-sign .line{ border-top:1.5px solid #33475b; padding-top:.35rem; font-size:.72rem; font-weight:700; color:#33475b; text-transform:uppercase; letter-spacing:.04em; }
.doc-sign .who{ font-size:.68rem; color:#5b6b7b; margin-top:.15rem; }
.doc-sign .hint{ font-size:.62rem; color:var(--pm-ink-3); font-style:italic; margin-top:.1rem; }
.doc-note{ margin-top:26px; font-size:.72rem; color:var(--pm-ink-3); text-align:center; }
.doc-strip{ background:var(--doc-navy); color:#c3d1de; padding:.7rem 30px; font-size:.7rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.doc-strip b{ color:#fff; }
.doc-strip .teal{ color:#5fd0be; }
/* Mismo criterio que en el bloque de marca: icono y valor no se separan. */
.doc-strip .dato{ white-space:nowrap; margin-right:.7rem; }
/* Documento "plano" mientras se genera el PDF descargable (html2pdf):
   se quita la sombra/borde de tarjeta para que el PDF salga como hoja limpia. */
.doc.pdf-plano{ box-shadow:none !important; border:0 !important; border-radius:0 !important; }

/* En pantallas angostas el documento debe poder desplazarse DENTRO de su caja.
   Sin esto, .doc{overflow:hidden} + body{overflow-x:hidden} recortan las últimas
   columnas (incluido el TOTAL) sin ninguna forma de alcanzarlas en un teléfono.
   Solo pantalla: en impresión el documento debe seguir siendo ancho y completo. */
@media screen and (max-width: 767.98px) {
  .doc { overflow: visible; }
  .doc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .doc-table { min-width: 640px; }
}

@media print{
  @page{ margin:12mm; }
  #sidebar,#topbar,#app-footer,.no-print{ display:none !important; }
  #main-content{ margin:0 !important; height:auto !important; overflow:visible !important; }
  #main-content > main{ padding:0 !important; }
  body{ background:#fff !important; }
  .doc{ border:0; box-shadow:none; border-radius:0; }
  .doc-wrap{ max-width:100%; }
  /* Forzar TODOS los colores/fondos del documento en el PDF impreso
     (navy de cabecera, degradado, zebra, franja inferior, etc.). */
  .doc, .doc *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .doc-table tbody tr:nth-child(even){ background:#f7fafc !important; }
  .doc-table tr{ break-inside:avoid; }   /* no partir una fila entre páginas */
  /* Compactar para que un documento corto entre en UNA sola hoja */
  .doc-body{ padding:14px 22px; }
  /* Al imprimir, el ancho util baja a ~186 mm y el bloque de marca (logo de
     hasta 300 px + los datos) ya no dejaba sitio al recuadro del documento:
     con flex-wrap:wrap el recuadro "COTIZACION / numero" se caia debajo del
     logo. En papel no interesa que envuelva, interesa que quepa. */
  .doc-head{ gap:12px; flex-wrap:nowrap; align-items:flex-start; }
  .doc-brand{ min-width:0; }              /* deja que el bloque de marca encoja */
  .doc-brand .info{ min-width:0; }
  .doc-brand img{ height:46px; max-width:200px; }
  .doc-type{ flex:0 0 auto; min-width:0; padding:.4rem .9rem; }
  .doc-type .t{ white-space:nowrap; }
  .doc-type .n{ white-space:nowrap; }
  .doc-hr{ margin:9px 0; }
  .doc-client{ gap:4px 18px; }
  .doc-table{ margin-top:9px; }
  .doc-table thead th{ padding:.34rem .5rem; }
  .doc-table tbody td{ padding:.3rem .5rem; }
  .doc-foot-grid{ margin-top:9px; }
  .doc-sign{ margin-top:64px; break-inside:avoid; }
  .doc-note{ margin-top:16px; }
  .doc-strip{ padding:.5rem 22px; }
}

/* ============================================================
   Pulido de formularios y modales (interactividad + color)
   ============================================================ */
.form-control:focus, .form-select:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 .2rem rgba(13,125,114,.18);
}
.app-form-modal .modal-body { padding: 1.25rem 1.5rem; }
.app-form-modal .form-label { color: #334155; margin-bottom: .2rem; }
.app-form-modal .input-group-text { background: var(--pm-teal-50); color: var(--pm-primary-ink); border-color: var(--pm-teal-100); }

/* Campos con ícono de marca (input-group de _form_fields.html): compacto y limpio. */
.app-ig .input-group-text{
  background:var(--pm-teal-50); color:var(--pm-primary-ink); border-color:var(--pm-teal-100);
  min-width:34px; justify-content:center; padding:.25rem .5rem;
}
.app-ig:focus-within .input-group-text{ background:var(--pm-teal-100); color:var(--pm-primary-active); border-color:var(--pm-teal-200); }
.app-ig .form-control, .app-ig .form-select{ border-left-color:#e3e9f2; }
.app-ig .form-control:focus, .app-ig .form-select:focus{ border-color:var(--pm-primary); }
/* Micro-etiqueta compacta */
.app-flabel{ color:#1e3a8a; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.15rem; }
.app-check-ic{ color:var(--pm-primary-ink); margin-right:.4rem; vertical-align:-1px; }
/* Badge de ícono para las alertas (formato icon-item) */
.icon-item{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.app-form-modal .form-control, .app-form-modal .form-select { transition: border-color .15s, box-shadow .15s; }
/* Evita que un <select> con opciones largas (p. ej. Producto) desborde su
   columna y deforme el modal: min-width:0 permite que la columna se encoja. */
.app-form-modal .row > [class*="col-"] { min-width: 0; }
.app-form-modal .form-select,
.app-form-modal .form-control { max-width: 100%; }
/* Botones con leve realce al pasar el mouse */
.btn { transition: filter .12s, transform .05s; }
.btn:active { transform: translateY(1px); }
.table.dataTable tbody tr:hover { background: rgba(13,125,114,.04); }
/* Botones de exportación de DataTables, alineados a la izquierda con aire */
div.dt-buttons { margin-bottom: .5rem; }
div.dt-buttons .btn { margin-right: .35rem; }
/* Buscador de DataTables con ícono */
.dataTables_wrapper .dt-search input, .dt-container .dt-search input { border-radius: 8px; }

/* ============================================================
   Animaciones de entrada globales (Animate.css v4.1.1 extraído)
   Aplicadas a tarjetas/paneles de cada página vía app.js.
   Seguras: respetan prefers-reduced-motion y no ocultan nada si el JS falla.
   ============================================================ */
:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}
.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}
.animate__fast{animation-duration:calc(var(--animate-duration)*0.8)}
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInUp{animation-name:fadeInUp}
@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInDown{animation-name:fadeInDown}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.animate__fadeIn{animation-name:fadeIn}
@media (prefers-reduced-motion:reduce),print{.animate__animated{animation-duration:1ms!important}}
/* Pre-ocultar tarjetas SOLO mientras el JS de animación arranca (evita parpadeo).
   La clase html.anim-loading la pone/quita app.js; si no hay JS, nada se oculta. */
html.anim-loading #main-content main .card,
html.anim-loading #main-content main .stat-card{opacity:0}
/* Cada objetivo se marca individualmente (el contenido AJAX posterior NO se ve afectado) */
.anim-pre{opacity:0}
.anim-pre.animate__animated{opacity:1}

/* ============================================================
   Panel gerencial (dashboard) — cockpit interactivo
   Paleta de marca PRIMEDLAB: teal #159a8a + navy #143a5c
   ============================================================ */
.dash{ --d-navy:var(--pm-navy-500); --d-teal:var(--pm-teal-400); --d-ink:var(--pm-navy-700); }
.text-teal{ color:var(--pm-teal-600) !important; }
.text-purple{ color:#7c3aed !important; }

/* Encabezado + rango + botón imprimir */
.dash-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.dash-top-r{ display:flex; align-items:center; gap:10px; }
.dash-range{ font-size:.78rem; color:#64748b; white-space:nowrap; }
.btn-print{ display:inline-flex; align-items:center; gap:6px; border:1px solid #d7e0ea; background:#fff; color:var(--d-navy);
  font-size:.8rem; font-weight:600; padding:.4rem .8rem; border-radius:9px; transition:.15s; }
.btn-print:hover{ background:var(--d-navy); color:#fff; border-color:var(--d-navy); }

/* Barra de filtro por período (segmented control) */
.dash-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.dash-filter-lbl{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pm-ink-3); }
.seg{ display:inline-flex; background:#eef2f7; border:1px solid #e2e8f0; border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap; }
.seg-btn{ font-size:.8rem; font-weight:600; color:#556; padding:.36rem .78rem; border-radius:8px; text-decoration:none; transition:.15s; white-space:nowrap; }
.seg-btn:hover{ color:var(--d-navy); background:#fff; }
.seg-btn.active{ background:#fff; color:var(--d-navy); box-shadow:0 2px 6px rgba(20,58,92,.12); }
.dash-filter-tag{ font-size:.75rem; color:var(--pm-ink-3); font-weight:600; }

/* Encabezado de sección */
.dash-sec{ display:flex; align-items:center; gap:12px; margin:22px 0 12px; }
.dash-sec-t{ font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--d-navy); white-space:nowrap; }
.dash-sec-line{ flex:1; height:1px; background:linear-gradient(90deg,#e2e8f0,transparent); }
.dash-sec-note{ font-size:.7rem; color:var(--pm-ink-3); font-style:italic; }

/* Tarjetas KPI del período (con delta) */
.kpi{ display:block; background:#fff; border:1px solid #eaeef3; border-radius:15px; padding:16px 17px; height:100%;
  text-decoration:none; color:inherit; position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--k,#12b3a6); }
.kpi:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(20,58,92,.13); border-color:var(--kb,#c8efe9); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kpi-ico{ width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--k,#12b3a6); background:var(--kbg,#e6faf6); }
.kpi-lbl{ font-size:.76rem; color:#7c8a99; margin:0 0 2px; font-weight:600; }
.kpi-val{ font-size:1.55rem; font-weight:800; color:var(--d-ink); margin:0; line-height:1.1; letter-spacing:-.01em; }
.kpi-val small{ font-size:.85rem; font-weight:700; color:var(--pm-ink-3); }
.kpi-sub{ display:block; margin-top:5px; font-size:.74rem; color:#8895a3; }
.kpi-teal{ --k:#0f9e90; --kbg:#e2f7f3; --kb:#b6ece5; }
.kpi-green{ --k:#16a34a; --kbg:#e6f7ec; --kb:#bdead0; }
.kpi-blue{ --k:#2563eb; --kbg:#e5edff; --kb:#c2d6ff; }
.kpi-indigo{ --k:#6366f1; --kbg:#eceafe; --kb:#d4d1fb; }
.kpi-red{ --k:#dc2626; --kbg:#fdeaea; --kb:#f6c9c9; }

/* Badge de variación */
.delta{ display:inline-flex; align-items:center; gap:1px; font-size:.75rem; font-weight:800; padding:.16rem .5rem .16rem .3rem; border-radius:20px; line-height:1; }
.delta i{ font-size:1rem; }
.delta.up{ color:#0a7d33; background:#e3f7ea; }
.delta.down{ color:#c02626; background:#fdeaea; }
.delta.flat{ color:#64748b; background:#eef1f5; }
.delta.neutral{ color:#475569; background:#eef1f5; }

/* Entrada escalonada de los KPI (segura sin JS) */
@keyframes dashUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.reveal-up{ animation:dashUp .5s cubic-bezier(.2,.7,.3,1) both; }
.row > [class*="col"]:nth-child(1) .reveal-up{ animation-delay:.02s; }
.row > [class*="col"]:nth-child(2) .reveal-up{ animation-delay:.09s; }
.row > [class*="col"]:nth-child(3) .reveal-up{ animation-delay:.16s; }
.row > [class*="col"]:nth-child(4) .reveal-up{ animation-delay:.23s; }

/* Tarjetas de contenido (gráficos / tablas) */
.dcard{ background:#fff; border:1px solid #eaeef3; border-radius:15px; box-shadow:0 3px 14px rgba(20,58,92,.05); overflow:hidden; }
.dcard-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 17px; border-bottom:1px solid #f0f3f7; font-weight:700; color:var(--d-ink); font-size:.92rem; }
.dcard-h-sub{ font-size:.72rem; font-weight:600; color:var(--pm-ink-3); text-transform:capitalize; }
.dcard-link{ font-size:.76rem; font-weight:600; color:var(--pm-primary-ink); text-decoration:none; }
.dcard-link:hover{ text-decoration:underline; }
.dcard-b{ padding:16px 17px; }
.dcard-tint{ background:linear-gradient(160deg,#f7fbfd,#eef5fb); }

/* Mini-tarjetas de situación actual */
.mini{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #eaeef3; border-radius:14px; padding:13px 15px; height:100%;
  text-decoration:none; color:inherit; transition:transform .16s, box-shadow .16s; }
.mini:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,58,92,.1); }
.mini-ico{ width:42px; height:42px; flex-shrink:0; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--m,var(--pm-primary-ink)); background:var(--mb,var(--pm-teal-50)); }
.mini-lbl{ font-size:.73rem; color:#7c8a99; margin:0 0 1px; font-weight:600; }
.mini-val{ font-size:1.12rem; font-weight:800; color:var(--d-ink); display:block; line-height:1.15; }
.mini-muted{ font-size:.7rem; color:var(--pm-ink-3); }
.mini-warn{ font-size:.71rem; color:#c02626; font-weight:700; display:inline-flex; align-items:center; gap:3px; }
.mini-ok{ font-size:.71rem; color:#0a7d33; font-weight:600; }
.mini-alert{ border-color:#fcd9b6; }
.mini-danger{ border-color:#f6c9c9; }

/* Iniciales de cliente */
.ini{ width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:800; color:#0f8f83; background:#e2f7f3; }

/* Tablas del dashboard */
.dash-tbl{ font-size:.82rem; }
.dash-tbl td{ padding:.6rem .4rem; border-color:#f2f5f8; }
.dash-tbl tbody tr:hover{ background:#f8fbfd; }
.dash-tbl .w-1{ width:1%; white-space:nowrap; }

/* Resumen (columna de números) */
.dash-summary{ display:flex; flex-direction:column; gap:2px; }
.sum-row{ display:flex; align-items:center; justify-content:space-between; padding:.55rem .2rem; border-bottom:1px dashed #e6ecf2; font-size:.85rem; }
.sum-row:last-child{ border-bottom:0; }
.sum-row span{ color:#5b6b7b; display:inline-flex; align-items:center; gap:7px; }
.sum-row b{ color:var(--d-ink); font-weight:800; }

/* Estado vacío dentro de una card */
.dash-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:38px 10px; color:var(--pm-ink-3); }
.dash-empty i{ font-size:1.8rem; }
.dash-empty span{ font-size:.82rem; }

@media print{
  .kpi,.dcard,.mini,.delta,.kpi-ico,.mini-ico,.ini,.badge{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .kpi:hover,.mini:hover,.dcard{ box-shadow:none !important; transform:none !important; }
  .dcard,.kpi,.mini{ break-inside:avoid; }
}

/* ---------- Tarjetas del catálogo de reportes ---------- */
a > .rep-card { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
a:hover > .rep-card {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13,125,114,.14);
  border-color: var(--pm-teal-100) !important;
}
a > .rep-card * { color: inherit; }
a > .rep-card .text-muted { color: #6c757d !important; }
a > .pend-chip { transition: transform .12s, box-shadow .12s; }
a:hover > .pend-chip { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* ============================================================
   Pasada de UX/accesibilidad (2026-08-27)
   Reglas globales: aplican a las 80 plantillas sin tocarlas una por una.
   ============================================================ */

/* ---- 1. Foco visible (WCAG 2.4.7) ---------------------------------
   Solo .form-control tenia estilo de foco. Al navegar con Tab no se veia
   donde estaba el cursor en botones, enlaces ni en el menu lateral. */
:where(a, button, [role="button"], .btn, .page-link, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--pm-focus);
  outline-offset: 2px;
  border-radius: var(--pm-r-sm);
}
/* Dentro del sidebar (navy) el azul no contrasta: anillo blanco */
#sidebar :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #fff;
  outline-offset: -3px;
}
/* El foco de los campos ya existia; se unifica con el token */
.form-control:focus-visible, .form-select:focus-visible {
  outline: 3px solid var(--pm-focus);
  outline-offset: 1px;
}

/* ---- 2. Enlace "saltar al contenido" ------------------------------
   Permite a teclado/lector de pantalla saltarse los ~40 enlaces del menu. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--pm-primary-ink);
  color: #fff;
  padding: .65rem 1.1rem;
  border-radius: 0 0 var(--pm-r-sm) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---- 3. Cifras tabulares en columnas numericas ---------------------
   En un ERP los importes se leen en columna. Con cifras proporcionales
   los digitos tienen anchos distintos y los montos no alinean. */
.table td.text-end,
.table th.text-end,
.dash-tbl td,
.kpi-val, .mini-val, .sum-row b,
.num, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 4. Estado de carga en botones de envio ------------------------
   Sin feedback, el usuario vuelve a pulsar Guardar y duplica documentos. */
.btn[data-loading="1"] {
  pointer-events: none;
  opacity: .75;
  position: relative;
}
.btn[data-loading="1"] > * { visibility: hidden; }
.btn[data-loading="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pmSpin .6s linear infinite;
}
@keyframes pmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="1"]::after { animation-duration: 1.5s; }
}

/* ---- 5. Esqueleto de carga del modal AJAX --------------------------
   Antes el modal abria vacio mientras llegaba el formulario. */
.pm-skeleton { padding: 1.25rem 1.5rem; }
.pm-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: pmShimmer 1.2s ease-in-out infinite;
  margin-bottom: .85rem;
}
.pm-skeleton-line:nth-child(2n) { width: 70%; }
.pm-skeleton-line:nth-child(3n) { width: 85%; }
@keyframes pmShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .pm-skeleton-line { animation: none; background: #eef2f7; }
}

/* ---- 6. Estado vacio reutilizable ----------------------------------
   .dash-empty solo servia en el dashboard; .app-empty vale en cualquier
   listado y admite una accion ("Crear el primero"). */
.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 3rem 1rem;
  color: var(--pm-ink-3);
  text-align: center;
}
.app-empty i { font-size: 2rem; opacity: .55; }
.app-empty p { margin: 0; font-size: .88rem; }
.app-empty .btn { margin-top: .5rem; }

/* ============================================================
   PUENTE CON BOOTSTRAP  (2026-08-27)
   Las plantillas usan .btn-primary / .text-primary / .bg-primary por todos
   lados. Bootstrap compila esos colores como valores literales, asi que no
   basta con redefinir --bs-primary: hay que repuntar tambien las variables
   propias de cada componente. Con esto las 80 plantillas quedan en la marca
   sin tocar ni una linea de HTML.
   app.css se carga DESPUES de bootstrap.min.css, por eso gana la cascada.
   ============================================================ */
:root {
  --bs-primary:            #0d7d72;
  --bs-primary-rgb:        13, 125, 114;
  --bs-primary-text-emphasis: var(--pm-teal-700);
  --bs-primary-bg-subtle:  var(--pm-teal-50);
  --bs-primary-border-subtle: var(--pm-teal-100);
  --bs-link-color:         var(--pm-primary-ink);
  --bs-link-color-rgb:     11, 107, 98;
  --bs-link-hover-color:   var(--pm-primary-active);
  --bs-link-hover-color-rgb: 10, 95, 87;
  --bs-focus-ring-color:   rgba(13, 125, 114, .25);
}

/* Boton primario */
.btn-primary {
  --bs-btn-bg:                 var(--pm-primary);
  --bs-btn-border-color:       var(--pm-primary);
  --bs-btn-hover-bg:           var(--pm-primary-hover);
  --bs-btn-hover-border-color: var(--pm-primary-hover);
  --bs-btn-active-bg:          var(--pm-primary-active);
  --bs-btn-active-border-color:var(--pm-primary-active);
  --bs-btn-disabled-bg:        var(--pm-primary);
  --bs-btn-disabled-border-color: var(--pm-primary);
  --bs-btn-focus-shadow-rgb:   13, 125, 114;
}

/* Boton primario con contorno */
.btn-outline-primary {
  --bs-btn-color:              var(--pm-primary-ink);
  --bs-btn-border-color:       var(--pm-primary);
  --bs-btn-hover-bg:           var(--pm-primary);
  --bs-btn-hover-border-color: var(--pm-primary);
  --bs-btn-active-bg:          var(--pm-primary-active);
  --bs-btn-active-border-color:var(--pm-primary-active);
  --bs-btn-disabled-color:     var(--pm-primary);
  --bs-btn-disabled-border-color: var(--pm-primary);
  --bs-btn-focus-shadow-rgb:   13, 125, 114;
}

.btn-link {
  --bs-btn-color:       var(--pm-primary-ink);
  --bs-btn-hover-color: var(--pm-primary-active);
}

/* Controles de formulario */
.form-check-input:checked {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
}
.form-check-input:focus { border-color: var(--pm-primary); }
.form-switch .form-check-input:checked { border-color: var(--pm-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--pm-primary); }
.form-range::-moz-range-thumb     { background-color: var(--pm-primary); }

/* Paginacion (DataTables la usa) */
.page-link { --bs-pagination-color: var(--pm-primary-ink); }
.page-item.active .page-link,
.pagination .page-item.active .page-link {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
}
/* DataTables 2.x pinta su paginacion con clases propias */
table.dataTable ~ .dt-paging .dt-paging-button.current,
.dt-paging .page-item.active .page-link {
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
}

/* Listas, menus y pestanas */
.list-group-item.active {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--pm-primary);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--pm-primary); }
.nav-tabs  { --bs-nav-tabs-link-active-color: var(--pm-primary-ink); }

/* Barras de progreso y acordeon */
.progress { --bs-progress-bar-bg: var(--pm-primary); }
.accordion {
  --bs-accordion-active-color: var(--pm-primary-ink);
  --bs-accordion-active-bg: var(--pm-teal-50);
  --bs-accordion-btn-focus-border-color: var(--pm-primary);
}

/* Alertas y badges informativos de marca */
.alert-primary {
  --bs-alert-color: var(--pm-teal-700);
  --bs-alert-bg: var(--pm-teal-50);
  --bs-alert-border-color: var(--pm-teal-100);
}
.text-bg-primary { background-color: var(--pm-primary) !important; color: #fff !important; }