/* ============================================================
   CobraPay - capa de diseno
   Se carga de ULTIMA en los tres shells, asi que gana por cascada sobre
   app-light.css / app-dark.css sin pelear con !important.

   Dos lenguajes visuales conviven:
     - Soft UI (neumorfismo con contraste corregido) en sidebar, tarjetas y
       dashboard. El neumorfismo puro falla en accesibilidad porque el relieve
       vive solo en la sombra; aqui cada superficie lleva ademas borde y
       contraste de texto verificado.
     - Glassmorfismo en login, topbar, modales y la pantalla de carga, que es
       donde hay un fondo con color detras que justifique el vidrio.
   ============================================================ */

:root {
  /* ---- Marca (derivada del escudo: acero, plata y grafito) ---- */
  --cp-primary:      #3f7fd6;
  --cp-primary-soft: rgba(63, 127, 214, 0.12);
  --cp-primary-ink:  #ffffff;
  --cp-accent:       #0ea472;   /* ingresos */
  --cp-danger:       #dc3545;   /* egresos  */
  --cp-warn:         #d98a00;

  /* ---- Superficies, tema claro ----
     El fondo NO es blanco puro a proposito: el relieve neumorfico necesita
     margen hacia arriba (luz) y hacia abajo (sombra), y sobre #fff solo
     puede oscurecer.

     Los neutros llevan sesgo azul-acero tomado del escudo (no son grises
     puros): en pantalla se leen como color, no como una interfaz apagada. */
  --cp-bg:        #e4ebf5;
  --cp-surface:   #edf2f9;
  --cp-surface-2: #dbe4f0;
  --cp-ink:       #14202f;   /* 13.9:1 sobre --cp-surface */
  --cp-ink-2:     #51617a;   /*  5.1:1 sobre --cp-surface */
  --cp-line:      rgba(20, 32, 47, 0.11);

  /* ---- Neumorfismo ----
     La sombra baja tambien tira a azul: una sombra gris sobre un fondo con
     color se ve sucia, como si la tarjeta estuviera manchada. */
  --cp-neu-hi: #ffffff;
  --cp-neu-lo: #bac7da;
  --cp-neu-out: 6px 6px 14px var(--cp-neu-lo), -6px -6px 14px var(--cp-neu-hi);
  --cp-neu-sm:  3px 3px 7px var(--cp-neu-lo), -3px -3px 7px var(--cp-neu-hi);
  --cp-neu-in: inset 4px 4px 9px var(--cp-neu-lo), inset -4px -4px 9px var(--cp-neu-hi);

  /* ---- Glassmorfismo ---- */
  --cp-glass-bg:  rgba(255, 255, 255, 0.16);
  --cp-glass-brd: rgba(255, 255, 255, 0.28);
  --cp-glass-blur: 18px;
  --cp-glass-shadow: 0 18px 46px rgba(9, 14, 22, 0.28);

  /* ---- Tipografia ----
     Base 16px: el sistema venia con varios sitios en 12-13px, que en una
     pantalla de caja se lee mal a distancia de mostrador. */
  --cp-fs-xs: 0.8125rem;  /* 13px - solo etiquetas auxiliares */
  --cp-fs-sm: 0.9375rem;  /* 15px */
  --cp-fs:    1rem;       /* 16px - base */
  --cp-fs-lg: 1.125rem;   /* 18px */
  --cp-fs-xl: 1.5rem;     /* 24px */
  --cp-fs-2xl: 2rem;      /* 32px */

  --cp-r:    12px;
  --cp-r-lg: 18px;
  --cp-t:    220ms;

  /* ---- Alias: las reglas heredadas de este archivo siguen usandolos ---- */
  --ws-primary: var(--cp-primary);
  --ws-accent:  var(--cp-accent);
  --ws-ink:     var(--cp-ink);
  --ws-soft:    var(--cp-surface);
  --ws-line:    var(--cp-line);
  --ws-shadow:  var(--cp-neu-out);
}

/* Tema oscuro: mismo lenguaje, otro juego de luz.
   No se reutilizan las sombras del claro; en oscuro la "luz" es un gris
   apenas mas claro que la superficie, no blanco, o el relieve se ve sucio. */
body.dark {
  --cp-bg:        #141922;
  --cp-surface:   #1a2029;
  --cp-surface-2: #212936;
  --cp-ink:       #eef2f7;   /* 13.8:1 sobre --cp-surface */
  --cp-ink-2:     #a3b0c2;   /*  6.4:1 sobre --cp-surface */
  --cp-line:      rgba(255, 255, 255, 0.10);

  --cp-neu-hi: #232b37;
  --cp-neu-lo: #0d1117;
  --cp-neu-out: 6px 6px 14px var(--cp-neu-lo), -6px -6px 14px var(--cp-neu-hi);
  --cp-neu-sm:  3px 3px 7px var(--cp-neu-lo), -3px -3px 7px var(--cp-neu-hi);
  --cp-neu-in: inset 4px 4px 9px var(--cp-neu-lo), inset -4px -4px 9px var(--cp-neu-hi);

  --cp-glass-bg:  rgba(255, 255, 255, 0.07);
  --cp-glass-brd: rgba(255, 255, 255, 0.14);

  --cp-primary:      #6aa6f5;
  --cp-primary-soft: rgba(106, 166, 245, 0.16);
  --cp-primary-ink:  #0d1117;
  --cp-accent:       #2dd4a0;
}

body {
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-size: var(--cp-fs);
  line-height: 1.55;
}

.ws-sidebar-logo,
.ws-login-logo {
  display: block;
  width: min(170px, 82%);
  max-height: 78px;
  object-fit: contain;
  margin: 0 auto;
}

.ws-avatar-logo {
  object-fit: contain;
  background: #ffffff;
  padding: 2px;
}

.topnav.navbar {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--ws-line);
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.06);
}

.sidebar-left {
  border-right: 0 !important;
  box-shadow: 12px 0 34px rgba(23, 32, 51, 0.07) !important;
  transition: width 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.vertnav .nav-heading {
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.vertnav .nav-link {
  border-radius: 8px;
  margin: 2px 10px;
  color: #4d5b70 !important;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.vertnav .nav-link:hover,
.vertnav .nav-link:focus {
  background: rgba(27, 104, 255, 0.09);
  color: var(--ws-primary) !important;
  transform: translateX(2px);
}

.vertnav .dropdown-toggle[aria-expanded="true"] {
  background: rgba(27, 104, 255, 0.12);
  color: var(--ws-primary) !important;
}

.main-content .card {
  border: 1px solid rgba(23, 32, 51, 0.06) !important;
  border-radius: 8px !important;
  box-shadow: var(--ws-shadow) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.main-content .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(23, 32, 51, 0.13) !important;
  border-color: rgba(27, 104, 255, 0.15) !important;
}

.main-content .circle {
  box-shadow: 0 10px 22px rgba(27, 104, 255, 0.22);
}

.btn {
  border-radius: 8px;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(23, 32, 51, 0.14);
}

.btn:focus,
.form-control:focus {
  box-shadow: 0 0 0 0.18rem rgba(27, 104, 255, 0.18) !important;
}

.dashboard-status {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(238, 163, 3, 0.16);
}

.dropdown-menu {
  border: 1px solid var(--ws-line);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(23, 32, 51, 0.12);
}

/* Los iconos feather vienen de css/feather.css + fonts/feather.ttf.
   (Aqui hubo un bloque de sustitutos ASCII de emergencia de cuando la
   fuente no existia; se elimino al vendorizar la fuente real.)
   Solo se conserva el cambio sol/luna del conmutador de tema, que se
   resuelve por CSS segun data-mode: */
#modeSwitcher[data-mode="light"] .fe:before { content: "\f1e7"; } /* fe-sun */
#modeSwitcher[data-mode="dark"] .fe:before { content: "\f1a7"; }  /* fe-moon */

/* Estas superficies pasan a los tokens: antes tenian el color fijo y al
   cambiar la paleta quedaban desalineadas con las tarjetas. */
body.dark,
body.dark .wrapper,
body.dark .main,
body.dark .main-content,
body.dark .container-fluid {
  background: var(--cp-bg);
  color: var(--cp-ink);
}

body.dark .sidebar-left {
  background: var(--cp-bg) !important;
  border-color: var(--cp-line) !important;
}
/* La topbar conserva su vidrio tambien en oscuro; no se le pone fondo solido. */
body.dark .topnav.navbar {
  background: var(--cp-glass-bg) !important;
  border-color: var(--cp-glass-brd) !important;
}

body.dark .vertnav .nav-link {
  color: #c8d0dc !important;
}

body.dark .main-content .card,
body.dark .dropdown-menu,
body.dark .modal-content,
body.dark .table,
body.dark .page-link {
  background: #1e2430;
  color: #d8dee9;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark .card-header,
body.dark .card-body,
body.dark .table th,
body.dark .table td,
body.dark .form-control,
body.dark .custom-select,
body.dark .select2-container--bootstrap4 .select2-selection {
  background-color: #1e2430;
  color: #d8dee9;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .text-muted,
body.dark label,
body.dark .page-title,
body.dark .card-title {
  color: #c8d0dc !important;
}

body.dark .form-control:disabled,
body.dark .form-control[readonly] {
  background-color: #252c3a;
  color: #aab4c3;
}

body.dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.025);
}

body.dark .table-hover tbody tr:hover {
  color: #ffffff;
  background-color: rgba(27, 104, 255, 0.12);
}

/* ==========================================================
   NUEVAS CLASES - CobraPay v2 (perfil, dashboard, roles)
   ========================================================== */

/* --- Header: nombre de usuario y rol --- */
.ws-usuario-nombre {
  padding: 0 10px;
  border-left: 1px solid var(--ws-line);
  border-right: 1px solid var(--ws-line);
}

body.dark .ws-usuario-nombre {
  border-color: rgba(255,255,255,.08);
}
body.dark .ws-usuario-nombre .text-dark {
  color: #e9ecef !important;
}

/* --- Badges de rol --- */
.ws-badge-rol {
  font-size: .72rem;
  padding: 5px 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.ws-badge-rol-1 { background: linear-gradient(135deg,#1b68ff,#4f8dff); color:#fff; }
.ws-badge-rol-2 { background: linear-gradient(135deg,#12b981,#3ad29f); color:#fff; }
.ws-badge-rol-3 { background: linear-gradient(135deg,#6f42c1,#9b6dd6); color:#fff; }

/* --- Tarjetas estadisticas del dashboard --- */
.ws-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  border: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ws-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.45));
  opacity: .9;
  pointer-events: none;
}
.ws-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(23,32,51,.18) !important;
}

.ws-stat-card.ws-stat-updated {
  animation: wsStatRefresh 480ms ease-out;
}

@keyframes wsStatRefresh {
  0% { transform: translateY(0); filter: brightness(1); }
  45% { transform: translateY(-3px); filter: brightness(1.08); }
  100% { transform: translateY(0); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-stat-card.ws-stat-updated { animation: none; }
}

.ws-stat-blue  { background: linear-gradient(135deg,#1b68ff,#4f8dff); color: #fff; }
.ws-stat-green { background: linear-gradient(135deg,#12b981,#3ad29f); color: #fff; }
.ws-stat-red   { background: linear-gradient(135deg,#dc3545,#ff6b78); color: #fff; }

.ws-stat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ws-stat-icon {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.25);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.ws-stat-label {
  font-size: .82rem;
  letter-spacing: .3px;
  opacity: .9;
  text-transform: uppercase;
  font-weight: 600;
}
.ws-stat-currency {
  font-size: .72rem;
  opacity: .8;
  letter-spacing: 1px;
  font-weight: 700;
}
.ws-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1;
}
.ws-stat-spark {
  height: 6px;
  background: rgba(255,255,255,.25);
  border-radius: 4px;
  overflow: hidden;
}
.ws-spark-fill {
  height: 100%;
  background: rgba(255,255,255,.85);
  border-radius: 4px;
  transition: width .9s ease;
}
.ws-spark-green { background: rgba(255,255,255,.95); }
.ws-spark-red   { background: rgba(255,255,255,.8); }

/* --- Hero row del dashboard --- */
.ws-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #1b68ff 0%, #12b981 100%);
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 18px 40px rgba(27,104,255,.25);
  position: relative;
  overflow: hidden;
}
.ws-hero-row::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  border-radius: 50%;
}
.ws-hero-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: .85;
  font-weight: 700;
}
.ws-hero-title {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 2px 0;
}
.ws-hero-sub {
  font-size: .9rem;
  opacity: .92;
}
.ws-hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.2);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: .82rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.dot-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: wsDotPulse 1.6s infinite;
}
@keyframes wsDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.ws-hero-badge-ok   { background: rgba(18,185,129,.45); }
.ws-hero-badge-warn { background: rgba(255,193,7,.45); }

/* --- Perfil --- */
.ws-perfil-card { border-radius: 14px !important; }
.ws-perfil-avatar-wrap {
  position: relative;
  width: 110px; height: 110px;
}
.ws-perfil-avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 10px 26px rgba(27,104,255,.25);
  background: #f3f6fb;
}
.ws-perfil-avatar-btn {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #1b68ff;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  transition: transform .15s;
}
.ws-perfil-avatar-btn:hover { transform: scale(1.08); }

/* --- Switch modo oscuro --- */
.ws-switch {
  position: relative;
  display: inline-block;
  width: 52px; height: 28px;
  margin: 0;
}
.ws-switch input { opacity: 0; width: 0; height: 0; }
.ws-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  transition: .3s;
}
.ws-slider::before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 4px; top: 4px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.ws-switch input:checked + .ws-slider {
  background: linear-gradient(135deg,#1b68ff,#12b981);
}
.ws-switch input:checked + .ws-slider::before {
  transform: translateX(24px);
}

/* --- Modo oscuro ajustes adicionales --- */
body.dark .ws-hero-row {
  background: linear-gradient(135deg, #15194f 0%, #0f3b2e 100%);
}
body.dark .ws-stat-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.08));
}
body.dark .ws-perfil-avatar { border-color: #1e2430; }
body.dark .ws-hero-badge { background: rgba(255,255,255,.12); }

/* --- Botones de acciones rapidas --- */
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(27,104,255,.15);
}

/* --- Ajustes responsivos --- */
@media (max-width: 768px) {
  .ws-usuario-nombre { display: none !important; }
  .ws-hero-title { font-size: 1.3rem; }
  .ws-stat-value { font-size: 1.4rem; }
}

/* --- Temporizador de sesion (cuenta regresiva de inactividad) ---
   Oculto mientras el usuario navega; visible solo cuando queda <= 1 minuto. */
.ws-sesion-badge {
  display: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .82rem;
  color: #4d5b70;
  letter-spacing: .3px;
}
.ws-sesion-badge.ws-sesion-visible { display: inline-block; }
.ws-sesion-badge.ws-sesion-alerta {
  color: #dc3545;
  animation: wsSesionParpadeo 1s infinite;
}
@keyframes wsSesionParpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
body.dark .ws-sesion-badge { color: #c8d0dc; }
body.dark .ws-sesion-badge.ws-sesion-alerta { color: #ff6b78; }

/* --- Pulido dashboard (Fase 8) --- */
.ws-stat-value { font-variant-numeric: tabular-nums; }
.ws-stat-icon { transition: transform .25s ease; }
.ws-stat-card:hover .ws-stat-icon { transform: scale(1.1) rotate(-5deg); }

.ws-acciones-rapidas {
  display: flex;
  flex-wrap: wrap;
}
.ws-acciones-rapidas .btn {
  margin: 4px 10px 4px 0;
  border-radius: 10px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ws-stat-card,
  .ws-stat-icon,
  .ws-spark-fill,
  .ws-acciones-rapidas .btn,
  .btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-secondary { transition: none; }
  .ws-stat-card:hover,
  .ws-stat-card:hover .ws-stat-icon { transform: none; }
  .dot-pulse { animation: none; }
  .ws-sesion-badge.ws-sesion-alerta { animation: none; }
}


/* ============================================================
   ============  CAPA COBRAPAY  ===============================
   Va al final a proposito: sobrescribe tanto a Bootstrap como a las reglas
   heredadas de este mismo archivo, sin necesidad de !important salvo donde
   el tema base ya lo usaba.
   ============================================================ */

/* ---------- Tipografia legible ----------
   El sistema venia con etiquetas y celdas en 12-13px. En una pantalla de caja
   se consulta de pie y a distancia: se sube todo un escalon y se le da peso. */
.main-content,
.vertnav .nav-link,
.table,
.form-control,
.btn { font-size: var(--cp-fs); }

.main-content .card-title { font-size: var(--cp-fs-lg); font-weight: 700; letter-spacing: -0.01em; }
label, .form-group label { font-size: var(--cp-fs-sm); font-weight: 600; color: var(--cp-ink); }
small, .small, .form-text { font-size: var(--cp-fs-xs); }
.text-muted { color: var(--cp-ink-2) !important; }

/* Cifras en columna: sin esto los montos bailan al actualizarse porque cada
   digito tiene ancho distinto. */
.ws-stat-value, .ws-stat-currency, .table td, .table th,
#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8 { font-variant-numeric: tabular-nums; }

/* ---------- Superficies neumorficas ---------- */
.main-content .card,
.main-content .card.shadow {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-r-lg) !important;
  box-shadow: var(--cp-neu-out) !important;
  transition: transform var(--cp-t) ease, box-shadow var(--cp-t) ease;
}
.main-content .card:hover {
  transform: translateY(-3px);
  box-shadow: 9px 9px 20px var(--cp-neu-lo), -9px -9px 20px var(--cp-neu-hi) !important;
  border-color: var(--cp-line) !important;
}
.main-content .card-header {
  background: transparent;
  border-bottom: 1px solid var(--cp-line);
  padding: 1rem 1.25rem;
}
.main-content .card-body { color: var(--cp-ink); }

/* ---------- Sidebar ---------- */
.sidebar-left {
  background: var(--cp-bg) !important;
  border-right: 0 !important;
  box-shadow: var(--cp-neu-out) !important;
}
.vertnav .nav-heading {
  font-size: var(--cp-fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cp-ink-2) !important;
  padding-left: 1.1rem;
}
.vertnav .nav-link {
  border-radius: var(--cp-r);
  margin: 4px 12px;
  padding: 0.7rem 0.9rem;
  font-size: var(--cp-fs-sm);
  font-weight: 600;
  color: var(--cp-ink) !important;
  background: transparent;
  box-shadow: none;
  transition: box-shadow var(--cp-t) ease, color var(--cp-t) ease, background-color var(--cp-t) ease;
}
.vertnav .nav-link:hover,
.vertnav .nav-link:focus {
  background: var(--cp-surface);
  box-shadow: var(--cp-neu-sm);
  color: var(--cp-primary) !important;
  transform: none;   /* el relieve ya comunica el estado; mover el item marea */
}
/* El item abierto queda HUNDIDO: es la senal mas clara del lenguaje soft-UI. */
.vertnav .dropdown-toggle[aria-expanded="true"] {
  background: var(--cp-surface-2);
  box-shadow: var(--cp-neu-in);
  color: var(--cp-primary) !important;
}
.vertnav .nav-link .fe { font-size: 1.15rem; opacity: 0.95; }
.ws-sidebar-logo { width: min(150px, 76%); max-height: 96px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }

/* ---------- Topbar: vidrio ---------- */
/* position + z-index explicitos a proposito: el backdrop-filter crea su
   propio stacking context, y sin z-index ese contexto completo (junto con
   el dropdown del perfil que vive adentro) se pinta DEBAJO de .main-content
   porque .main viene despues en el DOM y ambos quedan en el mismo nivel
   "auto" de stacking. El dropdown-menu con z-index alto no alcanza si el
   contenedor que lo aisla no gana primero. */
.topnav.navbar {
  position: relative;
  z-index: 1052;
  background: var(--cp-glass-bg) !important;
  backdrop-filter: blur(var(--cp-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--cp-glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--cp-glass-brd);
  box-shadow: 0 6px 20px rgba(9, 14, 22, 0.10);
}
/* El vidrio deja pasar el fondo, asi que el texto de encima necesita peso
   extra para no perder contraste cuando debajo pasa una tarjeta clara. */
.topnav .nav-link, .topnav .ws-usuario-nombre span { color: var(--cp-ink) !important; font-weight: 600; }
#wsSedeTxt {
  background: var(--cp-primary-soft);
  color: var(--cp-primary) !important;
  border: 1px solid var(--cp-primary-soft);
  font-size: var(--cp-fs-xs); font-weight: 700;
  padding: 0.3rem 0.6rem; border-radius: 999px;
}

/* ---------- Botones ---------- */
.btn {
  border-radius: var(--cp-r);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  transition: box-shadow var(--cp-t) ease, transform var(--cp-t) ease, filter var(--cp-t) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--cp-neu-in); }
.btn-primary {
  background: var(--cp-primary); border-color: var(--cp-primary); color: var(--cp-primary-ink);
  box-shadow: var(--cp-neu-sm);
}
.btn-primary:hover { background: var(--cp-primary); filter: brightness(1.07); }
.btn-outline-primary { color: var(--cp-primary); border-color: var(--cp-primary); }
.btn-outline-primary:hover { background: var(--cp-primary); color: var(--cp-primary-ink); }
.btn-sm { padding: 0.4rem 0.7rem; font-size: var(--cp-fs-sm); }

/* Foco siempre visible: es requisito de accesibilidad y el relieve por si solo
   no lo comunica a quien navega con teclado. */
.btn:focus, .form-control:focus, .vertnav .nav-link:focus, a:focus {
  outline: 3px solid var(--cp-primary);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ---------- Formularios: hundidos ---------- */
.form-control, .custom-select, select.form-control {
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-r);
  box-shadow: var(--cp-neu-in);
  color: var(--cp-ink);
  min-height: 46px;            /* objetivo tactil comodo */
  font-size: var(--cp-fs);
  transition: box-shadow var(--cp-t) ease;
}
.form-control::placeholder { color: var(--cp-ink-2); opacity: 1; }
.form-control:focus { background: var(--cp-surface-2); color: var(--cp-ink); }

/* ---------- Tablas ---------- */
.main-content .table { color: var(--cp-ink); }
.main-content .table thead th {
  background: var(--cp-surface-2);
  border: 0;
  color: var(--cp-ink-2);
  font-size: var(--cp-fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 0.75rem;
}
.main-content .table td { border-top: 1px solid var(--cp-line); padding: 0.85rem 0.75rem; vertical-align: middle; }
.main-content .table tbody tr { transition: background-color 160ms ease; }
.main-content .table tbody tr:hover { background: var(--cp-primary-soft); }

/* ---------- Tarjetas de indicador ----------
   Las clases ws-stat-blue / green / red ya venian en el HTML pero solo
   pintaban el icono, asi que el panel entero se leia como un campo gris.
   Cada familia recibe ahora tinte de fondo y una banda superior de su color:
   el tipo de dato se reconoce de un vistazo, sin leer la etiqueta. */
.ws-stat-card {
  background: var(--cp-surface);
  border-radius: var(--cp-r-lg) !important;
  position: relative;
  overflow: hidden;
}
/* La banda va arriba y a todo el ancho. Es lo bastante gruesa para verse de
   lejos y no roba espacio al contenido. */
.ws-stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cp-tinte, var(--cp-primary));
}
.ws-stat-blue  { --cp-tinte: var(--cp-primary); }
.ws-stat-green { --cp-tinte: var(--cp-accent); }
.ws-stat-red   { --cp-tinte: var(--cp-danger); }

/* El tinte de fondo se compone sobre la superficie, asi funciona igual en
   claro y en oscuro sin definir dos juegos de color.
   La primera declaracion es el respaldo: color-mix() pide navegador de 2023 en
   adelante, y donde no exista la tarjeta se queda en la superficie lisa en vez
   de perder el fondo por completo. */
.ws-stat-blue,
.ws-stat-green,
.ws-stat-red   { background: var(--cp-surface); }
.ws-stat-blue  { background: color-mix(in srgb, var(--cp-primary) 7%, var(--cp-surface)); }
.ws-stat-green { background: color-mix(in srgb, var(--cp-accent)  8%, var(--cp-surface)); }
.ws-stat-red   { background: color-mix(in srgb, var(--cp-danger)  7%, var(--cp-surface)); }

/* La cifra toma el color de su familia. El texto principal sigue siendo
   --cp-ink en el resto de la tarjeta para no perder legibilidad. */
.ws-stat-blue  .ws-stat-value { color: #1d4f92; }
.ws-stat-green .ws-stat-value { color: #075e41; }
.ws-stat-red   .ws-stat-value { color: #a12633; }
body.dark .ws-stat-blue  .ws-stat-value { color: #9cc4f8; }
body.dark .ws-stat-green .ws-stat-value { color: #5fdcb0; }
body.dark .ws-stat-red   .ws-stat-value { color: #f08b95; }

.ws-spark-fill { background: var(--cp-tinte, var(--cp-primary)); height: 100%; border-radius: 999px; }
.ws-stat-label { font-size: var(--cp-fs-sm); font-weight: 700; color: var(--cp-ink-2); }
.ws-stat-currency { font-size: var(--cp-fs-xs); font-weight: 700; color: var(--cp-ink-2); }
.ws-stat-value { font-size: var(--cp-fs-2xl); font-weight: 800; color: var(--cp-ink); letter-spacing: -0.02em; }
.ws-stat-icon {
  background: var(--cp-surface-2);
  box-shadow: var(--cp-neu-sm);
  border-radius: var(--cp-r);
  color: var(--cp-primary);
}
.ws-stat-green .ws-stat-icon { color: var(--cp-accent); }
.ws-stat-red   .ws-stat-icon { color: var(--cp-danger); }
.ws-stat-spark { background: var(--cp-surface-2); box-shadow: var(--cp-neu-in); border-radius: 999px; height: 8px; overflow: hidden; }

/* ---------- Hero del dashboard ----------
   Es la unica superficie con color pleno de la pantalla: ancla el panel y
   da el punto de marca. El resto se mantiene sobrio para que destaque. */
.ws-hero-row {
  background: #1e4a86;   /* respaldo solido si no hay color-mix() */
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--cp-primary) 92%, #0b1b30),
              color-mix(in srgb, var(--cp-primary) 62%, #10402f));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--cp-r-lg);
  box-shadow: 0 10px 28px rgba(20, 40, 70, 0.28);
  padding: 1.6rem 1.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
/* Sobre el degradado el texto va en blanco en ambos temas: el fondo es
   oscuro por construccion, no depende del tema. */
.ws-hero-row .ws-hero-label { color: rgba(255, 255, 255, 0.78); }
.ws-hero-row .ws-hero-title { color: #ffffff; }
.ws-hero-row .ws-hero-sub   { color: rgba(255, 255, 255, 0.85); }
.ws-hero-row .ws-hero-badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.ws-hero-label { font-size: var(--cp-fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-ink-2); }
.ws-hero-title { font-size: var(--cp-fs-2xl); font-weight: 800; color: var(--cp-ink); letter-spacing: -0.02em; }
.ws-hero-sub   { font-size: var(--cp-fs-sm); color: var(--cp-ink-2); }
.ws-hero-badge { border-radius: 999px; font-size: var(--cp-fs-xs); font-weight: 700; padding: 0.4rem 0.85rem; }

/* ---------- Modales: vidrio sobre velo ---------- */
.modal-content {
  background: var(--cp-surface);
  border: 1px solid var(--cp-glass-brd);
  border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-glass-shadow);
}
.modal-backdrop.show { opacity: 0.55; }
.dropdown-menu {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-r);
  box-shadow: var(--cp-neu-out);
}
.dropdown-item { color: var(--cp-ink); font-size: var(--cp-fs-sm); font-weight: 500; padding: 0.6rem 1rem; }
.dropdown-item:hover { background: var(--cp-primary-soft); color: var(--cp-primary); }

/* ---------- Badges de rol ---------- */
.ws-badge-rol-1, .ws-badge-rol-2, .ws-badge-rol-3 { font-size: var(--cp-fs-xs); font-weight: 700; }

/* ---------- Alertas ---------- */
.dashboard-status, .alert {
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-r);
  box-shadow: var(--cp-neu-sm);
  font-size: var(--cp-fs-sm);
  font-weight: 500;
}

/* ---------- Responsive ----------
   A 375px el relieve se reduce: sombras de 6px sobre tarjetas que casi tocan
   el borde de la pantalla se ven como suciedad, no como profundidad. */
@media (max-width: 576px) {
  :root { --cp-neu-out: 4px 4px 9px var(--cp-neu-lo), -4px -4px 9px var(--cp-neu-hi); --cp-r-lg: 14px; }
  .ws-stat-value { font-size: var(--cp-fs-xl); }
  .ws-hero-title { font-size: var(--cp-fs-xl); }
  .main-content .card { border-radius: var(--cp-r) !important; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .main-content .card:hover, .btn:hover { transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ---------- Franja de estado de movimientos ----------
   Rejilla densa al estilo del panel de referencia: tres cifras grandes en
   una sola linea, cada una enlazando a su listado. */
.cp-estado-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cp-estado {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.2rem;
  border-radius: var(--cp-r-lg);
  border: 1px solid var(--cp-line);
  background: var(--cp-surface);
  box-shadow: var(--cp-neu-out);
  color: inherit;
  text-decoration: none;
  transition: transform var(--cp-t) ease, box-shadow var(--cp-t) ease;
}
.cp-estado:hover {
  transform: translateY(-3px);
  box-shadow: 9px 9px 20px var(--cp-neu-lo), -9px -9px 20px var(--cp-neu-hi);
  text-decoration: none;
  color: inherit;
}
.cp-estado-icono {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: var(--cp-r);
  background: var(--cp-surface-2);
  box-shadow: var(--cp-neu-sm);
}
.cp-estado-warn .fe { color: var(--cp-warn); }
.cp-estado-ok   .fe { color: var(--cp-accent); }
.cp-estado-bad  .fe { color: var(--cp-danger); }
.cp-estado-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cp-estado-num { font-size: var(--cp-fs-xl); font-weight: 800; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.cp-estado-lbl { font-size: var(--cp-fs-xs); font-weight: 600; color: var(--cp-ink-2); }

@media (max-width: 700px) {
  .cp-estado-row { grid-template-columns: 1fr; gap: 10px; }
  .cp-estado { padding: 0.8rem 1rem; }
}


/* ============================================================
   Telon de entrada (js/cp-intro.js)
   Cubre el dashboard mientras corre la animacion de marca y luego se abre
   en dos mitades para revelarlo.
   ============================================================ */

/* Mientras el telon esta puesto no debe poder desplazarse la pagina de
   detras: se veria moverse por debajo de la animacion. */
html.cp-intro-activo, html.cp-intro-activo body { overflow: hidden; }

.cp-intro {
  position: fixed;
  inset: 0;
  z-index: 20000;          /* por encima de modales y del menu lateral */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;    /* nunca bloquea un clic si algo fallara */
}

/* Las dos hojas del telon. Se mueven con transform, no con width: asi la
   animacion corre en la GPU y no fuerza recalculo de maquetacion. */
.cp-intro-half {
  position: absolute;
  top: 0;
  width: 50.5%;            /* se solapan un pelo para que no se vea la union */
  height: 100%;
  background: #0e1116;
  transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.cp-intro-left  { left: 0; }
.cp-intro-right { right: 0; }

/* El video ocupa TODA la pantalla, no una tarjeta centrada: a tamano pequeno
   parecia un reproductor flotando sobre un fondo negro, desligado del sistema. */
.cp-intro-media {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0e1116;   /* tapa las bandas si la proporcion del video no encaja */
  transition: opacity 420ms ease, transform 420ms ease;
}
.cp-intro-video {
  width: 100%;
  height: 100%;
  display: block;
  /* cover recorta lo que sobre para llenar el viewport; el logo va centrado
     en el clip, asi que el recorte se come los margenes, no la marca. */
  object-fit: cover;
}

/* Apertura */
.cp-intro-abriendo .cp-intro-left  { transform: translateX(-100%); }
.cp-intro-abriendo .cp-intro-right { transform: translateX(100%); }
.cp-intro-abriendo .cp-intro-media { opacity: 0; transform: scale(1.12); }

/* Con movimiento reducido no hay video ni apertura lateral: solo un fundido
   corto, para no dejar la pantalla en blanco de golpe. */
.cp-intro-simple .cp-intro-media { display: none; }
.cp-intro-simple .cp-intro-half {
  width: 100%; left: 0; right: auto;
  transition: opacity 250ms ease;
}
.cp-intro-simple.cp-intro-abriendo .cp-intro-half { transform: none; opacity: 0; }


/* ============================================================
   Importacion de catalogo (Vista/inventario/importar.html, Tarea 10)
   La tabla de previsualizacion se colorea por estado para que se pueda
   revisar un archivo de cientos de filas de un vistazo. Los degradados de
   las insignias son los mismos que ya usan .ws-badge-rol-1/2 y
   .ws-stat-blue/green/red (colores fijos, no --cp-*): ese par ya se probo
   legible en ambos temas, asi que se reutiliza en vez de inventar uno nuevo
   sobre variables que cambian de un tema a otro.
   ============================================================ */
.cp-badge-alta      { background: linear-gradient(135deg,#12b981,#3ad29f); color: #fff; }
.cp-badge-actualiza { background: linear-gradient(135deg,#1b68ff,#4f8dff); color: #fff; }
.cp-badge-error     { background: linear-gradient(135deg,#dc3545,#ff6b78); color: #fff; }

/* El tinte de fila SI usa los tokens de tema (--cp-*): aqui conviene que se
   adapte, porque es un lavado sutil detras del texto normal de la tabla, no
   texto blanco sobre color solido como las insignias de arriba.

   Todo con el prefijo #impTablaFilas: "body.dark ... .table td" (mas arriba
   en este mismo archivo) ya fija background-color/color/border-color con la
   especificidad de un selector de tipo "body.clase .clase elemento"
   (0,2,2), mas alta que ".cp-fila-x td" (0,1,1) o incluso
   ".cp-fila-x td:first-child" (0,2,1). Sin el id, el tinte se pintaba y
   desaparecia por completo en modo oscuro (se verifico en vivo con el
   navegador antes de este ajuste). */
#impTablaFilas .cp-fila-alta      td { background: color-mix(in srgb, var(--cp-accent)  8%, transparent); }
#impTablaFilas .cp-fila-actualiza td { background: color-mix(in srgb, var(--cp-primary) 8%, transparent); }
#impTablaFilas .cp-fila-error     td { background: color-mix(in srgb, var(--cp-danger)  9%, transparent); }
#impTablaFilas .cp-fila-alta      td:first-child { border-left: 3px solid var(--cp-accent); }
#impTablaFilas .cp-fila-actualiza td:first-child { border-left: 3px solid var(--cp-primary); }
#impTablaFilas .cp-fila-error     td:first-child { border-left: 3px solid var(--cp-danger); }
/* El motivo del error se resalta: es el dato que hay que leer para decidir
   si vale la pena corregir el archivo antes de confirmar. */
#impTablaFilas .cp-fila-error td:last-child { color: var(--cp-danger); font-weight: 600; }

/* Carga adaptable (importar.html, recepcion.html): la barra con "Aprobar y
   guardar" queda visible arriba mientras se recorre la vista previa, y la tabla
   de emparejamiento de columnas no se desborda en movil. */
.cp-barra-acciones { position: sticky; top: 0; z-index: 5; background: var(--cp-surface); }
.cp-tabla-mapeo td { vertical-align: middle; }
.cp-tabla-mapeo .cp-map-ej { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tabla-mapeo .badge { white-space: nowrap; }

/* ============================================================
   Catalogo de productos en tarjetas (Vista/inventario/catalogo.html)
   ============================================================ */
.cp-cat-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-top-left-radius: calc(0.25rem);
  border-top-right-radius: calc(0.25rem);
}
.cp-cat-img-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-surface-2);
  color: var(--cp-ink-2);
}
.cp-cat-card { transition: transform 150ms ease, box-shadow 150ms ease; }
.cp-cat-card:hover { transform: translateY(-2px); }

/* ============================================================
   Dropdown menu: z-index alto para aparecer sobre otros elementos
   ============================================================ */
.dropdown-menu {
  z-index: 1050 !important;
}
.navbar .dropdown-menu {
  z-index: 1050 !important;
}
.topnav .dropdown-menu {
  z-index: 1050 !important;
}

/* Asegurar que la flecha del dropdown siempre sea visible */
.dropdown-toggle::after {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   RESPONSIVIDAD INTEGRAL: SMARTPHONES, TABLETS Y DISPOSITIVOS MÓVILES
   ============================================================ */

/* Scroll táctil suave para tablas y contenedores */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

/* Modales y Capas de Diálogos */
.modal.modal-top-layer {
  z-index: 1065 !important;
}
.modal-backdrop.backdrop-top-layer {
  z-index: 1060 !important;
}

/* Ajustes de Layout para Pantallas Medianas (Tablets <= 991px) */
@media (max-width: 991.98px) {
  .main-content {
    padding: 1rem 0.75rem !important;
  }

  /* POS en Tablet / Móvil */
  .pos-cart-scroll {
    max-height: 280px !important;
  }

  .pos-prod-grid-scroll {
    max-height: 380px !important;
  }

  /* Tarjetas y métricas */
  .card-header {
    padding: 0.75rem 1rem;
  }
  .card-body {
    padding: 1rem;
  }

  /* Botones táctiles */
  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm, .btn-xs {
    min-height: 32px;
  }

  /* Diálogos modales adaptados */
  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
  }
}

/* Ajustes Específicos para Smartphones (<= 575.98px) */
@media (max-width: 575.98px) {
  .page-title {
    font-size: 1.35rem !important;
  }

  /* Topnav móvil */
  .topnav {
    padding: 0.4rem 0.75rem;
  }

  /* Filas de pago en modal de cobro POS */
  .fila-pago-row {
    background: rgba(0, 0, 0, 0.03);
    padding: 0.6rem;
    border-radius: 8px;
    margin-bottom: 0.75rem !important;
  }

  /* Tablas responsivas en móvil */
  .table-sm th, .table-sm td {
    padding: 0.45rem 0.5rem;
    font-size: 0.825rem;
  }

  /* Tarjetas métricas KPI */
  .card-title {
    font-size: 0.95rem;
  }

  .h3, h3 {
    font-size: 1.35rem !important;
  }

  /* Tabs de navegación en móvil */
  .nav-tabs .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  /* Buscadores de POS y Filtros */
  .input-group-lg .form-control {
    font-size: 1rem;
    height: calc(1.5em + 1rem + 2px);
  }
}


/* ============================================================
   Catalogo: pestanas "Productos" / "Sin proveedor" (V.2)
   ============================================================ */
.cp-cat-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-line);
  box-shadow: var(--cp-neu-in);
}
.cp-cat-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: var(--cp-ink-2);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--cp-t) ease, color var(--cp-t) ease, box-shadow var(--cp-t) ease;
}
.cp-cat-tabs .nav-link:hover { color: var(--cp-ink); }
.cp-cat-tabs .nav-link.active {
  background: var(--cp-surface);
  color: var(--cp-primary);
  box-shadow: var(--cp-neu-sm);
}
.cp-cat-tab-n:empty { display: none; }
.cp-cat-tab-n {
  min-width: 1.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--cp-primary-soft);
  color: var(--cp-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.cp-cat-tab-n.cp-cat-tab-aviso { background: rgba(217, 138, 0, 0.16); color: #9a6200; }
body.dark .cp-cat-tab-n.cp-cat-tab-aviso { color: #ffc35c; }
/* La pantalla de asignacion dentro de la pestana: sin su propia cabecera ni margenes. */
#catPanelSinPrv .cp-sp-cabecera { display: none !important; }
#catPanelSinPrv > .main-content { padding: 0 !important; }
#catPanelSinPrv > .main-content > .container-fluid { padding: 0; }
@media (max-width: 575.98px) {
  .cp-cat-tabs { display: flex; }
  .cp-cat-tabs .nav-item { flex: 1 1 0; }
  .cp-cat-tabs .nav-link { justify-content: center; padding: 0.55rem 0.4rem; font-size: 0.9rem; white-space: nowrap; }
  .cp-cat-tabs .nav-link > .fe { display: none; }
}