/* =====================================================================
   PALETA MKS SMART LOGISTICS
   Colores tomados directamente del sitio de la empresa. Si algun dia
   cambia la identidad, se cambian AQUI y todo el tablero se acomoda.
   ===================================================================== */
:root{
    /* Verdes: el de la barra del sitio y el del logo */
    --mks-verde:        #61B522;
    --mks-verde-logo:   #78B320;
    --mks-verde-osc:    #27480E;
    --mks-verde-claro:  #8ABD3E;
    --mks-verde-suave:  #EEF7E4;

    /* Azules: el del texto "MKS" y el de los titulos */
    --mks-azul:         #0064A0;
    --mks-azul-osc:     #054F82;
    --mks-azul-prof:    #043A61;
    --mks-azul-suave:   #E6F1F8;

    /* Acentos de apoyo */
    --mks-teal:         #009549;
    --mks-rojo:         #C62828;
    --mks-rojo-suave:   #FDECEC;
    --mks-ambar:        #E08700;
    --mks-ambar-suave:  #FFF6E5;

    /* Neutros */
    --mks-tinta:        #1D2534;
    --mks-gris:         #5B6577;
    --mks-gris-claro:   #98A2B3;
    --mks-linea:        #E6EAF1;
    --mks-fondo:        #F5F8FC;
}

body{
    background:#f5f7fb;
    font-family:'Segoe UI',sans-serif;
    color:#2b3038;
}

.sidebar{
    width:260px;
    height:100dvh;
    position:fixed;
    inset:0 auto 0 0;
    z-index:1030;
    background:var(--mks-azul-prof);
    color:white;
    display:flex;
    flex-direction:column;
    padding:24px 14px 18px;
    box-shadow:8px 0 24px rgba(20,30,60,.08);
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:0 12px 26px;
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:.02em;
}

.sidebar-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#e10600;
    color:#fff;
}

.sidebar-brand-muted{ color:#aeb9d0; font-weight:500; }
.sidebar-nav{ flex:1; }
.sidebar-section-label{
    padding:18px 13px 8px;
    color:#8290ad;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.sidebar a{
    display:block;
    color:#d7deec;
    padding:12px 13px;
    margin:3px 0;
    border-radius:9px;
    text-decoration:none;
    transition:background .2s ease, color .2s ease, transform .2s ease;
    font-size:.92rem;
}

.sidebar a i{
    width:24px;
    margin-right:8px;
    color:#94a3c2;
}

.sidebar a:hover,
.sidebar a.active{
    background:var(--mks-azul-osc);
    color:#fff;
    transform:translateX(2px);
}

.sidebar a.active i{ color:#ff625e; }
.sidebar-footer{
    display:flex;
    align-items:center;
    gap:8px;
    padding:16px 13px 0;
    border-top:1px solid rgba(255,255,255,.1);
    color:#aeb9d0;
    font-size:.78rem;
}
.sidebar-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#43d17b;
    box-shadow:0 0 0 4px rgba(67,209,123,.12);
}

.main{
    margin-left:260px;
    padding:34px 40px;
}

.sidebar-toggle,
.sidebar-backdrop{ display:none; }

.main .row{
    margin-bottom:1.5rem;
}
.main .row:last-child{
    margin-bottom:0;
}







.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    margin-bottom:1.75rem;
}

.dashboard-header h1{
    font-weight:700;
}



.dashboard-card{
    border:none;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(20,30,60,.06);
}

.dashboard-card .card-header{
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.05);
    padding:1.1rem 1.4rem;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
}

.dashboard-card .card-header strong{
    font-size:1.02rem;
}

.dashboard-card .card-body{
    padding:1.6rem;
}


.dashboard-card .card-body canvas{
    max-height:340px;
}
































.sales-goal-percent { color: var(--mks-verde); font-size: 1.5rem; }
.sales-goal-gauge { height: 18px; background: #e8edf2; border-radius: 99px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.sales-goal-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mks-ambar), var(--mks-verde)); transition: width .5s ease; }

@media (max-width: 991.98px) {
    .dashboard-header{ flex-direction:column; align-items:stretch; }
}

@media (max-width: 767.98px) {
    .main{ margin-left:0; padding:72px 20px 20px; }
    .sidebar{
        transform:translateX(-100%);
        transition:transform .25s ease;
    }
    .sidebar.is-open{ transform:translateX(0); }
    .sidebar-toggle{
        display:grid;
        place-items:center;
        position:fixed;
        top:16px;
        left:16px;
        z-index:1040;
        width:42px;
        height:42px;
        border:0;
        border-radius:10px;
        background:var(--mks-azul-prof);
        color:#fff;
        font-size:1.35rem;
        box-shadow:0 5px 14px rgba(20,30,60,.18);
    }
    .sidebar-backdrop.is-visible{
        display:block;
        position:fixed;
        inset:0;
        z-index:1020;
        background:rgba(8,15,30,.42);
    }
}

/* ===== Ranking ===== */
.f1-ranking { background:#fff; color:#111; border:1px solid #eef0f4; border-radius:18px; box-shadow:0 6px 18px rgba(20,30,60,.06); overflow:hidden; }
.f1-ranking-header { display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid #f0f2f5; }
.f1-ranking-header::before { content:""; width:4px; height:26px; background:#e10600; border-radius:3px; }
.f1-round { font-weight:800; letter-spacing:.5px; font-size:1.05rem; }
.f1-sub { color:#6b7280; font-size:.8rem; }

.f1-podium { display:flex; justify-content:center; align-items:flex-end; gap:36px; padding:30px 16px 22px; flex-wrap:wrap; }
.f1-spot { text-align:center; width:130px; }
.f1-spot--1 { transform:translateY(-14px); }
.f1-pos { font-size:1.6rem; font-weight:900; color:#9ca3af; line-height:1; margin-bottom:6px; }
.f1-spot--1 .f1-pos { color:#f5b301; font-size:2rem; }
.f1-spot--2 .f1-pos { color:#9ca3af; }
.f1-spot--3 .f1-pos { color:#cd7f32; }
.f1-avatar { position:relative; width:72px; height:72px; margin:6px auto; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--c,var(--mks-verde)); border:2px solid #eef0f4; }
.f1-spot--1 .f1-avatar { width:88px; height:88px; border:3px solid #f5b301; }
.f1-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.f1-initials { font-size:1.25rem; font-weight:800; color:#fff; }
.f1-spot--1 .f1-initials { font-size:1.5rem; }
.f1-name { font-weight:700; margin-top:8px; font-size:.92rem; }
.f1-points { color:#16a34a; font-weight:800; font-size:.9rem; margin-top:2px; }

.f1-list { padding:8px 20px 22px; max-width:640px; margin:0 auto; }
.f1-list-row { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; }
.f1-list-row:nth-child(odd) { background:#f7f9fc; }
.f1-list-pos { width:22px; font-weight:800; color:#e10600; text-align:center; }
.f1-avatar--sm { width:40px; height:40px; border-radius:10px; border-width:1px; margin:0; }
.f1-avatar--sm .f1-initials { font-size:.9rem; }
.f1-list-name { flex:1; font-weight:600; }
.f1-list-points { color:#16a34a; font-weight:700; }
/* =====================================================================
   AGREGADO: estilos del tablero autoexplicativo
   (guia de lectura, tarjetas KPI, semaforo, pastillas y tablas)
   ===================================================================== */

/* ---- Barra superior ---- */
.topbar{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    border-radius:18px;
    padding:1rem 1.4rem;
    box-shadow:0 6px 18px rgba(20,30,60,.06);
}
.topbar-fecha{
    color:#5b6577;
    font-size:.86rem;
    background:#f2f5fa;
    border-radius:99px;
    padding:.45rem 1rem;
    text-transform:capitalize;
}

/* ---- Titulos de seccion numerados ---- */
.seccion-titulo{
    display:flex;
    align-items:center;
    gap:.6rem;
    font-size:1.15rem;
    font-weight:800;
    margin:0 0 .25rem;
    color:#1d2534;
}
.seccion-num{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:9px;
    background:var(--mks-azul-prof);
    color:#fff;
    font-size:.85rem;
    font-weight:800;
    flex:0 0 auto;
}
.seccion-ayuda{
    color:#6b7280;
    font-size:.88rem;
    margin:0 0 1rem;
    max-width:70ch;
}

/* ---- Guia de lectura ---- */
.guia{
    background:#f4f8ff;
    border:1px solid #dbe6f8;
    border-radius:14px;
    padding:1.1rem 1.2rem;
}
.guia-bloque{
    background:#fff;
    border-radius:11px;
    padding:.85rem 1rem;
    height:100%;
    border:1px solid #e6edf7;
    font-size:.87rem;
    color:#414a5c;
}
.guia-titulo{
    display:block;
    font-weight:800;
    color:var(--mks-azul-prof);
    margin-bottom:.35rem;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.03em;
}

/* ---- Tarjetas KPI ---- */
.card-kpi{
    border:none;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(20,30,60,.06);
    border-left:5px solid var(--mks-verde);
}
.card-kpi.kpi-verde  { border-left-color:var(--mks-verde); }
.card-kpi.kpi-azul   { border-left-color:var(--mks-azul); }
.card-kpi.kpi-morado { border-left-color:#6f42c1; }
.card-kpi.kpi-naranja{ border-left-color:var(--mks-ambar); }
.card-kpi.kpi-gris   { border-left-color:#98a2b3; }

.kpi-titulo{ color:#6b7280; letter-spacing:.03em; font-size:.72rem; line-height:1.2; }
.kpi-icono{ font-size:1.15rem; color:#c3ccdb; }
.kpi-valor{ font-size:1.75rem; font-weight:800; margin:.5rem 0 .1rem; color:#1d2534; line-height:1.1; }
.kpi-detalle{ font-size:.82rem; color:#4b5563; font-weight:600; }
.kpi-explicacion{
    font-size:.78rem;
    color:#7b8494;
    margin-top:.6rem;
    padding-top:.6rem;
    border-top:1px dashed #e6eaf1;
    line-height:1.45;
}

/* ---- Focos del semaforo ---- */
.foco{
    display:block;
    width:100%;
    text-align:left;
    background:#fff;
    border:1px solid #e6eaf1;
    border-top:4px solid #98a2b3;
    border-radius:16px;
    padding:1rem 1.1rem;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 6px 18px rgba(20,30,60,.05);
    color:inherit;
}
.foco:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,30,60,.12); }
.foco-azul    { border-top-color:var(--mks-azul); }
.foco-gris    { border-top-color:#98a2b3; }
.foco-amarillo{ border-top-color:var(--mks-ambar); }
.foco-rojo    { border-top-color:var(--mks-rojo); }

.foco-titulo{ font-weight:800; font-size:.92rem; color:#1d2534; }
.foco-regla{
    font-size:.68rem;
    background:#f2f5fa;
    color:#5b6577;
    border-radius:99px;
    padding:.2rem .55rem;
    white-space:nowrap;
}
.foco-numero{ font-size:2.1rem; font-weight:900; line-height:1.1; margin:.35rem 0 0; }
.foco-azul .foco-numero    { color:var(--mks-azul); }
.foco-gris .foco-numero    { color:#6b7280; }
.foco-amarillo .foco-numero{ color:var(--mks-ambar); }
.foco-rojo .foco-numero    { color:var(--mks-rojo); }
.foco-monto{ font-size:.82rem; font-weight:700; color:#4b5563; }
.foco-texto{ font-size:.78rem; color:#7b8494; margin-top:.55rem; line-height:1.45; }

/* ---- Notas informativas ---- */
.nota-ok, .nota-gris{
    border-radius:14px;
    padding:.9rem 1.1rem;
    font-size:.85rem;
    height:100%;
}
.nota-ok  { background:var(--mks-verde-suave); border:1px solid #cdecd9; color:var(--mks-verde-osc); }
.nota-gris{ background:#f5f7fb; border:1px solid #e3e8f0; color:#5b6577; }

/* ---- Pastillas de estado ---- */
.pastilla{
    display:inline-block;
    font-size:.7rem;
    font-weight:700;
    border-radius:99px;
    padding:.2rem .6rem;
    white-space:nowrap;
    line-height:1.4;
}
.p-verde   { background:var(--mks-verde-suave); color:var(--mks-verde-osc); }
.p-azul    { background:var(--mks-azul-suave); color:var(--mks-azul-osc); }
.p-amarillo{ background:var(--mks-ambar-suave); color:var(--mks-ambar); }
.p-rojo    { background:var(--mks-rojo-suave); color:var(--mks-rojo); }
.p-gris    { background:#eef1f6; color:#5b6577; }

/* ---- Frase resumen del Inicio ---- */
.resumen-frase{
    background:var(--mks-azul-prof);
    color:#e8eefc;
    border-radius:16px;
    padding:1rem 1.3rem;
    font-size:.95rem;
    line-height:1.6;
}
.resumen-frase strong{ color:#fff; }

/* ---- Tablas con scroll ---- */
.tabla-alta { max-height:520px; overflow-y:auto; }
.tabla-media{ max-height:400px; overflow-y:auto; }
.tabla-alta thead th, .tabla-media thead th{ z-index:2; }

/* En pantallas chicas las tarjetas se apilan y las tablas se deslizan solas. */
@media (max-width: 575.98px){
    .kpi-valor{ font-size:1.5rem; }
    .foco-numero{ font-size:1.8rem; }
    .topbar{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   AGREGADO: pantalla de acceso y usuario en la barra superior
   ===================================================================== */

/* ---- Login / sin permiso ---- */
.pantalla-acceso{
    min-height:100dvh;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--mks-azul-prof) 0%,var(--mks-azul-osc) 100%);
    padding:24px;
}
.acceso-caja{ width:100%; max-width:420px; }
.acceso-tarjeta{
    background:#fff;
    border-radius:20px;
    padding:2rem 2rem 1.75rem;
    box-shadow:0 18px 48px rgba(8,15,30,.35);
}
.acceso-marca{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding-bottom:1.25rem;
    margin-bottom:1.25rem;
    border-bottom:1px solid #eef1f6;
}
.acceso-nombre{ font-weight:800; font-size:1.05rem; line-height:1.2; }
.acceso-sub{ font-size:.75rem; color:#8b95a6; }

/* ---- Usuario en la barra superior ---- */
.topbar-usuario{
    display:flex;
    align-items:center;
    gap:.6rem;
    background:#f2f5fa;
    border:0;
    border-radius:99px;
    padding:.35rem .85rem .35rem .35rem;
}
.topbar-usuario:hover{ background:#e6ecf6; }
.topbar-avatar{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--mks-azul-prof);
    color:#fff;
    font-weight:800;
    font-size:.8rem;
    flex:0 0 auto;
}
.topbar-nombre{ font-size:.84rem; font-weight:700; line-height:1.15; color:#1d2534; }
.topbar-rol{ font-size:.68rem; color:#7b8494; text-transform:uppercase; letter-spacing:.04em; }

/* ---- Bloque de carga manual (solo admins) ---- */
.carga-admin{
    background:#fff8f0;
    border:1px dashed #f0c48a;
    border-radius:12px;
    padding:.9rem 1rem;
}

/* =====================================================================
   AGREGADO: tarjetas comparativas de linea de negocio
   ===================================================================== */
.linea-negocio{
    border:none;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(20,30,60,.06);
    border-top:4px solid var(--mks-azul-prof);
}
.linea-nombre{
    display:block;
    font-weight:800;
    font-size:1.05rem;
    color:#1d2534;
    line-height:1.2;
}
.linea-clave{
    display:inline-block;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.06em;
    color:#8b95a6;
    background:#f2f5fa;
    border-radius:99px;
    padding:.12rem .5rem;
    margin-top:.3rem;
}
.linea-ticket{
    font-size:1.9rem;
    font-weight:900;
    color:var(--mks-verde);
    line-height:1.1;
    margin-top:.9rem;
}
.linea-ticket-pie{
    font-size:.75rem;
    color:#7b8494;
    margin-bottom:.9rem;
}
.linea-datos{
    display:grid;
    grid-template-columns:1fr auto;
    gap:.35rem .75rem;
    margin:0;
    padding-top:.85rem;
    border-top:1px dashed #e6eaf1;
    font-size:.82rem;
}
.linea-datos dt{ color:#6b7280; font-weight:500; }
.linea-datos dd{ margin:0; text-align:right; font-weight:700; color:#1d2534; }

/* Puntos de color que amarran cada renglon con su barra en la grafica */
.punto{
    display:inline-block;
    width:9px; height:9px;
    border-radius:50%;
    margin-right:.45rem;
    vertical-align:middle;
}
.punto-azul { background:var(--mks-azul); }
.punto-rojo { background:var(--mks-rojo); }
.punto-verde{ background:var(--mks-verde); }

.card-kpi.kpi-rojo{ border-left-color:var(--mks-rojo); }
.linea-negocio .card-header{ background:#fff; border-bottom:1px solid #eef1f6; }

/* =====================================================================
   AGREGADO: pantalla de Direccion
   ===================================================================== */
.ticket-general{
    border:none;
    border-radius:20px;
    background:linear-gradient(135deg,var(--mks-azul-prof) 0%,var(--mks-azul-osc) 100%);
    color:#e8eefc;
    box-shadow:0 10px 28px rgba(8,15,30,.18);
}
.ticket-general-etiqueta{
    display:block;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#9fb0d4;
    font-weight:700;
}
.ticket-general-valor{
    font-size:3rem;
    font-weight:900;
    line-height:1.05;
    margin:.35rem 0 .4rem;
    color:#fff;
}
.ticket-general-formula{
    display:block;
    font-size:.78rem;
    color:#9fb0d4;
    line-height:1.5;
}
.ticket-general .small.text-muted{ color:#9fb0d4 !important; }
.ticket-general .small.text-muted strong{ color:#fff; }

.mini-dato{
    background:rgba(255,255,255,.08);
    border-radius:12px;
    padding:.7rem .85rem;
    height:100%;
}
.mini-etiqueta{
    display:block;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#9fb0d4;
    margin-bottom:.2rem;
}
.mini-valor{
    display:block;
    font-size:1.02rem;
    font-weight:800;
    color:#fff;
}
.mini-valor.text-danger { color:#ff9aa4 !important; }
.mini-valor.text-success{ color:var(--mks-verde-claro) !important; }

@media (max-width: 575.98px){
    .ticket-general-valor{ font-size:2.2rem; }
}

/* ---- Bloque de estimados: gris a proposito, para que no compita con lo real ---- */
.estimados-card{
    border:1px dashed #c3ccdb;
    border-radius:16px;
    background:#f7f9fc;
    box-shadow:none;
}
.est-etiqueta{
    display:block;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#8b95a6;
    font-weight:700;
}
.est-valor{
    font-size:1.5rem;
    font-weight:800;
    color:#5b6577;
    line-height:1.2;
    margin:.2rem 0;
}
.est-pie{ font-size:.75rem; color:#8b95a6; }

/* De que columna del Excel sale cada tarjeta */
.kpi-columna{
    display:inline-block;
    font-size:.63rem;
    color:#9aa4b4;
    letter-spacing:.02em;
    margin-top:.15rem;
}

/* Etiqueta chiquita con la letra de la columna del Excel */
.col-ref{
    display:inline-block;
    font-size:.6rem;
    font-weight:700;
    color:#9aa4b4;
    background:#f2f5fa;
    border-radius:4px;
    padding:.05rem .3rem;
    margin-left:.25rem;
}
.linea-datos dt.separador{
    margin-top:.5rem;
    padding-top:.5rem;
    border-top:1px dashed #e6eaf1;
}
.linea-datos dt.separador + dd{
    margin-top:.5rem;
    padding-top:.5rem;
    border-top:1px dashed #e6eaf1;
}

/* =====================================================================
   AGREGADO: barras de avance de metas comerciales
   ===================================================================== */
.tarjeta-meta{ transition:box-shadow .15s ease; }
.tarjeta-meta-ok{ box-shadow:0 0 0 2px var(--mks-verde) inset !important; }

.meta-fila{ margin-bottom:.85rem; }
.meta-fila:last-child{ margin-bottom:0; }

.meta-encabezado{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:.3rem;
}
.meta-nombre{ font-size:.82rem; font-weight:600; color:#414a5c; }
.meta-nombre i{ margin-right:.35rem; color:#98a2b3; }
.meta-conteo{ font-size:1rem; font-weight:800; color:#1d2534; }
.meta-de{ font-size:.75rem; font-weight:600; color:#98a2b3; }

.meta-barra{
    height:9px;
    background:#eef1f6;
    border-radius:99px;
    overflow:hidden;
}
.meta-relleno{
    height:100%;
    border-radius:99px;
    transition:width .5s ease;
}
.meta-azul    { background:linear-gradient(90deg,var(--mks-azul),var(--mks-azul)); }
.meta-verde   { background:linear-gradient(90deg,var(--mks-verde),var(--mks-verde-claro)); }
.meta-amarillo{ background:linear-gradient(90deg,var(--mks-ambar),#ffc94d); }
.meta-ok      { background:linear-gradient(90deg,var(--mks-verde),var(--mks-verde-claro)); }

.meta-pie{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:.25rem;
    font-size:.72rem;
}
.meta-porcentaje{ font-weight:700; color:#5b6577; }
.meta-falta{ color:#98a2b3; }
.meta-listo{ color:var(--mks-verde); font-weight:700; }
.meta-listo i{ margin-right:.2rem; }
/* De que columna del Excel sale cada tarjeta */
.kpi-columna{
    display:inline-block;
    font-size:.63rem;
    color:#9aa4b4;
    letter-spacing:.02em;
    margin-top:.15rem;
}

/* Origen del archivo, para saber SIEMPRE que se esta leyendo */
.archivo-info{ line-height:1.5; }
.archivo-ruta{
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:.68rem;
    color:#adb5bd;
    margin-top:.15rem;
    word-break:break-all;
}

/* Nota lateral de departamentos (Overseas y Casa) */
.nota-departamentos{
    background:#f7f9fc;
    border:1px dashed #c3ccdb;
    border-radius:14px;
    padding:1rem 1.1rem;
    height:100%;
}
.nota-dep-titulo{
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#8b95a6;
    display:block;
    margin-bottom:.6rem;
}
.nota-dep-fila{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:.4rem 0;
    border-bottom:1px solid #eef1f6;
    font-size:.85rem;
}
.nota-dep-fila:last-of-type{ border-bottom:0; }
.nota-dep-nombre{ font-weight:700; color:#414a5c; }
.nota-dep-ops{ font-size:.7rem; color:#98a2b3; display:block; font-weight:400; }
.nota-dep-monto{ font-weight:800; color:#5b6577; white-space:nowrap; }
.nota-dep-pie{ font-size:.74rem; color:#98a2b3; margin-top:.7rem; line-height:1.5; }

.btn-sin-asignar{
    border:1px solid #f0c48a;
    background:#fff8f0;
    color:var(--mks-ambar);
    border-radius:10px;
    padding:.5rem .8rem;
    font-size:.8rem;
    font-weight:600;
    width:100%;
    text-align:left;
    margin-top:.7rem;
}
.btn-sin-asignar:hover{ background:#ffefdc; }
/* =====================================================================
   AGREGADO: pantalla de Comisiones
   ===================================================================== */
.comision-card{
    border:none;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(20,30,60,.06);
    border-left:5px solid #c3ccdb;
}
.comision-card.comision-ok{ border-left-color:var(--mks-verde); }
.comision-card .card-header{ background:#fff; border-bottom:1px solid #eef1f6; }

.comision-monto{ font-size:1.6rem; font-weight:900; line-height:1.1; }
.comision-de{ font-size:.7rem; color:#98a2b3; }

.prioridad{
    background:#f7f9fc;
    border:1px solid #e6eaf1;
    border-radius:12px;
    padding:.85rem 1rem;
    height:100%;
}
.prioridad-sindatos{ border-style:dashed; opacity:.75; }

.prioridad-clave{
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.06em;
    color:#fff;
    background:var(--mks-azul-prof);
    border-radius:5px;
    padding:.1rem .4rem;
}
.prioridad-bono{ font-size:.66rem; color:#8b95a6; text-align:right; }
.prioridad-nombre{ font-weight:800; font-size:.9rem; color:#1d2534; margin-top:.5rem; }
.prioridad-desc{ font-size:.74rem; color:#8b95a6; margin:.2rem 0 .7rem; line-height:1.4; }

.sin-datos{
    font-size:.72rem;
    color:#8b95a6;
    background:#eef1f6;
    border-radius:8px;
    padding:.5rem .6rem;
    line-height:1.45;
}

.bono-caja{
    background:#f2f5fa;
    border:1px solid #e6eaf1;
    border-radius:10px;
    padding:.6rem .8rem;
    text-align:center;
}
.bono-caja.bono-ganado{ background:var(--mks-verde-suave); border-color:#cdecd9; }
.bono-etiqueta{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#8b95a6; }
.bono-valor{ display:block; font-size:1.05rem; font-weight:800; color:#1d2534; margin-top:.15rem; }
.bono-ganado .bono-valor{ color:var(--mks-verde); }

/* =====================================================================
   AGREGADO: filtro por modo de transporte
   ===================================================================== */
.filtro-modo{
    background:#f7f9fc;
    border:1px solid #e6eaf1;
    border-radius:14px;
    padding:.85rem 1rem;
    margin-top:1rem;
}
.filtro-modo-etiqueta{
    display:block;
    font-size:.68rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#8b95a6;
    margin-bottom:.55rem;
}
.filtro-modo-botones{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}
.chip-modo{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background:#fff;
    border:1px solid #dbe2ec;
    border-radius:99px;
    padding:.4rem .85rem;
    font-size:.82rem;
    font-weight:600;
    color:#5b6577;
    text-decoration:none;
    transition:all .15s ease;
}
.chip-modo:hover{ border-color:var(--mks-azul); color:var(--mks-azul); }
.chip-modo i{ font-size:.95rem; }
.chip-modo.activo{
    background:var(--mks-azul-prof);
    border-color:var(--mks-azul-prof);
    color:#fff;
}
.chip-conteo{
    background:#eef1f6;
    color:#5b6577;
    border-radius:99px;
    padding:.05rem .45rem;
    font-size:.7rem;
    font-weight:800;
}
.chip-modo.activo .chip-conteo{ background:rgba(255,255,255,.2); color:#fff; }

.filtro-modo-nota{
    font-size:.72rem;
    color:#98a2b3;
    margin-top:.6rem;
    line-height:1.5;
}
.filtro-modo-nota code{
    background:#eef1f6;
    color:#5b6577;
    border-radius:4px;
    padding:.05rem .3rem;
    font-size:.7rem;
}

/* =====================================================================
   AGREGADO: pantalla de Hit Rate
   ===================================================================== */
.hr-barra{
    height:8px;
    background:var(--mks-linea);
    border-radius:99px;
    overflow:hidden;
    margin-bottom:.25rem;
}
.hr-relleno{ height:100%; border-radius:99px; transition:width .5s ease; }
.hr-verde { background:linear-gradient(90deg, var(--mks-verde), var(--mks-verde-claro)); }
.hr-ambar { background:linear-gradient(90deg, var(--mks-ambar), #FFC94D); }
.hr-rojo  { background:linear-gradient(90deg, var(--mks-rojo), #E57373); }

.hr-pct{ font-size:.78rem; font-weight:800; }
.hr-texto-verde{ color:var(--mks-verde); }
.hr-texto-ambar{ color:var(--mks-ambar); }
.hr-texto-rojo { color:var(--mks-rojo); }