/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-azwens2l14] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-azwens2l14] {
    flex: 1;
}

.sidebar[b-azwens2l14] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-azwens2l14] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-azwens2l14]  a, .top-row[b-azwens2l14]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-azwens2l14]  a:hover, .top-row[b-azwens2l14]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-azwens2l14]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-azwens2l14] {
        justify-content: space-between;
    }

    .top-row[b-azwens2l14]  a, .top-row[b-azwens2l14]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-azwens2l14] {
        flex-direction: row;
    }

    .sidebar[b-azwens2l14] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-azwens2l14] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-azwens2l14]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-azwens2l14], article[b-azwens2l14] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-lljrwp72mm] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-lljrwp72mm] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-lljrwp72mm] {
    font-size: 1.1rem;
}

.bi[b-lljrwp72mm] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-lljrwp72mm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-lljrwp72mm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-lljrwp72mm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-lljrwp72mm] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-lljrwp72mm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-lljrwp72mm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-lljrwp72mm]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-lljrwp72mm]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-lljrwp72mm]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-lljrwp72mm] {
        display: none;
    }

    .collapse[b-lljrwp72mm] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-lljrwp72mm] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Admin/RegistroVehiculos.razor.rz.scp.css */
.vehdet-titulo[b-a7f1dxa9x8] {
    margin-bottom: 16px;
}

.vehedit-acciones[b-a7f1dxa9x8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.vehedit-guardando[b-a7f1dxa9x8] {
    color: #666;
    font-style: italic;
}

/* Bloque de datos: misma proporción 30% / 70% que Vehiculos/detalle. */
.vehdet-info-grid[b-a7f1dxa9x8] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}

.vehdet-info-col[b-a7f1dxa9x8] {
    flex: 1 1 360px;
}

.vehdet-info-grid > .vehdet-info-col:first-child[b-a7f1dxa9x8] {
    flex: 0 0 calc(30% - 12px);
}

.vehdet-info-grid > .vehdet-info-col:last-child[b-a7f1dxa9x8] {
    flex: 1 1 calc(70% - 12px);
}

.vehdet-dl[b-a7f1dxa9x8] {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 6px;
    column-gap: 8px;
    margin: 0;
    align-items: center;
}

.vehdet-dl dt[b-a7f1dxa9x8] {
    font-weight: bold;
}

.vehdet-dl dd[b-a7f1dxa9x8] {
    margin: 0;
}

.vehdet-fieldset[b-a7f1dxa9x8] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.vehdet-fieldset legend[b-a7f1dxa9x8] {
    width: auto;
    padding: 0 6px;
    font-weight: bold;
    font-size: 14px;
}

.vehdet-check[b-a7f1dxa9x8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 18px;
    font-weight: normal;
}

.vehdet-row[b-a7f1dxa9x8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.vehdet-fieldset--mitad[b-a7f1dxa9x8] {
    flex: 1 1 320px;
}

.vehdet-row > .vehdet-fieldset--mitad:first-child[b-a7f1dxa9x8] {
    flex: 0 0 calc(65% - 8px);
}

.vehdet-row > .vehdet-fieldset--mitad:last-child[b-a7f1dxa9x8] {
    flex: 1 1 calc(30% - 8px);
}

.vehdet-horarios[b-a7f1dxa9x8] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vehdet-horarios .vehdet-fieldset[b-a7f1dxa9x8] {
    flex: 1 1 140px;
    margin-bottom: 0;
    text-align: center;
}

.vehedit-input-corto[b-a7f1dxa9x8] {
    max-width: 140px;
    display: inline-block;
}

/* Montos/cantidades (Rendimiento óptimo, Último odómetro, Carga, Día, Semana, Mes) alineados a
   la derecha; "Centro de costos" usa la misma clase pero es alfanumérico (type="text"), así
   que el selector de atributo evita alinearlo también. */
.vehedit-input-corto[type="number"][b-a7f1dxa9x8] {
    text-align: right;
}

.vehedit-input-hora[b-a7f1dxa9x8] {
    width: 110px;
    display: inline-block;
}

/* Selector de cliente propio del formulario de alta. */
.vehreg-cliente[b-a7f1dxa9x8] {
    display: flex;
    flex-direction: column;
    max-width: 420px;
    margin-bottom: 16px;
}

.vehreg-cliente label[b-a7f1dxa9x8] {
    margin-bottom: 4px;
    font-weight: bold;
}

.vehreg-requerido[b-a7f1dxa9x8] {
    color: #d32f2f;
}

.vehedit-input-texto[b-a7f1dxa9x8] {
    max-width: 260px;
}
/* /Pages/App/Cargas.razor.rz.scp.css */
.despachos-titulo[b-rij0067oid] {
    margin-bottom: 16px;
}

.despachos-nota[b-rij0067oid] {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

.despachos-nota--actualizando[b-rij0067oid] {
    font-style: italic;
}

.despachos-filtros[b-rij0067oid] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.despachos-filtro[b-rij0067oid] {
    display: flex;
    flex-direction: column;
}

.despachos-filtro label[b-rij0067oid] {
    margin-bottom: 4px;
    font-weight: bold;
}

.despachos-filtro select[b-rij0067oid] {
    min-width: 180px;
}

.despachos-filtro--boton[b-rij0067oid] {
    justify-content: flex-end;
}

.despachos-filtro--excel[b-rij0067oid] {
    margin-left: auto;
}

.despachos-body[b-rij0067oid]  .despachos-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

/* Efecto zebra: filas impares con fondo gris claro (ver CustomizeElement en el @code). */
.despachos-body[b-rij0067oid]  .despachos-fila-alterna {
    --dxbl-grid-row-bg: #f4f6f8;
}
/* /Pages/App/Despachos.razor.rz.scp.css */
.despachos-titulo[b-3vu97n6j07] {
    margin-bottom: 16px;
}

.despachos-nota[b-3vu97n6j07] {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

.despachos-nota--actualizando[b-3vu97n6j07] {
    font-style: italic;
}

/* Igual que .form-alin-h/.form-alin-p2 en style.css del PHP: los filtros van en fila,
   cada uno con su label arriba y su control debajo (ver Facturacion.razor.css). */
.despachos-filtros[b-3vu97n6j07] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.despachos-filtro[b-3vu97n6j07] {
    display: flex;
    flex-direction: column;
}

.despachos-filtro label[b-3vu97n6j07] {
    margin-bottom: 4px;
    font-weight: bold;
}

.despachos-filtro select[b-3vu97n6j07] {
    min-width: 180px;
}

.despachos-filtro--boton[b-3vu97n6j07] {
    justify-content: flex-end;
}

.despachos-filtro--excel[b-3vu97n6j07] {
    margin-left: auto;
}

/* Encabezado del grid = mismo azul/blanco que #responsive-table th en restable.css del PHP
   original (ver la nota equivalente en EstadoCuenta.razor.css/Facturacion.razor.css). */
.despachos-body[b-3vu97n6j07]  .despachos-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

/* Efecto zebra: filas impares con fondo gris claro (ver CustomizeElement en el @code). */
.despachos-body[b-3vu97n6j07]  .despachos-fila-alterna {
    --dxbl-grid-row-bg: #f4f6f8;
}
/* /Pages/App/EstadoCuenta.razor.rz.scp.css */
.edo-cuenta-titulo[b-4whykos9vy] {
    margin-bottom: 16px;
}

.edo-cuenta-toolbar[b-4whykos9vy] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.edo-cuenta-nota[b-4whykos9vy] {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

.edo-cuenta-nota--actualizando[b-4whykos9vy] {
    font-style: italic;
}

/* Encabezado del grid = mismo azul/blanco que #responsive-table th en restable.css
   (background-color: rgb(0, 20, 50); color: white;) del PHP original. El elemento con la
   clase "edo-cuenta-grid" es la raíz que renderiza el propio DxGrid (no algo escrito en este
   .razor), así que el selector necesita ::deep, y a su vez ::deep necesita un ancestro con el
   atributo de aislamiento de este archivo para "anclarse" — de ahí el wrapper
   ".edo-cuenta-body" alrededor de la barra de herramientas y el grid. Una vez que coincide,
   las variables CSS de DevExpress se heredan con normalidad hacia los th internos. */
.edo-cuenta-body[b-4whykos9vy]  .edo-cuenta-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

/* Detalle de fila (pantallas pequeñas): columnas ocultas por el breakpoint. */
.edo-cuenta-body[b-4whykos9vy]  .edo-cuenta-detalle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0;
    padding: 8px 12px;
}

.edo-cuenta-body[b-4whykos9vy]  .edo-cuenta-detalle dt {
    font-weight: 600;
}

.edo-cuenta-body[b-4whykos9vy]  .edo-cuenta-detalle dd {
    margin: 0;
    text-align: right;
}
/* /Pages/App/Facturacion.razor.rz.scp.css */
.factura-titulo[b-0uvdhgxt0u] {
    margin-bottom: 16px;
}

.factura-nota[b-0uvdhgxt0u] {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

.factura-nota--actualizando[b-0uvdhgxt0u] {
    font-style: italic;
}

/* Igual que .form-alin-h/.form-alin-p2 en style.css del PHP: los filtros van en fila,
   cada uno con su label arriba y su control debajo. */
.factura-filtros[b-0uvdhgxt0u] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.factura-filtro[b-0uvdhgxt0u] {
    display: flex;
    flex-direction: column;
}

.factura-filtro label[b-0uvdhgxt0u] {
    margin-bottom: 4px;
    font-weight: bold;
}

.factura-filtro select[b-0uvdhgxt0u] {
    min-width: 220px;
}

.factura-filtro--boton[b-0uvdhgxt0u] {
    justify-content: flex-end;
}

/* El botón de exportar va al mismo nivel que los filtros (Estación/Desde/Hasta/Consultar),
   empujado al final de la fila con margin-left:auto. */
.factura-filtro--excel[b-0uvdhgxt0u] {
    margin-left: auto;
}

/* Botones de icono (PDF/XML/Excel) de las columnas Descarga/Despachos: los mismos íconos que
   .pdfDownload/.xmlDownload/.xlsDownload del PHP (public/images/pdf-download-3.png,
   xml-download.png, export-csv3.png — copiados a wwwroot/img/factura), reducidos de su tamaño
   original (23x23px) a la altura de una fila del grid para no ampliarla. */
.factura-icono-btn[b-0uvdhgxt0u] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
}

.factura-icono-btn:hover[b-0uvdhgxt0u] {
    opacity: 0.75;
}

.factura-icono-img[b-0uvdhgxt0u] {
    height: 16px;
    width: auto;
    vertical-align: middle;
}

/* Centra los dos íconos dentro de la celda (además de TextAlignment.Center en la columna,
   que sólo centra el bloque de la plantilla, no garantiza el centrado de sus hijos inline). */
.factura-icono-celda[b-0uvdhgxt0u] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

/* Mismos umbrales de color que la columna "Días" de list-facturas-mes.phtml
   (style="color:red;font-weight:bold" / style="color:yellow;font-weight:bold"). El <span> con
   esta clase se escribe directamente en el CellDisplayTemplate de este archivo, así que SÍ
   lleva el atributo de aislamiento de este .razor (a diferencia de la raíz del propio DxGrid)
   y no necesita ::deep. */
.factura-dias--rojo[b-0uvdhgxt0u] {
    color: red;
    font-weight: bold;
}

.factura-dias--amarillo[b-0uvdhgxt0u] {
    color: #b8860b;
    font-weight: bold;
}

/* Encabezado del grid = mismo azul/blanco que #responsive-table th en restable.css del PHP
   original. Ver la nota equivalente en EstadoCuenta.razor.css sobre por qué hace falta el
   wrapper ".factura-body" para que ::deep pueda anclarse. */
.factura-body[b-0uvdhgxt0u]  .factura-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}
/* /Pages/App/GraficasConsumo.razor.rz.scp.css */
.graficas-titulo[b-9gg28oj6jf] {
    margin-bottom: 16px;
}

.graficas-nota[b-9gg28oj6jf] {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

.graficas-nota--actualizando[b-9gg28oj6jf] {
    font-style: italic;
}

/* Mismos filtros en fila que Despachos/Cargas/Vehiculos-detalle. */
.despachos-filtros[b-9gg28oj6jf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.despachos-filtro[b-9gg28oj6jf] {
    display: flex;
    flex-direction: column;
}

.despachos-filtro label[b-9gg28oj6jf] {
    margin-bottom: 4px;
    font-weight: bold;
}

.despachos-filtro select[b-9gg28oj6jf] {
    min-width: 180px;
}

.despachos-filtro--boton[b-9gg28oj6jf] {
    justify-content: flex-end;
}

.graficas-chart[b-9gg28oj6jf]  {
    height: 420px;
}

.graficas-tooltip[b-9gg28oj6jf] {
    padding: 4px 6px;
}
/* /Pages/App/Inicio.razor.rz.scp.css */
/* Maqueta de application/views/scripts/user/index.phtml.
   Colores y fuentes portados de public/css/style.css:
   .ban-estaciones-titulo (fondo rgb(0,20,50), esquina redondeada, 1.6em),
   .ban-estaciones-productos (verde/rojo/negro, texto blanco en negritas),
   .estatus-ok / .estatus-wrong (píldoras verde/rojo),
   .frecuentes h2 (22px), .sub-preguntas (16px negritas), .frecuentes p (12px). */

.home-loading[b-62akkmxnnj] {
    padding: 40px;
    text-align: center;
    color: #666;
}

/* Dos columnas, igual que .noticias (49%) / .frecuentes (37%, borde izquierdo) en
   public/css/style.css: precios/estación + estado de cuenta + saldos de sucursal a la
   izquierda; preguntas frecuentes + últimas cargas a la derecha. */
.home[b-62akkmxnnj] {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.home-col[b-62akkmxnnj] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.home-col--noticias[b-62akkmxnnj] {
    flex: 1 1 58%;
}

.home-col--frecuentes[b-62akkmxnnj] {
    flex: 1 1 42%;
    padding-left: 28px;
    border-left: 1px solid rgb(0, 20, 50);
}

.home h2[b-62akkmxnnj] {
    font-size: 22px;
    margin: 0 0 12px;
}

.home h3[b-62akkmxnnj] {
    font-size: 18px;
    margin: 0 0 12px;
}

/* ---------- Banner de estación ---------- */

.home-banner-titulo[b-62akkmxnnj] {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgb(0, 20, 50);
    color: #fff;
    border-radius: 0 24px 0 0;
    padding: 10px 16px;
    font-size: 1.4em;
}

.home-banner-icon[b-62akkmxnnj] {
    height: 28px;
    width: 28px;
}

.home-banner-ciudad[b-62akkmxnnj] {
    font-size: 30px;
    flex: 1 1 auto;
}

.home-banner-select[b-62akkmxnnj] {
    flex: 0 0 auto;
    background-color: rgb(0, 20, 50);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
}

/* El navegador suele pintar la lista desplegada con el mismo fondo oscuro del <select>;
   sin esto el texto de las opciones (heredado en negro) queda invisible. */
.home-banner-select option[b-62akkmxnnj] {
    background-color: rgb(0, 20, 50);
    color: #fff;
}

.home-banner-productos[b-62akkmxnnj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    font-weight: bold;
    color: #fff;
}

.home-producto[b-62akkmxnnj] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 14px 16px;
    overflow: hidden;
}

.home-producto--plus[b-62akkmxnnj] {
    background-color: #1e8f2e;
}

.home-producto--super[b-62akkmxnnj] {
    background-color: #c0272d;
}

.home-producto--diesel[b-62akkmxnnj] {
    background-color: #1a1a1a;
}

/* Nombre del producto: igual que .ban-estaciones-productos del PHP
   (35px, bold, alineado a la derecha, blanco sobre el fondo de color). */
.home-producto-nombre[b-62akkmxnnj] {
    font-size: 35px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 8px;
}

/* Octanaje/cetanaje: igual que .oct del PHP — blanco, texto negro, centrado,
   sin margen, esquinas redondeadas salvo la inferior izquierda (10px 10px 10px 0).
   Va debajo del nombre, alineado a la izquierda (con todo y recuadro). */
.home-octanaje[b-62akkmxnnj] {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    background-color: #fff;
    color: #000;
    text-align: center;
    margin: 0px;
    margin-left: -20px !important; 
    padding: 4px 10px;
    border-radius: 10px 10px 10px 0;
}

.home-octanaje-numero[b-62akkmxnnj] {
    /* Base de .oct: 14px; +50%. */
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
}

.home-octanaje-label[b-62akkmxnnj] {
    /* Base de .oct: 14px; -20%. */
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

/* Recuadro del precio: igual que .ban-estaciones-precios/.precios-font del PHP
   (fondo plata, centrado, sin esquinas redondeadas) — con la fuente "digital01" del
   original. Se "sangra" con márgenes negativos para pegarse al borde del contenedor
   padre (compensando su padding) y quedar pegado al octanaje, sin espacio entre ambos. */
.home-producto-precio-box[b-62akkmxnnj] {
    width: calc(100% + 28px);
    margin: 0 -14px -16px;
    background-color: silver;
    border-radius: 0;
    padding: 8px;
    text-align: center;
}

@font-face {
    font-family: digital01;
    src: url('/css/fonts/digital-7.ttf');
}

.home-producto-precio[b-62akkmxnnj] {
    font-family: digital01, monospace;
    font-size: 40px;
    font-weight: normal;
    color: #000;
}

/* ---------- Estado de cuenta ---------- */

.home-estatus[b-62akkmxnnj],
.home-columnas[b-62akkmxnnj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.home-estatus-item[b-62akkmxnnj],
.home-columna[b-62akkmxnnj] {
    text-align: center;
    padding: 12px;
    background-color: #fafafa;
    border-radius: 6px;
}

.home-label[b-62akkmxnnj] {
    font-weight: normal;
    font-size: 18px;
    color: #333;
    margin-bottom: 4px;
}

.home-cantidad[b-62akkmxnnj] {
    font-size: 20px;
    font-weight: 600;
    color: #222;
}

.home-badge[b-62akkmxnnj] {
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #000;
    color: #fff;
    font-style: italic;
    padding: 2px 28px;
}

.home-badge--ok[b-62akkmxnnj] {
    background-color: green;
}

.home-badge--wrong[b-62akkmxnnj] {
    background-color: #c0272d;
}

.home-vencidos-icono[b-62akkmxnnj] {
    width: 25px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Alerta de pagos vencidos: tarjeta roja con pulso de luz y el icono latiendo. */
.home-columna--alerta[b-62akkmxnnj] {
    background-color: #fdecea;
    border: 2px solid #d32f2f;
    animation: home-alerta-pulso-b-62akkmxnnj 1.8s ease-in-out infinite;
}

.home-columna--alerta .home-label[b-62akkmxnnj] {
    color: #b71c1c;
}

.home-columna--alerta .home-cantidad[b-62akkmxnnj] {
    color: #d32f2f;
    font-size: 24px;
}

.home-columna--alerta .home-vencidos-icono[b-62akkmxnnj] {
    animation: home-alerta-latido-b-62akkmxnnj 1.8s ease-in-out infinite;
}

/* Estatus bloqueado: la píldora roja parpadea (el original alternaba rojo/blanco cada segundo). */
.home-columna--alerta .home-badge--wrong[b-62akkmxnnj] {
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: home-alerta-parpadeo-b-62akkmxnnj 1s steps(1, end) infinite;
}

@keyframes home-alerta-parpadeo-b-62akkmxnnj {
    0% { background-color: #c0272d; color: #fff; }
    50% { background-color: #fff; color: #c0272d; }
}

@keyframes home-alerta-pulso-b-62akkmxnnj {
    0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.45); }
    50% { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
}

@keyframes home-alerta-latido-b-62akkmxnnj {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .home-columna--alerta[b-62akkmxnnj],
    .home-columna--alerta .home-badge--wrong[b-62akkmxnnj],
    .home-columna--alerta .home-vencidos-icono[b-62akkmxnnj] {
        animation: none;
    }
}

/* DxGrid de pagos vencidos: mismo encabezado azul/blanco que los demás grids del portal. */
.home-columna[b-62akkmxnnj]  .home-vencidos {
    margin-top: 8px;
    font-size: 13px;
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

.home-columna[b-62akkmxnnj]  .home-vencidos th,
.home-columna[b-62akkmxnnj]  .home-vencidos td {
    padding: 4px 5px;
    font-size: 12px;
    white-space: nowrap;
}

/* Encabezado azul oscuro/blanco, igual que los demás grids del portal. */
.home-cargas[b-62akkmxnnj]  .home-cargas-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

.home-vencidos-dias[b-62akkmxnnj] {
    color: red;
    font-weight: bold;
}

.home-nota[b-62akkmxnnj] {
    font-size: 12px;
    color: #777;
    margin-top: 8px;
}

.home-nota--actualizando[b-62akkmxnnj] {
    margin: 0;
    font-style: italic;
    color: #1e5c99;
}

/* ---------- Medidores (Saldo Consumido / Disponible) ---------- */

.home-gauge[b-62akkmxnnj] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 10px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-gauge-inner[b-62akkmxnnj] {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

/* ---------- Saldos de sucursal ---------- */

.home-sucursal-grid[b-62akkmxnnj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.home-sucursal-item[b-62akkmxnnj] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

/* ---------- Preguntas Frecuentes ---------- */

.home-faq-list[b-62akkmxnnj] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ddd;
}

.home-faq-item[b-62akkmxnnj] {
    border-bottom: 1px solid #ddd;
}

.home-faq-question[b-62akkmxnnj] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

/* Chevron SVG en línea que indica que la pregunta se puede desplegar
   (no se usa una librería de iconos externa en este proyecto). */
.home-faq-icon[b-62akkmxnnj] {
    display: inline-flex;
    flex: 0 0 auto;
    transition: transform .2s ease;
    color: #666;
}

.home-faq-icon--open[b-62akkmxnnj] {
    transform: rotate(180deg);
}

.home-faq-texto[b-62akkmxnnj] {
    font-size: 16px;
    font-weight: bold;
}

.home-faq-answer[b-62akkmxnnj] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.home-faq-answer--open[b-62akkmxnnj] {
    /* Suficiente para el contenido más largo (item 1: 3 párrafos + aviso). */
    max-height: 320px;
}

.home-faq-answer p[b-62akkmxnnj],
.home-faq-answer ol[b-62akkmxnnj] {
    font-size: 12px;
    padding: 0 4px 12px 4px;
    margin: 0;
}

.home-faq-answer ol[b-62akkmxnnj] {
    padding-left: 22px;
}

.home-faq-aviso[b-62akkmxnnj] {
    font-size: 12px;
    font-weight: bold;
    padding: 0 4px;
    display: block;
}

/* ---------- Responsivo ---------- */

@media (max-width: 960px) {
    .home[b-62akkmxnnj] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Una sola columna: cada bloque ocupa todo el ancho (y no su alto, por el flex-basis). */
    .home-col[b-62akkmxnnj],
    .home-col--noticias[b-62akkmxnnj],
    .home-col--frecuentes[b-62akkmxnnj] {
        flex: 0 0 auto;
        width: 100%;
    }

    .home-col--frecuentes[b-62akkmxnnj] {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgb(0, 20, 50);
        padding-top: 20px;
    }
}

@media (max-width: 720px) {
    .home-estatus[b-62akkmxnnj],
    .home-columnas[b-62akkmxnnj],
    .home-banner-productos[b-62akkmxnnj] {
        grid-template-columns: 1fr;
    }

    .home-sucursal-grid[b-62akkmxnnj] {
        grid-template-columns: 1fr;
    }

    .home-banner-titulo[b-62akkmxnnj] {
        flex-wrap: wrap;
    }
}
/* /Pages/App/Perfil.razor.rz.scp.css */
.perfil-titulo[b-wskys01mq0] {
    margin-bottom: 16px;
}

/* Tarjeta con encabezado azul (mismo azul del encabezado de las tablas del portal). */
.perfil-tarjeta[b-wskys01mq0] {
    max-width: 420px;
    margin: 16px 0;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 20, 50, 0.12);
    overflow: hidden;
}

.perfil-tarjeta--ancha[b-wskys01mq0] {
    max-width: 720px;
}

.perfil-tarjeta-encabezado[b-wskys01mq0] {
    padding: 12px 18px;
    background: rgb(0, 20, 50);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.perfil-datos[b-wskys01mq0] {
    display: grid;
    grid-template-columns: 110px 1fr;
    margin: 0;
}

.perfil-datos dt[b-wskys01mq0],
.perfil-datos dd[b-wskys01mq0] {
    margin: 0;
    padding: 10px 18px;
    border-bottom: 1px solid #eceff2;
}

.perfil-datos dt[b-wskys01mq0] {
    font-weight: bold;
    color: #555;
    background: #f4f6f8;
}

.perfil-datos dt:nth-last-of-type(1)[b-wskys01mq0],
.perfil-datos dd:last-of-type[b-wskys01mq0] {
    border-bottom: 0;
}

.perfil-tarjeta--form[b-wskys01mq0] {
    max-width: 460px;
}

.perfil-form[b-wskys01mq0] {
    padding: 18px;
}

.perfil-fila[b-wskys01mq0] {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.perfil-fila label[b-wskys01mq0] {
    font-weight: bold;
    margin-bottom: 4px;
}

.perfil-fila--boton[b-wskys01mq0] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.perfil-cambiando[b-wskys01mq0] {
    color: #666;
    font-style: italic;
}
/* /Pages/App/VehiculoDetalle.razor.rz.scp.css */
.vehdet-titulo[b-qpkcp2ml00] {
    margin-bottom: 16px;
}

.vehdet-subtitulo[b-qpkcp2ml00] {
    margin: 8px 0 16px;
}

/* Bloque de información general: columna izquierda con los datos generales, columna derecha
   con días de carga arriba y horarios/límites (a su vez en dos columnas) abajo. */
.vehdet-info-grid[b-qpkcp2ml00] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}

.vehdet-info-col[b-qpkcp2ml00] {
    flex: 1 1 360px;
}

.vehdet-info-grid > .vehdet-info-col:first-child[b-qpkcp2ml00] {
    flex: 0 0 calc(30% - 12px);
}

.vehdet-info-grid > .vehdet-info-col:last-child[b-qpkcp2ml00] {
    flex: 1 1 calc(70% - 12px);
}

.vehdet-dl[b-qpkcp2ml00] {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 6px;
    column-gap: 8px;
    margin: 0;
}

.vehdet-dl dt[b-qpkcp2ml00] {
    font-weight: bold;
}

.vehdet-dl dd[b-qpkcp2ml00] {
    margin: 0;
}

.vehdet-fieldset[b-qpkcp2ml00] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.vehdet-fieldset legend[b-qpkcp2ml00] {
    width: auto;
    padding: 0 6px;
    font-weight: bold;
    font-size: 14px;
}

.vehdet-check[b-qpkcp2ml00] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 18px;
    font-weight: normal;
}

.vehdet-row[b-qpkcp2ml00] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.vehdet-fieldset--mitad[b-qpkcp2ml00] {
    flex: 1 1 320px;
}

/* Horarios 65% / Límites 30% (dentro de .vehdet-row). */
.vehdet-row > .vehdet-fieldset--mitad:first-child[b-qpkcp2ml00] {
    flex: 0 0 calc(65% - 8px);
}

.vehdet-row > .vehdet-fieldset--mitad:last-child[b-qpkcp2ml00] {
    flex: 1 1 calc(30% - 8px);
}

.vehdet-horarios[b-qpkcp2ml00] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vehdet-horarios .vehdet-fieldset[b-qpkcp2ml00] {
    flex: 1 1 140px;
    margin-bottom: 0;
    text-align: center;
}

/* Filtros (cargas foráneas / gráficas): mismo patrón que Despachos.razor.css. */
.despachos-filtros[b-qpkcp2ml00] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.despachos-filtro[b-qpkcp2ml00] {
    display: flex;
    flex-direction: column;
}

.despachos-filtro label[b-qpkcp2ml00] {
    margin-bottom: 4px;
    font-weight: bold;
}

.despachos-filtro input[b-qpkcp2ml00],
.despachos-filtro select[b-qpkcp2ml00] {
    min-width: 140px;
}

.despachos-filtro--boton[b-qpkcp2ml00] {
    justify-content: flex-end;
}

.despachos-filtro--excel[b-qpkcp2ml00] {
    margin-left: auto;
}

.despachos-body[b-qpkcp2ml00]  .despachos-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

.despachos-body[b-qpkcp2ml00]  .despachos-fila-alterna {
    --dxbl-grid-row-bg: #f4f6f8;
}

.vehiculo-icono-btn[b-qpkcp2ml00] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
}

.vehiculo-icono-btn:hover[b-qpkcp2ml00] {
    opacity: 0.75;
}

.vehdet-borrar[b-qpkcp2ml00] {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 16px;
    border-radius: 50%;
    background: #d9534f;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

/* Gráficas */
.vehdet-chart[b-qpkcp2ml00]  {
    height: 420px;
}

.vehdet-tooltip[b-qpkcp2ml00] {
    padding: 4px 6px;
}
/* /Pages/App/VehiculoEditar.razor.rz.scp.css */
.vehdet-titulo[b-zgb4wpo3iu] {
    margin-bottom: 16px;
}

.vehedit-acciones[b-zgb4wpo3iu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.vehedit-guardando[b-zgb4wpo3iu] {
    color: #666;
    font-style: italic;
}

/* Bloque de datos: misma proporción 30% / 70% que Vehiculos/detalle. */
.vehdet-info-grid[b-zgb4wpo3iu] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}

.vehdet-info-col[b-zgb4wpo3iu] {
    flex: 1 1 360px;
}

.vehdet-info-grid > .vehdet-info-col:first-child[b-zgb4wpo3iu] {
    flex: 0 0 calc(30% - 12px);
}

.vehdet-info-grid > .vehdet-info-col:last-child[b-zgb4wpo3iu] {
    flex: 1 1 calc(70% - 12px);
}

.vehdet-dl[b-zgb4wpo3iu] {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 6px;
    column-gap: 8px;
    margin: 0;
    align-items: center;
}

.vehdet-dl dt[b-zgb4wpo3iu] {
    font-weight: bold;
}

.vehdet-dl dd[b-zgb4wpo3iu] {
    margin: 0;
}

.vehdet-fieldset[b-zgb4wpo3iu] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.vehdet-fieldset legend[b-zgb4wpo3iu] {
    width: auto;
    padding: 0 6px;
    font-weight: bold;
    font-size: 14px;
}

.vehdet-check[b-zgb4wpo3iu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 18px;
    font-weight: normal;
}

.vehdet-row[b-zgb4wpo3iu] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.vehdet-fieldset--mitad[b-zgb4wpo3iu] {
    flex: 1 1 320px;
}

.vehdet-row > .vehdet-fieldset--mitad:first-child[b-zgb4wpo3iu] {
    flex: 0 0 calc(65% - 8px);
}

.vehdet-row > .vehdet-fieldset--mitad:last-child[b-zgb4wpo3iu] {
    flex: 1 1 calc(30% - 8px);
}

.vehdet-horarios[b-zgb4wpo3iu] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vehdet-horarios .vehdet-fieldset[b-zgb4wpo3iu] {
    flex: 1 1 140px;
    margin-bottom: 0;
    text-align: center;
}

.vehedit-input-corto[b-zgb4wpo3iu] {
    max-width: 140px;
    display: inline-block;
}

/* Montos/cantidades (Rendimiento óptimo, Último odómetro, Carga, Día, Semana, Mes) alineados a
   la derecha; "Centro de costos" usa la misma clase pero es alfanumérico (type="text"), así
   que el selector de atributo evita alinearlo también. */
.vehedit-input-corto[type="number"][b-zgb4wpo3iu] {
    text-align: right;
}

.vehedit-input-hora[b-zgb4wpo3iu] {
    width: 110px;
    display: inline-block;
}
/* /Pages/App/Vehiculos.razor.rz.scp.css */
.despachos-titulo[b-axb5ljke2m] {
    margin-bottom: 16px;
}

.despachos-nota[b-axb5ljke2m] {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

.despachos-nota--actualizando[b-axb5ljke2m] {
    font-style: italic;
}

.despachos-filtros[b-axb5ljke2m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.despachos-filtro[b-axb5ljke2m] {
    display: flex;
    flex-direction: column;
}

.despachos-filtro label[b-axb5ljke2m] {
    margin-bottom: 4px;
    font-weight: bold;
}

.despachos-filtro input[b-axb5ljke2m],
.despachos-filtro select[b-axb5ljke2m] {
    min-width: 180px;
}

.despachos-filtro--boton[b-axb5ljke2m] {
    justify-content: flex-end;
}

.despachos-filtro--excel[b-axb5ljke2m] {
    margin-left: auto;
}

/* Encabezado del grid = mismo azul/blanco que #responsive-table th en restable.css del PHP
   original (ver la nota equivalente en Despachos.razor.css/Cargas.razor.css). */
.despachos-body[b-axb5ljke2m]  .despachos-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

/* Efecto zebra: filas impares con fondo gris claro (ver CustomizeElement en el @code). */
.despachos-body[b-axb5ljke2m]  .despachos-fila-alterna {
    --dxbl-grid-row-bg: #f4f6f8;
}

/* Iconos de Detalle/Editar de la columna de acciones: los mismos íconos que
   .vehiculo-detalle/.vehiculo-edit del PHP (public/images/detail.png, pencil.png — copiados a
   wwwroot/img/vehiculo), mismo patrón que .factura-icono-* en Facturacion.razor.css. */
.vehiculo-icono-btn[b-axb5ljke2m] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
}

.vehiculo-icono-btn:hover[b-axb5ljke2m] {
    opacity: 0.75;
}

.vehiculo-icono-img[b-axb5ljke2m] {
    height: 16px;
    width: auto;
    vertical-align: middle;
}

.vehiculo-icono-celda[b-axb5ljke2m] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
/* /Pages/Login.razor.rz.scp.css */
/* Portado de public/css/style.css (.login / .login2 / .login-olvide / .login-registro). */

.login[b-42rjhx64ol] {
    background-color: #fff;
    border-radius: 10px;
    margin: 50px auto 15px auto;
    width: 600px;
    max-width: 100%;
}

.login2[b-42rjhx64ol] {
    margin: 0 auto;
    padding: 30px 80px 20px 80px;
}

.login-title[b-42rjhx64ol] {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 12px;
}

.login-form[b-42rjhx64ol] {
    display: flex;
    flex-direction: column;
}

.login-form label[b-42rjhx64ol] {
    font-weight: 600;
    margin: 8px 0 2px;
}

.login-form .form-control[b-42rjhx64ol] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-submit[b-42rjhx64ol] {
    margin-top: 50px;
    padding-top: 50px;
    width: 100%;
}

.login-alert[b-42rjhx64ol] {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
}

[b-42rjhx64ol] .validation-message {
    color: #c0392b;
    font-size: 12px;
}

.login-links[b-42rjhx64ol] {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}

.login-sep[b-42rjhx64ol] {
    margin: 0 8px;
    color: #999;
}

.login-links a[b-42rjhx64ol] {
    color: #0071c1;
    text-decoration: none;
}

.login-links a:hover[b-42rjhx64ol] {
    text-decoration: underline;
}

.login-olvide-panel[b-42rjhx64ol] {
    margin-top: 14px;
    padding: 12px;
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    font-size: 13px;
}

.login-olvide-row[b-42rjhx64ol] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.login-olvide-row .form-control[b-42rjhx64ol] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-olvide-msg[b-42rjhx64ol] {
    margin-top: 8px;
    color: #2e7d32;
}

@media (max-width: 720px) {
    .login2[b-42rjhx64ol] {
        padding: 24px 20px 16px;
    }
}