/* ============================================================================
   Supplemento del tema. TODO lo visual base (sidebar, navbar, cards, tablas,
   botones, modales, badges) viene de Content/Modernize.css copiado del proyecto
   original — aquí solo van piezas que ese tema no cubre, y SIEMPRE usando sus
   variables --mod-* para no inventar colores.
   ============================================================================ */

/* ── Títulos de sección del menú lateral ─────────────────────────────────── */
#sidebar ul li.menu-titulo {
    padding: 12px 18px 4px;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .45);
    font-weight: 700;
}

#sidebar.active ul li.menu-titulo,
#sidebar.active ul li a em { display: none; }

/* ── Aviso al pie del menú lateral (como el Site.Master original) ─────────── */
#sidebar .sidebar-aviso {
    margin: 16px 16px 26px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .72rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .4);
}
#sidebar.active .sidebar-aviso { display: none; }

/* ── Menú abierto en móvil ───────────────────────────────────────────────────
   Abajo de 992 px el menú se desliza ENCIMA del contenido (ver el @media de
   Modernize.css). Sin esto, arrastrar sobre el menú movía la página de atrás:
   se cerraba el dedo en el aire y el contenido se había ido de lugar.
   La clase la pone y la quita js/Inicio.js. */
body.sidebar-abierto { overflow: hidden; }

/* El menú es scrolleable por su cuenta y en móvil es más largo que la pantalla,
   así que el arrastre tiene que quedarse dentro de él. */
@media (max-width: 992px) {
    #sidebar { overscroll-behavior: contain; }
}

/* ── Encabezado de página ────────────────────────────────────────────────── */
.bc-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mod-text);
    margin: 0 0 .2rem;
}

.bc-page-sub {
    color: var(--mod-text-muted);
    font-size: .88rem;
    margin-bottom: 1.15rem;
}

/* ── KPIs ────────────────────────────────────────────────────────────────── */
.bc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.bc-kpi {
    background: var(--mod-card);
    border: 1px solid var(--mod-border);
    border-radius: var(--mod-radius);
    box-shadow: var(--mod-shadow-sm);
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--mod-primary);
}

.bc-kpi-valor {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mod-primary);
}

.bc-kpi-label {
    font-size: .72rem;
    color: var(--mod-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: .15rem;
}

/* ── Tarjetas de empresa ─────────────────────────────────────────────────── */
.bc-empresas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}

.bc-empresa-card {
    background: var(--mod-card);
    border: 1px solid var(--mod-border);
    border-radius: var(--mod-radius);
    box-shadow: var(--mod-shadow-sm);
    overflow: hidden;
    transition: var(--mod-transition);
}

.bc-empresa-card:hover { box-shadow: var(--mod-shadow); }

.bc-empresa-card .bc-barra {
    height: 5px;
    background: linear-gradient(135deg, var(--mod-primary) 0%, var(--mod-primary-light) 100%);
}

.bc-empresa-card .bc-body { padding: 1rem 1.15rem; }

.bc-empresa-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    color: var(--mod-text);
}

.bc-empresa-card .bc-rfc {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    color: var(--mod-text-muted);
}

.bc-empresa-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    margin: .85rem 0 0;
    font-size: .82rem;
}

.bc-empresa-card dt { color: var(--mod-text-muted); font-weight: 500; }
.bc-empresa-card dd { margin: 0; text-align: right; }

/* ── Contenedor tipo card (mismo look que .card de Modernize, con padding) ─ */
.bc-card {
    border: 1px solid var(--mod-border);
    border-radius: var(--mod-radius-lg);
    box-shadow: var(--mod-shadow-sm);
    background: var(--mod-card);
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
}

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.bc-vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--mod-text-muted);
}

.bc-vacio > i:first-child {
    font-size: 2.2rem;
    opacity: .3;
    display: block;
    margin-bottom: .85rem;
    color: var(--mod-primary);
}

/* ── Login ───────────────────────────────────────────────────────────────── */
/* Fondo del login.
   Antes traía FondoBolcorona.jpeg, que es la imagen de PLATINADORA — otra empresa.
   Se sustituyó por uno propio de Branch, hecho en CSS: el azul del logo y su mismo
   motivo (el árbol de circuito) en un patrón SVG embebido. Al no ser un archivo,
   no hay binario que mantener ni que vuelva a colarse la marca equivocada. */
.bc-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #10306e;
    background-image:
        /* Halo detrás de la tarjeta, para que no se pierda sobre el patrón. */
        radial-gradient(circle at 50% 45%, rgba(72, 124, 194, .55) 0%, rgba(16, 48, 110, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' opacity='.07'%3E%3Cpath d='M160 286V150'/%3E%3Cpath d='M160 206l-52-52V108'/%3E%3Cpath d='M160 178l44-44V98'/%3E%3Cpath d='M160 150l-30-30V84'/%3E%3Cpath d='M160 130l22-22V90'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.09'%3E%3Ccircle cx='108' cy='102' r='7'/%3E%3Ccircle cx='204' cy='92' r='7'/%3E%3Ccircle cx='130' cy='78' r='7'/%3E%3Ccircle cx='182' cy='84' r='5.5'/%3E%3Ccircle cx='160' cy='126' r='10'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, #0c2455 0%, #163d8a 55%, #1e4fa0 100%);

    background-repeat: no-repeat, repeat, no-repeat;
    background-size: cover, 320px 320px, cover;
    background-position: center, center, center;
}

.bc-login-box {
    background: #fff;
    border-radius: var(--mod-radius-lg);
    padding: 2.25rem 2rem;
    width: 380px;
    box-shadow: var(--mod-shadow-xl);
}

.bc-login-logo {
    display: block;
    max-width: 190px;
    margin: 0 auto 1.5rem;
}

/* ============================================================================
   Badge de empresa activa del navbar.
   Copiado TAL CUAL del bloque <style> inline de Site.Master (líneas 805-877):
   esos estilos no viven en Modernize.css, por eso hay que traerlos aparte.
   ============================================================================ */
/* Badge empresa — caso simple (1 empresa) */
.emp-nav-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #143c84 0%, #3a6eb2 100%);
    color: #fff !important;
    font-size: .76rem;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(20,60,132,.22);
    letter-spacing: .01em;
    white-space: nowrap;
    border: none;
    cursor: default;
}
.emp-nav-badge, .emp-nav-badge * { color: #fff !important; }
/* Badge solo sucursal (sin empresa vinculada) */
.emp-nav-badge.emp-nav-sucursal {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 2px 8px rgba(15,118,110,.22);
}
/* Badge múltiples empresas — es un dropdown-toggle */
.emp-nav-badge.emp-nav-multi {
    cursor: pointer;
    transition: opacity .15s;
}
.emp-nav-badge.emp-nav-multi:hover { opacity: .88; }
.emp-nav-badge.emp-nav-multi::after { display: none; } /* quitar flecha BS4 */

/* Dropdown panel */
.emp-nav-dropdown {
    min-width: 260px;
    padding: 6px;
    border-radius: 14px !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.13) !important;
    margin-top: 8px !important;
}
.emp-nav-dropdown .emp-nav-drop-header {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    padding: 4px 10px 8px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 4px;
}
.emp-nav-drop-row {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background .12s;
    cursor: default;
}
.emp-nav-drop-row:hover { background: #f1f5f9; }
.emp-nav-drop-suc {
    font-weight: 700;
    font-size: .82rem;
    color: #1a1d23;
}
.emp-nav-drop-emp {
    font-size: .74rem;
    color: #6b7280;
    margin-top: 2px;
}
.emp-nav-drop-emp i { opacity: .65; }

/* ════════════════════════════════════════════════════════════════════════════
   Inicio — gráficas de transferencias entre sucursales.
   Va en site.css y no en Recetas.css porque esa hoja solo la cargan las
   pantallas del recetario, y sus tokens --rc-* viven dentro de .rc.
   ════════════════════════════════════════════════════════════════════════════ */
.tg-cab {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tg-sub { font-size: .85rem; color: var(--mod-text-muted); max-width: 62ch; }

/* Los filtros van en UNA fila arriba de las gráficas, no repartidos por cada una. */
.tg-filtros { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.tg-filtro-lbl {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mod-text-muted);
    margin: 0;
}

.tg-select {
    border: 1px solid var(--mod-border-input);
    border-radius: var(--mod-radius);
    padding: 7px 11px;
    font-size: .83rem;
    background: var(--mod-card);
    color: var(--mod-text);
}

.tg-tabla-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mod-primary);
    background: var(--mod-primary-lighter);
    color: var(--mod-primary);
    border-radius: var(--mod-radius);
    padding: 7px 12px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mod-transition-fast);
}

.tg-tabla-btn:hover { background: var(--mod-primary); color: #fff; }

/* ── Cifras ──────────────────────────────────────────────────────────────────*/
.tg-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tg-cifra {
    border: 1px solid var(--mod-border);
    border-radius: var(--mod-radius-lg);
    padding: 13px 15px;
    background: var(--mod-bg);
}

.tg-cifra-v {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mod-text);
}

.tg-cifra-l { font-size: .8rem; font-weight: 700; color: var(--mod-text); margin-top: 3px; }
.tg-cifra-n { font-size: .72rem; color: var(--mod-text-muted); margin-top: 3px; }

.tg-punto { width: 10px; height: 10px; border-radius: var(--mod-radius-pill); flex: none; }

/* ── Gráficas ────────────────────────────────────────────────────────────────*/
.tg-grafica { margin-top: 18px; }

.tg-titulo {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mod-text-muted);
    margin-bottom: 8px;
}

/* Chart.js necesita un contenedor con alto propio para poder ser responsivo. */
.tg-lienzo { position: relative; height: 280px; }

.tg-tabla { margin-top: 16px; border-top: 1px solid var(--mod-border); padding-top: 12px; }
.tg-caption { caption-side: top; font-size: .78rem; color: var(--mod-text-muted); padding: 0 0 6px; }

.tg-vacio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 4px;
    color: var(--mod-text-muted);
    font-size: .88rem;
}

.tg-vacio > i { font-size: 1.3rem; opacity: .35; }

/* ── Transferencias: la receta terminada que viaja como artículo ─────────────*/
.badge-receta {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mod-primary-lighter);
    color: var(--mod-primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}