/* ==========================================================================
   Inter, servida desde el propio servidor.
   Es una fuente variable: un solo archivo cubre los pesos 100 a 900, así que
   pesa 130 KB en total en vez de uno por peso. Sin pedidos a Google: el
   sistema se ve igual sin conexión a internet.
   Licencia SIL OFL 1.1 — ver publico/fuentes/LICENCIA.txt
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fuentes/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fuentes/inter-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;
}

/* ==========================================================================
   CRM R-Tech — hoja de estilos
   Identidad visual tomada de rtech.com.py: Inter, azules corporativos,
   radios de 8/12/16px.
   ========================================================================== */

:root {
  /* Azules R-Tech */
  --blue-50:  #E6F1FB;
  --blue-100: #B5D4F4;
  --blue-200: #8FBFEC;
  --blue-500: #1E6FC8;
  --blue-600: #185FA5;
  --blue-700: #0C447C;
  --blue-900: #042C53;

  --gray-50:  #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #868E96;
  --gray-600: #495057;
  --gray-800: #212529;
  --white:    #FFFFFF;

  --verde:    #12B76A;
  --verde-bg: #E7F8F0;
  --ambar:    #F79009;
  --ambar-bg: #FEF4E6;
  --rojo:     #D92D20;
  --rojo-bg:  #FDECEA;
  --whatsapp: #25D366;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Roles semánticos (modo claro) */
  --fondo:        var(--gray-50);
  --superficie:   var(--white);
  --superficie-2: var(--gray-100);
  --borde:        var(--gray-200);
  --borde-fuerte: var(--gray-300);
  --texto:        var(--gray-800);
  --texto-suave:  var(--gray-600);
  --texto-tenue:  var(--gray-400);
  --acento:       var(--blue-500);
  --acento-hover: var(--blue-600);
  --acento-suave: var(--blue-50);
  --barra:        linear-gradient(180deg, var(--blue-900) 0%, var(--blue-700) 100%);
  --barra-texto:  rgba(255,255,255,.78);
  --sombra-sm: 0 1px 2px rgba(4,44,83,.06), 0 1px 3px rgba(4,44,83,.08);
  --sombra-md: 0 4px 12px rgba(4,44,83,.08);
  --sombra-lg: 0 12px 32px rgba(4,44,83,.14);

  --sidebar-ancho: 250px;
  --header-alto: 64px;
}

html[data-tema="oscuro"] {
  --fondo:        #0E1621;
  --superficie:   #16212E;
  --superficie-2: #1D2A3A;
  --borde:        #24344A;
  --borde-fuerte: #2F4459;
  --texto:        #E7EDF4;
  --texto-suave:  #A9B8C9;
  --texto-tenue:  #6D8199;
  --acento:       #4B95E4;
  --acento-hover: #6BAAEC;
  --acento-suave: #17304C;
  --barra:        linear-gradient(180deg, #0A1420 0%, #102438 100%);
  --barra-texto:  rgba(231,237,244,.72);
  --verde-bg: #102E22; --ambar-bg: #33270F; --rojo-bg: #3A1A17;
  --sombra-sm: 0 1px 2px rgba(0,0,0,.4);
  --sombra-md: 0 4px 14px rgba(0,0,0,.45);
  --sombra-lg: 0 14px 36px rgba(0,0,0,.55);
}

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

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* Tamaño base de todos los iconos. Sin esto un SVG con viewBox pero sin
   width/height se estira hasta llenar su contenedor. */
.ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: -.18em;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================ layout ===== */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-ancho);
  flex: 0 0 var(--sidebar-ancho);
  background: var(--barra);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.marca {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.marca-logo {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2E8BE8, #1E6FC8);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff;
  box-shadow: 0 4px 12px rgba(30,111,200,.45);
}
.marca-txt { line-height: 1.2; min-width: 0; }
.marca-txt strong { display: block; font-size: 14.5px; }
.marca-txt span { font-size: 11.5px; color: var(--barra-texto); }

.nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.nav-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.45); font-weight: 600;
  padding: 14px 10px 7px;
}
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--barra-texto);
  font-weight: 500; font-size: 13.5px;
  transition: background .16s, color .16s;
}
.nav a:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.nav a.activo { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; }
.nav a svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; }
.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.16); padding: 1px 7px;
  border-radius: var(--radius-full);
}

.sidebar-pie {
  padding: 12px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 12.5px;
}
.sidebar-pie .quien { min-width: 0; flex: 1; line-height: 1.25; }
.sidebar-pie .quien strong { display: block; font-size: 12.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-pie .quien span { font-size: 11px; color: var(--barra-texto); }
.icono-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: var(--radius-sm);
  background: transparent; color: var(--barra-texto);
  transition: background .16s, color .16s;
}
.icono-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.icono-btn svg { width: 17px; height: 17px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-alto);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 18px; }
.topbar .crece { flex: 1; }

.buscador-global { position: relative; width: min(420px, 42vw); }
.buscador-global .ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--texto-tenue); pointer-events: none;
  vertical-align: 0;
}
/* El selector lleva [type=search] a proposito: la regla general de los
   inputs viene despues en este archivo y, con la misma especificidad, su
   shorthand `padding` pisaba este padding-left y la lupa terminaba encima
   del texto. */
.buscador-global input[type=search] { padding-left: 40px; }

.contenido { padding: 22px; flex: 1; }
.contenido > * + * { margin-top: 18px; }

.menu-movil { display: none; }

/* ============================================================ tipografía == */

.titulo-seccion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-seccion .crece { flex: 1; }
.subtitulo { color: var(--texto-suave); font-size: 13px; margin-top: 2px; }
.tenue { color: var(--texto-tenue); }
.suave { color: var(--texto-suave); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.nowrap { white-space: nowrap; }

/* ============================================================ tarjetas ==== */

.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-sm);
}
.card-cab {
  padding: 15px 18px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* El icono que acompaña al título de la tarjeta: discreto, no protagonista. */
.card-cab > .ico { width: 19px; height: 19px; color: var(--texto-tenue); }
.card-cuerpo h3 .ico { width: 17px; height: 17px; color: var(--acento);
  vertical-align: -.2em; margin-right: 3px; }
.card-cab .crece { flex: 1; }
.card-cuerpo { padding: 18px; }
.card-pie {
  padding: 12px 18px; border-top: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--superficie-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================ métricas ==== */

.grilla-stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--sombra-sm);
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.stat::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--acento);
}
.stat.verde::after { background: var(--verde); }
.stat.ambar::after { background: var(--ambar); }
.stat.violeta::after { background: #7C3AED; }
.stat-label {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-tenue);
}
.stat-valor {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.stat-pie { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }

/* ============================================================ botones ===== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px;
  font: inherit; font-weight: 600; font-size: 13.5px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--acento); color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: background .16s, box-shadow .16s, transform .06s, border-color .16s;
}
.btn:hover { background: var(--acento-hover); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-suave {
  background: var(--superficie); color: var(--texto);
  border-color: var(--borde-fuerte);
}
.btn-suave:hover { background: var(--superficie-2); color: var(--texto); }

.btn-fantasma { background: transparent; color: var(--texto-suave); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }

.btn-peligro { background: var(--rojo); }
.btn-peligro:hover { background: #B42318; }

.btn-wa { background: var(--whatsapp); }
.btn-wa:hover { background: #1FB855; }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-bloque { width: 100%; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============================================================ formularios = */

.campo { margin-bottom: 14px; }
.campo > label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 5px;
}
.ayuda { font-size: 12px; color: var(--texto-tenue); margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=file], select, textarea {
  width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 13.5px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radius-sm);
  transition: border-color .16s, box-shadow .16s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
input::placeholder { color: var(--texto-tenue); }
textarea { resize: vertical; min-height: 80px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23868E96'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.grilla-form {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.span-2 { grid-column: 1 / -1; }

.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }

/* ============================================================ filtros ===== */

.filtros {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.filtros .campo { margin: 0; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 11px;
  background: var(--acento-suave); color: var(--acento);
  border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: 600;
}
.chip a { color: inherit; opacity: .65; display: grid; place-items: center; }
.chip a:hover { opacity: 1; text-decoration: none; }

/* ============================================================ tablas ====== */

.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-tenue);
  padding: 10px 14px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tabla th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
table.tabla th a:hover { color: var(--acento); text-decoration: none; }
table.tabla td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
table.tabla tbody tr { transition: background .12s; }
table.tabla tbody tr:hover { background: var(--acento-suave); }
table.tabla tbody tr:last-child td { border-bottom: 0; }
.col-acciones { width: 1%; white-space: nowrap; text-align: right; }

.celda-nombre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-nombre .av {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--acento-suave); color: var(--acento);
}
.celda-nombre .av .ico { width: 15px; height: 15px; vertical-align: 0; }
.celda-nombre .txt { min-width: 0; line-height: 1.3; }
.celda-nombre .txt b { display: block; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.celda-nombre .txt small { color: var(--texto-tenue); font-size: 11.5px; }

.tel-link { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================ badges ====== */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--superficie-2); color: var(--texto-suave);
}
.badge-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.verde { background: var(--verde-bg); color: #0A7B4B; }
.badge.ambar { background: var(--ambar-bg); color: #B54708; }
.badge.rojo  { background: var(--rojo-bg);  color: #B42318; }
.badge.azul  { background: var(--acento-suave); color: var(--acento); }
html[data-tema="oscuro"] .badge.verde { color: #5FD8A4; }
html[data-tema="oscuro"] .badge.ambar { color: #F5B759; }
html[data-tema="oscuro"] .badge.rojo  { color: #F58A80; }

/* ============================================================ avisos ====== */

.aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 15px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 13.5px;
}
.aviso svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.aviso.ok      { background: var(--verde-bg); border-color: #A6E9C6; color: #05603A; }
.aviso.error   { background: var(--rojo-bg);  border-color: #F3B9B4; color: #912018; }
.aviso.alerta  { background: var(--ambar-bg); border-color: #F5CE93; color: #93370D; }
.aviso.info    { background: var(--acento-suave); border-color: var(--blue-100); color: var(--blue-700); }
html[data-tema="oscuro"] .aviso.ok     { border-color:#1C5B40; color:#7FE3B4; }
html[data-tema="oscuro"] .aviso.error  { border-color:#6B2A24; color:#F7A9A0; }
html[data-tema="oscuro"] .aviso.alerta { border-color:#6B4A16; color:#F7C778; }
html[data-tema="oscuro"] .aviso.info   { border-color:#23486E; color:#9CC8F2; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  box-shadow: var(--sombra-lg);
  background: var(--superficie);
  animation: entra .28s cubic-bezier(.2,.8,.3,1);
  max-width: 380px;
}
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }

/* ============================================================ vacío ======= */

.vacio { text-align: center; padding: 46px 20px; color: var(--texto-suave); }
.vacio svg { width: 42px; height: 42px; color: var(--texto-tenue); margin-bottom: 12px; }
.vacio h3 { margin-bottom: 5px; color: var(--texto); }

/* ============================================================ paginado ==== */

.paginado { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.paginado a, .paginado span {
  min-width: 34px; height: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--texto-suave); background: var(--superficie);
}
.paginado a:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.paginado .actual { background: var(--acento); border-color: var(--acento); color: #fff; }
.paginado .inerte { opacity: .4; pointer-events: none; }

/* ============================================================ barras ====== */

.barra-lista { display: flex; flex-direction: column; gap: 11px; }
.barra-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.barra-fila .n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto-suave); }
.barra-pista {
  grid-column: 1 / -1;
  height: 7px; border-radius: var(--radius-full);
  background: var(--superficie-2); overflow: hidden;
}
.barra-valor { height: 100%; border-radius: var(--radius-full); background: var(--acento); }

/* ============================================================ login ======= */

.pantalla-login {
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(30,111,200,.24), transparent 60%),
    radial-gradient(900px 460px at 108% 108%, rgba(12,68,124,.30), transparent 55%),
    var(--blue-900);
}
.caja-login { width: 100%; max-width: 400px; }
.caja-login .marca-login {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 22px; color: #fff;
}
.caja-login .marca-logo { width: 44px; height: 44px; flex: 0 0 44px; font-size: 17px; }
.caja-login .marca-login div { line-height: 1.2; }
.caja-login .marca-login strong { font-size: 19px; display: block; }
.caja-login .marca-login span { font-size: 12.5px; color: rgba(255,255,255,.68); }
.caja-login .card { border: 0; box-shadow: var(--sombra-lg); }
.pie-login {
  text-align: center; margin-top: 18px;
  font-size: 12px; color: rgba(255,255,255,.55);
}

/* ============================================================ importar ==== */

.zona-drop {
  /* Es un <label>, que por defecto es inline: sin este display los bloques
     de adentro (icono, texto, ayuda) se desarman y el boton de al lado se
     mete dentro del recuadro. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radius-lg);
  padding: 34px 20px; text-align: center;
  background: var(--superficie-2);
  transition: border-color .18s, background .18s;
  cursor: pointer;
}
.zona-drop > div { max-width: 100%; }
.zona-drop:hover, .zona-drop.encima {
  border-color: var(--acento); background: var(--acento-suave);
}
.zona-drop .ico { width: 34px; height: 34px; color: var(--acento);
  margin-bottom: 8px; vertical-align: 0; }
.zona-drop input[type=file] { display: none; }
.archivo-elegido { font-weight: 600; color: var(--acento); }

.mapeo { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.mapeo-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--borde);
  border-radius: var(--radius-sm); background: var(--superficie-2);
}
.mapeo-fila b { flex: 1; font-size: 12.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapeo-fila select { width: auto; flex: 0 0 148px; font-size: 12.5px; padding: 5px 26px 5px 9px; }

.previsualizacion { font-size: 12px; }
.previsualizacion td, .previsualizacion th { padding: 6px 10px; }

/* ============================================================ progreso ==== */

.progreso {
  height: 8px; border-radius: var(--radius-full);
  background: var(--superficie-2); overflow: hidden;
}
.progreso i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
  transition: width .3s;
}

/* ============================================================ embudo ====== */

.tablero {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 10px;
  align-items: flex-start;
  scroll-snap-type: x proximity;
}
.columna {
  flex: 0 0 288px; max-width: 288px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 250px);
  scroll-snap-align: start;
  transition: border-color .15s, background .15s;
}
.columna.encima {
  border-color: var(--acento);
  background: var(--acento-suave);
}
.columna-cab {
  padding: 11px 13px 10px;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 8px;
}
.columna-cab .punto {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
}
.columna-cab .tit { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.columna-cab .cuenta {
  font-size: 11.5px; font-weight: 600; color: var(--texto-tenue);
  background: var(--superficie); border: 1px solid var(--borde);
  padding: 1px 7px; border-radius: var(--radius-full);
}
.columna-total {
  padding: 0 13px 9px; font-size: 12px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.columna-cuerpo {
  flex: 1; overflow-y: auto; min-height: 90px;
  padding: 10px; display: flex; flex-direction: column; gap: 9px;
}
.columna-vacia {
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radius-md);
  padding: 18px 10px; text-align: center;
  font-size: 12.5px; color: var(--texto-tenue);
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: grab; user-select: none;
  box-shadow: var(--sombra-sm);
  transition: box-shadow .15s, transform .1s, opacity .15s;
}
.tarjeta:hover { box-shadow: var(--sombra-md); }
.tarjeta:active { cursor: grabbing; }
.tarjeta.arrastrando { opacity: .4; transform: rotate(1.5deg); }
.tarjeta a { color: var(--texto); }
.tarjeta-tit {
  font-weight: 600; font-size: 13px; line-height: 1.35;
  display: block; margin-bottom: 3px;
}
.tarjeta-tit:hover { color: var(--acento); text-decoration: none; }
.tarjeta-sub {
  font-size: 12px; color: var(--texto-suave); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-pie {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11.5px;
}
.tarjeta-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta .mini-av {
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700;
  background: var(--acento-suave); color: var(--acento);
  margin-left: auto;
}

/* ------------------------------------------------------------ historial -- */

.linea-tiempo { position: relative; padding-left: 30px; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--borde);
}
.hito { position: relative; padding-bottom: 18px; }
.hito:last-child { padding-bottom: 0; }
.hito-icono {
  position: absolute; left: -30px; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie); border: 2px solid var(--borde);
  color: var(--texto-tenue);
}
.hito-icono .ico { width: 12px; height: 12px; }
.hito.hecho .hito-icono { border-color: var(--verde); color: var(--verde); }
.hito.vencido .hito-icono { border-color: var(--rojo); color: var(--rojo); }
.hito.futuro .hito-icono { border-color: var(--acento); color: var(--acento); }
.hito-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hito-cab b { font-size: 13.5px; }
.hito-fecha { font-size: 11.5px; color: var(--texto-tenue); margin-left: auto; }
.hito-cuerpo { font-size: 13px; color: var(--texto-suave); margin-top: 3px;
  white-space: pre-wrap; }

/* --------------------------------------------------------- fila de tarea -- */

.tarea {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid var(--borde);
}
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: var(--superficie-2); }
.tarea .cuerpo { flex: 1; min-width: 0; }
.tarea .cuerpo b { font-size: 13.5px; }
.tarea .meta { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.tarea.atrasada { border-left: 3px solid var(--rojo); }
.tarea.hoy { border-left: 3px solid var(--ambar); }

/* ============================================================ responsive == */

@media (max-width: 980px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--sombra-lg);
  }
  .sidebar.abierta { transform: none; }
  .menu-movil { display: grid; }
  .buscador-global { width: auto; flex: 1; }
  .velo {
    position: fixed; inset: 0; background: rgba(4,44,83,.5);
    z-index: 35; backdrop-filter: blur(2px);
  }
  .contenido { padding: 16px; }
  .topbar { padding: 0 14px; }
  .topbar h1 { font-size: 16px; }
}

@media (max-width: 620px) {
  .oculta-movil { display: none !important; }
  .stat-valor { font-size: 23px; }
}

@media print {
  .sidebar, .topbar, .acciones, .paginado, .card-pie { display: none !important; }
  .contenido { padding: 0; }
  .card { border: 0; box-shadow: none; }
}

/* ============================================================ reportes ==== */

/* Barras verticales para la serie mensual. Una sola serie, un solo tono:
   la identidad la dan las etiquetas del eje, no el color. */
.barras-mes {
  display: flex; gap: 10px; align-items: flex-end;
  height: 170px; padding-top: 8px;
}
.barra-mes {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 6px; height: 100%;
}
.barra-mes .col {
  width: 100%; max-width: 46px;
  background: var(--acento);
  border-radius: 4px 4px 0 0;      /* extremo de dato redondeado */
  min-height: 3px;
  transition: background .15s;
}
.barra-mes:hover .col { background: var(--acento-hover); }
.barra-mes .val {
  font-size: 11.5px; font-weight: 600; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.barra-mes .et {
  font-size: 11px; color: var(--texto-tenue); white-space: nowrap;
  text-transform: capitalize;
}

/* Embudo: cada etapa más angosta que la anterior. */
.embudo-fig { display: flex; flex-direction: column; gap: 5px; }
.embudo-paso {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
}
.embudo-paso .nom { flex: 0 0 130px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embudo-paso .pista { flex: 1; height: 26px; background: var(--superficie-2);
  border-radius: var(--radius-sm); overflow: hidden; }
.embudo-paso .relleno {
  height: 100%; border-radius: var(--radius-sm);
  display: flex; align-items: center; padding: 0 10px;
  color: #fff; font-weight: 600; font-size: 12px;
  min-width: 34px;
}
.embudo-paso .caida {
  flex: 0 0 78px; text-align: right;
  font-size: 12px; color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* Fila de ranking */
.puesto {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--superficie-2); color: var(--texto-suave);
}
.puesto.oro    { background: #FEF3C7; color: #92400E; }
.puesto.plata  { background: #E9ECEF; color: #495057; }
.puesto.bronce { background: #FDE8D7; color: #9A3412; }

@media (max-width: 620px) {
  .barras-mes { height: 130px; gap: 5px; }
  .embudo-paso .nom { flex: 0 0 88px; font-size: 12px; }
  .embudo-paso .caida { flex: 0 0 54px; }
}

/* ===========================================================================
   WhatsApp
   Las burbujas siguen la convención de cualquier chat: lo propio a la derecha,
   lo del contacto a la izquierda. El verde es el de la marca de WhatsApp, no
   el del CRM, porque acá ayuda a ubicarse.
   =========================================================================== */

.wa-dia {
  align-self: center;
  margin: 6px 0;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 12px;
  color: var(--texto-tenue);
}

.wa-msg {
  max-width: min(78%, 560px);
  padding: 7px 11px 5px;
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-sm);
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.wa-suyo {
  align-self: flex-start;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 3px;
}

.wa-mio {
  align-self: flex-end;
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-bottom-right-radius: 3px;
}

.wa-texto  { white-space: pre-wrap; }

.wa-adjunto {
  font-size: 13px;
  color: var(--texto-suave);
  padding-bottom: 3px;
}

.wa-pie {
  margin-top: 2px;
  text-align: right;
  font-size: 11px;
  color: var(--texto-tenue);
  user-select: none;
}

/* En pantalla chica el chat ocupa todo y la lista pasa arriba. */
@media (max-width: 900px) {
  .wa { grid-template-columns: 1fr !important; }
  .wa > .card:first-child { max-height: 40vh !important; }
}