/* ============================================================
   BEWYTEC DESIGN SYSTEM
   ============================================================ */

/* ---------- Tipografía ------------------------------------------------------
   Archivo, de Omnibus-Type, bajo SIL Open Font License 1.1: uso libre, también
   comercial. El texto de la licencia viaja junto a los archivos, en
   `static/fonts/OFL.txt`, y no se separa de ellos.

   Va ALOJADA aquí y no por Google Fonts: así no depende de un tercero y llega
   a todas las páginas que cargan este CSS, incluidas las públicas (login, PQR,
   2FA, recuperación), que nunca enlazaron la fuente y caían a la del sistema.

   Es una fuente variable: un solo archivo cubre los pesos 400 a 900. Si algún
   día se cambia de familia, se cambia AQUÍ y en `--bw-font`; los otros sitios
   que la nombran a mano son `layout_base.html`, `temporal.html` y los globos de
   los tres mapas (`*_mapas_monitoreo.js`, `piloto_mapa_vivo.js`).
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/archivo-latin.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;
}

/* ---------- Tokens ---------- */
:root {
  --bw-font:        "Archivo", system-ui, sans-serif;
  --bw-blue:        #026EEE;
  --bw-blue-soft:   #5598EF;
  --bw-yellow:      #F7B923;
  --bw-ink:         #0c224e;
  --bw-surface:     #f2f4f7;
  --bw-white:       #ffffff;
  --bw-border:      rgba(2, 110, 238, 0.09);
  --bw-shadow-card: 0 2px 12px rgba(2,110,238,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --bw-shadow-hover:0 8px 28px rgba(2,110,238,0.14), 0 2px 8px rgba(0,0,0,0.06);
}

/* ---------- Ocultar de verdad ----------------------------------------------
   `[hidden]` y `[x-cloak]` ganan a cualquier clase de display de Tailwind.

   POR QUÉ HACE FALTA, Y POR QUÉ CON `!important`
   El atributo `hidden` de HTML lo oculta el navegador con una regla de su hoja
   de usuario-agente, que es la de MENOR prioridad que existe. En cuanto un
   elemento lleva además una clase como `flex` o `block` —que es una regla de
   autor— la clase gana y el elemento SE PINTA, con el atributo puesto y todo.

   No es teórico: el 2026-09-16 el diálogo de "pasar a otra persona" del CRM
   salía `<div id="crm-pasar-dialogo" hidden class="fixed inset-0 z-50 flex …">`.
   Como es `fixed inset-0 z-50` con fondo, se comía TODOS los clics de la
   pantalla y dejó el CRM inutilizable: no se podía cerrar ni usar nada, y
   reaparecía al recargar porque no dependía de ninguna acción.

   Va aquí, en el CSS que carga `layout_base.html`, y NO en un `<style>` de una
   sección: así llega a todas las páginas. La copia que vivía en
   `templates/interfaces/prospectos.html` solo cubría esa sección, y dejaba los
   `x-cloak` de `crm/cliente.html` y `crm/consentimiento.html` sin regla.

   ⚠️ Esto NO afecta a la CLASE `.hidden` de Tailwind (`class="hidden sm:flex"`,
   el patrón normal de "oculto en móvil"): esa no pone el atributo, y el selector
   `[hidden]` es de atributo. Son dos cosas con el mismo nombre.
   Lo vigila `tests/oculto_de_verdad.py`. */
[hidden],
[x-cloak] { display: none !important; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--bw-font);
  color: #0f172a;
  background: var(--bw-surface);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Scrollbar ---------- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
.page-fade {
  animation: fadeInUp 0.35s ease-out both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIDEBAR NAV ITEMS
   ============================================================ */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.nav-item:hover {
  background: rgba(2, 110, 238, 0.08);
  color: var(--bw-blue);
}
.nav-item.active {
  background: rgba(2, 110, 238, 0.1);
  color: var(--bw-blue);
  font-weight: 700;
}
.nav-item .nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.8;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  opacity: 1;
}

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-card {
  background: var(--bw-white);
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--bw-border);
  box-shadow: var(--bw-shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kpi-card:hover {
  box-shadow: var(--bw-shadow-hover);
  transform: translateY(-2px);
}
.kpi-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--bw-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-value.value-danger  { color: #ef4444; }
.kpi-value.value-success { color: #22c55e; }
.kpi-value.value-warning { color: #f59e0b; }
.kpi-icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon-wrap svg { width: 1.25rem; height: 1.25rem; }
.kpi-trend {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.kpi-trend.up   { color: #22c55e; }
.kpi-trend.down { color: #ef4444; }

/* ============================================================
   SECTION CARDS (panels with content)
   ============================================================ */
.section-card {
  background: var(--bw-white);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--bw-border);
  box-shadow: var(--bw-shadow-card);
}
.section-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--bw-ink);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================
   DATA TABLES
   ============================================================ */
.bw-table {
  width: 100%;
  border-collapse: collapse;
}
.bw-table thead th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.bw-table tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}
.bw-table tbody tr:last-child td { border-bottom: none; }
.bw-table tbody tr:hover td { background: rgba(2,110,238,0.03); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge-green  { background: #dcfce7; color: #16a34a; }
.badge-yellow { background: #fef9c3; color: #a16207; }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-slate  { background: #f1f5f9; color: #64748b; }
.badge-blue   { background: rgba(2,110,238,0.1); color: var(--bw-blue); }
.badge-purple { background: #f3e8ff; color: #9333ea; }
.badge-orange { background: #ffedd5; color: #ea580c; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--bw-blue), var(--bw-blue-soft));
  transition: width 0.6s ease;
}

/* ============================================================
   INPUTS (number spinners hidden)
   ============================================================ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Mapas Leaflet: confinar su stacking context ──────────────────────────
   Leaflet usa z-index 400–1000 en sus panes/controles internos. Sin un
   z-index en el contenedor, esos valores ESCAPAN al contexto raíz y tapan
   los elementos flotantes de la app (chat z-70, dropdowns, etc.) — pasó con
   el widget de chat sobre Mapas de Calor. Con z-index:0 cada mapa crea su
   propio contexto y sus internos quedan confinados. */
.leaflet-container { z-index: 0; }

/* ============================================================
   SUBIDA DE ARCHIVOS — el control nativo con la tipografía de la página
   ============================================================
   Camilo (2026-09-30): «la visual del boton de seleccionar archivo quedo sin
   las fuentes ni visual de la pagina».

   Tiene razón y no es un descuido de CSS: el botón interno de
   `<input type="file">` lo pinta el NAVEGADOR y no hereda nada del documento.

   🔴 LA FORMA HABITUAL DE ARREGLARLO ES LA PELIGROSA. Lo típico es esconder el
   input y gobernarlo con un `<label>`. Aquí NO se hace, por dos razones medidas:

     1. En este mismo CRM, esconder con `hidden` + una clase de display de
        Tailwind dejó la pantalla inutilizable (ver el bloque «Ocultar de verdad»
        al principio de este archivo). El riesgo es real y ya costó una vez.
     2. Con `display:none` el control deja de ser alcanzable por teclado en
        algunos navegadores, y entonces el formulario se ve perfecto y NO envía
        el archivo — el fallo más caro posible, porque la pantalla no lo delata.

   `::file-selector-button` estiliza el botón EN SU SITIO: no se oculta nada, el
   control sigue siendo el nativo, el foco y el teclado siguen funcionando solos,
   y el nombre del archivo elegido se sigue viendo. Soportado por Chrome 89+,
   Firefox 82+ y Safari 14.1+. Si un navegador viejo lo ignorara, lo que se ve es
   el control de siempre: se degrada a lo que ya había, nunca a algo roto. */
.bw-file {
  font: inherit;
  font-size: 0.75rem;
  color: #64748b;
  max-width: 100%;
}
.bw-file::file-selector-button,
.bw-file::-webkit-file-upload-button {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bw-blue);
  background: rgba(2, 110, 238, 0.07);
  border: 1px solid var(--bw-border);
  border-radius: 0.6rem;
  padding: 0.3rem 0.7rem;
  margin-right: 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bw-file:hover::file-selector-button { background: rgba(2, 110, 238, 0.13); }
.bw-file:focus-visible::file-selector-button {
  outline: 2px solid var(--bw-blue);
  outline-offset: 1px;
}

/* ============================================================
   DIÁLOGO NATIVO (<dialog>) — el popup de gestión de archivos
   ============================================================
   Se usa el elemento `<dialog>` con `showModal()` y NO un `<div fixed inset-0>`
   a mano. La diferencia importa: el nativo trae el backdrop, el foco atrapado,
   la tecla Esc y el `inert` del resto de la página SIN JavaScript propio — que
   es justo lo que se escribió a mano la vez que dejó el CRM bloqueado.

   Y cuando está cerrado, el navegador lo oculta con `display:none` de su hoja
   de usuario-agente. ⚠️ Eso lo puede pisar una clase de Tailwind, igual que pasó
   con `[hidden]`; por eso aquí NO se le ponen clases de display y el cerrado se
   refuerza abajo. */
.bw-modal {
  border: none;
  padding: 0;
  border-radius: 1rem;
  width: min(48rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  box-shadow: var(--bw-shadow-hover);
  color: var(--bw-ink);
  font: inherit;
}
.bw-modal:not([open]) { display: none; }
.bw-modal::backdrop { background: rgba(12, 34, 78, 0.45); }
.bw-modal-cuerpo { padding: 1.25rem 1.5rem 1.5rem; overflow-y: auto; max-height: calc(100vh - 4rem); }

/* El respaldo SIN JAVASCRIPT no vive aqui: es una regla dentro de un
   `<noscript>` en `templates/crm/cliente.html`, pegada a lo que afecta. Una
   segunda copia en este archivo es justo lo que se desincroniza.

   🟡 Y ese respaldo NO promete que la pagina se vea bien sin JS: Tailwind
   llega por CDN (`cdn.tailwindcss.com`) y ES JavaScript, asi que con el
   scripting apagado no se aplica ninguna clase de utilidad en NINGUNA
   pantalla de la plataforma. Medido en Chrome. Es anterior a este cambio: lo
   que el <noscript> conserva es que el expediente siga siendo OPERABLE. */

/* ============================================================
   ACTUALIZAR LA PANTALLA (static/js/refrescar.js)
   UN botón por pantalla, en la barra superior, junto al usuario.
   ============================================================ */
.bw-refrescar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 7px;
  margin-right: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  /* Azul de marca y opaco SIEMPRE. La primera versión iba en gris claro al 55 %
     y solo se encendía al pasar el ratón: estaba en todas las pantallas y no se
     veía en ninguna (Camilo, 2026-10-07: «los demas no lo vi»). */
  border: 1.5px solid #026EEE;
  background: var(--bw-white);
  color: #026EEE;
  box-shadow: 0 1px 4px rgba(2, 110, 238, 0.25);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.bw-refrescar svg { width: 100%; height: 100%; stroke-width: 2.4; }
.bw-refrescar:hover,
.bw-refrescar:focus-visible { background: #026EEE; color: #ffffff; outline: none; }
.bw-refrescar:active { transform: scale(.92); }
.bw-refrescar:disabled { cursor: progress; background: #026EEE; color: #ffffff; }
.bw-refrescando svg { animation: bw-girar .8s linear infinite; }
@keyframes bw-girar { to { transform: rotate(360deg); } }