@import '_content/J2J.Crm.Web/J2J.Crm.Web.kev3fe9rs3.bundle.scp.css';
@import '_content/J2J.Fichajes.Pantallas/J2J.Fichajes.Pantallas.rnezs8e1kw.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Components/Dashboard/AvisoAcuerdosComerciales.razor.rz.scp.css */
/* ================================================================
   Acuerdos comerciales del mes, bajo el período de consulta.
   Prefijo acuerdos-. Franja discreta: informa, no compite con los
   KPIs ni con el selector de mes que tiene encima.
   ================================================================ */

.acuerdos-aviso[b-7i8qy8pm5x] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    /* Varios acuerdos en un mes no deben empujar el panel hacia abajo. */
    max-height: 13rem;
    overflow-y: auto;
}

.acuerdos-aviso-item[b-7i8qy8pm5x] {
    background: var(--color-surface, #fff);
    border: 1px solid #cfcfda;
    border-left: 3px solid var(--brand-primary, #FF6600);
    border-radius: var(--radius-md, .5rem);
    padding: .5rem .7rem;
}

.acuerdos-aviso-item .badge[b-7i8qy8pm5x] {
    font-weight: var(--font-weight-normal, 400);
}
/* /Components/Dashboard/ComisionesTiendaButton.razor.rz.scp.css */
/* ================================================================
   Acceso al comisionamiento de la tienda (franja + KPIs)
   Prefijo ct- (comisiones tienda). Mismo lenguaje visual que la
   página de Comisionamiento mensual, para que se lean igual.
   ================================================================ */

.ct-banner[b-ndkzwrvluu] {
    --ct-line: #e6e6ec;
    --ct-line-strong: #cfcfda;
    --ct-ink: #1d1d26;
    --ct-ko: #c62828;

    display: block;
    width: 100%;
    text-align: left;
    background: var(--color-surface, #fff);
    border: 1px solid var(--ct-line-strong);
    border-radius: var(--radius-md, .5rem);
    padding: .7rem .9rem;
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
                box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.ct-banner:hover:not(:disabled)[b-ndkzwrvluu],
.ct-banner:focus-visible:not(:disabled)[b-ndkzwrvluu] {
    border-color: var(--brand-primary, #FF6600);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.ct-banner:disabled[b-ndkzwrvluu] {
    cursor: default;
    background: #fbfbfd;
}

.ct-banner--alerta[b-ndkzwrvluu] { border-left: 4px solid var(--ct-ko); }

.ct-cargando[b-ndkzwrvluu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 0;
    color: var(--color-text-muted, #6c757d);
}

.ct-banner__head[b-ndkzwrvluu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.ct-banner__eyebrow[b-ndkzwrvluu] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.ct-banner__cta[b-ndkzwrvluu] {
    font-size: .8rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--brand-primary-dark, #E55A00);
    white-space: nowrap;
}

.ct-banner:hover:not(:disabled) .ct-banner__cta[b-ndkzwrvluu] { text-decoration: underline; }

.ct-kpis[b-ndkzwrvluu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-md, .75rem);
}

.ct-kpi[b-ndkzwrvluu] {
    border: 1px solid var(--ct-line);
    border-radius: var(--radius-md, .5rem);
    padding: .55rem .75rem;
    position: relative;
    overflow: hidden;
}

.ct-kpi[b-ndkzwrvluu]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ct-line-strong);
}

.ct-kpi--brand[b-ndkzwrvluu]::before { background: var(--brand-primary, #FF6600); }
.ct-kpi--danger[b-ndkzwrvluu]::before { background: var(--ct-ko); }

.ct-kpi__label[b-ndkzwrvluu] {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.ct-kpi__value[b-ndkzwrvluu] {
    display: block;
    font-size: 1.35rem;
    line-height: 1.15;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--ct-ink);
}

.ct-kpi--brand .ct-kpi__value[b-ndkzwrvluu] { color: var(--brand-primary, #FF6600); }
.ct-kpi--danger .ct-kpi__value[b-ndkzwrvluu] { color: var(--ct-ko); }

.ct-kpi__hint[b-ndkzwrvluu] {
    display: block;
    font-size: .72rem;
    color: var(--color-text-muted, #6c757d);
}

@media (prefers-reduced-motion: reduce) {
    .ct-banner[b-ndkzwrvluu] { transition: none; }
}
/* /Components/Dashboard/ModalComisiones.razor.rz.scp.css */
/* Reparto por tienda dentro del modal de comisiones.
   Sólo aparece cuando el comercial pasó por más de un punto de venta en el mes:
   sus objetivos siguen siendo mensuales, pero el tramo y la penalización se
   calculan tienda a tienda. */

.mc-estancias[b-mopr88139c] {
    border: 1px solid rgba(var(--brand-primary-rgb, 255, 102, 0), .35);
    border-radius: .5rem;
    padding: .75rem .9rem;
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .05);
}

.mc-estancias__cabecera[b-mopr88139c] {
    display: flex;
    align-items: center;
    color: var(--brand-primary-dark, #E55A00);
}

.mc-estancias__nota[b-mopr88139c] {
    margin: .35rem 0 .6rem;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--color-text-muted, #6c757d);
}

.mc-estancias__tabla[b-mopr88139c] {
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
    background: var(--color-surface, #fff);
    border-radius: .35rem;
    overflow: hidden;
}

.mc-estancias__tabla thead th[b-mopr88139c] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    border-bottom-width: 1px;
}

/* Desglose por tienda dentro de la tabla de conceptos: una subfila por estancia,
   sangrada, para poder ver de dónde sale cada parte del importe del concepto. */

.mc-desglose-toggle[b-mopr88139c] {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-primary-dark, #E55A00);
    cursor: pointer;
    text-decoration: underline dotted;
}

/* Resumen: bruto → penalización → neto, a lo ancho y justo antes de las tablas de
   detalle. Es la única cifra del modal que coincide con lo que se cobra, así que va
   siempre, haya o no penalización (con "—" cuando no la hay, para que se lea que se
   ha comprobado). Misma pauta visual que los KPI del modal de tienda. */

.mc-resumen[b-mopr88139c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.mc-resumen__kpi[b-mopr88139c] {
    position: relative;
    overflow: hidden;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
}

.mc-resumen__kpi[b-mopr88139c]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-border, #dee2e6);
}

.mc-resumen__kpi--penal[b-mopr88139c]::before { background: #C62828; }
.mc-resumen__kpi--total[b-mopr88139c]::before { background: var(--brand-primary, #FF6600); }

.mc-resumen__label[b-mopr88139c] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: .15rem;
}

.mc-resumen__valor[b-mopr88139c] {
    display: block;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mc-resumen__kpi--penal .mc-resumen__valor[b-mopr88139c] { color: #C62828; }
.mc-resumen__kpi--total .mc-resumen__valor[b-mopr88139c] { color: var(--brand-primary, #FF6600); }

.mc-resumen__pista[b-mopr88139c] {
    display: block;
    font-size: .74rem;
    line-height: 1.3;
    color: var(--color-text-muted, #6c757d);
}

/* Tabla principal de conceptos. Sustituye a las clases genéricas de Bootstrap
   (table-bordered + table-striped) por una rejilla propia: menos línea, números
   alineados a la derecha con cifras de ancho fijo y la columna del dinero separada
   del resto, que es la que se busca al abrir el modal. */

.mc-tabla__scroll[b-mopr88139c] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
}

.mc-tabla[b-mopr88139c] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
}

.mc-tabla th[b-mopr88139c],
.mc-tabla td[b-mopr88139c] {
    padding: .5rem .7rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border, #dee2e6);
}

/* La cabecera se queda pegada arriba: el modal ya scrollea por dentro y sin esto
   se pierde de vista en cuanto hay unos cuantos conceptos. */
.mc-tabla thead th[b-mopr88139c] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #343a40;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: 0;
}

.mc-tabla tbody tr:hover > td[b-mopr88139c] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .05);
}

.mc-tabla tbody tr:last-child > td[b-mopr88139c] {
    border-bottom: 0;
}

.mc-tabla__fila--garantia > td[b-mopr88139c] {
    background: rgba(255, 193, 7, .12);
}

/* ── Columnas ─────────────────────────────────────────────────── */

.mc-tabla__num[b-mopr88139c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mc-tabla__c-concepto[b-mopr88139c] {
    text-align: left;
    min-width: 15rem;
}

.mc-tabla__c-cumpl[b-mopr88139c] {
    width: 8.5rem;
    text-align: right;
}

/* El dinero se separa del resto con una línea, no con más peso tipográfico. */
.mc-tabla__c-importe[b-mopr88139c] {
    border-left: 1px solid var(--color-border, #dee2e6);
    font-weight: 700;
    min-width: 7rem;
}

.mc-tabla thead .mc-tabla__c-importe[b-mopr88139c] {
    border-left-color: rgba(255, 255, 255, .25);
}

/* ── Celda de concepto ────────────────────────────────────────── */

.mc-tabla__concepto[b-mopr88139c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.mc-tabla__nombre[b-mopr88139c] {
    font-weight: 600;
}

.mc-tag[b-mopr88139c] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .1rem .45rem;
    border-radius: .75rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.mc-tag--llave[b-mopr88139c] { background: #e9ecef; color: #343a40; border-color: #ced4da; }
.mc-tag--garantia[b-mopr88139c] { background: transparent; color: #6c757d; border-color: #ced4da; }
.mc-tag--garantia-on[b-mopr88139c] { background: #ffc107; color: #212529; }
.mc-tag--exento[b-mopr88139c] { background: transparent; color: #6c757d; border-color: #dee2e6; font-weight: 400; }
.mc-tag--bonif[b-mopr88139c] { background: #ffc107; color: #212529; }

/* ── Cumplimiento ─────────────────────────────────────────────── */

.mc-tabla__pct[b-mopr88139c] {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Barra fina bajo el porcentaje: el número solo obliga a comparar de memoria fila
   a fila; la barra deja ver de un vistazo quién llega y quién no. Se corta al 100%
   a propósito — lo que pasa de ahí ya lo cuenta el tramo. */
.mc-barra[b-mopr88139c] {
    display: block;
    height: 3px;
    margin: .18rem 0;
    border-radius: 2px;
    background: var(--color-border, #dee2e6);
    overflow: hidden;
}

.mc-barra__relleno[b-mopr88139c] {
    display: block;
    height: 100%;
    border-radius: 2px;
}

.mc-tabla__sub[b-mopr88139c] {
    display: block;
    font-size: .7rem;
    line-height: 1.25;
    color: var(--color-text-muted, #6c757d);
}

.mc-tabla__tramo[b-mopr88139c] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #6c757d);
}

.mc-tabla__tramo--activo[b-mopr88139c] {
    font-weight: 700;
}

/* ── Subfilas del desglose por tienda ─────────────────────────── */

.mc-subfila > td[b-mopr88139c] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .05);
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .8rem;
}

.mc-subfila .mc-tabla__c-concepto[b-mopr88139c] { padding-left: 1.6rem; }
.mc-subfila__flecha[b-mopr88139c] { color: var(--color-text-muted, #6c757d); margin-right: .25rem; }
.mc-subfila__pdv[b-mopr88139c] { font-weight: 600; }
.mc-subfila__rango[b-mopr88139c] { color: var(--color-text-muted, #6c757d); font-size: .74rem; margin-left: .3rem; }

/* ── Pie: subtotal, penalización y total ──────────────────────── */

.mc-tabla__pie > th[b-mopr88139c] {
    background: #343a40;
    color: #fff;
    font-size: .84rem;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.mc-tabla__pie .mc-tabla__c-importe[b-mopr88139c] {
    border-left-color: rgba(255, 255, 255, .25);
}

.mc-tabla__pie--penal > th[b-mopr88139c] {
    color: #ff9a9a;
    font-weight: 600;
}

.mc-tabla__pie-nota[b-mopr88139c] {
    font-weight: 400;
    font-size: .74rem;
    color: rgba(255, 255, 255, .6);
    margin-left: .4rem;
}

.mc-tabla__pie--total > th[b-mopr88139c] {
    font-size: 1rem;
    font-weight: 700;
}

.mc-tabla__pie--total .mc-tabla__c-importe[b-mopr88139c] {
    color: #ffb066;
    font-size: 1.1rem;
}

/* ── Firmas manuales ──────────────────────────────────────────────
   Bloque informativo: no toca el importe, avisa de los actos que se firmaron
   a mano y separa los que ya tienen la documentación en control de los que no. */

.mc-firmas[b-mopr88139c] {
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .75rem .9rem;
    background: #f8f9fa;
}

.mc-firmas--pendiente[b-mopr88139c] {
    border-color: rgba(198, 40, 40, .35);
    background: rgba(198, 40, 40, .05);
}

.mc-firmas--ok[b-mopr88139c] {
    border-color: rgba(40, 167, 69, .35);
    background: rgba(40, 167, 69, .05);
}

.mc-firmas__cabecera[b-mopr88139c] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.mc-firmas__icono[b-mopr88139c] {
    margin-top: .2rem;
    flex-shrink: 0;
}

.mc-firmas--pendiente .mc-firmas__icono[b-mopr88139c] { color: #c62828; }
.mc-firmas--ok .mc-firmas__icono[b-mopr88139c] { color: #28a745; }

.mc-firmas__titulo[b-mopr88139c] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.mc-firmas__nota[b-mopr88139c] {
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.mc-firmas__toggle[b-mopr88139c] {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: .35rem;
    font-size: .78rem;
    padding: .2rem .55rem;
    color: #495057;
    flex-shrink: 0;
}

.mc-firmas__toggle:hover[b-mopr88139c] { background: #f1f3f5; }

.mc-firmas__cifras[b-mopr88139c] {
    display: flex;
    gap: 1.4rem;
    margin: .6rem 0 .1rem;
}

.mc-firmas__cifra[b-mopr88139c] {
    display: flex;
    align-items: baseline;
    gap: .35rem;
}

.mc-firmas__num[b-mopr88139c] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.mc-firmas__cifra--mal .mc-firmas__num[b-mopr88139c] { color: #c62828; }
.mc-firmas__cifra--bien .mc-firmas__num[b-mopr88139c] { color: #2e7d32; }

.mc-firmas__label[b-mopr88139c] {
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.mc-firmas__pie[b-mopr88139c] {
    margin: .45rem 0 0;
    font-size: .8rem;
    color: #495057;
}

.mc-firmas__bloque[b-mopr88139c] { margin-top: .8rem; }

.mc-firmas__bloque-titulo[b-mopr88139c] {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.mc-firmas__bloque-titulo--mal[b-mopr88139c] { color: #c62828; }
.mc-firmas__bloque-titulo--bien[b-mopr88139c] { color: #2e7d32; }

.mc-firmas__tabla[b-mopr88139c] {
    font-size: .78rem;
    background: rgba(255, 255, 255, .75);
}

.mc-firmas__tabla thead th[b-mopr88139c] {
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
}

/* Las notas las escribe documentación a mano y pueden ser largas: se dejan romper
   en varias líneas en vez de ensanchar la tabla. */
.mc-firmas__notas[b-mopr88139c] {
    color: #495057;
    min-width: 12rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Leyenda de tramos ────────────────────────────────────────────
   Abre el modal y es sólo la clave de lectura de los colores de abajo: va en
   una línea, con distintivos pequeños, para no comerse la parte de arriba de
   la pantalla antes de que aparezca la cifra que se cobra. */

.mc-leyenda[b-mopr88139c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

.mc-leyenda__rotulo[b-mopr88139c] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
}

.mc-leyenda__rotulo--sep[b-mopr88139c] { margin-left: .5rem; }

.mc-leyenda__badge[b-mopr88139c] {
    font-size: .68rem;
    font-weight: 600;
    padding: .25rem .5rem;
}

/* Una banda acotada no se aplica a todo el mundo, así que se distingue de las
   generales con un borde punteado y arrastra detrás los conceptos que alcanza. */
.mc-leyenda__badge--acotado[b-mopr88139c] {
    border: 1px dashed rgba(255, 255, 255, .75);
}

.mc-leyenda__ambito[b-mopr88139c] {
    display: inline-block;
    margin-left: .35rem;
    padding-left: .35rem;
    border-left: 1px solid rgba(255, 255, 255, .45);
    font-weight: 500;
    font-style: italic;
    opacity: .95;
}
/* /Components/Dashboard/ModalComisionesTienda.razor.rz.scp.css */
/* ================================================================
   Comisionamiento por comercial de un punto de venta (modal)
   Prefijo ct-. Adaptación de la tabla de Comisionamiento mensual:
   misma lectura, sin la columna de punto de venta (aquí es único).
   ================================================================ */

.ct-modal[b-rhd22xtlwj] {
    --ct-ink: #1d1d26;
    --ct-ink-soft: #15151c;
    --ct-line: #e6e6ec;
    --ct-line-strong: #cfcfda;
    --ct-ok: #12805c;
    --ct-ko: #c62828;

    /* Ancho de las columnas congeladas, reutilizado por los sticky. */
    --ct-w-nombre: 210px;
    --ct-w-total: 130px;

    /* Altura de la fila de grupos: fija el `top` de la fila de columnas. */
    --ct-head-group-h: 32px;
}

.ct-modal__mes[b-rhd22xtlwj] {
    margin-left: .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}


/* ── Franja de indicadores ────────────────────────────────────── */

.ct-kpis[b-rhd22xtlwj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-md, .75rem);
}

.ct-kpi[b-rhd22xtlwj] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--ct-line);
    border-radius: var(--radius-md, .5rem);
    padding: .7rem .9rem;
    position: relative;
    overflow: hidden;
}

.ct-kpi[b-rhd22xtlwj]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ct-line-strong);
}

.ct-kpi--brand[b-rhd22xtlwj]::before { background: var(--brand-primary, #FF6600); }
.ct-kpi--danger[b-rhd22xtlwj]::before { background: var(--ct-ko); }

.ct-kpi__label[b-rhd22xtlwj] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
    margin-bottom: .15rem;
}

.ct-kpi__value[b-rhd22xtlwj] {
    display: block;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--ct-ink);
}

.ct-kpi--brand .ct-kpi__value[b-rhd22xtlwj] { color: var(--brand-primary, #FF6600); }
.ct-kpi--danger .ct-kpi__value[b-rhd22xtlwj] { color: var(--ct-ko); }

.ct-kpi__hint[b-rhd22xtlwj] {
    display: block;
    font-size: .74rem;
    color: var(--color-text-muted, #6c757d);
}


/* ── Escala de tramos ─────────────────────────────────────────── */

.ct-legend[b-rhd22xtlwj] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--ct-line);
    border-radius: var(--radius-md, .5rem);
    padding: var(--sp-md, .75rem) var(--sp-base, 1rem);
}

.ct-scale[b-rhd22xtlwj] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.ct-scale__label[b-rhd22xtlwj] {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.ct-scale__track[b-rhd22xtlwj] {
    display: flex;
    flex: 1 1 320px;
    min-width: 260px;
    border-radius: var(--radius-sm, .375rem);
    overflow: hidden;
    border: 1px solid var(--ct-line);
}

.ct-scale__seg[b-rhd22xtlwj] {
    flex: 1 1 0;
    min-width: 0;
    padding: .3rem .4rem;
    text-align: center;
    background-color: var(--ct-tramo-bg, transparent);
    border-left: 1px solid var(--ct-line);
    box-shadow: inset 0 3px 0 var(--ct-tramo, transparent);
}

.ct-scale__seg:first-child[b-rhd22xtlwj] { border-left: 0; }

.ct-scale__pct[b-rhd22xtlwj] {
    display: block;
    font-size: .82rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--ct-ink);
}

.ct-scale__range[b-rhd22xtlwj] {
    display: block;
    font-size: .68rem;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}

/* Un segmento acotado no alcanza a todos los conceptos: se marca con el trazo
   superior a rayas y debajo lleva la lista de a quién sí alcanza. */
.ct-scale__seg--acotado[b-rhd22xtlwj] {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 6px,
        var(--ct-tramo-bg, transparent) 6px 12px);
}

.ct-scale__ambito[b-rhd22xtlwj] {
    display: block;
    margin-top: .1rem;
    font-size: .63rem;
    font-style: italic;
    line-height: 1.2;
    color: var(--ct-tramo, var(--color-text-muted, #6c757d));
    overflow-wrap: anywhere;
}

.ct-marks[b-rhd22xtlwj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.ct-swatch[b-rhd22xtlwj] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: .35rem;
    vertical-align: -1px;
}


/* ── Tabla ────────────────────────────────────────────────────── */

.ct-scroller[b-rhd22xtlwj] {
    max-height: 58vh;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--ct-line);
    border-radius: var(--radius-md, .5rem);
}

.ct-table[b-rhd22xtlwj] {
    width: 100%;
    margin: 0;
    border-collapse: separate; /* imprescindible para las columnas sticky */
    border-spacing: 0;
    font-size: .86rem;
}

.ct-table th[b-rhd22xtlwj],
.ct-table td[b-rhd22xtlwj] {
    padding: .45rem .6rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ct-line);
    white-space: nowrap;
}

/* Separador vertical: sólo entre grupos, no entre cada columna. */
.ct-gsep[b-rhd22xtlwj] { border-left: 1px solid var(--ct-line-strong); }


/* Cabecera de dos niveles */

.ct-table thead th[b-rhd22xtlwj] {
    position: sticky;
    z-index: 20;
    background: var(--ct-ink);
    color: #e9e9f0;
    font-weight: var(--font-weight-semibold, 600);
    border-bottom: 0;
}

.ct-table thead .ct-hgroup th[b-rhd22xtlwj] {
    top: 0;
    height: var(--ct-head-group-h);
    background: var(--ct-ink-soft);
    color: var(--brand-primary-light, #FF8533);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    text-align: center;
}

.ct-table thead .ct-hcols th[b-rhd22xtlwj] {
    top: var(--ct-head-group-h);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    border-bottom: 2px solid var(--brand-primary, #FF6600);
}

.ct-hgroup--left[b-rhd22xtlwj] { text-align: left !important; }

.ct-table thead .ct-gsep[b-rhd22xtlwj] { border-left-color: #3a3a48; }


/* Cuerpo: el fondo de fila vive en variables para que las columnas
   congeladas hereden el zebrado y el hover en vez de taparlos. */

.ct-table tbody tr[b-rhd22xtlwj] {
    --row-bg: #ffffff;
    --row-accent-bg: rgba(var(--brand-primary-rgb, 255, 102, 0), .05);
}

.ct-table tbody tr:nth-of-type(even)[b-rhd22xtlwj] {
    --row-bg: #f5f5f8;
    --row-accent-bg: rgba(var(--brand-primary-rgb, 255, 102, 0), .08);
}

.ct-table tbody tr:hover[b-rhd22xtlwj] {
    --row-bg: #fff4ec;
    --row-accent-bg: rgba(var(--brand-primary-rgb, 255, 102, 0), .14);
}

.ct-table tbody td[b-rhd22xtlwj] {
    background: var(--row-bg);
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
}


/* Pie */

.ct-table tfoot th[b-rhd22xtlwj] {
    position: sticky;
    bottom: 0;
    z-index: 24;
    background: var(--ct-ink);
    color: #fff;
    border-top: 2px solid var(--brand-primary, #FF6600);
    border-bottom: 0;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

.ct-table tfoot .ct-gsep[b-rhd22xtlwj] { border-left-color: #3a3a48; }


/* ── Columnas congeladas ──────────────────────────────────────── */

.ct-c-nombre[b-rhd22xtlwj],
.ct-c-total[b-rhd22xtlwj] { position: sticky; }

.ct-c-nombre[b-rhd22xtlwj] { left: 0; width: var(--ct-w-nombre); min-width: var(--ct-w-nombre); }
.ct-c-total[b-rhd22xtlwj] { right: 0; width: var(--ct-w-total); min-width: var(--ct-w-total); }

.ct-table thead .ct-c-nombre[b-rhd22xtlwj],
.ct-table thead .ct-c-total[b-rhd22xtlwj] { z-index: 30; }

.ct-table tfoot .ct-c-nombre[b-rhd22xtlwj],
.ct-table tfoot .ct-c-total[b-rhd22xtlwj] { z-index: 34; }

.ct-table tbody .ct-c-nombre[b-rhd22xtlwj] { z-index: 10; }

.ct-table tbody .ct-c-total[b-rhd22xtlwj] {
    z-index: 10;
    /* Tinte de marca sobre el fondo de fila, sin perder zebrado ni hover. */
    background-color: var(--row-bg);
    background-image: linear-gradient(var(--row-accent-bg), var(--row-accent-bg));
    font-weight: var(--font-weight-bold, 700);
    color: var(--brand-primary-dark, #E55A00);
}

/* Sombra que marca el borde de la zona congelada al hacer scroll. */
.ct-c-nombre[b-rhd22xtlwj] { box-shadow: 6px 0 8px -7px rgba(0, 0, 0, .35); }
.ct-c-total[b-rhd22xtlwj] { box-shadow: -6px 0 8px -7px rgba(0, 0, 0, .35); }

/* En pantallas estrechas congelar columnas estorba más que ayuda: se sueltan
   los anclajes horizontales, pero cabecera y pie siguen pegados en vertical. */
@media (max-width: 1200px) {
    .ct-table .ct-c-nombre[b-rhd22xtlwj],
    .ct-table .ct-c-total[b-rhd22xtlwj] {
        left: auto;
        right: auto;
        box-shadow: none;
    }

    .ct-table tbody .ct-c-nombre[b-rhd22xtlwj],
    .ct-table tbody .ct-c-total[b-rhd22xtlwj] { position: static; }
}


/* ── Anchos mínimos por tipo de columna ───────────────────────── */

.ct-c-flag[b-rhd22xtlwj] { min-width: 92px; text-align: center; }
.ct-c-term[b-rhd22xtlwj] { min-width: 112px; text-align: center; }
.ct-c-llave[b-rhd22xtlwj] { min-width: 118px; text-align: center; }
.ct-c-concepto[b-rhd22xtlwj] { min-width: 132px; }
.ct-c-bruto[b-rhd22xtlwj] { min-width: 134px; }
.ct-c-pen-num[b-rhd22xtlwj] { min-width: 98px; text-align: center; }
.ct-c-pen-imp[b-rhd22xtlwj] { min-width: 170px; }


/* ── Celdas ───────────────────────────────────────────────────── */

.ct-num[b-rhd22xtlwj] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ct-nombre[b-rhd22xtlwj] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--ct-ink);
    white-space: normal;
    line-height: 1.2;
}

.ct-id[b-rhd22xtlwj] {
    font-size: .7rem;
    color: var(--color-text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.ct-vacio[b-rhd22xtlwj] { color: #b9b9c4; }

/* Importe de un concepto, teñido con el color de su tramo. */
.ct-tramo[b-rhd22xtlwj] {
    display: block;
    border-radius: var(--radius-sm, .375rem);
    border-left: 3px solid var(--ct-tramo, transparent);
    background-color: var(--ct-tramo-bg, transparent);
    padding: .2rem .4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold, 600);
}

.ct-tramo__extra[b-rhd22xtlwj] {
    display: block;
    font-size: .68rem;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #6c757d);
}

.ct-bruto[b-rhd22xtlwj] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--ct-ink);
}

.ct-descuento[b-rhd22xtlwj] {
    display: block;
    color: var(--ct-ko);
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

.ct-motivos[b-rhd22xtlwj] {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    justify-content: flex-end;
    margin-top: .2rem;
    max-width: 15rem;
    margin-left: auto;
    white-space: normal;
}

.ct-motivo[b-rhd22xtlwj] {
    font-size: .66rem;
    line-height: 1.4;
    padding: 0 .3rem;
    border-radius: 3px;
    background: rgba(198, 40, 40, .09);
    color: #8e2020;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-regla[b-rhd22xtlwj] {
    display: block;
    font-size: .66rem;
    line-height: 1.3;
    font-style: italic;
    color: var(--color-text-muted, #6c757d);
    margin-top: .15rem;
    margin-left: auto;
    max-width: 15rem;
    white-space: normal;
}


/* ── Indicadores sí / no ──────────────────────────────────────── */

.ct-flag[b-rhd22xtlwj] {
    display: inline-block;
    min-width: 1.9rem;
    padding: .05rem .35rem;
    border-radius: 3px;
    font-size: .68rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: .04em;
}

.ct-flag--si[b-rhd22xtlwj] { background: rgba(18, 128, 92, .12); color: var(--ct-ok); }
.ct-flag--no[b-rhd22xtlwj] { background: rgba(198, 40, 40, .12); color: var(--ct-ko); }

.ct-chip-pdv[b-rhd22xtlwj] {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 3px;
    font-size: .66rem;
    font-weight: var(--font-weight-bold, 700);
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .15);
    color: var(--brand-primary-dark, #E55A00);
    white-space: nowrap;
}

/* El comercial no pasó el mes entero aquí: la cifra de su fila es sólo lo que
   generó en esta tienda, y eso hay que decirlo o se lee como su comisión del mes. */
.ct-chip-parcial[b-rhd22xtlwj] {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 3px;
    font-size: .66rem;
    font-weight: var(--font-weight-bold, 700);
    background: rgba(47, 111, 237, .13);
    color: #2f6fed;
    white-space: nowrap;
    cursor: help;
}

.ct-rango[b-rhd22xtlwj] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ct-table tbody td[b-rhd22xtlwj] { transition: none; }
}

/* ── Firmas manuales ──────────────────────────────────────────────
   Dos cifras en una celda: lo que falta por resolver y lo que ya está en
   control. El cero pendiente se apaga para que sólo destaque lo que hay
   que perseguir. */

.ct-c-firmas[b-rhd22xtlwj] { min-width: 96px; text-align: center; }

.ct-firmas[b-rhd22xtlwj] {
    display: inline-flex;
    align-items: baseline;
    gap: .18rem;
    font-variant-numeric: tabular-nums;
}

.ct-firmas__mal[b-rhd22xtlwj] {
    color: #c62828;
    font-weight: 700;
}

.ct-firmas__mal--cero[b-rhd22xtlwj] {
    color: #b9b9c4;
    font-weight: 500;
}

.ct-firmas__sep[b-rhd22xtlwj] { color: #b9b9c4; }

.ct-firmas__bien[b-rhd22xtlwj] {
    color: #2e7d32;
    font-weight: 600;
}
/* /Components/Dashboard/ModalDesgloseActosComerciales.razor.rz.scp.css */
.desglose-grupo[b-7oa05c4vei] {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
    border-radius: var(--radius-lg, 0.5rem);
    overflow: hidden;
}

.desglose-grupo summary[b-7oa05c4vei] {
    list-style: none;
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    background-color: rgba(var(--brand-primary-rgb), 0.06);
}

.desglose-grupo summary[b-7oa05c4vei]::-webkit-details-marker {
    display: none;
}

.desglose-grupo summary:hover[b-7oa05c4vei] {
    background-color: rgba(var(--brand-primary-rgb), 0.12);
}

.desglose-grupo-body[b-7oa05c4vei] {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.15);
}

.chevron-toggle[b-7oa05c4vei] {
    transition: transform 0.15s ease;
}

.desglose-grupo[open] .chevron-toggle[b-7oa05c4vei] {
    transform: rotate(180deg);
}

[b-7oa05c4vei] .fila-acto-comercial:not(:last-child) {
    margin-bottom: 0.35rem;
}

/* Distintivo del ámbito, gemelo del de la tarjeta de actos. Los estilos van
   duplicados a propósito: el CSS aislado de Blazor no cruza de un componente a
   otro, y sacarlo al CSS global por tres reglas no compensa. Si cambian los
   colores, cambian en los dos sitios. */

.desglose-ambito[b-7oa05c4vei] {
    display: inline-flex;
    align-items: center;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.5;
    white-space: nowrap;
}

.desglose-ambito--comercial[b-7oa05c4vei] {
    background: rgba(47, 111, 237, .12);
    color: #2f6fed;
}

.desglose-ambito--tienda[b-7oa05c4vei] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .15);
    color: var(--brand-primary-dark, #E55A00);
}

.desglose-ambito--acumulado[b-7oa05c4vei] {
    background: rgba(74, 93, 120, .15);
    color: #4a5d78;
}

/* Comercial que sólo estuvo parte del mes en esta tienda. Su cifra no es
   comparable con la de quien estuvo el mes entero, así que se marca el rango
   junto al nombre y se apaga la barra: sigue mostrando la proporción, pero deja
   de competir visualmente con las de los demás. */

[b-7oa05c4vei] .fila-parcial {
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    padding: 0 .3rem;
    border-radius: 3px;
    font-size: .66rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    background: rgba(47, 111, 237, .12);
    color: #2f6fed;
    white-space: nowrap;
    cursor: help;
}

[b-7oa05c4vei] .fila-barra-parcial {
    background: repeating-linear-gradient(
        135deg,
        rgba(47, 111, 237, .55) 0 5px,
        rgba(47, 111, 237, .25) 5px 10px
    );
}
/* /Components/Dashboard/ModalDetallesCategoria.razor.rz.scp.css */
/* Reparto por tienda de las operaciones de una categoría.
   Aparece sólo cuando las operaciones del mes salen de más de un punto de venta,
   que es justo cuando hace falta dejar claro que el objetivo individual se mide
   sobre la suma de todas y no tienda a tienda. */

.mdc-tiendas[b-itvjctqedm] {
    border: 1px solid var(--color-border, #e3e5ea);
    border-radius: .5rem;
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    background: var(--color-surface-alt, #f8f9fa);
}

.mdc-tiendas__cabecera[b-itvjctqedm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
    color: var(--color-text, #212529);
}

.mdc-tiendas__nota[b-itvjctqedm] {
    font-size: .8rem;
    color: var(--color-text-muted, #6c757d);
}

.mdc-tiendas__lista[b-itvjctqedm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
}

.mdc-tienda[b-itvjctqedm] {
    padding: .45rem .6rem;
    border-radius: .35rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e3e5ea);
}

.mdc-tienda__fila[b-itvjctqedm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.mdc-tienda__nombre[b-itvjctqedm] {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdc-tienda__ops[b-itvjctqedm] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-primary-dark, #E55A00);
}

/* La barra da la proporción de un vistazo; el número exacto ya está al lado. */
.mdc-tienda__barra[b-itvjctqedm] {
    height: 4px;
    margin: .35rem 0 .25rem;
    border-radius: 2px;
    background: var(--color-border, #e3e5ea);
    overflow: hidden;
}

.mdc-tienda__barra > span[b-itvjctqedm] {
    display: block;
    height: 100%;
    background: var(--brand-primary, #FF6600);
}

.mdc-tienda__rango[b-itvjctqedm] {
    font-size: .72rem;
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

/* ── Firmas manuales ──────────────────────────────────────────────
   Resumen junto al botón de la tabla de operaciones y distintivo por fila. */

.mdc-firmas-resumen[b-itvjctqedm] {
    font-size: .78rem;
    white-space: nowrap;
    color: var(--color-text-muted, #6c757d);
}

.mdc-firmas-resumen__mal[b-itvjctqedm] {
    color: #c62828;
    font-weight: 600;
}

.mdc-firmas-resumen__bien[b-itvjctqedm] {
    color: #2e7d32;
    font-weight: 600;
}

.mdc-firma-badge[b-itvjctqedm] { font-size: .65rem; }

/* ── Escala de tramos de la categoría ─────────────────────────────
   Va pegada a la barra de porcentaje porque es lo que traduce ese número a un
   multiplicador. Solo enseña las bandas que alcanzan a esta categoría: las
   generales y las acotadas a su concepto. */

.mdc-escala[b-itvjctqedm] {
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .5rem;
    padding: .6rem .75rem;
    background-color: var(--color-surface, #fff);
}

.mdc-escala__rotulo[b-itvjctqedm] {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: .4rem;
}

.mdc-escala__track[b-itvjctqedm] {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .4rem;
    overflow: hidden;
}

.mdc-escala__seg[b-itvjctqedm] {
    flex: 1 1 7rem;
    min-width: 0;
    padding: .35rem .4rem;
    text-align: center;
    border-left: 1px solid var(--color-border, #dee2e6);
    box-shadow: inset 0 3px 0 var(--mdc-tramo, transparent);
}

.mdc-escala__seg:first-child[b-itvjctqedm] { border-left: 0; }

/* La banda que se está aplicando ahora: el resto queda apagado detrás. */
.mdc-escala__seg--vigente[b-itvjctqedm] {
    background-color: color-mix(in srgb, var(--mdc-tramo) 14%, transparent);
    font-weight: 700;
}

/* Acotada = no alcanza a todos los conceptos. Rayado para que se note de un
   vistazo cuál es un añadido de este concepto y cuál es la escala de siempre. */
.mdc-escala__seg--acotado[b-itvjctqedm] {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 6px,
        color-mix(in srgb, var(--mdc-tramo) 10%, transparent) 6px 12px);
}

.mdc-escala__pct[b-itvjctqedm] {
    display: block;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.mdc-escala__rango[b-itvjctqedm] {
    display: block;
    font-size: .66rem;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}

.mdc-escala__ambito[b-itvjctqedm] {
    display: block;
    margin-top: .1rem;
    font-size: .62rem;
    font-style: italic;
    line-height: 1.2;
    color: var(--mdc-tramo, var(--color-text-muted, #6c757d));
    overflow-wrap: anywhere;
}

.mdc-escala__pie[b-itvjctqedm] {
    display: block;
    margin-top: .45rem;
    font-size: .74rem;
    color: var(--color-text-muted, #6c757d);
}
/* /Components/Dashboard/StatsCardsSection.razor.rz.scp.css */
/* Distintivo del ámbito de la cifra: comercial, tienda o acumulado de zona.
   Las tres aparecen en el mismo sitio del panel y son magnitudes que no se pueden
   comparar entre sí, así que cada una lleva su color e icono: la forma cambia antes
   de que haga falta leer el nombre. */

.stats-ambito[b-222jih9m3p] {
    display: inline-flex;
    align-items: center;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Una persona. */
.stats-ambito--comercial[b-222jih9m3p] {
    background: rgba(47, 111, 237, .12);
    color: #2f6fed;
}

/* Un punto de venta entero. */
.stats-ambito--tienda[b-222jih9m3p] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .15);
    color: var(--brand-primary-dark, #E55A00);
}

/* Varias tiendas sumadas: el más "grande" de los tres, en un tono neutro y oscuro
   para que no se confunda con el de una tienda suelta. */
.stats-ambito--acumulado[b-222jih9m3p] {
    background: rgba(74, 93, 120, .15);
    color: #4a5d78;
}
/* /Components/Dashboard/TarjetaQuesito.razor.rz.scp.css */
/* Pestañas de tienda: solo aparecen cuando el comercial pasó por más de una en el mes.
   La tarjeta es estrecha (hasta cuatro por fila), así que las pestañas se reparten el ancho a
   partes iguales y envuelven si no caben, en vez de desbordar. */

.tq-tabs[b-iyf6xahf9x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tq-tab[b-iyf6xahf9x] {
    flex: 1 1 0;
    min-width: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    background-color: var(--bs-gray-100, #f8f9fa);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.25rem 0.4rem;
    line-height: 1.2;
    overflow: hidden;
}

.tq-tab:hover[b-iyf6xahf9x],
.tq-tab:focus-visible[b-iyf6xahf9x] {
    border-color: var(--bs-orange);
}

/* La elegida: es la que describe todo el bloque de métricas de debajo. */
.tq-tab--activa[b-iyf6xahf9x] {
    background-color: #fff;
    border-color: var(--bs-orange);
    box-shadow: inset 0 -2px 0 var(--bs-orange);
}

.tq-tab__nombre[b-iyf6xahf9x] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
}

.tq-tab--activa .tq-tab__nombre[b-iyf6xahf9x] {
    color: var(--bs-orange);
}

.tq-tab__rango[b-iyf6xahf9x] {
    font-size: 0.6rem;
    color: #adb5bd;
    white-space: nowrap;
}

/* Distintivo de la tienda en la que está hoy. */
.tq-tab__hoy[b-iyf6xahf9x] {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--bs-orange);
    border-radius: 0.3rem;
    padding: 0 0.25rem;
    margin-left: 0.2rem;
    vertical-align: middle;
}

/* El quesito.

   BootstrapBlazor.Chart dibuja el lienzo y luego le escribe a su contenedor el alto y el ancho
   que le hayas pasado, en píxeles fijos. Esa medida no sabe nada de la columna en la que cae:
   con tres o cuatro tarjetas por fila —o con el zoom por debajo del 100%, que ensancha el
   viewport y saca la cuarta columna— la columna del gráfico se queda en 140-180px, y el lienzo
   seguía midiendo lo suyo: se salía por la derecha de la tarjeta.

   Aquí se le pone el techo que le falta. El hueco manda; la medida en píxeles solo decide
   cuánto NO va a crecer en las tarjetas anchas. */

.tq-chart[b-iyf6xahf9x] {
    width: 100%;
    max-width: 180px;
    /* Sin esto, el ancho mínimo de este elemento flexible sería el del lienzo que lleva dentro
       —los 180px— y no encogería por mucho max-width que se le ponga. */
    min-width: 0;
}

/* El contenedor que pinta el componente, con su ancho en píxeles escrito desde JavaScript:
   max-width gana a ese width sin tener que pelearse con !important. */
.tq-chart[b-iyf6xahf9x]  > * {
    max-width: 100%;
}

/* Red de seguridad para el lienzo. En cuanto el contenedor encoge, Chart.js lo redibuja a la
   medida nueva —y cuadrado, que es la proporción por defecto de un quesito—, así que esto no
   suele llegar a actuar. */
.tq-chart[b-iyf6xahf9x]  canvas {
    max-width: 100%;
}
/* /Components/Fichajes/EnviarEnMasa.razor.rz.scp.css */
/* Tarjetas de elección de flujo: son <button>, así que hay que devolverles el aspecto de tarjeta. */
.tarjeta-flujo[b-xjl4u7ihw2] {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.tarjeta-flujo:hover[b-xjl4u7ihw2],
.tarjeta-flujo:focus-visible[b-xjl4u7ihw2] {
    border-color: var(--brand-primary, #FF6600);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}

/* Zona de "arrastra y suelta": el <input type=file> real se estira invisible por encima,
   de modo que el recuadro entero sea clicable y acepte archivos soltados. */
.zona-soltar[b-xjl4u7ihw2] {
    position: relative;
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    cursor: pointer;
}

.zona-soltar:hover[b-xjl4u7ihw2] {
    border-color: var(--brand-primary, #FF6600);
}

/* ::deep porque el input lo pinta el componente InputFile, no este marcado. */
.zona-soltar[b-xjl4u7ihw2]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* La lista de destinatarios puede tener cientos de nombres: se desplaza dentro de su caja. */
.lista-empleados[b-xjl4u7ihw2] {
    max-height: 22rem;
    overflow-y: auto;
}
/* /Components/Layout/BuscadorMenu.razor.rz.scp.css */
/* ================================================================
   BuscadorMenu.razor.css — buscador de páginas del menú lateral
   ================================================================

   Dentro del sidebar hay dos hermanos: esto, que sale de la plantilla Side, y
   el ".layout-menu" que BootstrapBlazor pinta alrededor del menú. app.css los
   estira a los dos (".layout-side > * { flex: 1 1 auto !important }") y centra
   el menú con margin-block:auto; por eso el buscador se quedaba clavado en el
   borde de arriba, a la altura del header y lejísimos de las entradas.

   Ahora el buscador y el menú viajan juntos y centrados: aquí va el
   margin-top:auto y en MainLayout.razor el margin-bottom:auto del .layout-menu.
   El hueco libre se parte entre esos dos márgenes, así que la caja acaba justo
   encima de la primera entrada. Cuando el menú es tan largo que desborda, los
   márgenes automáticos valen 0 y todo sube arriba, con el scroll del sidebar.

   El orden en el DOM lo decide el Layout de BootstrapBlazor, así que la caja se
   pone delante con order y no confiando en salir la primera. */

.layout.layout-orange .layout-side .j2j-buscador-menu[b-59mk5ocvqb],
.bb-layout.layout-orange .layout-side .j2j-buscador-menu[b-59mk5ocvqb] {
    order: -1;
    position: relative;
    display: block !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    /* Mismo inset lateral que .menu.is-vertical (padding: 0 .5rem) para que la
       caja quede a plomo con las entradas del menú. */
    padding: 0 0.5rem 0.5rem;
}

.layout.layout-orange .layout-side .j2j-buscador-menu > *[b-59mk5ocvqb],
.bb-layout.layout-orange .layout-side .j2j-buscador-menu > *[b-59mk5ocvqb] {
    flex: 0 0 auto !important;
}

/* ── La caja ── */

/* El selector largo no es capricho: app.css pone
   ".layout-side > * > * { display:flex; flex-direction:column !important }"
   pensando en el menú, y eso alcanza a la caja y le apilaba la lupa encima del
   texto. Con tres clases del layout por delante gana esta. */
.layout.layout-orange .layout-side .j2j-buscador-menu .j2j-buscador-menu-caja[b-59mk5ocvqb],
.bb-layout.layout-orange .layout-side .j2j-buscador-menu .j2j-buscador-menu-caja[b-59mk5ocvqb],
.j2j-buscador-menu-caja[b-59mk5ocvqb] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 0.4rem);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.j2j-buscador-menu-caja:focus-within[b-59mk5ocvqb] {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 102, 0, 0.65);
}

.j2j-buscador-menu-lupa[b-59mk5ocvqb] {
    color: rgba(210, 210, 222, 0.55);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.j2j-buscador-menu-input[b-59mk5ocvqb] {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #ffffff;
    font-size: 0.86rem;
    padding: 0.1rem 0;
}

.j2j-buscador-menu-input[b-59mk5ocvqb]::placeholder {
    color: rgba(210, 210, 222, 0.45);
}

.j2j-buscador-menu-limpiar[b-59mk5ocvqb] {
    background: transparent;
    border: 0;
    padding: 0 0.1rem;
    color: rgba(210, 210, 222, 0.6);
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.j2j-buscador-menu-limpiar:hover[b-59mk5ocvqb] {
    color: #ffffff;
}

/* ── Los resultados ── */

/* Flotante y no en el flujo: si la lista empujara, al escribir crecería el
   bloque, se repartiría otra vez el hueco libre y el menú bailaría bajo el
   ratón. Así se despliega encima, como cualquier autocompletado. */
.j2j-buscador-menu-resultados[b-59mk5ocvqb] {
    position: absolute;
    top: calc(100% - 0.35rem);
    left: 0.5rem;
    right: 0.5rem;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
    background: #23232e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 0.4rem);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
}

.j2j-buscador-menu-vacio[b-59mk5ocvqb] {
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    color: rgba(210, 210, 222, 0.5);
}

.j2j-buscador-menu-resultado[b-59mk5ocvqb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius-md, 0.4rem);
    padding: 0.35rem 0.5rem;
    color: rgba(210, 210, 222, 0.85);
    cursor: pointer;
}

.j2j-buscador-menu-resultado:hover[b-59mk5ocvqb],
.j2j-buscador-menu-resultado.activo[b-59mk5ocvqb] {
    background: rgba(255, 102, 0, 0.16);
    border-left-color: #FF6600;
    color: #ffffff;
}

.j2j-buscador-menu-resultado i[b-59mk5ocvqb] {
    color: #FF8C33;
    font-size: 0.82rem;
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
}

.j2j-buscador-menu-titulo[b-59mk5ocvqb] {
    display: block;
    font-size: 0.84rem;
    line-height: 1.2;
}

.j2j-buscador-menu-grupo[b-59mk5ocvqb] {
    display: block;
    font-size: 0.7rem;
    line-height: 1.2;
    opacity: 0.6;
}

/* Con el menú plegado no queda ancho para escribir: la caja se va y vuelve al
   pasar el ratón, igual que hace el propio menú con sus textos.

   Solo de 768px para arriba: por debajo de ese ancho BootstrapBlazor usa
   .is-collapsed para lo contrario —el sidebar es un cajón y esa clase es el
   cajón ABIERTO—, y en pantalla táctil no hay :hover que lo devuelva, así que
   esta misma regla dejaba el buscador escondido justo cuando se le necesita. */
@media (min-width: 768px) {
    .layout.is-collapsed .layout-side:not(:hover) .j2j-buscador-menu[b-59mk5ocvqb],
    .bb-layout.is-collapsed .layout-side:not(:hover) .j2j-buscador-menu[b-59mk5ocvqb] {
        display: none !important;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ================================================================
   MainLayout.razor.css
   ================================================================ */

.layout-content[b-1nhhz4g9j6] {
    min-height: calc(100vh - 7.5rem);
    background: var(--color-surface, #ffffff);
    overflow-x: auto;
}

.layout-footer[b-1nhhz4g9j6] {
    background: var(--color-surface, #ffffff);
}

/* ── Header sticky ── */

[b-1nhhz4g9j6] .layout-header {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ── Banner ── */

.layout-banner[b-1nhhz4g9j6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.4rem 0.9rem 0.4rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(180deg, #FF7A00 0%, #E04500 60%, #1d1d26 100%);
    border-bottom: 1px solid rgba(255, 102, 0, 0.20);
}

.layout-logo[b-1nhhz4g9j6] {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.layout-title span[b-1nhhz4g9j6] {
    color: var(--color-text-inverse, #ffffff);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.02em;
}

/* ── User Panel ── */

[b-1nhhz4g9j6] .layout-user-panel .user-area {
    gap: 0.5rem;
}

[b-1nhhz4g9j6] .layout-user-panel .user-info {
    text-align: right;
}

[b-1nhhz4g9j6] .layout-user-panel .user-avatar-btn {
    padding: 0.2rem 0.35rem;
    border: none;
    border-radius: 0.375rem;
    transition: background-color 150ms ease;
}

[b-1nhhz4g9j6] .layout-user-panel .user-avatar-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

[b-1nhhz4g9j6] .layout-user-panel .user-avatar-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.layout-notification-panel[b-1nhhz4g9j6] {
    display: flex;
    align-items: center;
}

[b-1nhhz4g9j6] .layout-notification-widget .dropdown-toggle {
    color: #fff;
}

[b-1nhhz4g9j6] .layout-notification-widget .dropdown-toggle:hover {
    color: #fff;
    opacity: 0.9;
}

[b-1nhhz4g9j6] .layout-notification-widget .dropdown-header {
    padding: 0.65rem 0.85rem;
}

[b-1nhhz4g9j6] .layout-notification-widget .dropdown-body {
    max-height: 24rem;
}

.notification-section[b-1nhhz4g9j6] {
    padding: 0.65rem 0.75rem;
}

.notification-section+.notification-section[b-1nhhz4g9j6] {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.notification-section-title[b-1nhhz4g9j6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.notification-item[b-1nhhz4g9j6] {
    border-radius: 0.4rem;
    margin-bottom: 0.35rem;
    white-space: normal;
}

.notification-item-alert[b-1nhhz4g9j6] {
    cursor: default;
}

.notification-item-title[b-1nhhz4g9j6] {
    display: block;
    font-size: 0.88rem;
    line-height: 1.2;
}

.notification-alert-message[b-1nhhz4g9j6] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.notification-empty[b-1nhhz4g9j6] {
    font-size: 0.84rem;
    color: #6c757d;
}

.notification-more[b-1nhhz4g9j6] {
    font-size: 0.8rem;
    color: #6c757d;
    padding: 0.15rem 0.5rem;
}


/* ── Responsive ── */

@media (max-width: 991.98px) {
    [b-1nhhz4g9j6] .layout-user-panel .user-info {
        display: none;
    }

    [b-1nhhz4g9j6] .layout-header {
        position: sticky !important;
    }

    [b-1nhhz4g9j6] .layout-footer {
        padding: 0.75rem !important;
    }

    [b-1nhhz4g9j6] .layout-footer small {
        font-size: 0.75rem;
    }

}

@media (max-width: 575.98px) {
    .layout-content[b-1nhhz4g9j6] {
        padding: 0.75rem !important;
    }

    [b-1nhhz4g9j6] .layout-footer {
        font-size: 0.7rem;
    }

    .login-btn[b-1nhhz4g9j6] {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.875rem;
    }
}

/* ── Blazor Error UI ── */

#blazor-error-ui[b-1nhhz4g9j6] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-1nhhz4g9j6] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Management/BuscadorPersona.razor.rz.scp.css */
.bp-resultados[b-he8g8h4bi7] {
    max-height: 320px;
    overflow-y: auto;
    z-index: 1055;
}

.bp-avatar[b-he8g8h4bi7] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .72rem;
    font-weight: var(--font-weight-bold, 700);
    flex-shrink: 0;
}
/* /Components/Management/DireccionForm.razor.rz.scp.css */
/* Separador de bloque dentro del modal: vía, ubicación, vivienda y resultado. */
.df-sub[b-11kn3xl4r0] {
    font-size: .74rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #6c757d);
    border-top: 1px solid #eee;
    padding-top: .7rem;
    margin: .5rem 0 .75rem;
}

.df-sub--primero[b-11kn3xl4r0] {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Misma regla que en UsuarioForm: la ayuda va debajo del control, nunca entre la
   etiqueta y el campo, o los inputs de una fila dejan de alinearse. */
.df-ayuda[b-11kn3xl4r0] {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    line-height: 1.25;
    color: var(--color-text-muted, #6c757d);
}

.df-resultados[b-11kn3xl4r0] {
    max-height: 170px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: .375rem;
    padding: .5rem .75rem;
}

/* Es el resultado, no un campo más: se lee de un vistazo y se distingue de lo que
   se teclea arriba. */
.df-completa[b-11kn3xl4r0] {
    background-color: #f8f9fa;
    font-weight: var(--font-weight-semibold, 600);
    resize: vertical;
}

.df-completa:focus[b-11kn3xl4r0] {
    background-color: #fff;
}
/* /Components/Management/EditorFranjasSemana.razor.rz.scp.css */
.efs-grid[b-6belkb4752] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .5rem;
}

.efs-dia[b-6belkb4752] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .5rem;
    background: #fff;
}

.efs-dia--cerrado[b-6belkb4752] {
    background: #f8f9fa;
}

.efs-dia-cabecera[b-6belkb4752] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
}

.efs-dia-nombre[b-6belkb4752] {
    font-weight: 600;
    font-size: .9rem;
}

.efs-dia-total[b-6belkb4752] {
    color: #6c757d;
    font-size: .8rem;
    margin-left: auto;
}

.efs-add[b-6belkb4752],
.efs-quitar[b-6belkb4752] {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .35rem;
    line-height: 1;
}

.efs-franja[b-6belkb4752] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .3rem;
}

.efs-franja input[type="time"][b-6belkb4752] {
    width: 6.5rem;
}

.efs-sep[b-6belkb4752] {
    color: #6c757d;
}

.efs-minutos[b-6belkb4752] {
    font-size: .75rem;
    color: #6c757d;
    white-space: nowrap;
}

.efs-vacio[b-6belkb4752] {
    font-size: .8rem;
    color: #adb5bd;
    font-style: italic;
}

.efs-total[b-6belkb4752] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
/* /Components/Management/UsuarioForm.razor.rz.scp.css */
/* Las pestañas viajan pegadas arriba del cuerpo del modal, que es lo que scrollea:
   con sesenta campos, tener que subir del todo para cambiar de sección era el problema. */
.uf-tabs[b-epslfc9w2o] {
    position: sticky;
    /* -1rem y el padding de abajo compensan el padding propio del .modal-body */
    top: -1rem;
    z-index: 3;
    background: #fff;
    margin-top: -1rem;
    padding-top: 1rem;
    flex-wrap: wrap;
}

.uf-tabs .nav-link[b-epslfc9w2o] {
    border: 1px solid transparent;
    color: var(--color-text-muted, #6c757d);
    font-size: .88rem;
    padding: .45rem .85rem;
}

.uf-tabs .nav-link:hover[b-epslfc9w2o] {
    color: var(--brand-primary, #FF6600);
}

.uf-tabs .nav-link.active[b-epslfc9w2o] {
    color: var(--brand-primary, #FF6600);
    font-weight: var(--font-weight-semibold, 600);
    border-color: #dee2e6 #dee2e6 #fff;
}

/* Separador de subsección dentro de una pestaña. */
.uf-sub[b-epslfc9w2o] {
    font-size: .74rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #6c757d);
    border-top: 1px solid #eee;
    padding-top: .7rem;
    margin: .5rem 0 .75rem;
}

.uf-panel > .row:first-child .uf-sub[b-epslfc9w2o],
.uf-panel > .uf-sub:first-child[b-epslfc9w2o] {
    border-top: none;
    padding-top: 0;
}

.uf-panel .form-label[b-epslfc9w2o] {
    margin-bottom: .15rem;
    font-weight: var(--font-weight-semibold, 600);
    font-size: .85rem;
}

/* La ayuda va SIEMPRE debajo del control, nunca entre la etiqueta y el campo: encima,
   un campo con ayuda baja su input y queda desalineado con el de la columna de al lado.
   Debajo, la fila la marca el campo más alto y el hueco sobrante cae al final, que no
   se nota. */
.uf-panel .uf-ayuda[b-epslfc9w2o] {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    line-height: 1.25;
    color: var(--color-text-muted, #6c757d);
}

/* Los checkboxes de turnos ocupan el sitio del control, así que alinean con los inputs
   de su fila igual que cualquier otro campo. */
.uf-panel .uf-turnos[b-epslfc9w2o] {
    min-height: calc(1.5em + .75rem + 2px);
    align-items: center;
}
/* /Components/Pages/Analisis/ProductividadComerciales.razor.rz.scp.css */
/* ==========================================================================
   Productividad de Comerciales

   La pantalla mide doce pantallas de alto: la tabla principal sola pasa de
   doscientas filas cuando se mira la empresa entera con comparativa. Sin
   cabeceras pegadas, a media tabla una fila dice "3 · 160,00 € · 53,33 €" y no
   hay forma de saber qué columna es cada una sin volver arriba.

   Hoja aislada (.razor.css): todo el marcado de esta pantalla vive en su
   componente, así que el atributo de aislamiento llega a todos los elementos y
   no hace falta una hoja global con prefijo.
   ========================================================================== */

/* ── El panel de la tabla ─────────────────────────────────────────────────
   `position: sticky` se ancla al antepasado que scrollea, y `.table-responsive`
   ya lo es: lleva `overflow-x: auto`, y un eje en auto arrastra al otro. Con la
   página entera haciendo el scroll, la cabecera se quedaba clavada arriba del
   contenedor —fuera de la ventana— y no se veía nunca.

   Así que scrollea el contenedor, que es además la misma solución que usa el
   informe de Ventas Brutas: la tabla se queda en un panel de alto acotado y los
   filtros y el resumen no se van de la pantalla al bajar por ella. */

.panel-tabla[b-az6eyk89xm] {
    max-height: 74vh;

    /* Sin esto, una tabla de tres filas montaría un panel diminuto con scroll. */
    min-height: 180px;
}

@media (max-width: 768px) {
    .panel-tabla[b-az6eyk89xm] {
        max-height: 65vh;
    }
}

/* ── Cabeceras pegadas ───────────────────────────────────────────────────── */

.tabla-pegajosa thead th[b-az6eyk89xm] {
    position: sticky;
    top: 0;
    z-index: 3;

    /* La cabecera hereda .table-light, que es translúcido: sin fondo propio se
       vería el texto de las filas pasando por debajo. */
    background: #f1f3f8;

    /* `border` no viaja con una celda pegada (el borde se queda en el sitio
       original), así que la línea de abajo se pinta con una sombra. */
    box-shadow: inset 0 -1px 0 #cbd5e1;
}

/* Alto real de una fila de cabecera con .table-sm: fija dónde se pegan la
   segunda fila de la tabla comparada y las filas de tienda. */
.tabla-pegajosa[b-az6eyk89xm] {
    --alto-cabecera: 33px;
}

.tabla-pegajosa thead tr:nth-child(2) th[b-az6eyk89xm] {
    top: var(--alto-cabecera);
}

/* La fila de la tienda es la otra referencia que se pierde al bajar: sin ella
   no se sabe de quién son los comerciales que se están leyendo. Va por debajo
   de la cabecera en z-index para meterse bajo ella al empujarla. */
.tabla-pegajosa tbody tr.fila-tienda > td[b-az6eyk89xm] {
    position: sticky;
    top: var(--alto-cabecera);
    z-index: 2;
    background: #dcfce7;
}

.tabla-pegajosa tbody tr.fila-tienda-fantasma > td[b-az6eyk89xm] {
    background: #f1f5f9;
}

/* ── Jerarquía de las filas ───────────────────────────────────────────────
   Los cuatro estados se distinguían sólo por matices de fondo casi invisibles
   (#dcfce7 contra #f8fafc). El borde izquierdo se lee de un vistazo y sobrevive
   a la fila pegada, que es cuando más falta hace. */

.tabla-pegajosa tbody tr.fila-tienda > td:first-child[b-az6eyk89xm] {
    box-shadow: inset 3px 0 0 #16a34a;
}

.tabla-pegajosa tbody tr.fila-tienda-fantasma > td:first-child[b-az6eyk89xm] {
    box-shadow: inset 3px 0 0 #94a3b8;
}

.tabla-pegajosa tbody tr.fila-fantasma > td:first-child[b-az6eyk89xm] {
    box-shadow: inset 3px 0 0 #f87171;
}

/* ── Cabeceras ordenables ─────────────────────────────────────────────────
   El indicador ocupa sitio siempre, también cuando la columna no es la
   ordenada: si apareciera al ordenar, la tabla entera daría un salto. */

.th-orden[b-az6eyk89xm] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.th-orden:hover[b-az6eyk89xm] {
    background: #e6e9f2;
}

.th-orden .flecha[b-az6eyk89xm] {
    display: inline-block;
    width: .8em;
    opacity: .3;
}

.th-orden.ordenada[b-az6eyk89xm] {
    color: var(--brand-primary-dark, #e55a00) !important;
    box-shadow: inset 0 -2px 0 var(--brand-primary, #ff6600);
}

.th-orden.ordenada .flecha[b-az6eyk89xm] {
    opacity: 1;
}

/* ── Notas al pie de las tarjetas ─────────────────────────────────────────
   El mismo tamaño repetido dieciséis veces en atributos style. */

.nota[b-az6eyk89xm] {
    font-size: .72rem;
}

/* ── Los colores de estado ────────────────────────────────────────────────
   Estaban escritos a mano en cada sitio que los usaba. Aquí se declaran una
   vez y el marcado los pide por su nombre. */

.color-comparado[b-az6eyk89xm] {
    color: #f472b6;
}

/* ── La tira de ritmo diario ──────────────────────────────────────────────
   Cada barra es un día y ahora se puede pinchar para bajar a él, así que deja
   de ser un div y pasa a ser un botón: el teclado llega, el lector de pantalla
   lo anuncia y el cursor lo dice. */

.tira-ritmo[b-az6eyk89xm] {
    height: 96px;
}

.barra-dia[b-az6eyk89xm] {
    flex: 1 1 0;
    min-width: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.barra-dia:hover:not(:disabled)[b-az6eyk89xm] {
    opacity: .65;
}

/* Un día sin nada no lleva a ningún sitio: no se atenúa ni cambia el cursor,
   porque no hay nada que sugerir. */
.barra-dia.vacia[b-az6eyk89xm] {
    cursor: default;
}

.barra-dia:disabled[b-az6eyk89xm] {
    opacity: 1;
}

.barra-dia .barra[b-az6eyk89xm] {
    background: #0ea5e9;
    border-radius: 2px 2px 0 0;
}

.barra-dia .barra.finde[b-az6eyk89xm] {
    background: #a5b4fc;
}

.barra-dia .pie[b-az6eyk89xm] {
    height: 2px;
    background: transparent;
}

.barra-dia .pie.finde[b-az6eyk89xm] {
    background: #e2e8f0;
}

/* ── Pistas ───────────────────────────────────────────────────────────────
   Los criterios de atribución cambian las cifras de toda la pantalla, y su
   explicación vivía en un `title` nativo: tarda casi un segundo en salir, no
   aparece en pantalla táctil y no se puede copiar.

   Sin JavaScript y sin dependencias: sale al pasar por encima y también al
   llegar con el tabulador, que es lo que la hace alcanzable con teclado. */

.pista[b-az6eyk89xm] {
    position: relative;
    border-bottom: 1px dotted #94a3b8;
    cursor: help;
}

.pista[b-az6eyk89xm]::after {
    content: attr(data-pista);
    position: absolute;
    left: 0;
    top: calc(100% + .35rem);
    z-index: 20;
    width: max-content;
    max-width: 30rem;
    padding: .5rem .65rem;
    border-radius: .5rem;
    background: #1d1d26;
    color: #f8fafc;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);

    /* Oculta pero animable: con display:none no habría transición y aparecería
       de golpe, que es justo lo que hace molesto al tooltip nativo. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.2rem);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}

.pista:hover[b-az6eyk89xm]::after,
.pista:focus-visible[b-az6eyk89xm]::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cerca del borde derecho la pista se saldría de la pantalla. */
.pista.pista-derecha[b-az6eyk89xm]::after {
    left: auto;
    right: 0;
}
/* /Components/Pages/Analisis/SeguimientoPresupuestos.razor.rz.scp.css */
/* BootstrapBlazor parte las palabras por la mitad en cuanto una celda envuelve
   (.table-cell { word-break: break-all }), y en esta tabla eso deja cosas como
   "CRISTINA D / E LA PEÑA" o cabeceras "Ope / rad / or". Aquí el texto envuelve por
   los espacios y solo se parte una palabra cuando no cabe entera de ninguna manera. */
[b-di9g8nhboj] .table-cell {
    word-break: normal;
    overflow-wrap: break-word;
}
/* /Components/Pages/Configuration/GeneradorDeConceptos.razor.rz.scp.css */
/*
    Estilos del Generador de Conceptos.

    Los selectores con ::deep alcanzan a los componentes hijos (EditorFormula y
    FilaCondicion), cuyo marcado no lleva el atributo de aislamiento de esta página.
*/

.gdc[b-2ohzlk6zlp] {
    --gdc-borde: #dee2e6;
    --gdc-borde-suave: #eef0f2;
    --gdc-fondo-suave: #f8f9fa;
    --gdc-acento: #0d6efd;
    --gdc-texto-tenue: #6c757d;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.gdc-cabecera[b-2ohzlk6zlp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .5rem 0 1rem;
}

.gdc-titulo[b-2ohzlk6zlp] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.gdc-subtitulo[b-2ohzlk6zlp] {
    margin: .25rem 0 0;
    color: var(--gdc-texto-tenue);
}

.gdc-chip-editando[b-2ohzlk6zlp] {
    display: inline-flex;
    align-items: center;
    margin-left: .5rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #fff3cd;
    color: #664d03;
    font-size: .8rem;
    font-weight: 600;
    vertical-align: middle;
}

.gdc-contador[b-2ohzlk6zlp] {
    font-size: .85rem;
    color: var(--gdc-texto-tenue);
}

.gdc-toggle[b-2ohzlk6zlp] {
    border: 1px solid var(--gdc-borde);
    background: #fff;
    border-radius: 6px;
    padding: .25rem .65rem;
    font-size: .85rem;
    color: #495057;
    transition: background-color .15s ease, border-color .15s ease;
}

.gdc-toggle:hover[b-2ohzlk6zlp] {
    background: var(--gdc-fondo-suave);
}

.gdc-toggle.activo[b-2ohzlk6zlp] {
    background: #e7f1ff;
    border-color: var(--gdc-acento);
    color: var(--gdc-acento);
}

/* ── Editor de fórmula ────────────────────────────────────────────────── */

[b-2ohzlk6zlp] .ef-grupo {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

[b-2ohzlk6zlp] .ef-grupo-anidado {
    border-left: 3px solid #b6d4fe;
    background: #f7fbff;
    border-radius: 8px;
    padding: .6rem .7rem;
}

[b-2ohzlk6zlp] .ef-vacio {
    color: var(--gdc-texto-tenue);
    font-style: italic;
    padding: .9rem;
    border: 1px dashed var(--gdc-borde);
    border-radius: 8px;
    text-align: center;
}

[b-2ohzlk6zlp] .ef-fila {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

[b-2ohzlk6zlp] .ef-conector {
    flex: 0 0 4.6rem;
    padding-top: .4rem;
    text-align: right;
}

[b-2ohzlk6zlp] .ef-conector-txt {
    font-size: .85rem;
    font-weight: 600;
    color: #495057;
}

[b-2ohzlk6zlp] .ef-conector-eco {
    color: #adb5bd;
    font-weight: 500;
}

[b-2ohzlk6zlp] .ef-select-conector {
    width: 4.4rem;
    font-weight: 600;
    text-align: center;
}

[b-2ohzlk6zlp] .ef-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

[b-2ohzlk6zlp] .ef-condicion {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--gdc-borde);
    border-radius: 8px;
    padding: .4rem .5rem;
}

[b-2ohzlk6zlp] .ef-condicion:focus-within {
    border-color: var(--gdc-acento);
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12);
}

[b-2ohzlk6zlp] .ef-select,
[b-2ohzlk6zlp] .ef-input {
    border: 1px solid var(--gdc-borde);
    border-radius: 6px;
    padding: .3rem .5rem;
    font-size: .9rem;
    background: #fff;
    color: #212529;
    max-width: 100%;
}

[b-2ohzlk6zlp] .ef-select:disabled,
[b-2ohzlk6zlp] .ef-input:disabled {
    background: var(--gdc-fondo-suave);
    color: #adb5bd;
}

[b-2ohzlk6zlp] .ef-select-campo {
    flex: 0 0 12rem;
}

[b-2ohzlk6zlp] .ef-select-operador {
    flex: 0 0 10rem;
}

[b-2ohzlk6zlp] .ef-valor {
    flex: 1 1 12rem;
    min-width: 10rem;
}

[b-2ohzlk6zlp] .ef-valor .ef-input {
    width: 100%;
}

[b-2ohzlk6zlp] .ef-select-valor {
    width: 100%;
}

[b-2ohzlk6zlp] .ef-cargando {
    display: flex;
    align-items: center;
    font-size: .85rem;
    color: var(--gdc-texto-tenue);
}

[b-2ohzlk6zlp] .ef-concepto {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #eef6ff;
    border: 1px solid #b6d4fe;
    border-radius: 8px;
    padding: .5rem .7rem;
    color: #084298;
}

[b-2ohzlk6zlp] .ef-concepto-nombre {
    font-weight: 600;
}

[b-2ohzlk6zlp] .ef-concepto-id {
    font-size: .78rem;
    color: #6c8ebf;
}

[b-2ohzlk6zlp] .ef-crudo {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 8px;
    padding: .4rem .5rem;
    color: #664d03;
}

[b-2ohzlk6zlp] .ef-input-crudo {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
}

[b-2ohzlk6zlp] .ef-acciones {
    display: flex;
    align-items: center;
    gap: .1rem;
    padding-top: .35rem;
}

[b-2ohzlk6zlp] .ef-icono {
    border: none;
    background: transparent;
    color: #adb5bd;
    border-radius: 6px;
    width: 1.85rem;
    height: 1.85rem;
    line-height: 1;
    font-size: .8rem;
    transition: background-color .15s ease, color .15s ease;
}

[b-2ohzlk6zlp] .ef-icono:hover:not(:disabled) {
    background: var(--gdc-fondo-suave);
    color: #495057;
}

[b-2ohzlk6zlp] .ef-icono:disabled {
    opacity: .3;
}

[b-2ohzlk6zlp] .ef-icono-peligro:hover:not(:disabled) {
    background: #fdeaea;
    color: #dc3545;
}

[b-2ohzlk6zlp] .ef-pie {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding-left: 5.1rem;
    padding-top: .2rem;
}

[b-2ohzlk6zlp] .ef-boton {
    border: 1px dashed var(--gdc-borde);
    background: #fff;
    border-radius: 6px;
    padding: .3rem .7rem;
    font-size: .85rem;
    color: #495057;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

[b-2ohzlk6zlp] .ef-boton:hover {
    border-color: var(--gdc-acento);
    color: var(--gdc-acento);
    background: #f7fbff;
}

[b-2ohzlk6zlp] .ef-select-concepto {
    font-size: .85rem;
    max-width: 16rem;
}

/* ── Lectura en lenguaje natural ──────────────────────────────────────── */

.gdc-lectura[b-2ohzlk6zlp] {
    margin-top: 1rem;
    border: 1px solid var(--gdc-borde-suave);
    background: var(--gdc-fondo-suave);
    border-radius: 8px;
    padding: .7rem .9rem;
}

.gdc-lectura-titulo[b-2ohzlk6zlp] {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gdc-texto-tenue);
    margin-bottom: .3rem;
}

.gdc-lectura-cuerpo[b-2ohzlk6zlp] {
    font-size: .95rem;
    line-height: 1.5;
    color: #212529;
    word-break: break-word;
}

.gdc-tecnico[b-2ohzlk6zlp] {
    margin-top: .5rem;
}

.gdc-tecnico summary[b-2ohzlk6zlp] {
    font-size: .8rem;
    color: var(--gdc-texto-tenue);
    cursor: pointer;
}

.gdc-tecnico code[b-2ohzlk6zlp] {
    display: block;
    margin-top: .35rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--gdc-borde-suave);
    border-radius: 6px;
    font-size: .82rem;
    word-break: break-all;
}

.gdc-textarea[b-2ohzlk6zlp] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
}

/* ── Barra de acciones y resultado de la prueba ───────────────────────── */

.gdc-barra-acciones[b-2ohzlk6zlp] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gdc-borde-suave);
}

.gdc-btn-suave[b-2ohzlk6zlp] {
    border: 1px solid var(--gdc-borde);
    background: #fff;
    color: #495057;
}

.gdc-resultado-prueba[b-2ohzlk6zlp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
    padding: .7rem .9rem;
    border-radius: 8px;
    font-size: .95rem;
}

.gdc-resultado-prueba.ok[b-2ohzlk6zlp] {
    background: #e8f6ec;
    border: 1px solid #a3d9b1;
    color: #0f5132;
}

.gdc-resultado-prueba.vacio[b-2ohzlk6zlp] {
    background: #fff3cd;
    border: 1px solid #ffe08a;
    color: #664d03;
}

/* ── Árbol de conceptos ───────────────────────────────────────────────── */

.gdc-arbol-cabecera[b-2ohzlk6zlp] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .6rem;
}

.gdc-buscador[b-2ohzlk6zlp] {
    border: 1px solid var(--gdc-borde);
    border-radius: 6px;
    padding: .35rem .6rem;
    font-size: .9rem;
    width: 100%;
}

.gdc-raiz-drop[b-2ohzlk6zlp] {
    border: 1px dashed var(--gdc-borde);
    border-radius: 8px;
    padding: .45rem .7rem;
    margin-bottom: .5rem;
    font-size: .85rem;
    color: var(--gdc-texto-tenue);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gdc-raiz-drop.activa[b-2ohzlk6zlp] {
    border-color: var(--gdc-acento);
    background: #f7fbff;
    color: var(--gdc-acento);
}

.gdc-arbol[b-2ohzlk6zlp] {
    max-height: 30rem;
    overflow-y: auto;
    padding-right: .3rem;
}

.gdc-nodo[b-2ohzlk6zlp] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.gdc-nodo:hover[b-2ohzlk6zlp] {
    background: var(--gdc-fondo-suave);
}

.gdc-nodo.seleccionado[b-2ohzlk6zlp] {
    background: #e7f1ff;
    border-color: #b6d4fe;
}

.gdc-nodo.arrastrando[b-2ohzlk6zlp] {
    opacity: .45;
}

.gdc-nodo.destino[b-2ohzlk6zlp] {
    border-color: var(--gdc-acento);
    border-style: dashed;
    background: #f7fbff;
}

.gdc-nodo-toggle[b-2ohzlk6zlp] {
    border: none;
    background: transparent;
    color: var(--gdc-texto-tenue);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    font-size: .7rem;
    flex: 0 0 auto;
    padding: 0;
}

.gdc-nodo-toggle.vacio[b-2ohzlk6zlp] {
    display: inline-block;
}

.gdc-nodo-icono[b-2ohzlk6zlp] {
    flex: 0 0 auto;
    font-size: .85rem;
}

.gdc-nodo-nombre[b-2ohzlk6zlp] {
    font-weight: 500;
    white-space: nowrap;
}

.gdc-nodo-hijos[b-2ohzlk6zlp] {
    background: #e9ecef;
    color: #495057;
    border-radius: 999px;
    font-size: .7rem;
    padding: .05rem .45rem;
    flex: 0 0 auto;
}

.gdc-nodo-lectura[b-2ohzlk6zlp] {
    color: var(--gdc-texto-tenue);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Ficha del concepto ───────────────────────────────────────────────── */

.gdc-ficha-vacia[b-2ohzlk6zlp] {
    border: 1px dashed var(--gdc-borde);
    border-radius: 8px;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--gdc-texto-tenue);
}

.gdc-ficha[b-2ohzlk6zlp] {
    border: 1px solid var(--gdc-borde);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}

.gdc-ficha-cabecera[b-2ohzlk6zlp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .8rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--gdc-borde-suave);
}

.gdc-ficha-titulo[b-2ohzlk6zlp] {
    font-weight: 600;
    font-size: 1.05rem;
}

.gdc-flags[b-2ohzlk6zlp] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: 1rem;
}

.gdc-flag[b-2ohzlk6zlp] {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    cursor: pointer;
}

.gdc-flag span[b-2ohzlk6zlp] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.gdc-flag small[b-2ohzlk6zlp] {
    color: var(--gdc-texto-tenue);
    font-size: .8rem;
}

.gdc-ficha-formula[b-2ohzlk6zlp] {
    margin-top: 1rem;
    padding: .7rem;
    background: var(--gdc-fondo-suave);
    border-radius: 8px;
}

.gdc-ficha-formula-titulo[b-2ohzlk6zlp] {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gdc-texto-tenue);
    margin-bottom: .35rem;
}

.gdc-ficha-formula-codigo[b-2ohzlk6zlp] {
    display: block;
    background: #fff;
    border: 1px solid var(--gdc-borde-suave);
    border-radius: 6px;
    padding: .45rem;
    font-size: .82rem;
    word-break: break-all;
}

.gdc-ficha-acciones[b-2ohzlk6zlp] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--gdc-borde-suave);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    [b-2ohzlk6zlp] .ef-fila {
        flex-wrap: wrap;
    }

    [b-2ohzlk6zlp] .ef-conector {
        flex-basis: 100%;
        text-align: left;
        padding-top: 0;
    }

    [b-2ohzlk6zlp] .ef-select-campo,
    [b-2ohzlk6zlp] .ef-select-operador,
    [b-2ohzlk6zlp] .ef-valor {
        flex: 1 1 100%;
    }

    [b-2ohzlk6zlp] .ef-pie {
        padding-left: 0;
    }
}
/* /Components/Pages/Fichajes/CalendarioEquipo.razor.rz.scp.css */
/* Calendario de ausencias del equipo: rejilla mensual y línea de tiempo por persona. */

.cal-pagina[b-0te7x1nap8] {
    --cal-borde: #e6e8eb;
    --cal-finde-bg: #f3f4f6;
    --cal-festivo-bg: #fdeeee;
    --cal-hoy-bg: #e6f7f8;
    --cal-fuera-bg: #fafbfc;
    --cal-ancho-dia: 34px;
    --cal-alto-carril: 24px;
}

/* ── Pestañas y navegación ─────────────────────────────────────────────── */

.cal-tabs .nav-link[b-0te7x1nap8] {
    border: 1px solid transparent;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-semibold, 600);
    font-size: .9rem;
}

.cal-tabs .nav-link.active[b-0te7x1nap8] {
    color: var(--color-text-inverse, #fff);
    background-color: var(--brand-primary, #FF6600);
}

.cal-select-mes[b-0te7x1nap8] {
    width: auto;
    min-width: 120px;
    border-radius: 0;
    text-transform: capitalize;
}

.cal-input-anio[b-0te7x1nap8] {
    width: 84px;
    border-radius: 0;
    text-align: center;
}

/* ── Rejilla mensual ───────────────────────────────────────────────────── */

.cal-mes[b-0te7x1nap8] {
    border: 1px solid var(--cal-borde);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

.cal-mes-cab[b-0te7x1nap8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #fff;
    border-bottom: 1px solid var(--cal-borde);
}

.cal-mes-cab-dia[b-0te7x1nap8] {
    padding: .5rem .75rem;
    text-align: right;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text-muted, #8a9099);
    text-transform: uppercase;
}

.cal-mes-cab-dia.cal-finde-cab[b-0te7x1nap8] {
    background: var(--cal-finde-bg);
}

.cal-semana[b-0te7x1nap8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: var(--cal-alto-carril);
    border-bottom: 1px solid var(--cal-borde);
    position: relative;
}

.cal-semana:last-child[b-0te7x1nap8] {
    border-bottom: 0;
}

/* El fondo de cada día abarca todos los carriles de su semana: es el lienzo
   sobre el que se pintan las barras, no una casilla más de la rejilla. */
.cal-dia-fondo[b-0te7x1nap8] {
    grid-row: 1 / -1;
    border-right: 1px solid var(--cal-borde);
    min-height: 96px;
}

.cal-dia-fondo.cal-dia-ultimo[b-0te7x1nap8] {
    border-right: 0;
}

.cal-finde[b-0te7x1nap8] {
    background: var(--cal-finde-bg);
}

.cal-festivo[b-0te7x1nap8] {
    background: var(--cal-festivo-bg);
}

.cal-hoy[b-0te7x1nap8] {
    background: var(--cal-hoy-bg);
}

.cal-fuera[b-0te7x1nap8] {
    background: var(--cal-fuera-bg);
}

.cal-dia-num[b-0te7x1nap8] {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    pointer-events: none;
    z-index: 1;
}

.cal-num-festivo[b-0te7x1nap8] {
    color: #d9534f;
}

.cal-num-hoy[b-0te7x1nap8] {
    background: var(--brand-primary, #FF6600);
    color: #fff;
    border-radius: 999px;
    padding: 0 .45rem;
    min-width: 1.6rem;
    text-align: center;
}

.cal-festivo-txt[b-0te7x1nap8] {
    font-size: .65rem;
    font-weight: 500;
    color: #d9534f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.cal-add[b-0te7x1nap8] {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #adb5bd);
    font-size: .7rem;
    line-height: 1;
    padding: .15rem .3rem;
    border-radius: .25rem;
    opacity: 0;
    pointer-events: auto;
    transition: opacity .12s ease;
}

.cal-semana:hover .cal-add[b-0te7x1nap8] {
    opacity: 1;
}

.cal-add:hover[b-0te7x1nap8] {
    background: rgba(0, 0, 0, .06);
    color: var(--brand-primary, #FF6600);
}

/* ── Barras de ausencia ────────────────────────────────────────────────── */

.cal-barra[b-0te7x1nap8],
.cal-tl-barra[b-0te7x1nap8] {
    display: flex;
    align-items: center;
    gap: .2rem;
    border: 0;
    border-left: 3px solid transparent;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0 .4rem;
    margin: 1px 0;
    height: calc(var(--cal-alto-carril) - 4px);
    overflow: hidden;
    text-align: left;
    z-index: 2;
}

.cal-barra[b-0te7x1nap8] {
    align-self: center;
}

/* Una ausencia que viene de la semana anterior (o sigue en la siguiente) se corta
   a media casilla en vez de fingir que empieza o acaba ahí. */
.cal-barra-abre[b-0te7x1nap8],
.cal-tl-barra.cal-barra-abre[b-0te7x1nap8] {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.cal-barra-cierra[b-0te7x1nap8],
.cal-tl-barra.cal-barra-cierra[b-0te7x1nap8] {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    margin-right: 2px;
}

.cal-barra:not(.cal-barra-abre)[b-0te7x1nap8],
.cal-tl-barra:not(.cal-barra-abre)[b-0te7x1nap8] {
    border-left: 0;
}

.cal-barra-pendiente[b-0te7x1nap8] {
    border-style: dashed;
    border-width: 1px;
    border-left-width: 3px;
    border-left-style: solid;
}

.cal-barra-txt[b-0te7x1nap8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-barra:hover[b-0te7x1nap8],
.cal-tl-barra:hover[b-0te7x1nap8] {
    filter: brightness(.94);
}

.cal-mas[b-0te7x1nap8] {
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #6c757d);
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .5rem;
    z-index: 2;
    text-align: left;
}

.cal-mas:hover[b-0te7x1nap8] {
    color: var(--brand-primary, #FF6600);
}

/* ── Línea de tiempo por persona ───────────────────────────────────────── */

.cal-tl[b-0te7x1nap8] {
    border: 1px solid var(--cal-borde);
    border-radius: .5rem;
    background: #fff;
    overflow: auto;
    max-height: 70vh;
}

.cal-tl-fila[b-0te7x1nap8] {
    display: flex;
    width: max-content;
    min-width: 100%;
    border-bottom: 1px solid var(--cal-borde);
}

.cal-tl-fila:last-child[b-0te7x1nap8] {
    border-bottom: 0;
}

.cal-tl-cab[b-0te7x1nap8] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

.cal-tl-nombre[b-0te7x1nap8] {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 240px;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: #fff;
    border-right: 1px solid var(--cal-borde);
}

.cal-tl-cab .cal-tl-nombre[b-0te7x1nap8] {
    z-index: 6;
}

.cal-tl-nombre-cab[b-0te7x1nap8] {
    text-transform: capitalize;
}

.cal-tl-persona[b-0te7x1nap8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: .25rem;
    padding: .1rem .2rem;
    margin: -.1rem -.2rem;
}

.cal-tl-persona:hover[b-0te7x1nap8] {
    color: var(--brand-primary, #FF6600);
    background: rgba(0, 0, 0, .04);
}

.cal-tl-persona:hover .cal-tl-nombre-txt[b-0te7x1nap8] {
    text-decoration: underline;
}

.cal-tl-nombre-txt[b-0te7x1nap8] {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-avatar[b-0te7x1nap8] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .7rem;
    flex-shrink: 0;
}

.cal-tl-dias[b-0te7x1nap8] {
    display: grid;
    grid-template-columns: repeat(var(--cal-dias, 31), var(--cal-ancho-dia));
    grid-auto-rows: minmax(var(--cal-alto-carril), auto);
    min-height: calc(var(--cal-alto-carril) + 8px);
}

.cal-tl-diacab[b-0te7x1nap8] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    padding: .35rem 0;
    border-right: 1px solid var(--cal-borde);
}

.cal-tl-diacab.cal-finde-cab[b-0te7x1nap8] {
    background: var(--cal-finde-bg);
}

.cal-tl-diacab.cal-hoy-cab[b-0te7x1nap8] {
    background: var(--brand-primary, #FF6600);
    color: #fff;
    border-radius: 999px;
}

/* Fondo de una casilla de la línea de tiempo: cubre todos los carriles de la fila
   para que el sombreado de finde o festivo no se corte a media barra. */
.cal-tl-fondo[b-0te7x1nap8] {
    grid-row: 1 / -1;
    border-right: 1px solid #f1f2f4;
}

.cal-tl-barra[b-0te7x1nap8] {
    height: calc(var(--cal-alto-carril) - 6px);
    align-self: center;
    justify-content: center;
    font-size: .68rem;
}

/* ── Leyenda ───────────────────────────────────────────────────────────── */

.cal-leyenda[b-0te7x1nap8] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .75rem;
    font-size: .75rem;
    color: var(--color-text-muted, #6c757d);
}

.cal-leyenda-item[b-0te7x1nap8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.cal-leyenda-color[b-0te7x1nap8] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.cal-leyenda-pendiente[b-0te7x1nap8] {
    background: transparent;
    border: 1px dashed #adb5bd;
}

@media (max-width: 768px) {
    .cal-tl-nombre[b-0te7x1nap8] {
        width: 150px;
        min-width: 150px;
    }

    .cal-dia-fondo[b-0te7x1nap8] {
        min-height: 72px;
    }
}
/* /Components/Pages/Fichajes/ControlHorario.razor.rz.scp.css */
/* ── Tabs de vista ── */

.gf-view-tabs .nav-link[b-n81mf8c6t2] {
    border: 1px solid transparent;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-semibold, 600);
    font-size: .9rem;
}

.gf-view-tabs .nav-link.active[b-n81mf8c6t2] {
    color: var(--color-text-inverse, #fff);
    background-color: var(--brand-primary, #FF6600);
}

/* ── Avatar de iniciales ── */

.gf-avatar[b-n81mf8c6t2] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: var(--font-weight-bold, 700);
    font-size: .8rem;
    flex-shrink: 0;
}

/* ── Tabla de equipo ── */

.gf-team-table thead th[b-n81mf8c6t2] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-semibold, 600);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.gf-team-table tbody tr[b-n81mf8c6t2] {
    cursor: pointer;
}

.gf-team-table tbody tr.gf-row-activa[b-n81mf8c6t2] {
    background-color: rgba(var(--brand-primary-rgb), 0.07);
}

.gf-detalle-btn[b-n81mf8c6t2] {
    opacity: 0;
    transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.gf-team-table tbody tr:hover .gf-detalle-btn[b-n81mf8c6t2] {
    opacity: 1;
}

/* ── Distribución (mini timeline) ── */

.gf-bar-track[b-n81mf8c6t2] {
    position: relative;
    width: 110px;
    height: 8px;
    border-radius: 4px;
    background: #eef0f2;
    overflow: hidden;
}

.gf-bar-seg[b-n81mf8c6t2] {
    position: absolute;
    top: 0;
    height: 100%;
}

.gf-bar-trabajo[b-n81mf8c6t2] {
    background-color: var(--brand-primary, #FF6600);
}

.gf-bar-pausa[b-n81mf8c6t2] {
    background-color: #dc3545;
}

/* ── Badges / pills ── */

.gf-badge-alerta[b-n81mf8c6t2] {
    background-color: #dc3545;
    color: #fff;
    font-weight: var(--font-weight-bold, 700);
}

.gf-pill[b-n81mf8c6t2] {
    display: inline-block;
    padding: .25em .65em;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: var(--font-weight-semibold, 600);
}

.gf-pill-ok[b-n81mf8c6t2] {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.gf-pill-warning[b-n81mf8c6t2] {
    background-color: rgba(var(--brand-primary-rgb), 0.14);
    color: var(--brand-primary-dark, #E55A00);
}

.gf-pill-neutral[b-n81mf8c6t2] {
    background-color: #f1f2f4;
    color: var(--color-text-muted, #6c757d);
}

.gf-pill-info[b-n81mf8c6t2] {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

/* ── Panel lateral de detalle ── */

.gf-panel-backdrop[b-n81mf8c6t2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1050;
}

.gf-panel[b-n81mf8c6t2] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(440px, 100vw);
    background: var(--color-surface, #fff);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .18);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: gf-slide-in-b-n81mf8c6t2 .2s var(--ease-out, ease-out);
}

@keyframes gf-slide-in-b-n81mf8c6t2 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.gf-panel-header[b-n81mf8c6t2] {
    position: sticky;
    top: 0;
    background: var(--color-surface, #fff);
    border-bottom: 1px solid #eee;
    padding: 1rem;
    z-index: 1;
}

.gf-panel-body[b-n81mf8c6t2] {
    padding: 1rem;
    flex: 1 1 auto;
}

.gf-panel-section[b-n81mf8c6t2] {
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    padding: .75rem .9rem;
    margin-bottom: .9rem;
}

.gf-panel-section .row-line[b-n81mf8c6t2] {
    display: flex;
    justify-content: space-between;
    padding: .25rem 0;
    font-size: .9rem;
}

.gf-panel-section .row-line + .row-line[b-n81mf8c6t2] {
    border-top: 1px dashed #eee;
}
/* /Components/Pages/Fichajes/Cuadrante.razor.rz.scp.css */
.cd-selector-tienda[b-7zk4ej4i4h] {
    width: 260px;
}

.cd-tabla[b-7zk4ej4i4h] {
    font-size: .85rem;
}

.cd-tabla th[b-7zk4ej4i4h],
.cd-tabla td[b-7zk4ej4i4h] {
    vertical-align: top;
}

/* La columna de la persona no se pierde al desplazar la semana a lo ancho. */
.cd-col-persona[b-7zk4ej4i4h] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    min-width: 190px;
}

.cd-tabla thead .cd-col-persona[b-7zk4ej4i4h] {
    z-index: 3;
}

.cd-col-total[b-7zk4ej4i4h] {
    min-width: 130px;
    background: #f8f9fa;
}

.cd-dia-nombre[b-7zk4ej4i4h] {
    font-weight: 600;
}

.cd-dia-fecha[b-7zk4ej4i4h],
.cd-dia-apertura[b-7zk4ej4i4h],
.cd-persona-sub[b-7zk4ej4i4h] {
    font-weight: 400;
    font-size: .75rem;
    color: #6c757d;
}

.cd-dia-festivo[b-7zk4ej4i4h] {
    background: #fff5f5;
}

.cd-persona-nombre[b-7zk4ej4i4h] {
    font-weight: 600;
}

.cd-celda[b-7zk4ej4i4h] {
    min-width: 118px;
}

/* Un turno puesto. Es un botón porque se abre para editarlo, pero se lee como una etiqueta. */
.cd-chip[b-7zk4ej4i4h] {
    display: block;
    width: 100%;
    margin-bottom: .2rem;
    padding: .15rem .35rem;
    border: 1px solid #ffc890;
    border-radius: .3rem;
    background: #fff3e6;
    color: #a04b00;
    font-size: .78rem;
    line-height: 1.3;
    text-align: center;
}

.cd-chip:disabled[b-7zk4ej4i4h] {
    opacity: 1;
    cursor: default;
}

.cd-add[b-7zk4ej4i4h] {
    width: 100%;
    padding: .05rem;
    border: 1px dashed #ced4da;
    border-radius: .3rem;
    background: transparent;
    color: #adb5bd;
    font-size: .7rem;
}

.cd-add:hover[b-7zk4ej4i4h] {
    border-color: #fd7e14;
    color: #fd7e14;
}
/* /Components/Pages/Fichajes/FichaEmpleado.razor.rz.scp.css */
.fe-view-tabs .nav-link[b-o37kwwita9] {
    border: 1px solid transparent;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-semibold, 600);
    font-size: .9rem;
}

.fe-view-tabs .nav-link.active[b-o37kwwita9] {
    color: var(--color-text-inverse, #fff);
    background-color: var(--brand-primary, #FF6600);
}

.fe-avatar[b-o37kwwita9] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fe-card-section[b-o37kwwita9] {
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.fe-card-section .fe-section-header[b-o37kwwita9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
}

.fe-field-row[b-o37kwwita9] {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    font-size: .9rem;
    border-top: 1px dashed #eee;
}

.fe-field-row:first-child[b-o37kwwita9] {
    border-top: none;
}

.fe-pill[b-o37kwwita9] {
    display: inline-block;
    padding: .25em .65em;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: var(--font-weight-semibold, 600);
}

.fe-pill-ok[b-o37kwwita9] {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.fe-pill-warning[b-o37kwwita9] {
    background-color: rgba(var(--brand-primary-rgb), 0.14);
    color: var(--brand-primary-dark, #E55A00);
}

.fe-pill-neutral[b-o37kwwita9] {
    background-color: #f1f2f4;
    color: var(--color-text-muted, #6c757d);
}

/* Texto escrito a mano por RRHH: los saltos de linea que puso son parte de lo pactado. */
.fe-texto-libre[b-o37kwwita9] {
    white-space: pre-wrap;
    word-break: break-word;
}

.fe-placeholder[b-o37kwwita9] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted, #6c757d);
}

.fe-placeholder i[b-o37kwwita9] {
    font-size: 2.5rem;
    color: var(--brand-primary, #FF6600);
    opacity: .5;
    margin-bottom: .75rem;
    display: block;
}

/* El buscador de la cabecera no debe estirarse hasta el otro extremo de la pantalla. */
.fe-buscador[b-o37kwwita9] {
    width: 100%;
    max-width: 320px;
}

/* Panel lateral de la vista general: la ficha de un vistazo. */
.fe-detalles[b-o37kwwita9] {
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    padding: 1rem 1.1rem;
    height: 100%;
}

.fe-detalles-titulo[b-o37kwwita9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-muted, #6c757d);
    margin-bottom: 1rem;
}

.fe-dato[b-o37kwwita9] {
    margin-bottom: 1rem;
    font-size: .9rem;
    min-width: 0;
}

.fe-dato:last-child[b-o37kwwita9] {
    margin-bottom: 0;
}

.fe-dato-etiqueta[b-o37kwwita9] {
    display: block;
    color: var(--color-text-muted, #6c757d);
    font-size: .8rem;
    margin-bottom: .2rem;
}

.fe-dato-valor[b-o37kwwita9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.fe-dato-vacio[b-o37kwwita9] {
    color: #adb5bd;
    font-style: italic;
}

.fe-copiar[b-o37kwwita9] {
    border: 0;
    background: none;
    padding: 0;
    margin-left: auto;
    color: var(--color-text-muted, #6c757d);
    line-height: 1;
}

.fe-copiar:hover[b-o37kwwita9] {
    color: var(--brand-primary, #FF6600);
}

.fe-persona[b-o37kwwita9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    padding: .15rem 0;
}

a.fe-persona:hover[b-o37kwwita9] {
    color: var(--brand-primary, #FF6600);
}

.fe-persona-avatar[b-o37kwwita9] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .68rem;
    font-weight: var(--font-weight-bold, 700);
    flex-shrink: 0;
}

/* ── Pestaña Ausencias ───────────────────────────────────────────────────── */

.fe-aus-nav[b-o37kwwita9] {
    border: 0;
    background: none;
    color: var(--color-text-muted, #6c757d);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;
}

.fe-aus-nav:hover[b-o37kwwita9] {
    background-color: #f1f2f4;
    color: var(--brand-primary, #FF6600);
}

.fe-aus-contador[b-o37kwwita9] {
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    background-color: #fbfbfc;
    min-width: 0;
}

.fe-aus-contador-cab[b-o37kwwita9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid #eee;
    font-size: .85rem;
}

.fe-aus-unidad[b-o37kwwita9] {
    background-color: #f1f2f4;
    color: var(--color-text-muted, #6c757d);
    border-radius: var(--radius-sm, .35rem);
    padding: .15rem .5rem;
    font-size: .75rem;
    font-weight: var(--font-weight-semibold, 600);
}

.fe-aus-cifras[b-o37kwwita9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: .8rem .5rem;
}

.fe-aus-cifra[b-o37kwwita9] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.1;
}

.fe-aus-cifra-etq[b-o37kwwita9] {
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.fe-aus-seccion[b-o37kwwita9] {
    margin-bottom: 1.75rem;
}

.fe-aus-seccion-icono[b-o37kwwita9] {
    color: var(--brand-primary, #FF6600);
    font-size: 1.1rem;
    margin-bottom: .5rem;
    display: block;
}

.fe-aus-seccion-titulo[b-o37kwwita9] {
    font-size: 1.05rem;
    margin-bottom: .15rem;
}

.fe-aus-seccion-sub[b-o37kwwita9] {
    color: var(--color-text-muted, #6c757d);
    font-size: .85rem;
    margin-bottom: .75rem;
}

.fe-aus-vacio[b-o37kwwita9] {
    color: #adb5bd;
    font-size: .85rem;
    font-style: italic;
    margin-bottom: 0;
}

.fe-aus-lista[b-o37kwwita9] {
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    overflow: hidden;
}

.fe-aus-fila[b-o37kwwita9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border-top: 1px solid #eee;
}

.fe-aus-fila:first-child[b-o37kwwita9] {
    border-top: none;
}

.fe-aus-fila-datos[b-o37kwwita9] {
    flex-grow: 1;
    min-width: 0;
}

.fe-aus-fila-titulo[b-o37kwwita9] {
    font-size: .92rem;
}

.fe-aus-fila-sub[b-o37kwwita9] {
    color: var(--color-text-muted, #6c757d);
    font-size: .82rem;
}

/* Taquito de fecha: la banda de color es la del tipo de ausencia. */
.fe-aus-chip[b-o37kwwita9] {
    border: 1px solid #eee;
    border-radius: var(--radius-sm, .35rem);
    overflow: hidden;
    text-align: center;
    width: 38px;
    flex-shrink: 0;
    background-color: #fff;
}

.fe-aus-chip-mes[b-o37kwwita9] {
    display: block;
    color: #fff;
    font-size: .55rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: .04em;
    padding: .1rem 0;
}

.fe-aus-chip-dia[b-o37kwwita9] {
    display: block;
    font-size: .9rem;
    font-weight: var(--font-weight-semibold, 600);
    padding: .1rem 0 .15rem;
}

.fe-aus-flecha[b-o37kwwita9] {
    color: #adb5bd;
    font-size: .7rem;
    flex-shrink: 0;
}

.fe-aus-acciones[b-o37kwwita9] {
    display: flex;
    gap: .15rem;
    flex-shrink: 0;
}

.fe-aus-acciones .btn[b-o37kwwita9] {
    --bs-btn-padding-x: .45rem;
    --bs-btn-padding-y: .2rem;
}

.fe-aus-anteriores[b-o37kwwita9] {
    border: 0;
    background: none;
    padding: .5rem 0;
    color: var(--color-text-muted, #6c757d);
    font-size: .88rem;
}

.fe-aus-anteriores:hover[b-o37kwwita9] {
    color: var(--brand-primary, #FF6600);
}

/* Panel del calendario: el año entero sobre un fondo que lo separa de la columna. */
.fe-aus-panel[b-o37kwwita9] {
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    padding: 1.1rem 1.25rem 1.5rem;
    height: 100%;
}

.fe-aus-anio[b-o37kwwita9] {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold, 600);
    padding: 0 .25rem;
}

.fe-aus-boton[b-o37kwwita9] {
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    color: var(--brand-primary, #FF6600);
    font-weight: var(--font-weight-semibold, 600);
}

.fe-aus-boton:hover[b-o37kwwita9] {
    border-color: var(--brand-primary, #FF6600);
    background-color: rgba(var(--brand-primary-rgb), .06);
}

.fe-aus-meses[b-o37kwwita9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1.4rem 1.25rem;
}

.fe-aus-mes-nombre[b-o37kwwita9] {
    font-size: .85rem;
    margin-bottom: .35rem;
}

.fe-aus-dias[b-o37kwwita9] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 3px;
}

.fe-aus-cab[b-o37kwwita9] {
    text-align: center;
    font-size: .68rem;
    color: #adb5bd;
    padding-bottom: .2rem;
}

/* Las casillas se tocan a propósito: así una racha de días se lee como una barra. */
.fe-aus-dia[b-o37kwwita9] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: .72rem;
    color: var(--color-text, #212529);
}

.fe-aus-dia-finde[b-o37kwwita9] {
    color: #c8cdd3;
}

.fe-aus-dia-hoy[b-o37kwwita9] {
    border: 1.5px solid var(--brand-primary, #FF6600);
    border-radius: 999px;
    font-weight: var(--font-weight-semibold, 600);
}

/* Festivo del punto de venta del empleado. Va después del fin de semana a propósito:
   un festivo en sábado se lee como festivo, no como fin de semana. */
.fe-aus-dia-festivo[b-o37kwwita9] {
    color: #b02a37;
    font-weight: var(--font-weight-semibold, 600);
    background-color: rgba(220, 53, 69, .1);
    border-radius: 999px;
}

.fe-aus-dia-ocupado[b-o37kwwita9] {
    color: #fff;
    font-weight: var(--font-weight-semibold, 600);
}

.fe-aus-dia-abre[b-o37kwwita9] {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.fe-aus-dia-cierra[b-o37kwwita9] {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

/* Pendiente de aprobar: se pinta del color del tipo, pero desvaído. */
.fe-aus-dia-pendiente[b-o37kwwita9] {
    opacity: .55;
}

.fe-aus-dia-hoy-ocupado[b-o37kwwita9] {
    box-shadow: inset 0 0 0 1.5px #fff;
}

.fe-aus-leyenda[b-o37kwwita9] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.5rem;
}

.fe-aus-leyenda-item[b-o37kwwita9] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.fe-aus-punto[b-o37kwwita9] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.fe-aus-punto-hoy[b-o37kwwita9] {
    background-color: transparent;
    border: 1.5px solid var(--brand-primary, #FF6600);
}

.fe-aus-punto-festivo[b-o37kwwita9] {
    background-color: rgba(220, 53, 69, .35);
}

.fe-aus-ajustes[b-o37kwwita9] {
    margin-top: 2.5rem;
    max-width: 460px;
}

.fe-aus-movimientos[b-o37kwwita9] {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-md, .5rem);
    max-height: 220px;
    overflow-y: auto;
}
/* /Components/Pages/Fichajes/SugerenciasCorreccion.razor.rz.scp.css */
/* ── Tabs de periodo ── */

.gf-view-tabs .nav-link[b-mbks4aobu5] {
    border: 1px solid transparent;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-semibold, 600);
    font-size: .9rem;
}

.gf-view-tabs .nav-link.active[b-mbks4aobu5] {
    color: var(--color-text-inverse, #fff);
    background-color: var(--brand-primary, #FF6600);
}

/* ── Avatar de iniciales ── */

.gf-avatar[b-mbks4aobu5] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: var(--font-weight-bold, 700);
    font-size: .7rem;
    flex-shrink: 0;
}

/* ── Tabla de sugerencias ── */

.gf-sug-table thead th[b-mbks4aobu5] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-semibold, 600);
    border-bottom-width: 1px;
    white-space: nowrap;
}

/* La cabecera de cada empleado separa los bloques sin necesidad de una tabla por persona. */
.gf-sug-table tbody tr.gf-sug-empleado[b-mbks4aobu5] {
    background-color: var(--color-surface-alt, #f8f9fa);
}

.gf-sug-table tbody tr.gf-sug-empleado td[b-mbks4aobu5] {
    border-top: 2px solid var(--bs-border-color, #dee2e6);
}

/* Lo validado se ve de un vistazo: es lo que se va a escribir al pulsar aplicar. */
.gf-sug-table tbody tr.gf-sug-validada[b-mbks4aobu5] {
    background-color: rgba(var(--brand-primary-rgb), 0.07);
}

.gf-sug-table td[b-mbks4aobu5] {
    vertical-align: middle;
}

/* ── Barra de aplicar ── */

.gf-sug-aplicar[b-mbks4aobu5] {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
}
/* /Components/Pages/Management/AuditoriaCambios.razor.rz.scp.css */
/* Cabecera: la misma familia oscura del resto de pantallas de administración, rematada con el
   naranja de marca para que se reconozca como una pantalla de la casa y no como un listado más. */
.cabecera[b-mdmkdu4hng] {
    background: linear-gradient(135deg, #1d1d26 0%, #2b2b38 55%, var(--brand-primary, #FF6600) 100%);
}

.auditoria .form-label[b-mdmkdu4hng] {
    color: var(--color-text-muted, #6c757d);
    letter-spacing: .03em;
    font-size: .72rem;
}

/* ── Separador de día ───────────────────────────────────────────────────────── */

/* Los cambios se leen por jornadas: la fecha se dice una vez y no en cada línea. */
.dia[b-mdmkdu4hng] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.4rem .25rem .5rem;
}

.dia-etiqueta[b-mdmkdu4hng] {
    font-weight: var(--font-weight-bold, 700);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #334155;
}

.dia-cuenta[b-mdmkdu4hng] {
    font-size: .72rem;
    color: var(--color-text-muted, #6c757d);
    background: #eef2f7;
    border-radius: 1rem;
    padding: .1rem .55rem;
}

.dia[b-mdmkdu4hng]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #dde3ea, transparent);
}

/* ── Lista de cambios ───────────────────────────────────────────────────────── */

.lista-cambios[b-mdmkdu4hng] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.cambio[b-mdmkdu4hng] {
    background: var(--color-surface, #fff);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--radius-lg, .75rem);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    overflow: hidden;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
}

    .cambio:hover[b-mdmkdu4hng] {
        border-color: rgba(15, 23, 42, .16);
        box-shadow: 0 4px 12px rgba(15, 23, 42, .09);
    }

    .cambio.abierto[b-mdmkdu4hng] {
        border-color: rgba(var(--brand-primary-rgb, 255, 102, 0), .45);
    }

.cambio-fila[b-mdmkdu4hng] {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: .85rem;
    padding: .6rem .85rem;
    cursor: pointer;
    user-select: none;
}

    .cambio-fila:focus-visible[b-mdmkdu4hng] {
        outline: none;
        box-shadow: var(--focus-ring, 0 0 0 .2rem rgba(255, 102, 0, .25)) inset;
    }

/* ── Marca de la acción ─────────────────────────────────────────────────────── */

/* Alta, cambio y baja se distinguen por color y por icono: el color solo no basta. */
.marca[b-mdmkdu4hng] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    color: #fff;
    flex-shrink: 0;
}

.cambio.acc-alta .marca[b-mdmkdu4hng] { background: #198754; }
.cambio.acc-cambio .marca[b-mdmkdu4hng] { background: #d98207; }
.cambio.acc-baja .marca[b-mdmkdu4hng] { background: #dc3545; }
.cambio.acc-otro .marca[b-mdmkdu4hng] { background: #6c757d; }

/* Franja lateral: deja ver de qué tipo es cada línea al recorrer la lista en vertical. */
.cambio[b-mdmkdu4hng] { border-left: 3px solid #adb5bd; }
.cambio.acc-alta[b-mdmkdu4hng] { border-left-color: #198754; }
.cambio.acc-cambio[b-mdmkdu4hng] { border-left-color: #d98207; }
.cambio.acc-baja[b-mdmkdu4hng] { border-left-color: #dc3545; }

.hora[b-mdmkdu4hng] {
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    font-weight: var(--font-weight-semibold, 600);
    color: #64748b;
    flex-shrink: 0;
}

/* ── Qué se tocó ────────────────────────────────────────────────────────────── */

.cuerpo[b-mdmkdu4hng] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.titulo[b-mdmkdu4hng] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    line-height: 1.3;
}

.tipo-icono[b-mdmkdu4hng] {
    color: #94a3b8;
    font-size: .8rem;
}

/* El tipo de registro va en gris y pequeño: lo que se busca con la vista es el sujeto. */
.tipo[b-mdmkdu4hng] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94a3b8;
    font-weight: var(--font-weight-semibold, 600);
}

.sujeto[b-mdmkdu4hng] {
    font-weight: var(--font-weight-bold, 700);
    color: #0f172a;
    font-size: .95rem;
}

.contexto[b-mdmkdu4hng] {
    font-size: .8rem;
    color: #475569;
    background: #f1f5f9;
    border-radius: 1rem;
    padding: .05rem .55rem;
}

.periodo[b-mdmkdu4hng] {
    font-size: .74rem;
    color: #64748b;
    white-space: nowrap;
}

/* Un registro borrado no se puede abrir en su pantalla: conviene avisar antes de intentarlo. */
.fantasma[b-mdmkdu4hng] {
    font-size: .7rem;
    color: #9a3412;
    background: #ffedd5;
    border-radius: 1rem;
    padding: .05rem .5rem;
    white-space: nowrap;
}

.resumen[b-mdmkdu4hng] {
    font-size: .8rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Autor ──────────────────────────────────────────────────────────────────── */

.autor[b-mdmkdu4hng] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    max-width: 190px;
}

.avatar[b-mdmkdu4hng] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .66rem;
    font-weight: var(--font-weight-bold, 700);
    flex-shrink: 0;
}

.autor-nombre[b-mdmkdu4hng] {
    font-size: .8rem;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron[b-mdmkdu4hng] {
    color: #cbd5e1;
    font-size: .75rem;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
}

.cambio.abierto .chevron[b-mdmkdu4hng] {
    transform: rotate(180deg);
    color: var(--brand-primary, #FF6600);
}

/* ── Detalle desplegado ─────────────────────────────────────────────────────── */

.detalle[b-mdmkdu4hng] {
    border-top: 1px solid #edf1f5;
    background: #fafbfc;
    padding: .7rem .85rem;
}

.tabla-campos[b-mdmkdu4hng] {
    width: 100%;
    font-size: .82rem;
    border-collapse: collapse;
}

    .tabla-campos th[b-mdmkdu4hng] {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #94a3b8;
        font-weight: var(--font-weight-semibold, 600);
        padding: 0 .5rem .3rem;
        text-align: left;
    }

    .tabla-campos td[b-mdmkdu4hng] {
        padding: .28rem .5rem;
        border-top: 1px solid #edf1f5;
        vertical-align: top;
    }

    .tabla-campos .campo[b-mdmkdu4hng] {
        color: #475569;
        font-weight: var(--font-weight-semibold, 600);
        width: 32%;
    }

    /* El valor que se fue queda tachado y apagado; el que manda ahora, en negro. */
    .tabla-campos .antes[b-mdmkdu4hng] {
        color: #94a3b8;
        text-decoration: line-through;
        width: 34%;
    }

    .tabla-campos .despues[b-mdmkdu4hng] {
        color: #0f172a;
        font-weight: var(--font-weight-semibold, 600);
    }

.detalle-pie[b-mdmkdu4hng] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px dashed #e2e8f0;
}

/* El identificador técnico sigue estando, pero abajo y en pequeño: sirve para ir a la BBDD,
   no para leer la pantalla. */
.referencia[b-mdmkdu4hng] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .7rem;
    color: #94a3b8;
}

.enlace-gestion[b-mdmkdu4hng] {
    font-size: .78rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--brand-primary, #FF6600);
    text-decoration: none;
    white-space: nowrap;
}

    .enlace-gestion:hover[b-mdmkdu4hng] {
        text-decoration: underline;
    }

/* ── Pantallas estrechas ────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .cambio-fila[b-mdmkdu4hng] {
        grid-template-columns: auto 1fr auto;
        row-gap: .35rem;
    }

    .hora[b-mdmkdu4hng] {
        grid-column: 2;
        justify-self: start;
    }

    .cuerpo[b-mdmkdu4hng] {
        grid-column: 1 / -1;
    }

    .autor-nombre[b-mdmkdu4hng] {
        display: none;
    }

    .resumen[b-mdmkdu4hng] {
        white-space: normal;
    }
}
/* /Components/Pages/Management/GestionHistorialPDV.razor.rz.scp.css */
/* Historial de asignaciones PDV.
   La pantalla se lee como un calendario horizontal: una fila por comercial y, dentro,
   un tramo por tienda. Lo que hay que poder ver de un vistazo es dónde estuvo cada
   uno y dónde el historial no cuadra, porque de ahí sale el reparto de su comisión. */

.hpdv[b-lk6vpjr3lh] {
    --hpdv-pista-alto: 30px;
    --hpdv-comercial-ancho: 220px;
    --hpdv-señales-ancho: 130px;
    --hpdv-fila-alto-extra: .35rem;
    --hpdv-regla-alto-extra: .45rem;
    --hpdv-borde: var(--color-border, #e3e5ea);
    /* El acento de "hoy": la columna del mes en curso y la línea del día. La línea va
       en el naranja oscuro porque tiene que verse encima de su propia columna. */
    --hpdv-hoy-color: var(--brand-primary-dark, #E55A00);
    --hpdv-hoy-rgb: var(--brand-primary-rgb, 255, 102, 0);
}

/* ── Cabecera ─────────────────────────────────────────────────── */

.hpdv-cabecera[b-lk6vpjr3lh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding-bottom: .9rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--hpdv-borde);
}

.hpdv-cabecera__identidad[b-lk6vpjr3lh] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

/* El icono va en su propia pastilla de marca: sitúa la pantalla sin gastar
   una barra de color entera, igual que en el resto de pantallas de gestión. */
.hpdv-cabecera__icono[b-lk6vpjr3lh] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-md, .5rem);
    background: linear-gradient(135deg,
        rgba(var(--brand-primary-rgb, 255, 102, 0), .16),
        rgba(var(--brand-primary-rgb, 255, 102, 0), .06));
    color: var(--brand-primary-dark, #E55A00);
    font-size: 1rem;
}

.hpdv-titulo[b-lk6vpjr3lh] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: -.01em;
    color: var(--color-text, #2d2d2d);
}

.hpdv-subtitulo[b-lk6vpjr3lh] {
    margin: .3rem 0 0;
    max-width: 62ch;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--color-text-muted, #6c757d);
}

.hpdv-cabecera__acciones[b-lk6vpjr3lh] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
}

/* El selector de año lleva su micro-etiqueta como los filtros de abajo: los dos
   son lo mismo, acotar lo que se está mirando. */
.hpdv-anio-campo[b-lk6vpjr3lh] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.hpdv-anio-campo__label[b-lk6vpjr3lh] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.hpdv-anio[b-lk6vpjr3lh] {
    display: inline-flex;
    align-items: stretch;
    padding: .15rem;
    border: 1px solid var(--hpdv-borde);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Cuando lo que se ve es el año en curso, el marco recoge el mismo naranja que
   la columna de hoy: los dos hablan del presente. */
.hpdv-anio--actual[b-lk6vpjr3lh] {
    border-color: rgba(var(--hpdv-hoy-rgb), .45);
    box-shadow: 0 0 0 3px rgba(var(--hpdv-hoy-rgb), .10);
}

.hpdv-anio__valor[b-lk6vpjr3lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    padding: .25rem .4rem;
    font-size: .95rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #2d2d2d);
}

.hpdv-anio--actual .hpdv-anio__valor[b-lk6vpjr3lh] { color: var(--brand-primary-dark, #E55A00); }

.hpdv-anio__nav[b-lk6vpjr3lh] {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: .25rem .5rem;
    border-radius: .35rem;
    color: var(--color-text-muted, #6c757d);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-out, ease),
                color var(--duration-fast, 150ms) var(--ease-out, ease);
}

.hpdv-anio__nav:hover:not(:disabled)[b-lk6vpjr3lh] {
    background: rgba(var(--hpdv-hoy-rgb), .12);
    color: var(--brand-primary-dark, #E55A00);
}

.hpdv-anio__nav:disabled[b-lk6vpjr3lh] { opacity: .3; cursor: default; }

/* ── Filtros ──────────────────────────────────────────────────── */

.hpdv-filtros[b-lk6vpjr3lh] {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--hpdv-borde);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
}

.hpdv-filtro[b-lk6vpjr3lh] { min-width: 190px; }

.hpdv-filtro__label[b-lk6vpjr3lh] {
    display: block;
    margin-bottom: .2rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.hpdv-filtro--checks[b-lk6vpjr3lh] {
    display: flex;
    gap: 1rem;
    padding-bottom: .35rem;
}

.hpdv-check[b-lk6vpjr3lh] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    cursor: pointer;
}

/* ── Timeline ─────────────────────────────────────────────────── */

.hpdv-timeline[b-lk6vpjr3lh] {
    border: 1px solid var(--hpdv-borde);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--color-surface, #fff);
}

.hpdv-regla[b-lk6vpjr3lh],
.hpdv-fila[b-lk6vpjr3lh] {
    display: grid;
    grid-template-columns: var(--hpdv-comercial-ancho) 1fr var(--hpdv-señales-ancho);
    align-items: center;
    gap: .75rem;
    padding: var(--hpdv-fila-alto-extra) .9rem;
}

.hpdv-regla[b-lk6vpjr3lh] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding-top: var(--hpdv-regla-alto-extra);
    padding-bottom: var(--hpdv-regla-alto-extra);
    background: var(--color-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--hpdv-borde);
}

/* El hueco de la izquierda no se desperdicia: lleva el año que se está viendo,
   que es lo que da sentido a las doce casillas de al lado. */
.hpdv-regla__hueco[b-lk6vpjr3lh] {
    font-size: .78rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--color-text-muted, #6c757d);
}

/* Ocupa exactamente la misma columna que la pista de las filas: si se saliera,
   los meses dejarían de caer encima de los tramos que nombran. */
.hpdv-regla__pista[b-lk6vpjr3lh] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column: 2;
}

.hpdv-regla__mes[b-lk6vpjr3lh] {
    position: relative;
    text-align: center;
    font-size: .7rem;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
    overflow: hidden;
}

.hpdv-regla__mes--hoy[b-lk6vpjr3lh] {
    color: var(--brand-primary-dark, #E55A00);
    font-weight: var(--font-weight-bold, 700);
}

.hpdv-regla__mes-corto[b-lk6vpjr3lh] { display: none; }

.hpdv-fila[b-lk6vpjr3lh] {
    border-bottom: 1px solid var(--hpdv-borde);
}

.hpdv-fila:last-child[b-lk6vpjr3lh] { border-bottom: 0; }
.hpdv-fila:hover[b-lk6vpjr3lh] { background: var(--color-surface-alt, #f8f9fa); }

.hpdv-fila--aviso[b-lk6vpjr3lh] {
    box-shadow: inset 3px 0 0 var(--color-warning, #e0a800);
}

.hpdv-fila__comercial[b-lk6vpjr3lh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.hpdv-fila__nombre[b-lk6vpjr3lh] {
    font-size: .88rem;
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpdv-fila__meta[b-lk6vpjr3lh] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: var(--color-text-muted, #6c757d);
}

.hpdv-fila__add[b-lk6vpjr3lh] {
    border: 0;
    background: transparent;
    padding: 0 .2rem;
    font-size: .7rem;
    color: var(--brand-primary-dark, #E55A00);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
}

.hpdv-fila:hover .hpdv-fila__add[b-lk6vpjr3lh],
.hpdv-fila__add:focus-visible[b-lk6vpjr3lh] { opacity: 1; }

/* Pista donde se dibujan los tramos: todo se posiciona en % del año. */
.hpdv-fila__pista[b-lk6vpjr3lh] {
    position: relative;
    height: var(--hpdv-pista-alto);
    border-radius: .3rem;
    background: repeating-linear-gradient(
        90deg,
        var(--color-surface-alt, #f1f3f5) 0,
        var(--color-surface-alt, #f1f3f5) 100%
    );
}

.hpdv-fila__division[b-lk6vpjr3lh] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border, #e3e5ea);
}

.hpdv-seg[b-lk6vpjr3lh] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    min-width: 6px;
    padding: 0 .4rem;
    border: 0;
    border-radius: .25rem;
    background: var(--hpdv-seg-color, #6c757d);
    color: #fff;
    font-size: .72rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}

.hpdv-seg:disabled[b-lk6vpjr3lh] { cursor: default; }

.hpdv-seg:hover:not(:disabled)[b-lk6vpjr3lh],
.hpdv-seg:focus-visible[b-lk6vpjr3lh] {
    filter: brightness(1.1);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
    z-index: 1;
}

.hpdv-seg__texto[b-lk6vpjr3lh] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Una asignación aún abierta se dibuja deshilachada por la derecha. */
.hpdv-seg--vigente[b-lk6vpjr3lh] {
    background: repeating-linear-gradient(
        135deg,
        var(--hpdv-seg-color, #6c757d) 0 8px,
        color-mix(in srgb, var(--hpdv-seg-color, #6c757d) 82%, white) 8px 16px
    );
}

/* Los tramos que entran o salen del año visible pierden la esquina de ese lado. */
.hpdv-seg--antes[b-lk6vpjr3lh] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.hpdv-seg--despues[b-lk6vpjr3lh] { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── La columna de hoy ────────────────────────────────────────────
   El mes en curso se pinta como una columna translúcida que atraviesa la regla y
   todas las filas, y dentro de ella una línea marca el día. Va por encima de los
   tramos, no por debajo: si pasara por detrás desaparecería justo en las filas que
   tienen tienda asignada, que son casi todas, y la columna se leería a trozos.
   Se desborda hacia el relleno vertical de cada fila por lo mismo: así los trozos
   de cada fila se tocan y se leen como una sola columna. */

.hpdv-mes-hoy[b-lk6vpjr3lh] {
    position: absolute;
    top: calc(var(--hpdv-fila-alto-extra) * -1);
    bottom: calc(var(--hpdv-fila-alto-extra) * -1);
    z-index: 3;
    background: rgba(var(--hpdv-hoy-rgb), .13);
    border-left: 1px solid rgba(var(--hpdv-hoy-rgb), .35);
    border-right: 1px solid rgba(var(--hpdv-hoy-rgb), .35);
    pointer-events: none;
}

/* En la regla la columna llega hasta el borde inferior y remata arriba con un
   filete opaco: es la cabecera de la columna. */
.hpdv-mes-hoy--regla[b-lk6vpjr3lh] {
    top: calc(var(--hpdv-regla-alto-extra) * -1);
    bottom: calc(var(--hpdv-regla-alto-extra) * -1);
    background: linear-gradient(180deg,
        rgba(var(--hpdv-hoy-rgb), .26),
        rgba(var(--hpdv-hoy-rgb), .10));
    border-top: 2px solid var(--hpdv-hoy-color);
    border-radius: 3px 3px 0 0;
}

.hpdv-hoy[b-lk6vpjr3lh] {
    position: absolute;
    top: calc(var(--hpdv-fila-alto-extra) * -1);
    bottom: calc(var(--hpdv-fila-alto-extra) * -1);
    width: 2px;
    background: var(--hpdv-hoy-color);
    opacity: .85;
    pointer-events: none;
}

.hpdv-hoy--fila[b-lk6vpjr3lh] { z-index: 4; }

/* La línea del día lleva su punta en la regla, para saber qué señala. */
.hpdv-hoy--regla[b-lk6vpjr3lh] {
    top: calc(var(--hpdv-regla-alto-extra) * -1);
    bottom: calc(var(--hpdv-regla-alto-extra) * -1);
    opacity: 1;
    pointer-events: auto;
    cursor: help;
}

.hpdv-hoy--regla[b-lk6vpjr3lh]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hpdv-hoy-color);
    transform: translate(-50%, -50%);
}

/* ── Señales de la derecha ────────────────────────────────────── */

.hpdv-fila__señales[b-lk6vpjr3lh] {
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
}

.hpdv-señal[b-lk6vpjr3lh] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .72rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    cursor: help;
}

.hpdv-señal--solape[b-lk6vpjr3lh] { background: rgba(198, 40, 40, .12); color: #c62828; }
.hpdv-señal--hueco[b-lk6vpjr3lh] { background: rgba(224, 168, 0, .18); color: #8a6100; }
.hpdv-señal--chivato[b-lk6vpjr3lh] { background: rgba(47, 111, 237, .12); color: #2f6fed; }

/* ── Leyenda y estados ────────────────────────────────────────── */

.hpdv-leyenda[b-lk6vpjr3lh] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .8rem;
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.hpdv-leyenda__item[b-lk6vpjr3lh] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.hpdv-leyenda__item .hpdv-señal[b-lk6vpjr3lh] { cursor: default; }

.hpdv-estado[b-lk6vpjr3lh] {
    padding: 3rem 1rem;
    text-align: center;
    border: 1px solid var(--hpdv-borde);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
}

/* En pantallas estrechas el nombre y las señales ceden ancho a la pista, que es
   lo único que no se puede comprimir sin perder la lectura. */
@media (max-width: 992px) {
    .hpdv[b-lk6vpjr3lh] {
        --hpdv-comercial-ancho: 140px;
        --hpdv-señales-ancho: 92px;
    }

    .hpdv-seg__texto[b-lk6vpjr3lh] { display: none; }

    /* Con la pista tan estrecha, "Ene" ya no cabe: se cae a la inicial. */
    .hpdv-regla__mes-largo[b-lk6vpjr3lh] { display: none; }
    .hpdv-regla__mes-corto[b-lk6vpjr3lh] { display: inline; }

    .hpdv-cabecera__acciones[b-lk6vpjr3lh] { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .hpdv-seg[b-lk6vpjr3lh],
    .hpdv-fila__add[b-lk6vpjr3lh] { transition: none; }
}
/* /Components/Pages/Management/GestionPuntosDeVenta.razor.rz.scp.css */
/* ── Cabecera de la página ──────────────────────────────────────────────────── */

.gpv-header[b-8thwu0yow5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-base, 1rem);
    margin-bottom: var(--sp-lg, 1.5rem);
}

.gpv-title[b-8thwu0yow5] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text, #2d2d2d);
}

/* Filete de marca bajo el título: el mismo recurso que usan las fichas de empleado
   para situar la página sin gastar una barra de color entera. */
.gpv-title[b-8thwu0yow5]::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: .35rem;
    border-radius: 2px;
    background: var(--brand-primary, #FF6600);
}

.gpv-subtitle[b-8thwu0yow5] {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: var(--color-text-muted, #6c757d);
}

.gpv-acciones-cabecera[b-8thwu0yow5] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Contadores ─────────────────────────────────────────────────────────────── */

.gpv-stats[b-8thwu0yow5] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: var(--sp-base, 1rem);
}

.gpv-stat[b-8thwu0yow5] {
    flex: 1 1 7rem;
    min-width: 6.5rem;
    padding: .5rem .85rem;
    text-align: center;
    background: var(--color-surface, #fff);
    border: 1px solid #ececef;
    border-radius: var(--radius-md, .5rem);
}

.gpv-stat-num[b-8thwu0yow5] {
    display: block;
    font-size: 1.3rem;
    line-height: 1.15;
    font-weight: var(--font-weight-bold, 700);
}

.gpv-stat-label[b-8thwu0yow5] {
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted, #6c757d);
}

.gpv-stat--ok .gpv-stat-num[b-8thwu0yow5] {
    color: #198754;
}

.gpv-stat--off .gpv-stat-num[b-8thwu0yow5] {
    color: var(--color-text-muted, #6c757d);
}

.gpv-stat--marca .gpv-stat-num[b-8thwu0yow5] {
    color: var(--brand-primary, #FF6600);
}

/* ── Tarjeta y barra de filtros ─────────────────────────────────────────────── */

.gpv-card[b-8thwu0yow5] {
    background: var(--color-surface, #fff);
    border: 1px solid #ececef;
    border-radius: var(--radius-lg, .75rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.gpv-card-head[b-8thwu0yow5] {
    padding: var(--sp-md, .75rem) var(--sp-base, 1rem);
    border-bottom: 1px solid #f0f0f0;
}

.gpv-card-title[b-8thwu0yow5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    font-size: .82rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-primary, #FF6600);
}

.gpv-contador[b-8thwu0yow5] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #f1f2f4;
    font-size: .68rem;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted, #6c757d);
}

/* Una sola rejilla para los cuatro filtros: se reparten solos y en móvil caen a una
   columna sin necesidad de clases de rejilla en el marcado. */
.gpv-filtros[b-8thwu0yow5] {
    display: grid;
    grid-template-columns: minmax(14rem, 2.2fr) repeat(3, minmax(9rem, 1fr));
    gap: .5rem;
}

@media (max-width: 991.98px) {
    .gpv-filtros[b-8thwu0yow5] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .gpv-filtros[b-8thwu0yow5] {
        grid-template-columns: 1fr;
    }
}

/* ── Tabla ──────────────────────────────────────────────────────────────────── */

/* La cabecera se queda fija al desplazar: con doce columnas y decenas de tiendas,
   sin esto se pierde de vista qué se está leyendo. */
.gpv-scroll[b-8thwu0yow5] {
    max-height: 68vh;
    overflow: auto;
}

.gpv-tabla[b-8thwu0yow5] {
    width: 100%;
    margin: 0;
    font-size: .86rem;
    border-collapse: separate;
    border-spacing: 0;
}

.gpv-tabla thead th[b-8thwu0yow5] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .55rem .6rem;
    background: #f7f7f9;
    border-bottom: 2px solid #e6e6ea;
    font-size: .67rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}

.gpv-tabla tbody td[b-8thwu0yow5] {
    padding: .5rem .6rem;
    border-top: 1px solid #f2f2f4;
    vertical-align: middle;
}

.gpv-tabla tbody tr[b-8thwu0yow5] {
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease);
}

.gpv-tabla tbody tr:hover[b-8thwu0yow5] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .045);
}

/* Fila de un punto de venta dado de baja: se lee, pero no compite con los activos. */
.gpv-fila--inactiva .gpv-nombre[b-8thwu0yow5],
.gpv-fila--inactiva .gpv-sfid[b-8thwu0yow5] {
    opacity: .55;
}

.gpv-nombre[b-8thwu0yow5] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #2d2d2d);
}

.gpv-sub[b-8thwu0yow5] {
    display: block;
    font-size: .71rem;
    color: var(--color-text-muted, #6c757d);
}

.gpv-mono[b-8thwu0yow5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.gpv-sfid[b-8thwu0yow5] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: .3rem;
    background: #f1f2f4;
}

.gpv-linea[b-8thwu0yow5] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    white-space: nowrap;
}

.gpv-linea i[b-8thwu0yow5] {
    width: .9rem;
    flex-shrink: 0;
    text-align: center;
    color: #b9bcc2;
}

.gpv-vacio[b-8thwu0yow5] {
    color: #c3c7cc;
}

/* Las listas de IPs pueden ser largas: se recortan con puntos suspensivos y el texto
   completo queda en el title. */
.gpv-ips[b-8thwu0yow5] {
    max-width: 11rem;
}

.gpv-ip[b-8thwu0yow5] {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .74rem;
}

.gpv-ip-valor[b-8thwu0yow5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gpv-etiqueta-ip[b-8thwu0yow5] {
    flex-shrink: 0;
    padding: 0 .3rem;
    border-radius: .25rem;
    background: #eef0f3;
    font-size: .62rem;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
}

/* ── Distintivos ────────────────────────────────────────────────────────────── */

.gpv-pill[b-8thwu0yow5] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2em .6em;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
}

.gpv-pill--ok[b-8thwu0yow5] {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

.gpv-pill--off[b-8thwu0yow5] {
    background: #f1f2f4;
    color: var(--color-text-muted, #6c757d);
}

.gpv-pill--marca[b-8thwu0yow5] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .12);
    color: var(--brand-primary-dark, #E55A00);
}

/* ── Usuario y contraseña ───────────────────────────────────────────────────── */

.gpv-usuario[b-8thwu0yow5] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: flex-start;
}

.gpv-clave[b-8thwu0yow5] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.gpv-clave input[b-8thwu0yow5] {
    width: 6.5rem;
    padding: .15rem .4rem;
    border: 1px solid #e6e6ea;
    border-radius: var(--radius-sm, .375rem);
    background: #fafafb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    color: var(--color-text, #2d2d2d);
}

/* ── Botones de acción de la fila ───────────────────────────────────────────── */

.gpv-acciones[b-8thwu0yow5] {
    display: flex;
    gap: .2rem;
    justify-content: flex-end;
}

.gpv-icon-btn[b-8thwu0yow5] {
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, .375rem);
    background: transparent;
    color: #9aa0a6;
    font-size: .8rem;
    cursor: pointer;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease),
                background-color var(--duration-fast, 150ms) var(--ease-out, ease);
}

.gpv-icon-btn:hover[b-8thwu0yow5] {
    background: #f1f2f4;
    color: var(--color-text, #2d2d2d);
}

.gpv-icon-btn--editar:hover[b-8thwu0yow5] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .12);
    color: var(--brand-primary-dark, #E55A00);
}

.gpv-icon-btn--borrar:hover[b-8thwu0yow5] {
    background: rgba(220, 53, 69, .1);
    color: #dc3545;
}

.gpv-icon-btn--alta:hover[b-8thwu0yow5] {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

.gpv-icon-btn:focus-visible[b-8thwu0yow5] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 .2rem rgba(255, 102, 0, .25));
}

/* ── Estado vacío ───────────────────────────────────────────────────────────── */

.gpv-estado-vacio[b-8thwu0yow5] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-text-muted, #6c757d);
}

.gpv-estado-vacio i[b-8thwu0yow5] {
    font-size: 1.8rem;
    color: #d8dade;
}

.gpv-estado-vacio p[b-8thwu0yow5] {
    margin: .6rem 0 .2rem;
    font-size: .9rem;
}

/* ── Modales ────────────────────────────────────────────────────────────────── */

/* El filete de marca hace de cabecera: no hace falta teñir la barra entera, que
   además chocaría con el azul del modal de direcciones que se abre encima. */
.gpv-modal .modal-content[b-8thwu0yow5] {
    border: none;
    border-top: 3px solid var(--brand-primary, #FF6600);
    border-radius: var(--radius-lg, .75rem);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
}

.gpv-modal .modal-header[b-8thwu0yow5] {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid #f0f0f0;
}

.gpv-modal .modal-title[b-8thwu0yow5] {
    font-size: 1.02rem;
    font-weight: var(--font-weight-bold, 700);
}

.gpv-modal .modal-body[b-8thwu0yow5] {
    padding: 1.15rem;
}

.gpv-modal-id[b-8thwu0yow5] {
    margin-left: .4rem;
    font-size: .72rem;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #6c757d);
}

/* Separador de bloque dentro del modal, igual que en DireccionForm y UsuarioForm. */
.gpv-sub-titulo[b-8thwu0yow5] {
    font-size: .74rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #6c757d);
    border-top: 1px solid #eee;
    padding-top: .7rem;
    margin: .5rem 0 .75rem;
}

.gpv-sub-titulo--primero[b-8thwu0yow5] {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* La ayuda va debajo del control, nunca entre la etiqueta y el campo, o los inputs
   de una fila dejan de alinearse. */
.gpv-ayuda[b-8thwu0yow5] {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    line-height: 1.25;
    color: var(--color-text-muted, #6c757d);
}

.gpv-modal .form-label[b-8thwu0yow5] {
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.gpv-modal .form-control:focus[b-8thwu0yow5],
.gpv-modal .form-select:focus[b-8thwu0yow5] {
    border-color: var(--brand-primary-light, #FF8533);
    box-shadow: var(--focus-ring, 0 0 0 .2rem rgba(255, 102, 0, .25));
}

/* El selector de direcciones es un componente aparte: sin ::deep el CSS aislado no
   llega a su interior. */
.gpv-modal[b-8thwu0yow5]  .direccion-selector .form-label {
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.gpv-modal[b-8thwu0yow5]  .direccion-selector .dropdown-menu {
    box-shadow: var(--shadow-dropdown, 0 4px 16px rgba(0, 0, 0, .12));
    border-color: #ececef;
}

.gpv-modal[b-8thwu0yow5]  .direccion-selector .dropdown-item {
    font-size: .84rem;
    white-space: normal;
}

.gpv-modal[b-8thwu0yow5]  .validation-message {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--bs-danger, #dc3545);
}

/* ── Ficha de datos del usuario ─────────────────────────────────────────────── */

.gpv-dl[b-8thwu0yow5] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .9rem;
    margin: 0;
}

.gpv-dl dt[b-8thwu0yow5] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #6c757d);
    align-self: center;
    padding: .3rem 0;
    border-top: 1px dashed #eee;
}

.gpv-dl dd[b-8thwu0yow5] {
    margin: 0;
    padding: .3rem 0;
    font-size: .86rem;
    font-weight: var(--font-weight-semibold, 600);
    border-top: 1px dashed #eee;
    overflow-wrap: anywhere;
}

.gpv-dl dt:first-of-type[b-8thwu0yow5],
.gpv-dl dd:first-of-type[b-8thwu0yow5] {
    border-top: none;
}

/* ── Resumen del punto de venta a borrar ────────────────────────────────────── */

.gpv-resumen[b-8thwu0yow5] {
    margin: .75rem 0;
    padding: .6rem .8rem;
    background: #fafafb;
    border: 1px solid #f0f0f0;
    border-radius: var(--radius-md, .5rem);
    font-size: .82rem;
}

.gpv-resumen-fila[b-8thwu0yow5] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .22rem 0;
    border-top: 1px dashed #ececef;
}

.gpv-resumen-fila:first-child[b-8thwu0yow5] {
    border-top: none;
}

.gpv-resumen-fila > span[b-8thwu0yow5] {
    flex-shrink: 0;
    color: var(--color-text-muted, #6c757d);
}

.gpv-resumen-fila > strong[b-8thwu0yow5] {
    text-align: right;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Management/Usuarios.razor.rz.scp.css */
/* ── Ficha en modo consulta: pares etiqueta/valor en rejilla ────────────────── */

.ud-section[b-sowbkr12ft] {
    margin-bottom: 1.25rem;
    page-break-inside: avoid;
}

.ud-section-title[b-sowbkr12ft] {
    font-size: .82rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-primary, #FF6600);
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: .35rem;
    margin-bottom: .6rem;
}

.ud-subtitle[b-sowbkr12ft] {
    font-size: .74rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #6c757d);
    margin: .9rem 0 .35rem;
}

.ud-grid[b-sowbkr12ft] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    column-gap: 1.75rem;
}

.ud-item[b-sowbkr12ft] {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .3rem 0;
    border-bottom: 1px dashed #eee;
    min-width: 0;
}

.ud-item--ancho[b-sowbkr12ft] {
    grid-column: 1 / -1;
}

.ud-label[b-sowbkr12ft] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
}

.ud-value[b-sowbkr12ft] {
    font-size: .88rem;
    font-weight: var(--font-weight-semibold, 600);
    /* Observaciones y pactos son texto largo: que respeten los saltos de línea. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ud-value--vacio[b-sowbkr12ft] {
    color: #c3c7cc;
    font-weight: var(--font-weight-normal, 400);
}

/* ── Errores de validación en la botonera del modal ─────────────────────────── */

.u-validacion[b-sowbkr12ft]  .validation-errors {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .82rem;
    color: var(--bs-danger, #dc3545);
}

@media print {

    /* Hide everything except the modal content */
    body *[b-sowbkr12ft] {
        visibility: hidden;
    }

    /* El modal de consulta scrollea en pantalla; al imprimir tiene que fluir entero. */
    .modal.show .modal-dialog[b-sowbkr12ft],
    .modal.show .modal-content[b-sowbkr12ft],
    .modal.show .modal-body[b-sowbkr12ft] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* La cabecera con avatar y roles sobra: el papel ya lleva su propio encabezado. */
    .modal.show .modal-header[b-sowbkr12ft] {
        display: none !important;
    }

    .ud-section-title[b-sowbkr12ft] {
        color: #000;
        border-bottom-color: #000;
    }

    .ud-value--vacio[b-sowbkr12ft] {
        color: #999;
    }

    /* Show only the modal and its content */
    .modal.show[b-sowbkr12ft],
    .modal.show *[b-sowbkr12ft] {
        visibility: visible;
    }

    /* Remove modal background and make it full page */
    .modal.show[b-sowbkr12ft] {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        background: white;
        box-shadow: none;
    }

    /* Style the modal for printing */
    .modal.show .modal-dialog[b-sowbkr12ft] {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 20px;
    }

    .modal.show .modal-content[b-sowbkr12ft] {
        border: none;
        box-shadow: none;
    }

    /* Header styling for print */
    .print-header[b-sowbkr12ft] {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 2px solid #000;
    }

    .print-header h2[b-sowbkr12ft] {
        color: #000;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .print-header .print-subtitle[b-sowbkr12ft] {
        font-size: 16px;
        color: #666;
        font-weight: normal;
    }

    /* Card styling for print */
    .card[b-sowbkr12ft] {
        border: 1px solid #ddd;
        margin-bottom: 20px;
        page-break-inside: avoid;
    }

    .card-header[b-sowbkr12ft] {
        background-color: #f8f9fa !important;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
    }

    /* Label and input styling */
    .form-label[b-sowbkr12ft] {
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
    }

    .form-control[b-sowbkr12ft] {
        border: none;
        border-bottom: 1px solid #ddd;
        padding: 8px 0;
        width: 100%;
        background: transparent;
    }

    /* Footer for print */
    .print-footer[b-sowbkr12ft] {
        margin-top: 30px;
        padding-top: 15px;
        border-top: 1px solid #ddd;
        text-align: center;
        font-size: 12px;
        color: #666;
    }

    /* Hide buttons and non-content elements */
    .modal-footer[b-sowbkr12ft] {
        display: none !important;
    }

    .btn-close[b-sowbkr12ft] {
        display: none !important;
    }
}

/* Print meta styling */
.print-meta[b-sowbkr12ft] {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    font-style: italic;
}

/* ── Directorio de empleados: estética alineada con las páginas de Fichajes (fe-*),
      replicada aquí porque el CSS scoped de FichaEmpleado no alcanza a este componente. ── */

.text-orange[b-sowbkr12ft] {
    color: var(--brand-primary, #FF6600);
}

.min-w-0[b-sowbkr12ft] {
    min-width: 0;
}

.fe-avatar[b-sowbkr12ft] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fe-pill[b-sowbkr12ft] {
    display: inline-block;
    padding: .25em .65em;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
}

.fe-pill-ok[b-sowbkr12ft] {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.fe-pill-neutral[b-sowbkr12ft] {
    background-color: #f1f2f4;
    color: var(--color-text-muted, #6c757d);
}

.fe-field-row[b-sowbkr12ft] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 0;
    font-size: .85rem;
    border-top: 1px dashed #eee;
    gap: .5rem;
}

.fe-field-row:first-child[b-sowbkr12ft] {
    border-top: none;
}

.fe-field-row > span[b-sowbkr12ft] {
    color: var(--color-text-muted, #6c757d);
    flex-shrink: 0;
}

.fe-field-row > strong[b-sowbkr12ft] {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-card[b-sowbkr12ft] {
    transition: box-shadow .15s ease, transform .15s ease;
}

.u-card:hover[b-sowbkr12ft] {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
    transform: translateY(-2px);
}

.u-card-body[b-sowbkr12ft] {
    cursor: pointer;
}
/* ── Panel de filtros ───────────────────────────────────────────────────────── */

.u-filtros[b-sowbkr12ft] {
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    background: #fbfbfc;
}

.u-filtro-label[b-sowbkr12ft] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: .15rem;
}

/* ── Selector de campos a exportar ──────────────────────────────────────────── */

/* Columnas de ancho fijo que se van repartiendo: cada grupo cabe entero en una
   sin partirse por la mitad al saltar de columna. */
.ux-grupos[b-sowbkr12ft] {
    columns: 260px;
    column-gap: 1.5rem;
}

.ux-grupo[b-sowbkr12ft] {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
}

.ux-grupo-cabecera[b-sowbkr12ft] {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: .25rem;
    margin-bottom: .35rem;
}

.ux-grupo-cabecera .form-check-label[b-sowbkr12ft] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--brand-primary, #FF6600);
}

.ux-campo .form-check-label[b-sowbkr12ft] {
    font-size: .84rem;
}
/* /Components/Pages/Monitoring/ActiveUsers.razor.rz.scp.css */
/* Cabecera: verde vivo con remate azul. El log de accesos es la pizarra del pasado; esta
   pantalla es el presente, y el color es lo primero que las distingue de un vistazo. */
.cabecera[b-ndx7dn22eq] {
    background: linear-gradient(135deg, #064e3b 0%, #0f766e 45%, #0369a1 100%);
}

/* ── Cuando no hay nadie ─────────────────────────────────────────────────────── */
.sin-nadie[b-ndx7dn22eq] {
    background: #fff;
    border: 1px dashed rgba(15, 23, 42, .15);
    color: #94a3b8;
}

/* ── Indicadores ─────────────────────────────────────────────────────────────── */
.kpi[b-ndx7dn22eq] {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 .125rem .5rem rgba(15, 23, 42, .06);
    padding: 1rem 1.1rem;
}

    /* Franja de color a la izquierda: distingue los cuatro sin repartir cuatro fondos. */
    .kpi[b-ndx7dn22eq]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--acento, #6366f1);
    }

.kpi-primary[b-ndx7dn22eq] { --acento: #6366f1; }
.kpi-success[b-ndx7dn22eq] { --acento: #10b981; }
.kpi-warning[b-ndx7dn22eq] { --acento: #f59e0b; }
.kpi-info[b-ndx7dn22eq] { --acento: #0ea5e9; }

.kpi-icono[b-ndx7dn22eq] {
    position: absolute;
    top: .6rem;
    right: .9rem;
    font-size: 1.6rem;
    color: var(--acento, #6366f1);
    opacity: .18;
}

.kpi-valor[b-ndx7dn22eq] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}

.kpi-etiqueta[b-ndx7dn22eq] {
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
}

.kpi-pie[b-ndx7dn22eq] {
    margin-top: .35rem;
    font-size: .72rem;
    line-height: 1.35;
}

/* ── Paneles ─────────────────────────────────────────────────────────────────── */
.panel[b-ndx7dn22eq] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 .125rem .5rem rgba(15, 23, 42, .05);
    padding: 1rem 1.1rem;
}

.panel-titulo[b-ndx7dn22eq] {
    font-size: .85rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: .8rem;
}

/* ── Pantallas ocupadas ──────────────────────────────────────────────────────── */
.lista-paginas .pagina + .pagina[b-ndx7dn22eq] {
    margin-top: .7rem;
}

.pagina-cabecera[b-ndx7dn22eq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .82rem;
    margin-bottom: .2rem;
}

.barra[b-ndx7dn22eq] {
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, .07);
    overflow: hidden;
}

.barra-relleno[b-ndx7dn22eq] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #10b981, #0ea5e9);
}

/* ── Contadores de equipos ───────────────────────────────────────────────────── */
.contador[b-ndx7dn22eq] {
    background: #f8fafc;
    border-radius: .9rem;
    border: 1px solid rgba(15, 23, 42, .06);
    padding: .7rem .4rem;
    text-align: center;
}

    /* Un contador a cero no dice nada: se apaga para que destaquen los que sí. */
    .contador.vacio[b-ndx7dn22eq] {
        opacity: .45;
    }

    .contador i[b-ndx7dn22eq] {
        font-size: 1.1rem;
        color: #0f766e;
    }

.contador-valor[b-ndx7dn22eq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.contador-etiqueta[b-ndx7dn22eq] {
    font-size: .7rem;
    color: #64748b;
}

/* ── Etiquetas sueltas ───────────────────────────────────────────────────────── */
.chip[b-ndx7dn22eq] {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    border-radius: 1rem;
    padding: .12rem .55rem;
    font-size: .7rem;
    white-space: nowrap;
}

.chip-rol[b-ndx7dn22eq] {
    background: #eef2ff;
    color: #4338ca;
}

/* ── Tabla ───────────────────────────────────────────────────────────────────── */
.tabla-usuarios[b-ndx7dn22eq] {
    max-height: 62vh;
    overflow-y: auto;
}

    .tabla-usuarios thead th[b-ndx7dn22eq] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #475569;
        white-space: nowrap;
    }

.fila-usuario[b-ndx7dn22eq] {
    cursor: pointer;
}

    /* El estado se ve en el filo izquierdo sin tener que llegar a la última columna. */
    .fila-usuario.estado-navegando td:first-child[b-ndx7dn22eq] {
        box-shadow: inset 3px 0 0 #10b981;
    }

    .fila-usuario.estado-enpantalla td:first-child[b-ndx7dn22eq] {
        box-shadow: inset 3px 0 0 #f59e0b;
    }

    .fila-usuario.estado-ausente td:first-child[b-ndx7dn22eq] {
        box-shadow: inset 3px 0 0 #cbd5e1;
    }

    .fila-usuario.estado-ausente[b-ndx7dn22eq] {
        color: #64748b;
    }

.fila-detalle > td[b-ndx7dn22eq] {
    background: #f8fafc;
    border-top: 0;
}

/* Las columnas no deben ensancharse por una ruta larga: dentro se recorta con text-truncate. */
.tabla-usuarios td[b-ndx7dn22eq] {
    max-width: 22rem;
}

.min-w-0[b-ndx7dn22eq] {
    min-width: 0;
}

/* ── Avatar ──────────────────────────────────────────────────────────────────── */
.avatar[b-ndx7dn22eq] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
    /* El tono lo pone la fila: mismo usuario, mismo color, siempre. */
    background: linear-gradient(135deg, hsl(var(--tono, 210) 55% 45%), hsl(var(--tono, 210) 60% 62%));
}

/* ── Pastilla de estado ──────────────────────────────────────────────────────── */
.pastilla[b-ndx7dn22eq] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 1rem;
    padding: .15rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

    .pastilla .punto[b-ndx7dn22eq] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

.pastilla-navegando[b-ndx7dn22eq] {
    background: #dcfce7;
    color: #15803d;
}

    /* Solo late el que está navegando de verdad: si latieran todos, no diría nada. */
    .pastilla-navegando .punto[b-ndx7dn22eq] {
        animation: latido-b-ndx7dn22eq 1.6s ease-in-out infinite;
    }

.pastilla-enpantalla[b-ndx7dn22eq] {
    background: #fef3c7;
    color: #b45309;
}

.pastilla-ausente[b-ndx7dn22eq] {
    background: #f1f5f9;
    color: #64748b;
}

@keyframes latido-b-ndx7dn22eq {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(1.35);
    }
}

/* ── Recorrido del usuario ───────────────────────────────────────────────────── */
.recorrido[b-ndx7dn22eq] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.paso[b-ndx7dn22eq] {
    position: relative;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .6rem;
    padding: .35rem .6rem;
    min-width: 9rem;
    max-width: 14rem;
    font-size: .75rem;
}

    /* La flecha entre pasos: el recorrido se lee de izquierda a derecha. */
    .paso + .paso[b-ndx7dn22eq]::before {
        content: "\203A";
        position: absolute;
        left: -.45rem;
        top: 50%;
        transform: translateY(-50%);
        color: #cbd5e1;
        font-weight: 700;
    }

.paso-actual[b-ndx7dn22eq] {
    border-color: #10b981;
    background: #f0fdf4;
}

.paso-hora[b-ndx7dn22eq] {
    font-size: .68rem;
    color: #94a3b8;
}

.paso-nombre[b-ndx7dn22eq] {
    font-weight: 600;
    color: #0f172a;
}

.paso-tiempo[b-ndx7dn22eq] {
    font-size: .68rem;
    color: #64748b;
}

/* ── Ficha rápida ────────────────────────────────────────────────────────────── */
.ficha[b-ndx7dn22eq] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .75rem;
    font-size: .78rem;
    margin: 0;
}

    .ficha dt[b-ndx7dn22eq] {
        color: #94a3b8;
        font-weight: 600;
    }

    .ficha dd[b-ndx7dn22eq] {
        margin: 0;
        color: #0f172a;
        overflow-wrap: anywhere;
    }

/* ── Móvil ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .tabla-usuarios[b-ndx7dn22eq] {
        max-height: none;
    }

    .kpi-valor[b-ndx7dn22eq] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Monitoring/LogAccesos.razor.rz.scp.css */
/* Cabecera: azul pizarra con un remate cian, para que la pantalla de vigilancia no se
   confunda de un vistazo con las de comisionamiento. */
.cabecera[b-iwmwbodszf] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #0e7490 100%);
}

/* ── Indicadores ─────────────────────────────────────────────────────────────── */
.kpi[b-iwmwbodszf] {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 .125rem .5rem rgba(15, 23, 42, .06);
    padding: 1rem 1.1rem;
}

    /* Franja de color a la izquierda: distingue los cuatro sin repartir cuatro colores de fondo. */
    .kpi[b-iwmwbodszf]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--acento, #6366f1);
    }

.kpi-primary[b-iwmwbodszf] { --acento: #6366f1; }
.kpi-success[b-iwmwbodszf] { --acento: #10b981; }
.kpi-warning[b-iwmwbodszf] { --acento: #f59e0b; }
.kpi-info[b-iwmwbodszf] { --acento: #0ea5e9; }
.kpi-danger[b-iwmwbodszf] { --acento: #ef4444; }

.kpi-icono[b-iwmwbodszf] {
    position: absolute;
    top: .6rem;
    right: .9rem;
    font-size: 1.6rem;
    color: var(--acento, #6366f1);
    opacity: .18;
}

.kpi-valor[b-iwmwbodszf] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}

.kpi-etiqueta[b-iwmwbodszf] {
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
}

.kpi-pie[b-iwmwbodszf] {
    margin-top: .35rem;
    font-size: .72rem;
    line-height: 1.35;
}

/* ── Contadores de seguridad ─────────────────────────────────────────────────── */
.contador[b-iwmwbodszf] {
    background: #fff;
    border-radius: .9rem;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 .125rem .5rem rgba(15, 23, 42, .05);
    padding: .9rem .5rem;
    text-align: center;
    height: 100%;
}

    /* Un contador a cero no es una alarma: se apaga para que destaquen los que sí tienen algo. */
    .contador.vacio[b-iwmwbodszf] {
        opacity: .55;
    }

    .contador i[b-iwmwbodszf] {
        font-size: 1.15rem;
        color: var(--acento, #64748b);
    }

.contador-warning[b-iwmwbodszf] { --acento: #f59e0b; }
.contador-danger[b-iwmwbodszf] { --acento: #ef4444; }
.contador-info[b-iwmwbodszf] { --acento: #0ea5e9; }
.contador-primary[b-iwmwbodszf] { --acento: #6366f1; }
.contador-secondary[b-iwmwbodszf] { --acento: #64748b; }

.contador-valor[b-iwmwbodszf] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.contador-etiqueta[b-iwmwbodszf] {
    font-size: .72rem;
    color: #64748b;
}

/* ── Páginas más visitadas ───────────────────────────────────────────────────── */
.lista-paginas .pagina + .pagina[b-iwmwbodszf] {
    margin-top: .7rem;
}

.pagina-cabecera[b-iwmwbodszf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .82rem;
    margin-bottom: .2rem;
}

.barra[b-iwmwbodszf] {
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, .07);
    overflow: hidden;
}

.barra-relleno[b-iwmwbodszf] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #0ea5e9);
}

/* ── Tablas de panel ─────────────────────────────────────────────────────────── */
.tabla-panel[b-iwmwbodszf] {
    max-height: 320px;
    overflow-y: auto;
}

.tabla-registros[b-iwmwbodszf] {
    max-height: 65vh;
    overflow-y: auto;
}

    .tabla-registros thead th[b-iwmwbodszf] {
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #475569;
        white-space: nowrap;
    }

    .tabla-registros .ordenable[b-iwmwbodszf] {
        cursor: pointer;
        user-select: none;
    }

        .tabla-registros .ordenable:hover[b-iwmwbodszf] {
            background: #eef2ff;
        }

    .tabla-registros .fila-filtros td[b-iwmwbodszf] {
        background: #eef2ff;
        border-top: 2px solid #c7d2fe;
        padding: .3rem .4rem;
    }

    /* Un acceso desde red anónima se ve sin tener que llegar a la última columna. */
    .tabla-registros .fila-marcada[b-iwmwbodszf] {
        box-shadow: inset 3px 0 0 #f59e0b;
    }

.desplegable-filtro[b-iwmwbodszf] {
    z-index: 1050;
    min-width: 190px;
    max-height: 260px;
    overflow-y: auto;
    top: 100%;
    left: 0;
}

/* ── Pestañas ────────────────────────────────────────────────────────────────── */
.nav-pills .nav-link[b-iwmwbodszf] {
    color: #334155;
    font-weight: 600;
    border-radius: 2rem;
    padding: .4rem 1.1rem;
}

    .nav-pills .nav-link:hover[b-iwmwbodszf] {
        background: #eef2ff;
    }

    .nav-pills .nav-link.active[b-iwmwbodszf] {
        background: #0f172a;
    }
/* /Components/Pages/Objectives/ComisionamientoMensual.razor.rz.scp.css */
/* ================================================================
   Comisionamiento Mensual
   Prefijo cm- (comisionamiento mensual)
   ================================================================ */

.cm-page[b-le34awldl2] {
    --cm-ink: #1d1d26;
    --cm-ink-soft: #15151c;
    --cm-line: #e6e6ec;
    --cm-line-strong: #cfcfda;
    --cm-ok: #12805c;
    --cm-ko: #c62828;

    /* Anchos de las columnas congeladas: la tabla los reutiliza en los
       desplazamientos sticky, así que se declaran una sola vez. */
    --cm-w-nombre: 210px;
    --cm-w-pdv: 150px;
    --cm-w-total: 140px;

    /* Altura de la fila de grupos: fija el `top` de la fila de columnas. */
    --cm-head-group-h: 32px;
}


/* ── Cabecera de página ───────────────────────────────────────── */

.cm-title[b-le34awldl2] {
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: -0.01em;
    margin: 0;
}

.cm-eyebrow[b-le34awldl2] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}


/* ── Franja de indicadores ────────────────────────────────────── */

.cm-kpis[b-le34awldl2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-md, .75rem);
}

.cm-kpi[b-le34awldl2] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--cm-line);
    border-radius: var(--radius-md, .5rem);
    padding: .7rem .9rem;
    position: relative;
    overflow: hidden;
}

.cm-kpi[b-le34awldl2]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cm-line-strong);
}

.cm-kpi--brand[b-le34awldl2]::before { background: var(--brand-primary, #FF6600); }
.cm-kpi--danger[b-le34awldl2]::before { background: var(--cm-ko); }
.cm-kpi--ok[b-le34awldl2]::before { background: var(--cm-ok); }

.cm-kpi__label[b-le34awldl2] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
    margin-bottom: .15rem;
}

.cm-kpi__value[b-le34awldl2] {
    display: block;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--cm-ink);
}

.cm-kpi--brand .cm-kpi__value[b-le34awldl2] { color: var(--brand-primary, #FF6600); }
.cm-kpi--danger .cm-kpi__value[b-le34awldl2] { color: var(--cm-ko); }

.cm-kpi__hint[b-le34awldl2] {
    display: block;
    font-size: .74rem;
    color: var(--color-text-muted, #6c757d);
}


/* ── Barra de herramientas ────────────────────────────────────── */

.cm-toolbar[b-le34awldl2] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--cm-line);
    border-radius: var(--radius-md, .5rem);
    padding: var(--sp-base, 1rem);
}

.cm-nota[b-le34awldl2] {
    font-size: .8rem;
    color: var(--color-text-muted, #6c757d);
    border-left: 3px solid var(--cm-line-strong);
    padding-left: .6rem;
}


/* ── Escala de tramos ─────────────────────────────────────────── */

.cm-legend[b-le34awldl2] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--cm-line);
    border-radius: var(--radius-md, .5rem);
    padding: var(--sp-md, .75rem) var(--sp-base, 1rem);
}

.cm-scale[b-le34awldl2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.cm-scale__label[b-le34awldl2] {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

.cm-scale__track[b-le34awldl2] {
    display: flex;
    flex: 1 1 320px;
    min-width: 260px;
    border-radius: var(--radius-sm, .375rem);
    overflow: hidden;
    border: 1px solid var(--cm-line);
}

.cm-scale__seg[b-le34awldl2] {
    flex: 1 1 0;
    min-width: 0;
    padding: .3rem .4rem;
    text-align: center;
    background-color: var(--cm-tramo-bg, transparent);
    border-left: 1px solid var(--cm-line);
    box-shadow: inset 0 3px 0 var(--cm-tramo, transparent);
}

.cm-scale__seg:first-child[b-le34awldl2] { border-left: 0; }

.cm-scale__pct[b-le34awldl2] {
    display: block;
    font-size: .82rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--cm-ink);
}

.cm-scale__range[b-le34awldl2] {
    display: block;
    font-size: .68rem;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}

/* Un segmento acotado no alcanza a todos los conceptos: se marca con el trazo
   superior a rayas y debajo lleva la lista de a quién sí alcanza. */
.cm-scale__seg--acotado[b-le34awldl2] {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 6px,
        var(--cm-tramo-bg, transparent) 6px 12px);
}

.cm-scale__ambito[b-le34awldl2] {
    display: block;
    margin-top: .1rem;
    font-size: .63rem;
    font-style: italic;
    line-height: 1.2;
    color: var(--cm-tramo, var(--color-text-muted, #6c757d));
    overflow-wrap: anywhere;
}

.cm-marks[b-le34awldl2] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .78rem;
    color: var(--color-text-muted, #6c757d);
}

.cm-swatch[b-le34awldl2] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: .35rem;
    vertical-align: -1px;
}


/* ── Contenedor de la tabla ───────────────────────────────────── */

.cm-table-card[b-le34awldl2] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--cm-line);
    border-radius: var(--radius-md, .5rem);
    overflow: hidden;
}

.cm-table-card__head[b-le34awldl2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    background: var(--gradient-header, #1d1d26);
    color: var(--color-text-inverse, #fff);
}

.cm-table-card__title[b-le34awldl2] {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold, 600);
}

.cm-table-card__count[b-le34awldl2] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
}

.cm-scroller[b-le34awldl2] {
    max-height: 72vh;
    overflow: auto;
    overscroll-behavior: contain;
}


/* ── Tabla ────────────────────────────────────────────────────── */

.cm-table[b-le34awldl2] {
    width: 100%;
    margin: 0;
    border-collapse: separate; /* imprescindible para las columnas sticky */
    border-spacing: 0;
    font-size: .86rem;
}

.cm-table th[b-le34awldl2],
.cm-table td[b-le34awldl2] {
    padding: .45rem .6rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--cm-line);
    white-space: nowrap;
}

/* Separador vertical: sólo entre grupos, no entre cada columna. */
.cm-gsep[b-le34awldl2] { border-left: 1px solid var(--cm-line-strong); }


/* Cabecera de dos niveles */

.cm-table thead th[b-le34awldl2] {
    position: sticky;
    z-index: 20;
    background: var(--cm-ink);
    color: #e9e9f0;
    font-weight: var(--font-weight-semibold, 600);
    border-bottom: 0;
}

.cm-table thead .cm-hgroup th[b-le34awldl2] {
    top: 0;
    height: var(--cm-head-group-h);
    background: var(--cm-ink-soft);
    color: var(--brand-primary-light, #FF8533);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    text-align: center;
}

.cm-table thead .cm-hcols th[b-le34awldl2] {
    top: var(--cm-head-group-h);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    border-bottom: 2px solid var(--brand-primary, #FF6600);
}

.cm-hgroup--left[b-le34awldl2] { text-align: left !important; }

.cm-table thead .cm-gsep[b-le34awldl2] { border-left-color: #3a3a48; }


/* Cuerpo: el fondo de fila vive en variables para que las columnas
   congeladas hereden el zebrado y el hover en vez de taparlos. */

.cm-table tbody tr[b-le34awldl2] {
    --row-bg: #ffffff;
    --row-accent-bg: rgba(var(--brand-primary-rgb, 255, 102, 0), .05);
}

.cm-table tbody tr:nth-of-type(even)[b-le34awldl2] {
    --row-bg: #f5f5f8;
    --row-accent-bg: rgba(var(--brand-primary-rgb, 255, 102, 0), .08);
}

.cm-table tbody tr:hover[b-le34awldl2] {
    --row-bg: #fff4ec;
    --row-accent-bg: rgba(var(--brand-primary-rgb, 255, 102, 0), .14);
}

.cm-table tbody td[b-le34awldl2] {
    background: var(--row-bg);
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
}


/* Pie */

.cm-table tfoot th[b-le34awldl2] {
    position: sticky;
    bottom: 0;
    z-index: 24;
    background: var(--cm-ink);
    color: #fff;
    border-top: 2px solid var(--brand-primary, #FF6600);
    border-bottom: 0;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

.cm-table tfoot .cm-gsep[b-le34awldl2] { border-left-color: #3a3a48; }


/* ── Columnas congeladas ──────────────────────────────────────── */

.cm-c-nombre[b-le34awldl2],
.cm-c-pdv[b-le34awldl2],
.cm-c-total[b-le34awldl2] {
    position: sticky;
}

.cm-c-nombre[b-le34awldl2] { left: 0; width: var(--cm-w-nombre); min-width: var(--cm-w-nombre); }
.cm-c-pdv[b-le34awldl2] { left: var(--cm-w-nombre); width: var(--cm-w-pdv); min-width: var(--cm-w-pdv); }
.cm-c-total[b-le34awldl2] { right: 0; width: var(--cm-w-total); min-width: var(--cm-w-total); }

.cm-table thead .cm-c-nombre[b-le34awldl2],
.cm-table thead .cm-c-pdv[b-le34awldl2],
.cm-table thead .cm-c-total[b-le34awldl2] { z-index: 30; }

.cm-table tfoot .cm-c-nombre[b-le34awldl2],
.cm-table tfoot .cm-c-pdv[b-le34awldl2],
.cm-table tfoot .cm-c-total[b-le34awldl2] { z-index: 34; }

.cm-table tbody .cm-c-nombre[b-le34awldl2],
.cm-table tbody .cm-c-pdv[b-le34awldl2] { z-index: 10; }

.cm-table tbody .cm-c-total[b-le34awldl2] {
    z-index: 10;
    /* Tinte de marca sobre el fondo de fila, sin perder zebrado ni hover. */
    background-color: var(--row-bg);
    background-image: linear-gradient(var(--row-accent-bg), var(--row-accent-bg));
    font-weight: var(--font-weight-bold, 700);
    color: var(--brand-primary-dark, #E55A00);
}

/* Sombra que marca el borde de la zona congelada al hacer scroll. */
.cm-c-pdv[b-le34awldl2] { box-shadow: 6px 0 8px -7px rgba(0, 0, 0, .35); }
.cm-c-total[b-le34awldl2] { box-shadow: -6px 0 8px -7px rgba(0, 0, 0, .35); }

/* Por debajo de este ancho congelar 500px de tabla estorba más que ayuda.
   Se sueltan los anclajes horizontales pero la cabecera y el pie siguen
   pegados en vertical, que ahí sí compensa. */
@media (max-width: 1400px) {
    .cm-table .cm-c-nombre[b-le34awldl2],
    .cm-table .cm-c-pdv[b-le34awldl2],
    .cm-table .cm-c-total[b-le34awldl2] {
        left: auto;
        right: auto;
        box-shadow: none;
    }

    .cm-table tbody .cm-c-nombre[b-le34awldl2],
    .cm-table tbody .cm-c-pdv[b-le34awldl2],
    .cm-table tbody .cm-c-total[b-le34awldl2] {
        position: static;
    }
}


/* ── Anchos mínimos por tipo de columna ───────────────────────── */

.cm-c-flag[b-le34awldl2] { min-width: 92px; text-align: center; }
.cm-c-term[b-le34awldl2] { min-width: 112px; text-align: center; }
.cm-c-llave[b-le34awldl2] { min-width: 118px; text-align: center; }
.cm-c-concepto[b-le34awldl2] { min-width: 132px; }
.cm-c-bruto[b-le34awldl2] { min-width: 134px; }
.cm-c-pen-num[b-le34awldl2] { min-width: 98px; text-align: center; }
.cm-c-pen-imp[b-le34awldl2] { min-width: 170px; }


/* ── Celdas ───────────────────────────────────────────────────── */

.cm-num[b-le34awldl2] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cm-nombre[b-le34awldl2] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--cm-ink);
    white-space: normal;
    line-height: 1.2;
}

.cm-id[b-le34awldl2] {
    font-size: .7rem;
    color: var(--color-text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.cm-pdv[b-le34awldl2] {
    white-space: normal;
    line-height: 1.2;
    color: var(--color-text-muted, #6c757d);
}

.cm-vacio[b-le34awldl2] { color: #b9b9c4; }

/* Importe de un concepto, teñido con el color de su tramo. */
.cm-tramo[b-le34awldl2] {
    display: block;
    border-radius: var(--radius-sm, .375rem);
    border-left: 3px solid var(--cm-tramo, transparent);
    background-color: var(--cm-tramo-bg, transparent);
    padding: .2rem .4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold, 600);
}

.cm-tramo__extra[b-le34awldl2] {
    display: block;
    font-size: .68rem;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #6c757d);
}

.cm-bruto[b-le34awldl2] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--cm-ink);
}

.cm-descuento[b-le34awldl2] {
    display: block;
    color: var(--cm-ko);
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

.cm-motivos[b-le34awldl2] {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    justify-content: flex-end;
    margin-top: .2rem;
    max-width: 15rem;
    margin-left: auto;
    white-space: normal;
}

.cm-motivo[b-le34awldl2] {
    font-size: .66rem;
    line-height: 1.4;
    padding: 0 .3rem;
    border-radius: 3px;
    background: rgba(198, 40, 40, .09);
    color: #8e2020;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-regla[b-le34awldl2] {
    display: block;
    font-size: .66rem;
    line-height: 1.3;
    font-style: italic;
    color: var(--color-text-muted, #6c757d);
    margin-top: .15rem;
    margin-left: auto;
    max-width: 15rem;
    white-space: normal;
}


/* ── Indicadores sí / no ──────────────────────────────────────── */

.cm-flag[b-le34awldl2] {
    display: inline-block;
    min-width: 1.9rem;
    padding: .05rem .35rem;
    border-radius: 3px;
    font-size: .68rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: .04em;
}

.cm-flag--si[b-le34awldl2] { background: rgba(18, 128, 92, .12); color: var(--cm-ok); }
.cm-flag--no[b-le34awldl2] { background: rgba(198, 40, 40, .12); color: var(--cm-ko); }

.cm-chip-pdv[b-le34awldl2] {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 3px;
    font-size: .66rem;
    font-weight: var(--font-weight-bold, 700);
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .15);
    color: var(--brand-primary-dark, #E55A00);
    white-space: nowrap;
}


/* ── Estados ──────────────────────────────────────────────────── */

.cm-estado[b-le34awldl2] {
    background: var(--color-surface, #fff);
    border: 1px dashed var(--cm-line-strong);
    border-radius: var(--radius-md, .5rem);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted, #6c757d);
}

.cm-estado__icono[b-le34awldl2] {
    font-size: 2rem;
    color: var(--cm-line-strong);
    margin-bottom: .75rem;
}

.cm-estado__titulo[b-le34awldl2] {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--cm-ink);
    margin-bottom: .25rem;
}

@media (prefers-reduced-motion: reduce) {
    .cm-table tbody td[b-le34awldl2] { transition: none; }
}


/* ── Desglose por tienda ──────────────────────────────────────── */
/* Un comercial que pasó por varias tiendas en el mes cobra y penaliza en cada
   una por separado. La fila principal sigue siendo la del mes; debajo se
   despliega una subfila por tienda. */

.cm-table-card__meta[b-le34awldl2] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.cm-multi-toggle[b-le34awldl2] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: .72rem;
    letter-spacing: .03em;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease;
}

.cm-multi-toggle:hover[b-le34awldl2] { opacity: 1; }

.cm-multi-toggle__accion[b-le34awldl2] {
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    font-size: .66rem;
}

.cm-pdv-toggle[b-le34awldl2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-primary-dark, #E55A00);
    font: inherit;
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    text-align: left;
}

.cm-pdv-toggle__icono[b-le34awldl2] {
    font-size: .6rem;
    transition: transform .15s ease;
}

.cm-pdv-toggle--abierto .cm-pdv-toggle__icono[b-le34awldl2] { transform: rotate(90deg); }

.cm-pdv-toggle__texto[b-le34awldl2] { text-decoration: underline dotted; }

/* La subfila se lee como una sangría de su comercial, no como otra fila más. */
.cm-subfila > td[b-le34awldl2] {
    background: rgba(var(--brand-primary-rgb, 255, 102, 0), .04);
    border-top: 0;
    font-size: .95em;
}

.cm-subfila__guia[b-le34awldl2] {
    border-left: 3px solid rgba(var(--brand-primary-rgb, 255, 102, 0), .35);
}

.cm-subfila__pdv[b-le34awldl2] {
    display: block;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #212529);
}

.cm-subfila__rango[b-le34awldl2] {
    display: block;
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--color-text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.cm-subfila__nota[b-le34awldl2] {
    font-size: .68rem;
    font-style: italic;
    color: var(--color-text-muted, #6c757d);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .cm-pdv-toggle__icono[b-le34awldl2] { transition: none; }
}

/* ── Firmas manuales ──────────────────────────────────────────────
   Dos cifras en una celda: lo pendiente de documentación y lo ya validado en
   control. Cuando no queda nada pendiente, el cero se apaga. */

.cm-c-firmas[b-le34awldl2] { min-width: 96px; text-align: center; }

.cm-firmas[b-le34awldl2] {
    display: inline-flex;
    align-items: baseline;
    gap: .18rem;
    font-variant-numeric: tabular-nums;
}

.cm-firmas__mal[b-le34awldl2] {
    color: #c62828;
    font-weight: 700;
}

.cm-firmas__mal--cero[b-le34awldl2] {
    color: #b9b9c4;
    font-weight: 500;
}

.cm-firmas__sep[b-le34awldl2] { color: #b9b9c4; }

.cm-firmas__bien[b-le34awldl2] {
    color: #2e7d32;
    font-weight: 600;
}
/* /Components/Pages/Quiz/GestionPreguntas.razor.rz.scp.css */
/*
    Estilos de la gestión de preguntas de un quiz.

    El naranja es el del resto del módulo (ListaQuizzes y ResultadosQuizzes usan el mismo
    degradado), para que las tres pantallas se lean como una sola sección.
*/

.gp[b-d7qq9guufe] {
    --gp-naranja: #ff6b35;
    --gp-naranja-suave: #fff1ec;
    --gp-borde: #dee2e6;
    --gp-borde-suave: #eef0f2;
    --gp-fondo-suave: #f8f9fa;
    --gp-texto-tenue: #6c757d;
    --gp-verde: #198754;
    --gp-verde-suave: #e8f5ee;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.gp-cabecera[b-d7qq9guufe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--gp-borde-suave);
}

.gp-volver[b-d7qq9guufe] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gp-texto-tenue);
    font-size: .85rem;
    cursor: pointer;
    transition: color .15s ease;
}

.gp-volver:hover[b-d7qq9guufe] {
    color: var(--gp-naranja);
}

.gp-titulo[b-d7qq9guufe] {
    margin: .35rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.gp-meta[b-d7qq9guufe] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.gp-chip[b-d7qq9guufe] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--gp-fondo-suave);
    border: 1px solid var(--gp-borde);
    color: #495057;
    font-size: .8rem;
    font-weight: 500;
}

.gp-chip-activo[b-d7qq9guufe] {
    background: var(--gp-verde-suave);
    border-color: #a3cfbb;
    color: #0f5132;
}

.gp-chip-inactivo[b-d7qq9guufe] {
    background: #f1f3f5;
    border-color: var(--gp-borde);
    color: var(--gp-texto-tenue);
}

.gp-acciones[b-d7qq9guufe] {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── Estados vacío y de carga ─────────────────────────────────────────── */

.gp-vacio[b-d7qq9guufe],
.gp-cargando[b-d7qq9guufe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--gp-borde);
    border-radius: 12px;
    background: var(--gp-fondo-suave);
    color: var(--gp-texto-tenue);
    text-align: center;
}

.gp-vacio i[b-d7qq9guufe] {
    font-size: 2.5rem;
    color: #ced4da;
}

.gp-vacio-titulo[b-d7qq9guufe] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #495057;
}

.gp-vacio p[b-d7qq9guufe] {
    margin: 0;
    font-size: .9rem;
}

/* ── Lista de preguntas ───────────────────────────────────────────────── */

.gp-lista[b-d7qq9guufe] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.gp-pregunta[b-d7qq9guufe] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--gp-borde);
    border-left: 4px solid var(--gp-naranja);
    border-radius: 10px;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.gp-pregunta:hover[b-d7qq9guufe] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.gp-orden[b-d7qq9guufe] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--gp-naranja-suave);
    color: var(--gp-naranja);
    font-weight: 700;
    font-size: .9rem;
}

.gp-cuerpo[b-d7qq9guufe] {
    flex: 1 1 auto;
    min-width: 0;
}

.gp-texto[b-d7qq9guufe] {
    margin: 0 0 .7rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Las opciones se ven enteras a propósito: revisar cuál está marcada como correcta es
   justo para lo que se entra aquí, y un recuento ("4 opciones") no dejaba comprobarlo. */
.gp-opciones[b-d7qq9guufe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gp-opcion[b-d7qq9guufe] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem .6rem;
    border: 1px solid var(--gp-borde-suave);
    border-radius: 6px;
    background: var(--gp-fondo-suave);
    color: #495057;
    font-size: .85rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.gp-opcion.es-correcta[b-d7qq9guufe] {
    border-color: #a3cfbb;
    background: var(--gp-verde-suave);
    color: #0f5132;
    font-weight: 500;
}

.gp-opcion-letra[b-d7qq9guufe] {
    flex-shrink: 0;
    font-weight: 700;
    font-size: .75rem;
    opacity: .75;
}

.gp-opcion.es-correcta .gp-opcion-letra[b-d7qq9guufe] {
    opacity: 1;
    color: var(--gp-verde);
}

.gp-sin-correcta[b-d7qq9guufe] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: #fff3cd;
    color: #664d03;
    font-size: .78rem;
    font-weight: 600;
}

.gp-lateral[b-d7qq9guufe] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
}

.gp-tiempo[b-d7qq9guufe] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--gp-texto-tenue);
    font-size: .8rem;
    white-space: nowrap;
}

/* ── Modal ────────────────────────────────────────────────────────────── */

.gp-modal[b-d7qq9guufe] {
    background-color: rgba(0, 0, 0, .5);
}

.gp-modal .modal-header[b-d7qq9guufe] {
    border-bottom: 2px solid var(--gp-naranja);
}

.gp-etiqueta[b-d7qq9guufe] {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .9rem;
}

.gp-ayuda[b-d7qq9guufe] {
    display: block;
    margin-top: .3rem;
    color: var(--gp-texto-tenue);
    font-size: .8rem;
}

/* Fila de opción del formulario. La letra es el botón de "esta es la correcta": el radio
   suelto que había antes no decía en ningún sitio para qué servía. */
.gp-fila-opcion[b-d7qq9guufe] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color .15s ease, border-color .15s ease;
}

.gp-fila-opcion + .gp-fila-opcion[b-d7qq9guufe] {
    margin-top: .4rem;
}

.gp-fila-opcion.es-correcta[b-d7qq9guufe] {
    border-color: #a3cfbb;
    background: var(--gp-verde-suave);
}

.gp-marca[b-d7qq9guufe] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border: 1px solid var(--gp-borde);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.gp-marca:hover[b-d7qq9guufe] {
    border-color: var(--gp-verde);
}

.gp-fila-opcion.es-correcta .gp-marca[b-d7qq9guufe] {
    border-color: var(--gp-verde);
    background: var(--gp-verde);
    color: #fff;
}

.gp-marca-letra[b-d7qq9guufe] {
    font-weight: 700;
    font-size: .85rem;
    min-width: .7rem;
    text-align: center;
}

.gp-marca input[b-d7qq9guufe] {
    margin: 0;
    cursor: pointer;
}

/* ── Pantallas estrechas ──────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .gp-pregunta[b-d7qq9guufe] {
        flex-wrap: wrap;
    }

    .gp-lateral[b-d7qq9guufe] {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        padding-top: .5rem;
        border-top: 1px solid var(--gp-borde-suave);
    }

    .gp-acciones[b-d7qq9guufe] {
        width: 100%;
    }

    .gp-acciones .btn[b-d7qq9guufe] {
        flex: 1 1 auto;
    }
}