/* ==========================================================================
   Wisender CRM — pulido visual del panel de clientes (solo apariencia)
   Se carga DESPUÉS de app.css y de los estilos de cada página.
   Para revertir: quitar la línea <link ... wisender-polish.css>.
   ========================================================================== */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/jakarta/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/jakarta/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Legibilidad: el texto tenue pasa de 2.9 a ~4.8 de contraste */
  --text-dim: rgba(226, 233, 255, .52);
  /* Botón primario: blanco sobre este azul cumple AA (~5.4) */
  --w-btn: #3D5BDB;
  --w-btn-hover: #4A68EA;
  --w-ring: 0 0 0 3px rgba(91, 124, 255, .45);
  --w-radius: 12px;
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(91, 124, 255, .35); color: #fff; }

/* Números alineados (indicadores, tablas, fechas) */
.card-value, .stat-card, table td, .date, .kpi-note, .chip, .badge { font-variant-numeric: tabular-nums; }

/* Foco visible para teclado (accesibilidad) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .nav-link:focus-visible, .action-btn:focus-visible { outline: none !important; box-shadow: var(--w-ring) !important; border-radius: 8px; }

/* Botones */
.btn { font-weight: 600; letter-spacing: 0; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--w-btn) !important; border-color: var(--w-btn) !important; color: #fff !important; }
.btn-primary:hover { background: var(--w-btn-hover) !important; border-color: var(--w-btn-hover) !important; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.action-btn { transition: background-color .15s, color .15s, border-color .15s; }

/* Formularios */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
  transition: border-color .15s, box-shadow .15s; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, select:focus, textarea:focus {
  border-color: var(--primary-color) !important; box-shadow: var(--w-ring) !important; outline: none !important; }
input::placeholder, textarea::placeholder { color: var(--text-dim) !important; opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary-color); }
label { font-weight: 600; }

/* Tablas: cabecera fija al desplazar, filas legibles */
.table-container, .dash-table-wrap { -webkit-overflow-scrolling: touch; }
table thead th { position: sticky; top: 0; z-index: 1; backdrop-filter: blur(6px); }
table tbody tr { transition: background-color .12s; }
table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
table td[colspan] { text-align: center; color: var(--text-light); padding: 36px 16px !important; font-weight: 500; }

/* Estados y etiquetas */
.badge, .chip, .type-badge { letter-spacing: .01em; }

/* Mensajes */
.flash-message, .alert { border-radius: var(--w-radius); }

/* Barras de desplazamiento discretas (tema oscuro) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); background-clip: padding-box; border: 2px solid transparent; }

/* Calendario flatpickr acorde al tema */
.flatpickr-calendar { border-radius: 12px !important; font-family: inherit !important; }

/* Celular */
@media (max-width: 768px) {
  .content-area, .main-content { padding-left: 14px !important; padding-right: 14px !important; }
  .stats-grid, .dash-grid, .user-grid { gap: 12px !important; }
  .table-container, .dash-table-wrap { overflow-x: auto; }
  .btn { min-height: 40px; }
  .modal-content { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Módulo de productos: contador en el menú y aviso de lanzamiento (visibles en todas las páginas) */
.p-badge-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 7px; margin-left: auto; border-radius: 999px;
  background: #FF5F1F; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.p-banner { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 18px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(90deg, rgba(255,95,31,.16), rgba(91,124,255,.12)); border: 1px solid rgba(255,95,31,.35); color: var(--text-dark); }
.p-banner:hover { border-color: rgba(255,95,31,.6); color: var(--text-dark); }
.p-banner .p-banner-tag { background: #FF5F1F; color: #fff; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
.p-banner b { font-size: 15px; }
.p-banner span.p-banner-txt { color: var(--text-light); font-size: 13.5px; }
.p-banner .p-arrow { margin-left: auto; font-weight: 700; color: #FFB08A; white-space: nowrap; }
@media (max-width: 640px) { .p-banner { flex-wrap: wrap; } .p-banner .p-arrow { margin-left: 0; } }