/* rb-tablero — estilos propios sobre Bootstrap 5.3.
   Pensado para personas con baja visión: Atkinson Hyperlegible, letra base de 18px
   ajustable (A−/A+), contrastes AA o mejores en claro y oscuro y foco siempre visible. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-400-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; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-700-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; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-italic.woff2) format("woff2"); }

/* --- Escala de letra (la elige el usuario, queda en localStorage) --- */
html[data-escala="0"] { font-size: 100%; }    /* 16px */
html[data-escala="1"] { font-size: 112.5%; }  /* 18px, por defecto */
html[data-escala="2"] { font-size: 125%; }    /* 20px */
html[data-escala="3"] { font-size: 137.5%; }  /* 22px */

:root {
  --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-line-height: 1.55;
  --foco: #0b57d0;
  --banco: #5b2c9f;
}
[data-bs-theme="light"] {
  --bs-body-color: #16181b;               /* casi negro: contraste ~17:1 */
  --bs-secondary-color: #4a5058;          /* texto secundario ≥ 7:1 (AAA) */
  --bs-link-color: #0a4fb8; --bs-link-color-rgb: 10, 79, 184;
  --bs-link-hover-color: #073a88; --bs-link-hover-color-rgb: 7, 58, 136;
  --ficha-encabezado: #eef2f7;
  --cuota-vencida: #a4161a;
  --wapp-enviado: #eaf7ee;
  --wapp-desconocido: #e3f1fb;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #121417;
  --bs-body-color: #eceff3;
  --bs-secondary-color: #bcc3cc;          /* ≥ 9:1 sobre el fondo oscuro */
  --bs-tertiary-bg: #1b1f24;
  --bs-link-color: #8ab4ff; --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color: #b3ceff; --bs-link-hover-color-rgb: 179, 206, 255;
  --foco: #8ab4ff;
  --banco: #7d4fc4;
  --ficha-encabezado: #1f252c;
  --cuota-vencida: #ff8a8a;
  --wapp-enviado: #16301f;
  --wapp-desconocido: #13283a;
}

/* Foco bien visible para quien navega con teclado */
:focus-visible { outline: 3px solid var(--foco) !important; outline-offset: 2px; box-shadow: none !important; }
.btn, .form-control, .form-select { --bs-border-width: 1.5px; }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .85; }
.d-contents { display: contents; }

/* El atributo hidden siempre oculta, aunque el elemento tenga d-flex u otra utilidad de display de Bootstrap. */
[hidden] { display: none !important; }

/* --- Nav --- */
.navbar .nav-link, .dropdown-item { font-size: 1rem; }
.navbar .nav-link.active, .navbar .dropdown-toggle.active { font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.dropdown-menu { max-height: calc(100vh - 6rem); overflow-y: auto; }
.pendiente { color: var(--bs-secondary-color) !important; cursor: default; }
.pendiente .badge { font-weight: 400; font-size: .7em; color: var(--bs-secondary-color) !important; background: transparent !important; }
[data-bs-theme="light"] .logo-oscuro, [data-bs-theme="dark"] .logo-claro { display: none; }
[data-bs-theme="light"] .tema-claro, [data-bs-theme="dark"] .tema-oscuro { display: none; }


.table { --bs-table-bg: transparent; }
.table > thead th, thead.sticky-top th { background: var(--bs-secondary-bg); }
.table-responsive { position: relative; }
.min-w-0 { min-width: 0; }
.pre-wrap { white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Modo oscuro: botones outline más claros para mantener contraste AA */
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #ced4da; --bs-btn-border-color: #8c959f; }

/* --- Colores de área (texto blanco sobre el color: ≥ 4.5:1) --- */
.tono-venta { --area: #0f766e; --area-claro: #5eead4; }
.tono-cobranza { --area: #1d4ed8; --area-claro: #93c5fd; }
.tono-wapp { --area: #15803d; --area-claro: #86efac; }
.tono-auditoria { --area: #6d28d9; --area-claro: #c4b5fd; }
.tono-logs { --area: #475569; --area-claro: #cbd5e1; }

/* --- Botonera Área › Vista › Operador (links con aspecto de botón) --- */
.botonera-rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.text-transform-none { text-transform: none; letter-spacing: 0; }
.btn-area, .btn-vista {
  --bs-btn-color: var(--area); --bs-btn-border-color: var(--area);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--area); --bs-btn-hover-border-color: var(--area);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--area); --bs-btn-active-border-color: var(--area);
  border-width: 2px; font-weight: 700;
}
.btn-area { min-width: 8.5rem; padding: .6rem 1rem; }
.btn-area.activo, .btn-vista.activo { background: var(--area); color: #fff; }
.btn-area.activo::before, .btn-vista.activo::before { content: "✓ "; }
[data-bs-theme="dark"] .btn-area, [data-bs-theme="dark"] .btn-vista { --bs-btn-color: var(--area-claro); --bs-btn-border-color: var(--area-claro); }

/* Filtros dentro de una vista (días de la cola, estado de los chats) */
.btn-filtro { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); border-radius: 2rem; }
.btn-filtro.activo { background: var(--bs-body-color); color: var(--bs-body-bg); border-color: var(--bs-body-color); }

/* --- Totales --- */
.kpi-rotulo { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.kpi-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
td.text-end, th.text-end { font-variant-numeric: tabular-nums; }
.importe { color: #047857; }
.valor-nominal { color: #b91c1c; }
.valor-ajustado { color: #1d4ed8; }
[data-bs-theme="dark"] .importe { color: #6fdc94; }
[data-bs-theme="dark"] .valor-nominal { color: #ff9a9a; }
[data-bs-theme="dark"] .valor-ajustado { color: #8ab4ff; }

/* --- Gráfico de barras horizontales --- */
.grafico { --vdor-816: #2563eb; --vdor-800: #dc2626; --vdor-otros: #94a3b8; --ajustado: #2563eb; }
[data-bs-theme="dark"] .grafico { --vdor-816: #6ea0ff; --vdor-800: #ff7b7b; --vdor-otros: #8c959f; --ajustado: #6ea0ff; }
.barras li { display: grid; grid-template-columns: minmax(4.5rem, 7.5rem) 1fr 4.5rem; align-items: center; gap: .6rem; padding: .2rem 0; }
.barra-rotulo { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pista { display: flex; height: 1.1rem; background: var(--bs-secondary-bg); border-radius: .25rem; overflow: hidden; }
.barra-seg { display: block; height: 100%; }
.barra-valor { font-size: .9rem; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.muestra { display: inline-block; width: 1rem; height: .8rem; border-radius: .15rem; }
.seg-vdor-816 { background: var(--vdor-816); }
.seg-vdor-800 { background: var(--vdor-800); }
.seg-vdor-otros { background: var(--vdor-otros); }
.seg-ajustado { background: var(--ajustado); }
/* Barra dentro de una celda (Wapp › Venta) */
.col-barra { width: 35%; min-width: 5rem; }
.barra-celda { display: block; height: .7rem; border-radius: .2rem; background: #15803d; }
[data-bs-theme="dark"] .barra-celda { background: #4ade80; }

/* --- Wapp --- */
.wapp-col-titulo { border-bottom: 3px solid #15803d; padding-bottom: .35rem; }
.tabla-alta { max-height: 70vh; overflow-y: auto; }
.tel-tipo { display: inline-block; padding: .15rem .5rem; border-radius: .35rem; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.tel-tipo.is-dato { background: #15803d; color: #fff; }
.tel-tipo.is-enviado { background: #1d4ed8; color: #fff; }
.tel-tipo.is-anulado { background: #be123c; color: #fff; }
.tel-tipo.is-error { background: #7f1d1d; color: #fff; }
.tel-tipo.is-reactivado { background: #fde047; color: #222; }
.tel-tipo.is-asignado { background: #0f766e; color: #fff; }
.tel-tipo.is-no-atiende { background: #fdba74; color: #222; }
.tel-tipo.is-otro { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
/* Promo: cada evento en una línea; Detalle y Cliente se cortan con … (completos en el title) */
.promo-tabla th, .promo-tabla td { white-space: nowrap; }
.promo-tabla .promo-corta { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }

/* Chips de zona (color fijo por nombre) y de vendedor */
.chip { display: inline-block; padding: .15rem .55rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.chip.vdor-800 { background: #fee2e2; color: #991b1b; }
.chip.vdor-816 { background: #dbeafe; color: #1e40af; }
.chip.vdor-otros { background: #f1f5f9; color: #334155; }
.zona-hue-0 { background: #fee2e2; color: #991b1b; } .zona-hue-1 { background: #ffedd5; color: #9a3412; }
.zona-hue-2 { background: #fef3c7; color: #92400e; } .zona-hue-3 { background: #ecfccb; color: #3f6212; }
.zona-hue-4 { background: #d1fae5; color: #065f46; } .zona-hue-5 { background: #cffafe; color: #155e75; }
.zona-hue-6 { background: #dbeafe; color: #1e40af; } .zona-hue-7 { background: #e0e7ff; color: #3730a3; }
.zona-hue-8 { background: #f3e8ff; color: #6b21a8; } .zona-hue-9 { background: #fce7f3; color: #9d174d; }
/* En oscuro: los mismos tonos pero fondo oscuro y texto claro */
[data-bs-theme="dark"] .chip { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

/* Chat */
.chat-buscar { max-width: 16rem; }
.chat-fila.abierta > td { background: var(--bs-secondary-bg); }
.chat-desplegar .bi { display: inline-block; transition: transform .15s; }
.chat-desplegar[aria-expanded="true"] .bi { transform: rotate(90deg); }
.chat-preview { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-hilo-fila > td { background: var(--bs-tertiary-bg); }
.chat-hilo { max-height: 28rem; overflow-y: auto; padding: .5rem; }
.chat-dia { text-align: center; font-size: .8rem; font-weight: 700; color: var(--bs-secondary-color); margin: .6rem 0 .3rem; }
.chat-msg { border-radius: .6rem; padding: .45rem .75rem; margin-bottom: .4rem; max-width: 75%; }
.chat-in { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.chat-out { background: #dcf8c6; margin-left: auto; }
.chat-plantilla { background: #e0e7ff; }
[data-bs-theme="dark"] .chat-out { background: #1d3b2a; }
[data-bs-theme="dark"] .chat-plantilla { background: #1d2a4a; }
.chat-msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg-meta { font-size: .78rem; color: var(--bs-secondary-color); text-align: end; }
@media (max-width: 575.98px) { .chat-msg { max-width: 92%; } .chat-buscar { max-width: none; } }

/* --- Filas que se despliegan (Venta › Evolución: días de un mes; Anual: meses de un año) --- */
.fila-desplegable { cursor: pointer; }
.desplegar-icono { display: inline-block; transition: transform .15s; }
[data-desplegar][aria-expanded="true"] .desplegar-icono { transform: rotate(90deg); }
[data-bs-theme="light"] .fila-desplegable.abierta > * { --bs-table-bg-state: #c4d9ff; }
[data-bs-theme="dark"] .fila-desplegable.abierta > * { --bs-table-bg-state: #1b3a6b; }
.fila-desplegable.abierta > :first-child { box-shadow: inset 6px 0 0 var(--bs-primary), inset 0 0 0 9999px var(--bs-table-bg-state); }
.fila-detalle > td { padding: .4rem .5rem .9rem 1.6rem; box-shadow: inset 6px 0 0 var(--bs-primary); }
.tabla-detalle { font-size: .92rem; }
.evo-tabla th, .evo-tabla td { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .desplegar-icono { transition: none; } }

/* --- Venta › Vendedores: origen de las ventas --- */
:root { --origen-cancelados: #b91c1c; --origen-datitos: #1d4ed8; --origen-otros: #94a3b8; --origen-prom: #0f766e; }
[data-bs-theme="dark"] { --origen-cancelados: #f87171; --origen-datitos: #60a5fa; --origen-otros: #64748b; --origen-prom: #2dd4bf; }
.seg-cancelados { background: var(--origen-cancelados); }
.seg-datitos { background: var(--origen-datitos); }
.seg-otros { background: var(--origen-otros); }
.seg-prom { background: var(--origen-prom); }
.vv-tabla th, .vv-tabla td { white-space: nowrap; }
.vv-grupo { border-left: 2px solid var(--bs-border-color); }

/* --- Wapp › Origen: torta por año de última compra (anio-0 = año actual, anio-1 = el anterior...) --- */
:root { --anio-0: #2a78d6; --anio-1: #eb6834; --anio-2: #1baf7a; --anio-3: #eda100; --anio-4: #e87ba4; --anio-5: #008300;
        --anio-6: #4a3aa7; --anio-7: #e34948; --anio-viejo: #475569; }
[data-bs-theme="dark"] { --anio-0: #3987e5; --anio-1: #d95926; --anio-2: #199e70; --anio-3: #c98500; --anio-4: #d55181;
                         --anio-5: #008300; --anio-6: #9085e9; --anio-7: #e66767; --anio-viejo: #94a3b8; }
.torta { flex: none; max-width: 100%; height: auto; }
.torta path, .torta circle { stroke: var(--bs-card-bg); stroke-width: 2; stroke-linejoin: round; }
.torta path:hover { opacity: .8; }
.anio-0 { fill: var(--anio-0); background: var(--anio-0); } .anio-1 { fill: var(--anio-1); background: var(--anio-1); }
.anio-2 { fill: var(--anio-2); background: var(--anio-2); } .anio-3 { fill: var(--anio-3); background: var(--anio-3); }
.anio-4 { fill: var(--anio-4); background: var(--anio-4); } .anio-5 { fill: var(--anio-5); background: var(--anio-5); }
.anio-6 { fill: var(--anio-6); background: var(--anio-6); } .anio-7 { fill: var(--anio-7); background: var(--anio-7); }
.anio-viejo { fill: var(--anio-viejo); background: var(--anio-viejo); }

/* Cobranza: meses por debajo del 90 % en el histórico y tramos que entran en "a cobrar" en la cartera. */
.barra-celda.barra-baja { background: #b91c1c; }
[data-bs-theme="dark"] .barra-celda.barra-baja { background: #f87171; }
.fila-viva > th { font-weight: 600 !important; }

/* --- Logs --- */
.lg-largo { display: block; min-width: 16rem; max-width: 48rem; overflow-wrap: anywhere; }