/* Lo propio de Chronia. Lo demás lo pone Bootstrap y el tema de BootstrapBlazor. */

/* ── Los nombres del producto ────────────────────────────────────────────────
   Se declaran aquí porque el CSS de las pantallas que llegan de J2J_Front los usa por nombre
   —«var(--brand-primary, #FF6600)»— y sin declararlos se queda con el naranja de J2J, que es
   el valor de reserva. Peor todavía: «rgba(var(--brand-primary-rgb), .07)» no tiene reserva,
   así que la regla entera se descarta en silencio y la fila activa de una tabla deja de
   marcarse sin que nada avise.

   La lista es corta a propósito: sólo los que alguna pantalla usa. Vale lo mismo que en el
   catálogo de módulos —se nombra lo que se necesita— y se irá alargando a medida que lleguen
   los módulos que faltan. */
:root {
    --brand-primary: #1b4f72;
    --brand-primary-dark: #16233a;
    --brand-primary-light: #2e86c1;
    --brand-primary-rgb: 27, 79, 114;

    --color-text: #2d2d2d;
    --color-text-muted: #6c757d;
    --color-text-inverse: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f8f9fa;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

html, body {
    height: 100%;
}

/* La cabecera del layout: azul del producto, para no heredar el naranja de J2J. */
.layout .layout-header,
.bb-layout .layout-header {
    background: linear-gradient(135deg, #16233a 0%, #16233a 60%, #1b4f72 100%) !important;
    border-bottom: 2px solid #2e86c1 !important;
}

.layout .layout-header .form-select {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.layout .layout-header .form-select option {
    color: #212529;
}

/* El aviso de error de Blazor, que por defecto llega sin estilo. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: .6rem 1.25rem;
    background: #ffeb3b;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    z-index: 1000;
}

/* ── Las pestañas de vista de una pantalla ───────────────────────────────────
   «Flota / Por persona», «Rejilla / Línea de tiempo», «Semana / Mes». Vive aquí y no en el
   CSS de cada pantalla porque el CSS de componente es *scoped*: la misma regla estaba copiada
   en dos ficheros y no se aplicaba a una tercera pantalla que ya usaba la clase —en J2J_Front
   sigue pasando—, así que las pestañas de vehículos salían con el gris de Bootstrap y nadie lo
   notó. Copiada, además, diverge. */
.gf-view-tabs .nav-link {
    border: 1px solid transparent;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: .9rem;
}

.gf-view-tabs .nav-link.active {
    color: var(--color-text-inverse);
    background-color: var(--brand-primary);
}