/* ==========================================================================
   FoxCRM — Tarjetas de reporte (Empresas / Sucursales / Canales / Usuarios /
   Estados / Origenes / ... en los once reporte_*.tpl.php).

   Se carga DESPUES de app-theme.css. Todo cuelga de .fox-rc, una clase que
   pone assets/js/report-cards.js sobre cada tarjeta pivote que encuentra, asi
   que este archivo no puede afectar ninguna otra pantalla de la app.

   El markup de las 86 tarjetas es identico en los once reportes (card >
   card-header + table#tabla-* > tbody#*-container + tbody.template), por eso
   alcanza con un solo componente en vez de editar cada template a mano.
   ========================================================================== */

.fox-rc {
    --rc-pad: 0.85rem;
    --rc-row-h: 34px;
    display: flex;
    flex-direction: column;
    /* SIN overflow:hidden aca: recortaria el menu de exportar, que cuelga de la
       cabecera. Las esquinas se redondean por partes mas abajo. */
    overflow: visible;
}

/* Cabecera y cuerpo siguen el radio de la tarjeta, si no las esquinas cuadradas
   asoman por afuera del borde redondeado. */
.card.fox-rc > .fox-rc-head,
.card.fox-rl > .fox-rc-head {
    border-radius: 14px 14px 0 0;
}

.fox-rc-body {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.card.fox-rl {
    overflow: visible;
}

.card.fox-rl > .card-content {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

/* Las alturas quedan parejas solas: cabecera de alto fijo + scroller de 320px.
   NO poner display:flex en las columnas para "igualarlas": hay reportes
   (encuestas, demora) que apilan VARIAS tarjetas dentro de una misma columna,
   y ahi el flex las acomoda una al lado de la otra y rompe la pantalla. */

/* ---------- Cabecera: dos filas. Arriba identidad + acciones, abajo el
   buscador a lo ancho. Antes iban en una sola linea y el buscador le comia el
   titulo a las tarjetas de nombre largo ("Sucursales", "Agrupadores"). ------- */

/* Se gana en especificidad a ".card .card-header" (de Vuexy y de app-theme),
   que le metia padding propio y dejaba la cabecera y sus divisores sin llegar
   a los bordes de la tarjeta. */
.card.fox-rc > .fox-rc-head,
.card.fox-rl > .fox-rc-head {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--fox-border, #ebe9f0);
    background: var(--fox-surface, #fff);
    flex: 0 0 auto;
}

/* Tres zonas: titulo | visualizaciones | acciones. La grilla 1fr/auto/1fr deja
   el control del medio centrado respecto de la TARJETA, no del titulo, asi que
   las tres columnas de una fila quedan alineadas entre si aunque los titulos
   midan distinto ("Empresas" vs "Agrupador de Orígen"). */
.fox-rc-head-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--fox-border, #ebe9f0);
}

.fox-rc-modes {
    display: flex;
    justify-content: center;
}

.fox-rc-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.fox-rc-title-text {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.011em;
    color: var(--fox-ink, #26232f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* Cuantas filas tiene la tarjeta ahora mismo (respeta el buscador). */
.fox-rc-count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 0 6px;
    height: 19px;
    border-radius: 999px;
    background: var(--fox-tint, #fff8f2);
    border: 1px solid rgba(249, 128, 0, 0.16);
    color: var(--fox-orange, #F98000);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fox-rc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
}

/* ---------- Control segmentado listado / barras / torta ---------- */

.fox-rc-seg {
    display: inline-flex;
    padding: 2px;
    border-radius: 9px;
    background: var(--fox-surface-2, #f4f3f7);
    border: 1px solid var(--fox-border, #ebe9f0);
}

.fox-rc-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--fox-muted, #9997a3);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fox-rc-seg button:hover:not(:disabled) {
    color: var(--fox-orange, #F98000);
}

.fox-rc-seg button.is-active {
    background: var(--fox-surface, #fff);
    color: var(--fox-orange, #F98000);
    box-shadow: 0 1px 3px rgba(38, 35, 47, 0.14);
}

.fox-rc-seg button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.fox-rc-seg svg {
    width: 13px;
    height: 13px;
}

/* ---------- Botones de icono ---------- */

.fox-rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--fox-ink-soft, #6c6a78);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fox-rc-btn:hover {
    background: var(--fox-tint, #fff8f2);
    border-color: rgba(249, 128, 0, 0.2);
    color: var(--fox-orange, #F98000);
}

.fox-rc-btn svg {
    width: 15px;
    height: 15px;
}

.fox-rc-btn.is-open {
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-orange, #F98000);
    border-color: rgba(249, 128, 0, 0.28);
}

/* ---------- Menu de exportacion ---------- */

.fox-rc-menu {
    position: relative;
}

.fox-rc-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 178px;
    padding: 5px;
    border-radius: 11px;
    background: var(--fox-surface, #fff);
    border: 1px solid var(--fox-border, #ebe9f0);
    box-shadow: 0 12px 32px -8px rgba(38, 35, 47, 0.24);
    display: none;
}

.fox-rc-dropdown.is-open {
    display: block;
}

.fox-rc-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 7px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--fox-ink, #26232f);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.fox-rc-dropdown button:hover {
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-orange, #F98000);
}

.fox-rc-dropdown button svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--fox-muted, #9997a3);
}

.fox-rc-dropdown button:hover svg {
    color: var(--fox-orange, #F98000);
}

.fox-rc-dropdown-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--fox-border, #ebe9f0);
}

/* ---------- Buscador (segunda fila de la cabecera) ---------- */

/* Buscador: fila propia, ancho completo, sin caja propia. El divisor de arriba
   ya lo separa del titulo, asi que el input no necesita borde y queda como una
   franja de la cabecera. */
.fox-rc-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

.fox-rc-search svg.fox-rc-search-icon {
    position: absolute;
    left: 0.85rem;
    width: 14px;
    height: 14px;
    color: var(--fox-muted, #9997a3);
    pointer-events: none;
    transition: color 0.15s ease;
}

.fox-rc-search:focus-within svg.fox-rc-search-icon {
    color: var(--fox-orange, #F98000);
}

.fox-rc .fox-rc-search input.buscar-input {
    width: 100%;
    height: 38px;
    padding: 0 26px 0 26px;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.82rem;
    color: var(--fox-ink, #26232f);
}

.fox-rc .fox-rc-search input.buscar-input::placeholder {
    color: var(--fox-muted, #9997a3);
}

.fox-rc .fox-rc-search input.buscar-input:focus {
    outline: none;
}

/* Subrayado naranja al enfocar, en vez de un recuadro. */
.fox-rc-search::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    height: 2px;
    background: var(--fox-gradient, linear-gradient(135deg, #FCAF03, #F98000, #F83800));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.fox-rc-search:focus-within::after {
    transform: scaleX(1);
}

.fox-rc-search-clear {
    position: absolute;
    right: 0.8rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e4e2ea;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.fox-rc-search-clear:hover {
    background: var(--fox-orange, #F98000);
}

.fox-rc-search.has-value .fox-rc-search-clear {
    display: inline-flex;
}

/* ---------- Cuerpo ---------- */

.fox-rc .card-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fox-rc-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* Aviso de que hay mas filas abajo: sin esto la ultima fila queda cortada al
   medio y parece que la tarjeta termina ahi. */
.fox-rc-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to bottom, var(--fox-surface-0, rgba(255, 255, 255, 0)), var(--fox-surface, #fff) 88%);
}

.fox-rc-body.has-overflow::after {
    opacity: 1;
}

/* Altura unica para las 86 tarjetas. Cada reporte traia la suya en un <style>
   propio (225px, 250px, 300px...), asi que dos tarjetas de la misma fila
   terminaban con distinto alto. Con ~34px por fila entran nueve. */
.fox-rc .height-fixed-overflow-y {
    height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- Tabla ---------- */

.fox-rc table.table {
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.fox-rc table.table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--fox-surface, #fff);
    padding: 0.5rem 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--fox-muted, #9997a3);
    border-top: none;
    border-bottom: 1px solid var(--fox-border, #ebe9f0);
    white-space: nowrap;
}

.fox-rc table.table tbody td {
    padding: 0.42rem 0.6rem;
    font-size: 0.82rem;
    color: var(--fox-ink, #26232f);
    border-top: 1px solid var(--fox-surface-2, #f4f3f7);
    vertical-align: middle;
    height: var(--rc-row-h);
}

/* La columna del nombre nunca envuelve: recorta con puntos suspensivos y el
   nombre completo queda en el title (tooltip nativo, sin JS de por medio). */
.fox-rc td.fox-rc-name {
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.fox-rc th.fox-rc-th-name {
    width: auto;
}

/* Columna de checkbox: ancho fijo y chico. */
.fox-rc th.fox-rc-th-check,
.fox-rc td.fox-rc-td-check {
    width: 38px;
    padding-left: 0.5rem;
    padding-right: 0;
    text-align: center;
}

/* Metricas: ancho estable y cifras alineadas por digito. */
.fox-rc th.fox-rc-th-num,
.fox-rc td.fox-rc-num {
    width: 74px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fox-rc td.fox-rc-num {
    font-weight: 600;
}

/* Barra de magnitud: un riel finito bajo el nombre, anclado al margen
   izquierdo, con el ancho proporcional al maximo de la tarjeta.
   Va en la columna del nombre y no detras del numero por dos razones: es la
   columna ancha (mejor resolucion para comparar) y ancladas todas a la misma
   linea de base las longitudes se comparan de verdad. Detras del numero, con
   la columna angosta y crecimiento hacia la izquierda, las barras se leian
   como pastillas y no como magnitudes.
   Un solo color: la longitud ya codifica el valor, teñirlo ademas por valor
   seria codificar dos veces lo mismo. */
.fox-rc td.fox-rc-name {
    position: relative;
}

.fox-rc tbody tr:not(.report-total-row) td.fox-rc-name::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    bottom: 4px;
    height: 3px;
    width: calc(var(--rc-bar, 0) * 1%);
    max-width: calc(100% - 1.2rem);
    border-radius: 2px;
    background: rgba(249, 128, 0, 0.4);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease;
}

.fox-rc tbody tr:hover td.fox-rc-name::after {
    background: var(--fox-orange, #F98000);
}

.fox-rc td.fox-rc-name {
    padding-bottom: 0.6rem;
}

/* Fila Total: banda fija debajo del encabezado. */
.fox-rc tbody tr.report-total-row {
    position: sticky;
    top: 30px;
    z-index: 2;
}

.fox-rc tbody tr.report-total-row td {
    background: var(--fox-tint, #fff8f2) !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(249, 128, 0, 0.22) !important;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--fox-orange, #F98000) !important;
}

.fox-rc tbody tr.report-total-row td.fox-rc-num-primary::before {
    display: none;
}

.fox-rc tbody tr.row-filtro:not(.report-total-row) {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.fox-rc tbody tr.row-filtro:not(.report-total-row):hover {
    background-color: var(--fox-tint, #fff8f2);
}

/* Fila elegida como filtro: se marca tambien con una barra a la izquierda, no
   solo con color, para que no dependa de distinguir tonos. */
.fox-rc tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 0 var(--fox-orange, #F98000);
}

.fox-rc tbody tr.selected td {
    background-color: rgba(249, 128, 0, 0.07) !important;
}

/* ---------- Checkboxes ----------
   Vuexy los pinta con su violeta y les deja un box-shadow/borde de foco azul.
   Aca se reemplaza el look completo: cuadrado chico de esquinas redondeadas,
   relleno con el degrade de la marca al tildar y ningun halo de color ajeno. */

.fox-rc .vs-checkbox-con,
.fox-rf .vs-checkbox-con {
    width: auto;
    height: auto;
    margin: 0;
}

.fox-rc fieldset,
.fox-rf fieldset {
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
}

.fox-rc .vs-checkbox,
.fox-rf .vs-checkbox {
    width: 17px !important;
    height: 17px !important;
    border-radius: 5px !important;
    border: 1.5px solid #d5d2de !important;
    background: var(--fox-surface, #fff) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fox-rc .vs-checkbox-con:hover .vs-checkbox,
.fox-rf .vs-checkbox-con:hover .vs-checkbox {
    border-color: var(--fox-orange, #F98000) !important;
}

/* El input real de Vuexy queda invisible arriba del cuadrado; su :focus es el
   que dibujaba el halo azul del navegador. */
.fox-rc .vs-checkbox-con input,
.fox-rf .vs-checkbox-con input {
    width: 17px !important;
    height: 17px !important;
    outline: none !important;
    box-shadow: none !important;
}

.fox-rc .vs-checkbox-con input:focus ~ .vs-checkbox,
.fox-rf .vs-checkbox-con input:focus ~ .vs-checkbox {
    box-shadow: 0 0 0 3px rgba(249, 128, 0, 0.18) !important;
}

/* TILDADO.
   Vuexy pinta esto con su violeta desde components.min.css:

     .vs-checkbox-primary input:checked~.vs-checkbox            {border-color:#7367F0!important}
     .vs-checkbox-primary input:checked~.vs-checkbox .vs-checkbox--check
                                                                {background-color:#7367F0!important}

   Las dos con !important, asi que no alcanza con repetir !important: hay que
   ganarles en especificidad. Esas valen (0,3,1) y (0,4,1); agregando .fox-rc y
   .vs-checkbox-con al frente, las de aca valen (0,4,1) y (0,5,1) y ganan.
   El borde del cuadro desaparece y el relleno lo pone la pastilla interna, que
   es la que Vuexy anima al entrar. */
.fox-rc .vs-checkbox-con input:checked ~ .vs-checkbox,
.fox-rf .vs-checkbox-con input:checked ~ .vs-checkbox {
    border-color: transparent !important;
    background: transparent !important;
}

.fox-rc .vs-checkbox-con input:checked ~ .vs-checkbox .vs-checkbox--check,
.fox-rf .vs-checkbox-con input:checked ~ .vs-checkbox .vs-checkbox--check,
.fox-rc .vs-checkbox-con input:active:checked + .vs-checkbox .vs-checkbox--check,
.fox-rf .vs-checkbox-con input:active:checked + .vs-checkbox .vs-checkbox--check {
    background: var(--fox-gradient, linear-gradient(135deg, #FCAF03 0%, #F98000 48%, #F83800 100%)) !important;
    background-color: var(--fox-orange, #F98000) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.fox-rc .vs-checkbox--check,
.fox-rf .vs-checkbox--check {
    border-radius: 5px !important;
    box-shadow: none !important;
}

.fox-rc .vs-checkbox--check .vs-icon,
.fox-rf .vs-checkbox--check .vs-icon {
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700;
    stroke-width: 3.4;
}

/* ---------- Alineacion vertical del encabezado de la tabla ----------
   El th del checkbox mide mas que el de texto porque adentro lleva el fieldset,
   asi que "NOMBRE / LEADS / VENTAS" quedaba corrido respecto del cuadrado. */

.fox-rc table.table thead th {
    height: 38px;
    vertical-align: middle;
    line-height: 1;
}

.fox-rc table.table thead th.fox-rc-th-check {
    line-height: 0;
}

.fox-rc table.table thead th .vs-checkbox-con {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.fox-rc table.table tbody td.fox-rc-td-check {
    line-height: 0;
}

.fox-rc table.table tbody td.fox-rc-td-check .vs-checkbox-con {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* ---------- Estado vacio ---------- */

/* Se superpone al scroller en vez de reemplazarlo: asi la tarjeta conserva su
   altura y el estado vacio queda centrado de verdad, no pegado arriba. */
.fox-rc-empty {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--fox-surface, #fff);
    color: var(--fox-muted, #9997a3);
}

.fox-rc-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(160deg, #fdf6ef 0%, #f7f6f9 100%);
    border: 1px solid var(--fox-border, #ebe9f0);
}

.fox-rc-empty-ico svg {
    width: 20px;
    height: 20px;
    color: var(--fox-orange, #F98000);
    opacity: 0.75;
}

.fox-rc-empty b {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--fox-ink, #26232f);
}

.fox-rc-empty .fox-rc-empty-txt {
    font-size: 0.77rem;
    font-weight: 500;
    max-width: 230px;
    line-height: 1.45;
}

.fox-rc-body.is-empty .fox-rc-empty {
    display: flex;
}

/* La tabla se tapa, no se saca: es la que le da la altura a la tarjeta. */
.fox-rc-body.is-empty .table-responsive {
    visibility: hidden;
}

.fox-rc-body.is-empty::after {
    opacity: 0;
}

/* ---------- Panel de grafico ---------- */

/* El grafico se superpone al listado en vez de reemplazarlo: asi la altura de
   la tarjeta la sigue fijando la tabla y no salta al cambiar de modo. */
.fox-rc-chart {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    flex-direction: column;
    background: var(--fox-surface, #fff);
    padding: 0.5rem 0.4rem 0.2rem;
}

.fox-rc-chart.is-active {
    display: flex;
}

.fox-rc-body.is-chart .table-responsive {
    visibility: hidden;
}

.fox-rc-body.is-chart::after {
    opacity: 0;
}

.fox-rc-chart-canvas {
    flex: 1 1 auto;
    min-height: 0;
}

/* Nota al pie del grafico (p.ej. "Top 12 de 94"). */
.fox-rc-chart-note {
    flex: 0 0 auto;
    padding: 2px 8px 4px;
    font-size: 0.68rem;
    color: var(--fox-muted, #9997a3);
    text-align: center;
}

.fox-rc .apexcharts-tooltip {
    border-radius: 9px !important;
    border: 1px solid var(--fox-border, #ebe9f0) !important;
    box-shadow: 0 10px 26px -8px rgba(38, 35, 47, 0.26) !important;
}

/* ---------- Modo expandido ---------- */

.fox-rc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(38, 35, 47, 0.45);
    backdrop-filter: blur(2px);
}

.fox-rc.is-expanded {
    position: fixed;
    z-index: 1050;
    top: 3vh;
    left: 4vw;
    width: 92vw;
    height: 94vh;
    margin: 0;
    box-shadow: 0 30px 70px -20px rgba(38, 35, 47, 0.5);
}

.fox-rc.is-expanded .fox-rc-body,
.fox-rc.is-expanded .height-fixed-overflow-y {
    height: 100% !important;
    max-height: none !important;
}

/* ==========================================================================
   Barra de filtros de los reportes
   ========================================================================== */

/* Todo en una sola linea y todo a la misma altura (32px): antes el titulo, el
   dropdown y las fechas iban en una fila y el check de fecha de asignacion
   colgaba solo en otra, contra el margen derecho. */
.fox-rf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.25rem 0.35rem;
}

.fox-rf > * {
    display: flex;
    align-items: center;
}

/* Separador vertical entre grupos. */
.fox-rf-div {
    width: 1px;
    height: 22px;
    background: var(--fox-border, #ebe9f0);
}

/* Check de "Fecha de Asignación", ya dentro de la barra. */
.fox-rf-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fox-ink-soft, #6c6a78);
    white-space: nowrap;
}

.fox-rf-toggle .vs-checkbox-con {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.fox-rf-toggle b {
    color: var(--fox-ink, #26232f);
    font-weight: 700;
}

.fox-rf-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--fox-muted, #9997a3);
}

/* Chips de rango rapido. Reemplazan al dropdown "Rangos predefinidos": los
   mismos rangos, pero a la vista y con el activo marcado. */
.fox-rf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fox-rf-chip {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--fox-border, #ebe9f0);
    background: var(--fox-surface, #fff);
    color: var(--fox-ink-soft, #6c6a78);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fox-rf-chip:hover {
    border-color: rgba(249, 128, 0, 0.45);
    color: var(--fox-orange, #F98000);
}

.fox-rf-chip.is-active {
    background: var(--fox-gradient, linear-gradient(135deg, #FCAF03 0%, #F98000 48%, #F83800 100%));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--fox-shadow-orange, 0 10px 24px -8px rgba(248, 86, 0, 0.35));
}

/* Las dos fechas como un unico control de rango.
   Sin overflow:hidden: el calendario de pickadate es un .picker absoluto que
   cuelga del input y quedaria recortado por la caja. */
.fox-rf-range {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--fox-border, #ebe9f0);
    border-radius: 10px;
    background: var(--fox-surface, #fff);
}

/* Ancestro posicionado de cada .picker: lo hace caer debajo de SU input. */
.fox-rf-date {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fox-rf-date .picker {
    width: 260px;
    min-width: 260px;
}

.fox-rf-range:focus-within {
    border-color: var(--fox-orange, #F98000);
    box-shadow: 0 0 0 3px rgba(249, 128, 0, 0.12);
}

.fox-rf-range .form-control {
    width: 106px;
    height: 32px;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fox-ink, #26232f);
    text-align: center;
    padding: 0 4px;
}

.fox-rf-range-sep {
    color: var(--fox-muted, #9997a3);
    font-size: 0.8rem;
    user-select: none;
}

.fox-rf-range-icon {
    display: inline-flex;
    align-items: center;
    padding-left: 9px;
    color: var(--fox-muted, #9997a3);
}

.fox-rf-range-icon svg {
    width: 14px;
    height: 14px;
}

/* Cuantos dias abarca el rango elegido. */
.fox-rf-span {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--fox-muted, #9997a3);
    white-space: nowrap;
}

.fox-rf-spacer {
    flex: 1 1 auto;
}

/* ==========================================================================
   Calendario (pickadate) dentro de la barra de filtros
   ========================================================================== */

.fox-rf-date .picker__holder {
    max-width: none;
    border: 1px solid var(--fox-border, #ebe9f0);
    border-radius: 12px;
    box-shadow: 0 18px 40px -12px rgba(38, 35, 47, 0.28);
    overflow: hidden;
}

.fox-rf-date .picker__box {
    padding: 6px 10px 10px;
}

.fox-rf-date .picker__header {
    padding-top: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fox-ink, #26232f);
}

.fox-rf-date .picker__weekday {
    color: var(--fox-muted, #9997a3);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 6px;
}

.fox-rf-date .picker__day {
    border-radius: 8px;
    padding: 6px 0;
    font-size: 0.8rem;
    color: var(--fox-ink, #26232f);
}

.fox-rf-date .picker__day--outfocus {
    color: #cfccd8;
}

.fox-rf-date .picker__day--infocus:hover,
.fox-rf-date .picker__day--outfocus:hover,
.fox-rf-date .picker__day--highlighted:hover {
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-orange, #F98000);
}

/* Vuexy pinta el dia elegido y el de hoy con su celeste. */
.fox-rf-date .picker__day--today::before {
    border-top-color: var(--fox-orange, #F98000) !important;
}

.fox-rf-date .picker__day--highlighted {
    border-color: var(--fox-orange, #F98000) !important;
}

.fox-rf-date .picker__day--selected,
.fox-rf-date .picker__day--selected:hover,
.fox-rf-date .picker--focused .picker__day--selected {
    background: var(--fox-gradient, linear-gradient(135deg, #FCAF03 0%, #F98000 48%, #F83800 100%)) !important;
    color: #fff !important;
    font-weight: 700;
}

.fox-rf-date .picker__button--today,
.fox-rf-date .picker__button--clear,
.fox-rf-date .picker__button--close {
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--fox-ink-soft, #6c6a78);
}

.fox-rf-date .picker__button--today:hover,
.fox-rf-date .picker__button--clear:hover,
.fox-rf-date .picker__button--close:hover {
    background: var(--fox-tint, #fff8f2) !important;
    color: var(--fox-orange, #F98000);
    border-bottom-color: transparent !important;
}

.fox-rf-date .picker__nav--prev:hover,
.fox-rf-date .picker__nav--next:hover {
    background: var(--fox-tint, #fff8f2) !important;
    border-radius: 8px;
}

/* ==========================================================================
   Tarjeta "Listado"
   ========================================================================== */

/* Sin fila de buscador, la cabecera del listado es titulo | acciones. El
   borde inferior lo pone .fox-rc-head-main, que ocupa el ancho completo. */
.fox-rl .fox-rl-head {
    grid-template-columns: 1fr auto;
    min-height: 52px;
    gap: 0.75rem;
}

.fox-rl .fox-rl-head .fox-rc-title,
.fox-rl .fox-rl-head .fox-rc-actions {
    align-self: center;
}

.fox-rl .fox-rc-actions {
    gap: 0.4rem;
}

/* Botones de accion chicos, alineados a la derecha en la cabecera. Antes eran
   tres botones grandes flotando arriba del contenido. */
.fox-rl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 30px;
    padding: 0 11px;
    border: 1.5px solid var(--fox-border, #ebe9f0);
    border-radius: 9px;
    background: var(--fox-surface, #fff);
    color: var(--fox-ink-soft, #6c6a78);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fox-rl-btn svg {
    width: 14px;
    height: 14px;
}

.fox-rl-btn:hover:not(:disabled) {
    border-color: rgba(249, 128, 0, 0.45);
    color: var(--fox-orange, #F98000);
}

/* Sin borde en vez de "borde transparente": con el degrade abajo, el borde
   transparente dejaba ver la franja roja del final del gradiente como si fuera
   un filete al costado. */
.fox-rl-btn.is-primary {
    background: var(--fox-gradient, linear-gradient(135deg, #FCAF03 0%, #F98000 48%, #F83800 100%));
    border: none;
    padding: 0 13px;
    color: #fff;
}

.fox-rl-btn.is-primary:hover:not(:disabled) {
    color: #fff;
    box-shadow: var(--fox-shadow-orange, 0 10px 24px -8px rgba(248, 86, 0, 0.35));
}

.fox-rl-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.fox-rl-btn.is-open {
    border-color: rgba(249, 128, 0, 0.45);
    color: var(--fox-orange, #F98000);
}

.fox-rl .fox-rc-dropdown button {
    font-size: 0.79rem;
}

/* --- Estados --- */

.fox-rl-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 190px;
    padding: 1.75rem 1rem;
    text-align: center;
}

.fox-rl-state > div {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

/* Solo el icono grande del estado (hijo directo). Sin el ">" esto tambien le
   pegaba al icono del boton de adentro y lo dejaba de 30px. */
.fox-rl-state > div > svg {
    width: 22px;
    height: 22px;
    color: var(--fox-orange, #F98000);
    opacity: 0.8;
    padding: 12px;
    box-sizing: content-box;
    border-radius: 14px;
    background: linear-gradient(160deg, #fdf6ef 0%, #f7f6f9 100%);
    border: 1px solid var(--fox-border, #ebe9f0);
    margin-bottom: 0.35rem;
}

.fox-rl-state b {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fox-ink, #26232f);
}

.fox-rl-state span {
    font-size: 0.8rem;
    color: var(--fox-muted, #9997a3);
}

.fox-rl-state .fox-rl-cta {
    margin-top: 0.6rem;
}

.fox-rl[data-rl-state="inicial"] .fox-rl-state,
.fox-rl[data-rl-state="cargando"] .fox-rl-state,
.fox-rl[data-rl-state="vacio"] .fox-rl-state {
    display: flex;
}

.fox-rl[data-rl-state="inicial"] .fox-rl-idle,
.fox-rl[data-rl-state="cargando"] .fox-rl-loading,
.fox-rl[data-rl-state="vacio"] .fox-rl-none {
    display: flex;
}

/* Mientras carga, el listado viejo no se muestra a medias. */
.fox-rl[data-rl-state="cargando"] table[id^="tabla-"],
.fox-rl[data-rl-state="vacio"] table[id^="tabla-"] {
    display: none !important;
}

/* Esqueleto de filas: da idea de que viene una tabla, no un spinner suelto. */
.fox-rl-skel {
    width: 100%;
    height: 13px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f2f1f5 25%, #e9e7ee 37%, #f2f1f5 63%);
    background-size: 400% 100%;
    animation: fox-rl-shimmer 1.3s ease-in-out infinite;
}

.fox-rl-skel:nth-child(2) { width: 92%; }
.fox-rl-skel:nth-child(3) { width: 96%; }
.fox-rl-skel:nth-child(4) { width: 88%; }
.fox-rl-skel:nth-child(5) { width: 94%; }

.fox-rl-loading span {
    margin-top: 0.5rem;
}

@keyframes fox-rl-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fox-rl-skel { animation: none; }
}

/* ==========================================================================
   Tarjetas de grafico suelto
   ========================================================================== */

.card.fox-gc > .fox-rc-head {
    border-radius: 14px 14px 0 0;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--fox-border, #ebe9f0);
    background: var(--fox-surface, #fff);
}

.card.fox-gc > .card-content {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.fox-gc .fox-rc-actions .reload,
.fox-gc .fox-rc-actions li {
    list-style: none;
    margin: 0;
}

.fox-gc .fox-rc-actions a[data-action="reload"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--fox-ink-soft, #6c6a78);
    cursor: pointer;
}

.fox-gc .fox-rc-actions a[data-action="reload"]:hover {
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-orange, #F98000);
}

/* La serie venia con sombra proyectada y trazo de 4px: pesado y con la sombra
   duplicando visualmente la linea. Marcas finas y sin adornos. */
.fox-gc .apexcharts-series path,
.fox-rc .apexcharts-series path {
    filter: none !important;
}

.fox-gc .apexcharts-line {
    stroke-width: 2.5px;
}

.fox-gc .apexcharts-gridline {
    stroke: var(--fox-border, #ebe9f0);
}

.fox-gc .apexcharts-xaxis text,
.fox-gc .apexcharts-yaxis text {
    fill: var(--fox-muted, #9997a3);
    font-size: 11px;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .fox-rf {
        gap: 0.5rem;
    }
    .fox-rf-spacer {
        display: none;
    }
}

@media (max-width: 575px) {
    .fox-rc-title-text {
        font-size: 0.88rem;
    }
    .fox-rf-range .form-control {
        width: 92px;
    }
}

/* La cabecera vieja de Vuexy (el toggle de tres puntitos) ya no se usa: el
   enhancer arma su propia barra de acciones. */
.fox-rc .heading-elements-toggle {
    display: none !important;
}

/* ==========================================================================
   Modo oscuro
   --------------------------------------------------------------------------
   Casi todo el archivo ya viaja por los tokens --fox-* que app-theme.css
   redefine bajo body.dark-layout, asi que aca solo quedan los pocos lugares
   con un gris propio que no coincidia con ningun token: cambiarlos por uno
   habria movido el color en modo CLARO, y el modo claro tiene que quedar
   igual que antes. Por eso van scopeados a dark en vez de tokenizados.
   ========================================================================== */

/* Boton redondo de "limpiar busqueda": el gris claro desaparece sobre navy. */
body.dark-layout .fox-rc-search-clear {
    background: var(--fox-border);
    color: var(--fox-ink);
}

/* Borde del checkbox: #d5d2de no se ve contra la tarjeta oscura. */
body.dark-layout .fox-rc .vs-checkbox,
body.dark-layout .fox-rf .vs-checkbox {
    border-color: var(--fox-border) !important;
}

/* Chapa del icono en los estados vacio / inicial: el degrade crema no pega. */
body.dark-layout .fox-rc-empty-ico,
body.dark-layout .fox-rl-state > div > svg {
    background: linear-gradient(160deg, #1b2245 0%, #262C49 100%);
}

/* Esqueleto de carga: mismo shimmer, un escalon mas claro que la tarjeta. */
body.dark-layout .fox-rl-skel {
    background: linear-gradient(90deg, #1b2245 25%, #303757 37%, #1b2245 63%);
    background-size: 400% 100%;
}

/* Las sombras estan calculadas sobre tinta oscura (rgba(38,35,47,...)): sobre
   navy no se ven y encima ensucian. Se reemplazan por negro puro, que si
   despega la tarjeta del fondo. */
body.dark-layout .fox-rc-dropdown {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
}

body.dark-layout .fox-rc-seg button.is-active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}