/* Lo propio de Jornadoo. 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.

   **Lo que hay aquí es el tema de por defecto, no el de la instalación.** Desde el punto 5 de
   la fase 6, `App.razor` escribe detrás de esta hoja un `<style>` con este mismo bloque
   resuelto desde la configuración —ver `Presentacion/Tema.cs`—, y ése es el que gana. Éste se
   queda porque una hoja de estilos que no se puede abrir sola es una hoja que nadie puede
   depurar, y porque es la red que hace que la consola salga fea y no incolora. Los valores son
   los de `Tema.Jornadoo` —los del logotipo—, y la batería comprueba que no se separen. */
:root {
    --brand-primary: #2e3d8a;
    --brand-primary-dark: #17204f;
    --brand-primary-light: #ff2f55;
    --brand-primary-rgb: 46, 61, 138;

    --color-text: #1f2433;
    --color-text-muted: #5b6275;
    --color-text-inverse: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f3f5f9;

    /* La esfera del reloj (Tema.Reloj): acento, mezcla y marca. */
    --cr-reloj-1: #ff2f55;
    --cr-reloj-2: #96366f;
    --cr-reloj-3: #2e3d8a;

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;

    --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;
}

/* ── La tipografía ────────────────────────────────────────────────────────────
   Instrument Sans, autoalojada como Leaflet: la consola vive en redes de cliente que no
   siempre salen a Internet, y una fuente que no llega deja la maquetación bailando. */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/instrument-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Lo que se deriva del tema ───────────────────────────────────────────────
   Todo sale de los nueve nombres de arriba, así que cambiar de tema lo arrastra. Las tintas
   son la marca rebajada sobre blanco: el fondo de una fila elegida, de un icono, de una
   pestaña. */
:root {
    --cr-font: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --cr-tinta-1: rgba(var(--brand-primary-rgb), .05);
    --cr-tinta-2: rgba(var(--brand-primary-rgb), .09);
    --cr-tinta-3: rgba(var(--brand-primary-rgb), .16);
    --cr-linea: #e2e6ee;
    --cr-linea-fuerte: #cfd5e1;

    /* Sombras con la noche del tema, no con negro: sobre el gris azulado del fondo, el negro
       ensucia y la marca se funde. */
    --cr-sombra-1: 0 1px 2px rgba(var(--brand-primary-rgb), .06), 0 1px 1px rgba(15, 20, 40, .03);
    --cr-sombra-2: 0 2px 4px rgba(var(--brand-primary-rgb), .05), 0 8px 24px -8px rgba(var(--brand-primary-rgb), .16);
    --cr-sombra-3: 0 24px 64px -16px rgba(15, 20, 40, .35);

    /* El degradado del logotipo: de la noche al índigo y al rosa. Es la firma de color de la
       consola: la portada de inicio, el avatar, las cifras destacadas y la burbuja de temas. El
       menú y la entrada llevan versiones suyas —apagada una, fundida a blanco la otra—. Ésta es
       la fórmula de serie; el de Jornadoo lleva el suyo (`Tema.DegradadoPropio`), que deja el rosa
       más a la vista, y lo escribe App.razor. */
    --cr-degradado: linear-gradient(160deg, var(--brand-primary-dark) 0%, var(--brand-primary) 58%, var(--brand-primary-light) 130%);

    --cr-cabecera-alto: 60px;
}

/* ── Bootstrap, atado a los nombres del producto ─────────────────────────────
   Sin esto el tema pinta media pantalla y la otra media sigue azul Bootstrap: las pantallas
   usan `text-primary`, `btn-primary` y `btn-outline-primary` a manta —casi doscientas veces— y
   esas clases traen su propia paleta.

   Y no basta con `--bs-primary`. Bootstrap 5.3 lo usa para `.text-primary` y `.bg-primary`
   —que resuelven `rgba(var(--bs-primary-rgb), …)`—, pero los botones llevan el hex escrito
   dentro de sus propias variables (`.btn-primary { --bs-btn-bg: #0d6efd; … }`), así que hay
   que volver a declararlas.

   Lo que NO se toca: el rojo de error, el verde de éxito y el azul de información. No son
   marca, son significado, y un cliente que pueda cambiarlos puede hacer que un aviso de borrado
   salga del color de «todo bien». */
:root {
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: var(--brand-primary-rgb);
    --bs-link-hover-color: var(--brand-primary-dark);
    --bs-link-hover-color-rgb: var(--brand-primary-rgb);

    --bs-body-font-family: var(--cr-font);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-surface);
    --bs-emphasis-color: var(--brand-primary-dark);
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-bg: var(--color-surface-alt);
    --bs-border-color: var(--cr-linea);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);
    --bs-focus-ring-color: rgba(var(--brand-primary-rgb), .25);
    --bs-primary-bg-subtle: var(--cr-tinta-2);
    --bs-primary-border-subtle: var(--cr-tinta-3);
    --bs-primary-text-emphasis: var(--brand-primary-dark);
}

.btn-primary {
    --bs-btn-color: var(--color-text-inverse);
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color: var(--color-text-inverse);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

/* El secundario es el botón de todo lo que no es la acción principal —«Cancelar», «Filtrar»,
   «Exportar»—: noventa veces. Con el gris de Bootstrap cada barra de herramientas parecía
   deshabilitada; aquí es un botón claro con el borde del producto. */
.btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--cr-linea-fuerte);
    --bs-btn-hover-color: var(--brand-primary-dark);
    --bs-btn-hover-bg: var(--cr-tinta-1);
    --bs-btn-hover-border-color: rgba(var(--brand-primary-rgb), .45);
    --bs-btn-active-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--cr-tinta-2);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--cr-linea);
}

.btn-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: #e7eaf1;
    --bs-btn-border-color: #e7eaf1;
    --bs-btn-hover-color: var(--brand-primary-dark);
    --bs-btn-hover-bg: #dce1ea;
    --bs-btn-hover-border-color: #dce1ea;
    --bs-btn-active-color: var(--brand-primary-dark);
    --bs-btn-active-bg: #d2d8e4;
    --bs-btn-active-border-color: #d2d8e4;
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-bg: #eef0f5;
    --bs-btn-disabled-border-color: #eef0f5;
}

/* ── La base ─────────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
}

body {
    font-family: var(--cr-font);
    color: var(--color-text);
    background: var(--color-surface-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--brand-primary-dark);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.006em;
}

/* Horas, minutos y saldos: con cifras de ancho fijo una columna de «7:45» y «10:05» se lee de
   un vistazo, y el reloj de la cabecera no baila al cambiar de segundo. */
.table, .cr-cifra, .badge, input[type=time], input[type=number], input[type=date] {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: rgba(var(--brand-primary-rgb), .2);
}

/* El foco que `FocusOnNavigate` pone en el título al cambiar de pantalla es para el lector de
   pantalla, no para la vista: sin esto cada título sale enmarcado. */
h1[tabindex="-1"]:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ══ El armazón ══════════════════════════════════════════════════════════════
   `LayoutPrincipal`: el menú lateral en la noche del logotipo, la cabecera en blanco translúcido
   y el contenido sobre el gris azulado. Es HTML propio —hasta el 2026-09-30 era el `<Layout>`
   de BootstrapBlazor— y la página se desplaza entera: la cabecera se pega arriba y el lateral
   se queda fijo.

   Tres formas del lateral, y cada una sale de un atributo en `<html>` que pone jornadoo.js:
   - desplegado (lo normal en el escritorio);
   - `data-menu="plegado"`: un carril de iconos. Los grupos sacan sus pantallas flotando al
     lado, y las sueltas su nombre, al pasar por encima o al llegar con el teclado;
   - en el móvil, un cajón que sale por encima con un velo detrás (`data-menu-movil`). */
:root {
    --cr-lateral-ancho: 280px;
    --cr-lateral-carril: 76px;
    --cr-menu-noche: #181b22;
    /* El menú no lleva el degradado de la marca tal cual: es una columna de pantalla entera que
       se ve todo el rato, y con la fórmula de la marca —que acaba en el acento— salía chillón en
       todos los temas (naranja y rosa sobre todo). Aquí el tono oscuro del tema se apaga con un
       gris noche, y la marca sólo asoma, templada, al fondo. */
    --cr-degradado-menu: linear-gradient(180deg,
        color-mix(in oklab, var(--brand-primary-dark) 62%, var(--cr-menu-noche)) 0%,
        color-mix(in oklab, var(--brand-primary-dark) 78%, var(--cr-menu-noche)) 55%,
        color-mix(in oklab, var(--brand-primary) 42%, var(--cr-menu-noche)) 100%);
    /* Lo que flota sobre el menú (los grupos plegados, los nombres): un poco más claro que él. */
    --cr-menu-flotante: color-mix(in oklab, var(--brand-primary-dark) 72%, var(--cr-menu-noche));
    /* El acento del menú: el del logotipo aclarado, que sobre la noche se lee. */
    --cr-menu-acento: color-mix(in oklab, var(--brand-primary-light) 70%, #fff);
    --cr-transicion-menu: 260ms var(--ease-out);
}

/* ── El lateral ── */
.cr-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: var(--cr-lateral-ancho);
    background: var(--cr-degradado-menu);
    background-color: var(--brand-primary-dark);
    color: rgba(255, 255, 255, .74);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
    transition: width var(--cr-transicion-menu), transform var(--cr-transicion-menu), box-shadow var(--cr-transicion-menu);
}

.cr-lateral-cabeza {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: var(--cr-cabecera-alto);
    padding: 0 .9rem 0 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

/* La marca, arriba del menú y a la altura de la cabecera. */
.cr-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.cr-marca:hover {
    color: #fff;
}

.cr-marca img, .cr-marca svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
    transition: transform var(--cr-transicion-menu);
}

.cr-marca:hover svg {
    transform: rotate(-12deg);
}

.cr-marca-nombre {
    font-size: 1.24rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.cr-marca-nombre small {
    display: block;
    margin-top: .3rem;
    font-size: .7rem;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0;
    color: rgba(255, 255, 255, .55);
}

.cr-lateral-cerrar {
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.cr-lateral-cerrar:hover {
    background: rgba(255, 255, 255, .16);
}

/* ── El árbol ── */
.cr-nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .9rem .75rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.cr-nav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-nav-enlace {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 40px;
    padding: .5rem .7rem;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.cr-nav-enlace:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.cr-nav-enlace:focus-visible {
    outline: 2px solid var(--cr-menu-acento);
    outline-offset: -2px;
}

.cr-nav-icono {
    width: 1.25rem;
    flex-shrink: 0;
    font-size: .95rem;
    text-align: center;
    opacity: .78;
    transition: opacity var(--duration-fast), color var(--duration-fast);
}

.cr-nav-enlace:hover .cr-nav-icono {
    opacity: 1;
}

/* Un nombre largo («Sugerencias de corrección») no ensancha el lateral: se corta. */
.cr-nav-texto {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-nav-flecha {
    font-size: .62rem;
    opacity: .5;
    transition: transform var(--cr-transicion-menu), opacity var(--duration-fast);
}

.cr-nav-grupo.abierto > .cr-nav-enlace .cr-nav-flecha {
    transform: rotate(180deg);
    opacity: .8;
}

/* La pantalla en la que se está: la pastilla clara y una aguja de acento a la izquierda, como
   la del reloj. Su grupo se queda en blanco para que se vea de dónde cuelga aun cerrado. */
.cr-nav-enlace.activa,
.cr-nav-enlace.activa:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
    color: #fff;
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.cr-nav-enlace.activa::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 3px;
    border-radius: 3px;
    background: var(--cr-menu-acento);
    box-shadow: 0 0 10px var(--brand-primary-light);
}

.cr-nav-enlace.activa .cr-nav-icono,
.cr-nav-grupo.con-activa > .cr-nav-enlace .cr-nav-icono {
    opacity: 1;
    color: var(--cr-menu-acento);
}

.cr-nav-grupo.con-activa > .cr-nav-enlace {
    color: #fff;
}

/* Los hijos de un grupo, colgando de una línea fina. Se abren desplegando la altura: una
   rejilla de 0fr a 1fr es lo único que anima hasta «lo que mida» sin medir con JavaScript. */
.cr-nav-hijos {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--cr-transicion-menu), visibility 0s linear 260ms;
}

.cr-nav-grupo.abierto > .cr-nav-hijos {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--cr-transicion-menu), visibility 0s;
}

.cr-nav-hijos > ul {
    min-height: 0;
    overflow: hidden;
    margin-left: 1.32rem;
    padding: 0 0 0 .55rem;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1);
    transition: padding var(--cr-transicion-menu);
}

/* El aire de arriba y abajo, sólo abierto: cerrado, el relleno no se recorta con la rejilla y
   separaba los grupos más que las sueltas. */
.cr-nav-grupo.abierto > .cr-nav-hijos > ul {
    padding-top: 2px;
    padding-bottom: 6px;
}

.cr-nav-hijos .cr-nav-enlace {
    gap: .6rem;
    min-height: 36px;
    padding: .42rem .5rem .42rem .6rem;
    font-size: .87rem;
}

.cr-nav-hijos .cr-nav-icono {
    font-size: .85rem;
    opacity: .62;
}

/* En el árbol la aguja cae sobre la línea de la que cuelga. */
.cr-nav-hijos .cr-nav-enlace.activa::before {
    left: -.55rem;
    top: 20%;
    bottom: 20%;
}

.cr-nav-flotante-titulo {
    display: none;
}

.cr-lateral-pie {
    padding: .55rem .75rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.cr-lateral-plegar {
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
}

.cr-lateral-plegar .cr-nav-icono {
    transition: transform var(--cr-transicion-menu);
}

/* ── El cuerpo ── */
.cr-cuerpo {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: var(--cr-lateral-ancho);
    transition: margin-left var(--cr-transicion-menu);
}

.cr-principal {
    flex: 1;
    background: var(--color-surface-alt);
}

/* Sin tope de ancho: con uno, en una pantalla ancha el contenido se quedaba a la izquierda y
   la franja de la derecha era espacio muerto. Las tablas y los cuadrantes agradecen el sitio. */
.cr-contenido {
    padding: 1.75rem 2rem 2.5rem;
}

.cr-pie {
    padding: .9rem 2rem 1.1rem;
    color: var(--color-text-muted);
    font-size: .78rem;
    text-align: center;
}

.cr-velo {
    display: none;
}

/* ── La cabecera ──
   .cr-pegado envuelve la franja del soporte (FranjaDelProveedor, que no pinta nada para quien
   no es del soporte) y la cabecera, y es quien queda pegado arriba: así suben y bajan como un
   solo bloque, sin importar cuánto mida la franja —que en el móvil envuelve el texto y no tiene
   una altura fija—. La cabecera ya no se pega por su cuenta: si llevara su propio `position:
   sticky; top: 0`, con la franja delante se quedaría pegada por detrás de ella en vez de debajo. */
.cr-pegado {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.cr-cabecera {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: var(--cr-cabecera-alto);
    padding: 0 1.25rem 0 2rem;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: saturate(1.5) blur(10px);
    border-bottom: 1px solid var(--cr-linea);
}

.cr-boton-icono {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--cr-linea);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--brand-primary-dark);
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out);
}

.cr-boton-icono:hover {
    background: var(--cr-tinta-1);
    border-color: var(--cr-tinta-3);
    color: var(--brand-primary);
}

.cr-cabecera-menu {
    display: none;
}

/* Dónde se está: el icono de la pantalla, su carpeta y su nombre. */
.cr-migas {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cr-migas-icono {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cr-tinta-2);
    color: var(--brand-primary);
    font-size: .88rem;
    flex-shrink: 0;
}

.cr-migas ol {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .92rem;
    animation: cr-migas-entra 260ms var(--ease-out);
}

.cr-migas li {
    white-space: nowrap;
}

.cr-migas li + li::before {
    content: "";
    display: inline-block;
    width: .38rem;
    height: .38rem;
    margin: 0 .75rem 0 .5rem;
    border-top: 1.5px solid var(--cr-linea-fuerte);
    border-right: 1.5px solid var(--cr-linea-fuerte);
    transform: rotate(45deg);
    vertical-align: .1em;
}

.cr-migas-grupo {
    color: var(--color-text-muted);
}

.cr-migas-grupo a {
    color: inherit;
    text-decoration: none;
}

.cr-migas-grupo a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

.cr-migas [aria-current] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--brand-primary-dark);
    font-weight: var(--font-weight-semibold);
}

@keyframes cr-migas-entra {
    from { opacity: 0; transform: translateY(3px); }
}

.cr-cabecera-acciones {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* El botón del «Ir a…»: parece un campo, porque es lo que se va a hacer en él. */
.cr-cabecera-buscar {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 230px;
    height: 38px;
    padding: 0 .45rem 0 .85rem;
    border: 1px solid var(--cr-linea);
    border-radius: 10px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: .88rem;
    transition: all var(--duration-fast) var(--ease-out);
}

.cr-cabecera-buscar:hover {
    border-color: rgba(var(--brand-primary-rgb), .35);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--cr-sombra-1);
}

.cr-cabecera-buscar > .fas {
    color: var(--brand-primary);
    font-size: .82rem;
}

.cr-cabecera-buscar > span {
    flex: 1;
    text-align: left;
}

.cr-armazon kbd, .cr-paleta kbd {
    padding: .1rem .38rem;
    border: 1px solid var(--cr-linea-fuerte);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: var(--cr-font);
    font-size: .68rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: none;
}

/* El selector de empresa, en la cabecera clara. */
.cr-cabecera .cr-selector-empresa .form-select {
    height: 38px;
    background-color: var(--color-surface-alt);
    border-color: var(--cr-linea);
    border-radius: 10px;
    color: var(--color-text);
    font-weight: 500;
    padding-left: 2.1rem;
    min-width: 13rem;
}

.cr-cabecera .cr-selector-empresa .form-select:hover {
    border-color: rgba(var(--brand-primary-rgb), .35);
}

.cr-selector-empresa {
    position: relative;
}

.cr-selector-empresa > .fas {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-primary);
    font-size: .8rem;
    pointer-events: none;
}

/* Quién ha entrado: sus iniciales en un círculo con el degradado de la marca, y al pulsar, su
   menú. */
.cr-usuario {
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 42px;
    padding: 0 .65rem 0 .25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--color-text);
    font-size: .88rem;
    font-weight: var(--font-weight-semibold);
    transition: all var(--duration-fast) var(--ease-out);
}

.cr-usuario:hover {
    background: var(--cr-tinta-1);
    border-color: var(--cr-linea);
}

.cr-usuario-nombre {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-usuario-flecha {
    color: var(--color-text-muted);
    font-size: .62rem;
}

.cr-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cr-degradado);
    color: #fff;
    font-weight: var(--font-weight-semibold);
    font-size: .8rem;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.cr-avatar-grande {
    width: 44px;
    height: 44px;
    font-size: .95rem;
}

/* La foto dentro de cualquier avatar (FotoOIniciales): llena el círculo de quien la contiene,
   sea del tamaño que sea, y se recorta a él. Aquí y no en el CSS de cada pantalla porque el
   <img> lo pinta un componente, y el CSS aislado de la pantalla no le llega.
   La altura sale de la anchura y no de un height: 100%, que dentro de la rejilla o el flex del
   avatar no se resuelve: una foto vertical estiraba el círculo hasta hacerlo un óvalo. */
.cr-avatar-foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: inherit;
}

/* Si la foto no carga se esconde con `hidden`, que el display de arriba taparía. */
.cr-avatar-foto[hidden] {
    display: none;
}

/* El menú de la persona: un popover del navegador, pegado bajo la cabecera a la derecha. */
.cr-menu-usuario {
    position: fixed;
    inset: auto;
    top: calc(var(--cr-cabecera-alto) - 2px);
    right: 1rem;
    width: 280px;
    margin: 0;
    padding: .45rem;
    border: 1px solid var(--cr-linea);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--cr-sombra-3);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out),
                overlay 160ms allow-discrete, display 160ms allow-discrete;
}

.cr-menu-usuario:popover-open {
    opacity: 1;
    transform: none;
}

@starting-style {
    .cr-menu-usuario:popover-open {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

.cr-menu-usuario-cabeza {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
    padding: .65rem .6rem .75rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cr-tinta-2), var(--cr-tinta-1));
}

.cr-menu-usuario-cabeza > div {
    min-width: 0;
}

.cr-menu-usuario-cabeza strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand-primary-dark);
    font-size: .92rem;
}

.cr-menu-usuario-cabeza small {
    color: var(--color-text-muted);
    font-size: .76rem;
}

.cr-menu-usuario-seccion {
    margin: .45rem .6rem .2rem;
    color: var(--color-text-muted);
    font-size: .7rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cr-menu-usuario-opcion {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-text);
    font-size: .88rem;
    text-align: left;
    text-decoration: none;
}

.cr-menu-usuario-opcion > i {
    width: 1.1rem;
    color: var(--brand-primary);
    text-align: center;
}

.cr-menu-usuario-opcion kbd {
    margin-left: auto;
}

.cr-menu-usuario-opcion:hover {
    background: var(--cr-tinta-1);
    color: var(--brand-primary-dark);
}

.cr-menu-usuario-salir:hover {
    background: #fef3f2;
    color: #b42318;
}

.cr-menu-usuario-salir:hover > i {
    color: #b42318;
}

.cr-menu-usuario hr {
    margin: .4rem .3rem;
}

.cr-menu-usuario form {
    margin: 0;
}

/* ── La campana de avisos (CampanaDeAvisos) ── */
.cr-campana {
    position: relative;
}

/* El número va montado sobre la esquina, en el acento de la marca y con un aro del color de la
   cabecera para que se separe del botón. */
.cr-campana-cuenta {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--color-surface);
    border-radius: 999px;
    background: var(--brand-primary-light);
    color: #fff;
    font-size: .66rem;
    font-weight: var(--font-weight-semibold);
    line-height: 15px;
    text-align: center;
    animation: cr-campana-entra 220ms var(--ease-out);
}

@keyframes cr-campana-entra {
    from { transform: scale(.4); opacity: 0; }
}

.cr-avisos {
    position: fixed;
    inset: auto;
    top: calc(var(--cr-cabecera-alto) - 2px);
    right: 1rem;
    width: min(380px, calc(100vw - 1.5rem));
    max-height: min(520px, calc(100dvh - var(--cr-cabecera-alto) - 1.5rem));
    margin: 0;
    padding: 0;
    border: 1px solid var(--cr-linea);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--cr-sombra-3);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out),
                overlay 160ms allow-discrete, display 160ms allow-discrete;
}

.cr-avisos:popover-open {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
}

@starting-style {
    .cr-avisos:popover-open {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

.cr-avisos-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem .9rem .65rem;
    border-bottom: 1px solid var(--cr-linea);
}

.cr-avisos-cabeza strong {
    color: var(--brand-primary-dark);
    font-size: .95rem;
}

.cr-avisos-todas {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--brand-primary);
    font-size: .78rem;
    font-weight: var(--font-weight-semibold);
}

.cr-avisos-todas:hover {
    background: var(--cr-tinta-1);
}

.cr-avisos-lista {
    margin: 0;
    padding: .35rem;
    overflow-y: auto;
    list-style: none;
}

.cr-aviso {
    display: flex;
    align-items: flex-start;
    border-radius: 10px;
}

.cr-aviso:hover {
    background: var(--cr-tinta-1);
}

.cr-aviso-cuerpo {
    display: flex;
    flex: 1;
    gap: .7rem;
    min-width: 0;
    padding: .6rem .5rem .6rem .55rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.cr-aviso-cuerpo:hover {
    color: inherit;
}

.cr-aviso-icono {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cr-aviso-color) 14%, transparent);
    color: var(--cr-aviso-color);
    font-size: .85rem;
    flex-shrink: 0;
}

.cr-aviso-texto {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.cr-aviso-texto strong {
    color: var(--color-text);
    font-size: .86rem;
    font-weight: 500;
}

.cr-aviso-nuevo .cr-aviso-texto strong {
    font-weight: var(--font-weight-semibold);
}

.cr-aviso-mensaje {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-text-muted);
    font-size: .8rem;
}

.cr-aviso-texto small {
    color: var(--color-text-muted);
    font-size: .72rem;
}

/* El punto de «sin leer», que además es el botón para cambiarlo. Leído, sólo se ve al pasar. */
.cr-aviso-marca {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: .6rem .3rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    flex-shrink: 0;
}

.cr-aviso-marca > span {
    width: 9px;
    height: 9px;
    border: 2px solid transparent;
    border-radius: 50%;
}

.cr-aviso-nuevo .cr-aviso-marca > span {
    background: var(--brand-primary);
}

.cr-aviso:not(.cr-aviso-nuevo):hover .cr-aviso-marca > span {
    border-color: var(--cr-tinta-3);
}

.cr-aviso-marca:hover {
    background: var(--cr-tinta-2);
}

.cr-avisos-vacio,
.cr-avisos-error {
    margin: 0;
    padding: 1.6rem 1rem;
    color: var(--color-text-muted);
    font-size: .86rem;
    text-align: center;
}

div.cr-avisos-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

div.cr-avisos-vacio > i {
    color: var(--cr-tinta-3);
    font-size: 1.6rem;
}

.cr-avisos-error {
    color: #b42318;
}

/* ── El carril: el menú plegado, sólo en el escritorio ── */
@media (min-width: 992px) {
    html[data-menu="plegado"] .cr-lateral {
        width: var(--cr-lateral-carril);
    }

    html[data-menu="plegado"] .cr-cuerpo {
        margin-left: var(--cr-lateral-carril);
    }

    html[data-menu="plegado"] .cr-lateral-cabeza {
        padding: 0 0 0 20px;
    }

    html[data-menu="plegado"] .cr-marca-nombre {
        opacity: 0;
        pointer-events: none;
    }

    /* Lo flotante tiene que poder salirse del carril. Caben de sobra: sin grupos abiertos
       el primer nivel son ocho iconos. */
    html[data-menu="plegado"] .cr-nav {
        overflow: visible;
        padding: .9rem 14px 1.5rem;
    }

    html[data-menu="plegado"] .cr-nav-lista > li > .cr-nav-enlace,
    html[data-menu="plegado"] .cr-lateral-plegar {
        justify-content: center;
        gap: 0;
        width: 48px;
        min-height: 44px;
        padding: 0;
    }

    html[data-menu="plegado"] .cr-nav-lista > li > .cr-nav-enlace > .cr-nav-icono {
        font-size: 1.05rem;
    }

    html[data-menu="plegado"] .cr-nav-lista > li > .cr-nav-enlace .cr-nav-flecha {
        display: none;
    }

    /* Escondidos a la vista, no al lector de pantalla: son el nombre del botón. */
    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo > .cr-nav-enlace .cr-nav-texto,
    html[data-menu="plegado"] .cr-lateral-plegar .cr-nav-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        flex: none;
    }

    html[data-menu="plegado"] .cr-lateral-plegar .cr-nav-icono {
        transform: rotate(180deg);
    }

    /* El grupo con la pantalla abierta lleva la pastilla, que plegado no se ve el hijo. */
    html[data-menu="plegado"] .cr-nav-grupo.con-activa > .cr-nav-enlace {
        background: rgba(255, 255, 255, .13);
    }

    /* El nombre de una suelta, al pasar por encima: una etiqueta a la derecha. */
    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-hoja > .cr-nav-enlace .cr-nav-texto {
        position: absolute;
        left: calc(100% + 22px);
        top: 50%;
        flex: none;
        padding: .38rem .7rem;
        border-radius: 8px;
        background: var(--cr-menu-flotante);
        color: #fff;
        font-size: .82rem;
        font-weight: var(--font-weight-semibold);
        box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
        opacity: 0;
        pointer-events: none;
        transform: translate(-4px, -50%);
        transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
        overflow: visible;
    }

    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-hoja > .cr-nav-enlace:hover .cr-nav-texto,
    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-hoja > .cr-nav-enlace:focus-visible .cr-nav-texto {
        opacity: 1;
        transform: translate(0, -50%);
    }

    /* Las de un grupo, flotando al lado. Jornadoo.js las sube si no caben por abajo. */
    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo {
        position: relative;
    }

    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo > .cr-nav-hijos {
        position: absolute;
        left: calc(100% + 22px);
        top: calc(-.45rem + var(--cr-flotante-desvio, 0px));
        z-index: 2;
        display: block;
        width: 252px;
        padding: .45rem;
        border-radius: 14px;
        background: var(--cr-menu-flotante);
        box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
        visibility: hidden;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
    }

    /* Un puente invisible entre el icono y lo flotante: sin él, al cruzar el hueco se cierra. */
    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo > .cr-nav-hijos::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -24px;
        width: 24px;
    }

    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo:hover > .cr-nav-hijos,
    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo:focus-within > .cr-nav-hijos {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s;
    }

    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo > .cr-nav-hijos > ul {
        overflow: visible;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    html[data-menu="plegado"] .cr-nav-lista > .cr-nav-grupo > .cr-nav-hijos .cr-nav-enlace.activa::before {
        left: 0;
    }

    html[data-menu="plegado"] .cr-nav-flotante-titulo {
        display: block;
        padding: .4rem .6rem .5rem;
        color: rgba(255, 255, 255, .5);
        font-size: .7rem;
        font-weight: var(--font-weight-semibold);
        letter-spacing: .07em;
        text-transform: uppercase;
    }
}

/* ── El móvil: el menú es un cajón ── */
@media (max-width: 991.98px) {
    /* Por encima de la burbuja de colores (1040): abierto, el cajón manda. */
    .cr-lateral {
        z-index: 1045;
        width: min(300px, 86vw);
        transform: translateX(-100%);
        box-shadow: none;
    }

    html[data-menu-movil] .cr-lateral {
        transform: none;
        box-shadow: 0 0 60px rgba(0, 0, 0, .35);
    }

    html[data-menu-movil] body {
        overflow: hidden;
    }

    .cr-lateral-cerrar {
        display: grid;
    }

    .cr-lateral-pie {
        display: none;
    }

    .cr-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1044;
        background: rgba(12, 16, 32, .45);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--cr-transicion-menu), visibility 0s linear 260ms;
    }

    html[data-menu-movil] .cr-velo {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--cr-transicion-menu), visibility 0s;
    }

    .cr-cuerpo {
        margin-left: 0;
    }

    .cr-cabecera {
        gap: .6rem;
        padding: 0 .9rem;
    }

    .cr-cabecera-menu {
        display: inline-grid;
    }

    .cr-cabecera-buscar {
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .cr-contenido {
        padding: 1.1rem 1rem 2rem;
    }

    .cr-migas-icono,
    .cr-migas-grupo,
    .cr-migas li + li::before,
    .cr-usuario-nombre,
    .cr-usuario-flecha {
        display: none;
    }

    .cr-cabecera-buscar {
        justify-content: center;
        width: 38px;
        padding: 0;
    }

    .cr-cabecera-buscar > span,
    .cr-cabecera-buscar > kbd {
        display: none;
    }

    .cr-usuario {
        padding: 0 .25rem;
    }

    /* El selector de empresa, con el nombre a la vista, medía más de 200px y empujaba la
       cabecera fuera de la pantalla. Aquí es un botón de icono: el <select> sigue encima, sin
       texto, y al tocarlo abre la lista nativa del teléfono. El punto avisa de que se está
       viendo una sola sociedad y no todas. */
    .cr-cabecera .cr-selector-empresa .form-select {
        width: 38px;
        min-width: 0;
        padding: 0;
        background-image: none;
        color: transparent;
        cursor: pointer;
    }

    .cr-cabecera .cr-selector-empresa .form-select option {
        color: var(--color-text);
    }

    .cr-selector-empresa > .fas {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: .88rem;
    }

    .cr-selector-empresa-una::after {
        content: "";
        position: absolute;
        top: -3px;
        right: -3px;
        width: 11px;
        height: 11px;
        border: 2px solid var(--color-surface);
        border-radius: 50%;
        background: var(--brand-primary-light);
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cr-lateral, .cr-cuerpo, .cr-nav-hijos, .cr-velo, .cr-menu-usuario, .cr-migas ol,
    .cr-avisos, .cr-campana-cuenta {
        transition: none !important;
        animation: none !important;
    }
}

/* ── El «Ir a…» (PaletaDeComandos) ── */
.cr-paleta {
    width: min(620px, calc(100% - 2rem));
    max-height: min(560px, calc(100dvh - 4rem));
    margin: min(12vh, 110px) auto auto;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--cr-sombra-3), 0 0 0 1px rgba(var(--brand-primary-rgb), .08);
    overflow: hidden;
}

.cr-paleta[open] {
    display: flex;
    flex-direction: column;
    animation: cr-paleta-entra 180ms var(--ease-out);
}

.cr-paleta::backdrop {
    background: rgba(15, 20, 40, .42);
    backdrop-filter: blur(3px);
}

@keyframes cr-paleta-entra {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
}

.cr-paleta-busqueda {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--cr-linea);
}

.cr-paleta-busqueda > .fas {
    color: var(--brand-primary);
}

.cr-paleta-campo {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--color-text);
    font-size: 1.05rem;
}

.cr-paleta-campo::placeholder {
    color: var(--color-text-muted);
    opacity: .8;
}

.cr-paleta-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: .5rem;
    overflow-y: auto;
    list-style: none;
    scroll-padding: .5rem;
}

.cr-paleta-opcion {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
}

.cr-paleta-opcion[aria-selected="true"] {
    background: var(--cr-tinta-2);
    color: var(--brand-primary-dark);
}

.cr-paleta-icono {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cr-tinta-1);
    color: var(--brand-primary);
    font-size: .85rem;
    flex-shrink: 0;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.cr-paleta-opcion[aria-selected="true"] .cr-paleta-icono {
    background: var(--cr-degradado);
    color: #fff;
}

.cr-paleta-texto {
    flex: 1;
    min-width: 0;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
}

.cr-paleta-texto small {
    display: block;
    margin-top: .15rem;
    color: var(--color-text-muted);
    font-size: .75rem;
    font-weight: 400;
}

.cr-paleta-reciente {
    display: none;
    color: var(--color-text-muted);
    font-size: .72rem;
    white-space: nowrap;
}

.cr-paleta-opcion.reciente .cr-paleta-reciente {
    display: inline;
}

.cr-paleta-intro {
    color: var(--brand-primary);
    font-size: .75rem;
    opacity: 0;
}

.cr-paleta-opcion[aria-selected="true"] .cr-paleta-intro {
    opacity: 1;
}

/* Las personas: su grupo va detrás de las pantallas (éstas llevan `order` ≤ 0) y lo llena
   jornadoo.js con lo que contesta la API. */
.cr-paleta-personas {
    order: 1;
}

.cr-paleta-personas > ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-paleta-seccion {
    display: block;
    padding: .65rem .7rem .3rem;
    color: var(--color-text-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cr-paleta-nada {
    margin: 0;
    padding: 2.2rem 1rem 2.4rem;
    color: var(--color-text-muted);
    text-align: center;
}

.cr-paleta-nada .fas {
    display: block;
    margin: 0 auto .6rem;
    color: var(--cr-linea-fuerte);
    font-size: 1.6rem;
}

.cr-paleta-pie {
    display: flex;
    gap: 1.2rem;
    padding: .6rem 1.15rem;
    border-top: 1px solid var(--cr-linea);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: .74rem;
}

.cr-paleta-pie kbd + kbd {
    margin-left: .2rem;
}

.cr-paleta-pie kbd {
    margin-right: .3rem;
}

@media (max-width: 767.98px) {
    .cr-paleta-pie {
        display: none;
    }
}

/* ══ Piezas comunes de las pantallas ═════════════════════════════════════════ */

/* La cabecera de una pantalla: icono en su pastilla, título, una línea de qué es, y las
   acciones a la derecha. Es `CabeceraDePagina`, y cada pantalla la usa en vez de su `<h4>`. */
.cr-pagina-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.cr-pagina-titulo {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    min-width: 0;
}

.cr-pagina-icono {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--cr-degradado);
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px rgba(var(--brand-primary-rgb), .55);
}

.cr-pagina-titulo h1 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.011em;
    margin: 0;
    line-height: 1.2;
}

.cr-pagina-titulo p {
    margin: .2rem 0 0;
    color: var(--color-text-muted);
    font-size: .9rem;
    max-width: 70ch;
}

.cr-pagina-acciones {
    display: flex;
    align-items: center;
    margin-top: .3rem;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Tarjetas. */
.card {
    --bs-card-border-color: var(--cr-linea);
    --bs-card-border-radius: var(--radius-md);
    --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
    --bs-card-cap-bg: var(--color-surface);
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.15rem;
    --bs-card-spacer-x: 1.15rem;
    box-shadow: var(--cr-sombra-1);
}

.card.shadow-sm {
    box-shadow: var(--cr-sombra-2) !important;
}

.card-header {
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
}

.card-header.bg-light, .card-header.bg-white {
    background-color: var(--color-surface) !important;
}

.card-footer {
    background-color: var(--color-surface-alt);
}

/* Tablas: cabecera discreta en su gris, filas altas, y la marca al pasar por encima. */
.table {
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--cr-linea);
    --bs-table-hover-bg: var(--cr-tinta-1);
    --bs-table-striped-bg: rgba(var(--brand-primary-rgb), .025);
    --bs-table-active-bg: var(--cr-tinta-2);
    margin-bottom: 0;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: .76rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .02em;
    border-bottom: 1px solid var(--cr-linea-fuerte);
    padding-top: .65rem;
    padding-bottom: .65rem;
    white-space: nowrap;
}

.table > thead.table-light > tr > th,
.table > thead.table-dark > tr > th {
    --bs-table-bg: var(--color-surface-alt);
    --bs-table-color: var(--color-text-muted);
}

.table > tbody > tr > td {
    padding-top: .7rem;
    padding-bottom: .7rem;
    vertical-align: middle;
}

.table-sm > tbody > tr > td {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table-hover > tbody > tr {
    transition: background-color var(--duration-fast) var(--ease-out);
}

/* Una tabla suelta, fuera de una tarjeta, se presenta como tal: fondo, borde y esquinas. */
.table-responsive:not(.card .table-responsive):not(.modal .table-responsive) {
    background: var(--color-surface);
    border: 1px solid var(--cr-linea);
    border-radius: var(--radius-md);
    box-shadow: var(--cr-sombra-1);
}

.table-responsive > .table > thead > tr > th:first-child,
.table-responsive > .table > tbody > tr > td:first-child {
    padding-left: 1rem;
}

.table-responsive > .table > thead > tr > th:last-child,
.table-responsive > .table > tbody > tr > td:last-child {
    padding-right: 1rem;
}

/* Formularios. */
.form-label {
    font-size: .82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border-color: var(--cr-linea-fuerte);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: rgba(var(--brand-primary-rgb), .45);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .22rem rgba(var(--brand-primary-rgb), .16);
}

.form-control:disabled, .form-select:disabled, fieldset:disabled .form-control, fieldset:disabled .form-select {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2846, 61, 138, 0.5%29'/%3e%3c/svg%3e");
}

.form-text {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.input-group-text {
    background-color: var(--color-surface-alt);
    border-color: var(--cr-linea-fuerte);
    color: var(--color-text-muted);
}

/* Botones. */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-primary:not(:disabled) {
    box-shadow: 0 1px 2px rgba(var(--brand-primary-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 12px -2px rgba(var(--brand-primary-rgb), .45);
}

.btn-link {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-primary-dark);
    text-decoration: none;
}

/* Etiquetas: pastillas redondas, más ligeras que el bloque de Bootstrap. */
.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-y: .38em;
    --bs-badge-padding-x: .7em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.badge.bg-primary {
    background-color: var(--cr-tinta-2) !important;
    color: var(--brand-primary) !important;
}

.badge.bg-light {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--cr-linea);
}

.badge.bg-secondary {
    background-color: #e7eaf1 !important;
    color: #3d4457 !important;
}

.badge.bg-success {
    background-color: #e3f4e6 !important;
    color: #1d6a2b !important;
}

.badge.bg-danger {
    background-color: #fde8e7 !important;
    color: #a3221a !important;
}

.badge.bg-warning {
    background-color: #fdf1d6 !important;
    color: #7a4b00 !important;
}

.badge.bg-info {
    background-color: #e1f1fb !important;
    color: #0b5578 !important;
}

/* Las que ya traían su color de texto explícito se respetan. */
.badge.bg-warning.text-dark, .badge.bg-info.text-dark, .badge.bg-light.text-dark {
    color: inherit;
}

/* Avisos: una franja de color a la izquierda en vez de un bloque entero teñido. */
.alert {
    --bs-alert-border-radius: var(--radius-md);
    border-width: 1px;
    border-left-width: 4px;
    font-size: .92rem;
}

.alert-light {
    --bs-alert-bg: var(--color-surface);
    --bs-alert-border-color: var(--cr-linea);
    --bs-alert-color: var(--color-text);
    border-left-color: var(--cr-linea-fuerte);
}

.alert-info {
    --bs-alert-bg: #f0f7fc;
    --bs-alert-border-color: #cfe5f4;
    --bs-alert-color: #0b4a68;
    border-left-color: #1e88c7;
}

.alert-warning {
    --bs-alert-bg: #fffaeb;
    --bs-alert-border-color: #fbe5b0;
    --bs-alert-color: #6b4200;
    border-left-color: #e6a100;
}

.alert-danger {
    --bs-alert-bg: #fef3f2;
    --bs-alert-border-color: #f8d0cc;
    --bs-alert-color: #8f1d15;
    border-left-color: #d92d20;
}

.alert-success {
    --bs-alert-bg: #f0f9f1;
    --bs-alert-border-color: #cde9d2;
    --bs-alert-color: #1b5e27;
    border-left-color: #2e9a44;
}

.alert-secondary {
    --bs-alert-bg: var(--color-surface-alt);
    --bs-alert-border-color: var(--cr-linea);
    --bs-alert-color: var(--color-text);
    border-left-color: var(--color-text-muted);
}

/* Modales: esquinas grandes, sombra honda y el velo en la noche del tema. */
.modal {
    --bs-modal-border-radius: var(--radius-lg);
    --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-modal-border-color: transparent;
    --bs-modal-box-shadow: var(--cr-sombra-3);
    --bs-modal-header-padding: 1.1rem 1.4rem;
    --bs-modal-padding: 1.4rem;
    --bs-modal-footer-bg: var(--color-surface-alt);
}

.modal-content {
    box-shadow: var(--cr-sombra-3);
}

.modal-header {
    border-bottom-color: var(--cr-linea);
}

.modal-title {
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary-dark);
    font-size: 1.1rem;
}

.modal-title .fas, .modal-title .fa-solid {
    color: var(--brand-primary);
}

.modal-footer {
    background-color: var(--color-surface-alt);
    border-top-color: var(--cr-linea);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--brand-primary-dark);
    --bs-backdrop-opacity: .45;
}

/* Los modales que las pantallas abren a mano (`class="modal fade show d-block"`) no traen el
   velo de Bootstrap: se lo pone su propio fondo. */
.modal.show.d-block {
    background-color: rgba(23, 32, 79, .45) !important;
    background-color: color-mix(in srgb, var(--brand-primary-dark) 48%, transparent) !important;
    animation: cr-velo var(--duration-normal) var(--ease-out);
}

.modal.show.d-block .modal-dialog {
    animation: cr-aparece var(--duration-normal) var(--ease-out);
}

@keyframes cr-velo {
    from { opacity: 0; }
}

@keyframes cr-aparece {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
}

/* Pestañas y píldoras. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--cr-linea);
    --bs-nav-tabs-link-active-color: var(--brand-primary-dark);
    --bs-nav-tabs-link-active-border-color: var(--cr-linea) var(--cr-linea) var(--color-surface);
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--brand-primary);
    --bs-nav-link-font-weight: 500;
}

.nav-tabs .nav-link.active {
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 2px 0 var(--brand-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand-primary);
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--brand-primary);
}

/* Listas, desplegables, paginación. */
.list-group {
    --bs-list-group-border-color: var(--cr-linea);
    --bs-list-group-action-hover-bg: var(--cr-tinta-1);
    --bs-list-group-active-bg: var(--brand-primary);
    --bs-list-group-active-border-color: var(--brand-primary);
    --bs-list-group-border-radius: var(--radius-md);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--cr-linea);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-box-shadow: var(--cr-sombra-2);
    --bs-dropdown-link-hover-bg: var(--cr-tinta-1);
    --bs-dropdown-link-active-bg: var(--brand-primary);
    box-shadow: var(--cr-sombra-2);
}

.pagination {
    --bs-pagination-color: var(--brand-primary);
    --bs-pagination-hover-color: var(--brand-primary-dark);
    --bs-pagination-hover-bg: var(--cr-tinta-1);
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-border-color: var(--cr-linea);
    --bs-pagination-focus-box-shadow: 0 0 0 .22rem rgba(var(--brand-primary-rgb), .16);
}

.progress {
    --bs-progress-bg: #e7eaf1;
    --bs-progress-bar-bg: var(--brand-primary);
    --bs-progress-border-radius: 999px;
}

.spinner-border {
    --bs-spinner-border-width: .2em;
}

.text-primary .spinner-border, .spinner-border.text-primary {
    color: var(--brand-primary) !important;
}

/* El «cargando» y el «no hay nada» de las pantallas: `py-5 text-center text-muted` es el patrón
   que se repite. Se centra y se le da aire, sin tocar el marcado. */
.text-center.text-muted.py-5, .text-center.py-5.text-muted {
    color: var(--color-text-muted) !important;
}

/* Un «vacío» con su dibujo: `EstadoVacio`. */
.cr-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-text-muted);
}

.cr-vacio-icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--cr-tinta-2);
    color: var(--brand-primary);
    font-size: 1.5rem;
}

.cr-vacio h2 {
    font-size: 1.05rem;
    margin-bottom: .3rem;
}

.cr-vacio p {
    max-width: 46ch;
    margin: 0;
    font-size: .9rem;
}

/* La barra de filtros encima de una rejilla. */
.cr-filtros {
    background: var(--color-surface);
    border: 1px solid var(--cr-linea);
    border-radius: var(--radius-md);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--cr-sombra-1);
}

/* Un dato suelto con su etiqueta (fichas, resúmenes). */
.cr-dato {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.cr-dato > span:first-child {
    font-size: .75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.cr-dato > strong, .cr-dato > span:last-child {
    color: var(--brand-primary-dark);
    font-weight: var(--font-weight-semibold);
}

/* Las utilidades de Bootstrap que las pantallas usan como «fondo suave». */
.bg-light {
    background-color: var(--color-surface-alt) !important;
}

.border {
    border-color: var(--cr-linea) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-primary {
    color: var(--brand-primary) !important;
}

a {
    text-underline-offset: .18em;
}

hr {
    border-color: var(--cr-linea);
    opacity: 1;
}

/* El aviso de error de Blazor, que por defecto llega sin estilo. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 2rem));
    padding: .8rem 1.1rem;
    background: var(--brand-primary-dark);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--cr-sombra-3);
    z-index: 2000;
    font-size: .92rem;
}

#blazor-error-ui .reload {
    color: #fff;
    font-weight: var(--font-weight-semibold);
    margin-left: .5rem;
}

/* ── 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.

   Ahora es un control segmentado: un carril gris con la opción elegida en blanco encima. */
.gf-view-tabs {
    display: inline-flex;
    gap: .2rem;
    padding: .25rem;
    border: none;
    border-radius: var(--radius-md);
    background: #e7eaf1;
}

.gf-view-tabs .nav-link {
    border: none;
    border-radius: calc(var(--radius-md) - .2rem);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: .88rem;
    padding: .4rem .9rem;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.gf-view-tabs .nav-link:hover {
    color: var(--brand-primary-dark);
}

.gf-view-tabs .nav-link.active {
    color: var(--brand-primary-dark);
    background-color: var(--color-surface);
    box-shadow: var(--cr-sombra-1), 0 0 0 1px rgba(var(--brand-primary-rgb), .08);
}

/* ══ La entrada ══════════════════════════════════════════════════════════════
   A la izquierda el logotipo, con lo que hace la herramienta; a la derecha el formulario. **No
   son dos paneles**: el degradado es uno solo y cruza la pantalla entera, de la noche del tema
   bajo el texto blanco hasta acabar en blanco bajo el formulario. Con dos fondos salía un corte
   vertical en medio que partía la pantalla en dos.

   Las paradas van atadas a las columnas (la de la marca es 1,1 de 2,1: el 52 %): el texto
   blanco no pasa del 42 % ni en la anchura más estrecha de escritorio, y la caja del formulario
   no empieza antes del 54 %, así que el tramo que se aclara cae en el hueco entre los dos. En
   móvil, la marca se queda en una franja y el degradado baja en vertical. */
.cr-entrada {
    /* Lo que se aclara es la marca teñida de acento, no el acento solo: con el acento puro, el
       tramo del medio salía en una franja chillona (salmón en naranja, verde menta en Jornadoo). */
    --cr-entrada-tinte: color-mix(in oklab, var(--brand-primary) 62%, var(--brand-primary-light));
    /* --cr-entrada-noche: lo que aguanta la oscura antes de mezclarse; 0 salvo en Negro, que
       lo pone Tema.NocheDeEntrada. Las paradas siguientes se corren con ella. */
    --cr-entrada-fundido: linear-gradient(in oklab 100deg,
        var(--brand-primary-dark) 0%,
        var(--brand-primary-dark) var(--cr-entrada-noche, 0%),
        var(--brand-primary) calc(var(--cr-entrada-noche, 0%) + 24%),
        color-mix(in oklab, var(--brand-primary) 82%, var(--brand-primary-light)) max(35%, calc(var(--cr-entrada-noche, 0%) + 28%)),
        color-mix(in oklab, var(--cr-entrada-tinte) 42%, var(--color-surface)) max(46%, calc(var(--cr-entrada-noche, 0%) + 34%)),
        color-mix(in oklab, var(--cr-entrada-tinte) 13%, var(--color-surface)) max(55%, calc(var(--cr-entrada-noche, 0%) + 40%)),
        color-mix(in oklab, var(--cr-entrada-tinte) 4%, var(--color-surface)) 62%,
        var(--color-surface) 70%);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--cr-entrada-fundido);
    background-color: var(--color-surface);
    overflow: hidden;
    isolation: isolate;
}

.cr-entrada-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem clamp(2rem, 5vw, 4.5rem);
    color: #fff;
}

/* El reloj, enorme y a medio salir por la esquina, y con la hora de verdad (Entrar.razor).
   Cae justo donde el degradado pasa de la noche al blanco, así que la esfera es un cristal
   tintado con la noche del tema: sobre lo oscuro apenas se nota y sobre lo claro es la que
   deja leer las marcas y las agujas, que son blancas. */
/* El tamaño sale del hueco que hay entre el texto de la marca y el formulario, no de la
   altura: en `vmin`, en un portátil de 1280×720 se comía el lema. Centrado al 45 % del ancho
   (la columna de la marca acaba en el 52,4 %). Desde que no está la ilustración del logotipo
   es la pieza central de la pantalla: más grande y menos hundido en la esquina. */
.cr-entrada-reloj {
    --cr-reloj-tam: min(38vw, 84vh);
    position: absolute;
    right: calc(7.4vw - var(--cr-reloj-tam) / 2);
    bottom: calc(var(--cr-reloj-tam) * -.14);
    width: var(--cr-reloj-tam);
    height: var(--cr-reloj-tam);
    z-index: -1;
    pointer-events: none;
    animation: cr-entrada-reloj-entra 1s var(--ease-out) both;
}

.cr-entrada-reloj > svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Sin backdrop-filter: con el halo, la órbita y el coche moviéndose detrás, el desenfoque
       se rehacía en cada fotograma y era un tercio de lo que gastaba la GPU en esta pantalla,
       para una diferencia que no se ve —el cristal ya lo pone el degradado de la esfera—. */
    filter: drop-shadow(0 30px 60px rgba(8, 12, 40, .28));
}

@keyframes cr-entrada-reloj-entra {
    from { opacity: 0; transform: scale(.94) rotate(-6deg); }
}

/* El halo respira despacio detrás de la esfera, con el acento del tema. */
.cr-entrada-reloj-halo {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    /* Sólo por fuera de la esfera (su borde cae al 81 %): por dentro teñía el cristal. */
    background: radial-gradient(closest-side,
        transparent 74%,
        color-mix(in oklab, var(--brand-primary-light) 22%, transparent) 82%,
        transparent);
    animation: cr-entrada-respira 7s ease-in-out infinite;
}

@keyframes cr-entrada-respira {
    0%, 100% { opacity: .45; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.03); }
}

/* La órbita: un aro discontinuo con un punto de acento que da la vuelta en dos minutos. En
   acento y medio transparente, para que se vea igual sobre la noche que sobre el blanco. */
.cr-entrada-reloj-orbita {
    position: absolute;
    inset: -5.5%;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in oklab, var(--brand-primary-light) 45%, transparent);
    animation: cr-entrada-orbita 120s linear infinite;
}

.cr-entrada-reloj-orbita::after {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cr-menu-acento);
    box-shadow: 0 0 14px 2px var(--brand-primary-light);
}

@keyframes cr-entrada-orbita {
    to { transform: rotate(360deg); }
}

.cr-entrada-reloj-esfera {
    fill: url(#cr-entrada-cristal);
    stroke: rgba(255, 255, 255, .4);
    stroke-width: .8;
}

/* Las horas, gruesas como las del logotipo. */
.cr-entrada-reloj-hora {
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 4;
    stroke-linecap: round;
}

.cr-entrada-reloj-minuto {
    stroke: rgba(255, 255, 255, .32);
    stroke-width: .8;
    stroke-linecap: round;
}

/* Cada aguja es una capa (un <div>) del tamaño de la esfera, encima de ella: gira por su
   centro, que es el de la esfera, y la GPU la mueve sin repintar nada (ver Entrar.razor). El
   trazo se hereda del <div> al dibujo. */
.cr-entrada-reloj .cr-aguja {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    stroke-linecap: round;
    transition: transform .6s cubic-bezier(.4, 1.6, .6, 1);
}

.cr-entrada-reloj .cr-aguja > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cr-entrada-reloj .cr-aguja-horas {
    stroke: #fff;
    stroke-width: 6.5;
}

.cr-entrada-reloj .cr-aguja-minutos {
    stroke: rgba(255, 255, 255, .95);
    stroke-width: 4.2;
}

/* El segundero barre, no salta: con un segundo de transición lineal cada tic enlaza con el
   siguiente. Los grados se cuentan desde medianoche, así que no da la vuelta hacia atrás. */
.cr-entrada-reloj .cr-aguja-segundos {
    stroke: var(--cr-menu-acento);
    fill: var(--cr-menu-acento);
    stroke-width: 1.5;
    transition: transform 1s linear;
}

.cr-entrada-reloj-eje {
    fill: var(--brand-primary-dark);
}

.cr-entrada-reloj.cr-quieto .cr-aguja {
    transition: none;
}

/* En reposo (jornadoo.js, tras un minuto sin que nadie toque nada) las agujas saltan: tres
   capas movidas una vez por segundo en vez de sesenta. Las de horas y minutos también, que
   avanzan una décima de grado cada segundo —no se ve— y su transición de 0,6 s tenía la
   pantalla pintando más de la mitad del tiempo. */
.cr-entrada.cr-reposo .cr-entrada-reloj .cr-aguja {
    transition: none;
}

/* En pantallas medianas el lema ocupa más a lo ancho: el reloj se hunde más en la esquina
   para que su borde pase por debajo de la primera línea. */
@media (max-width: 1499.98px) {
    .cr-entrada-reloj {
        bottom: calc(var(--cr-reloj-tam) * -.3);
    }
}

/* ── Las piezas de fondo ──
   Blancas y casi transparentes, por debajo del reloj y del texto: las del logotipo (documentos
   y móvil) más la firma, el chaleco y el casco. Flotan cada una a su ritmo (--dx, --dy, --giro,
   --vaiven, --dur) y el coche cruza por un carril abajo. Todo lo que se anima aquí es un <div>
   con el dibujo dentro: sobre un <svg>, Chrome no lo puede mover en la GPU. */
.cr-entrada-fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
    color: #fff;
    pointer-events: none;
}

.cr-fondo-pieza {
    position: absolute;
    opacity: var(--opacidad, .12);
    transform: rotate(var(--giro, 0deg));
    animation:
        cr-fondo-aparece 1.6s var(--ease-out) both,
        cr-fondo-flota var(--dur, 18s) ease-in-out var(--retraso, 0s) infinite alternate;
}

.cr-fondo-pieza > svg {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes cr-fondo-aparece {
    from { opacity: 0; }
}

@keyframes cr-fondo-flota {
    from { transform: translate(0, 0) rotate(var(--giro, 0deg)); }
    to { transform: translate(var(--dx, 0px), var(--dy, -18px)) rotate(calc(var(--giro, 0deg) + var(--vaiven, 4deg))); }
}

.cr-fondo-documentos {
    top: 11%;
    left: 52%;
    width: clamp(110px, 9.5vw, 175px);
    --giro: -10deg;
    --vaiven: 5deg;
    --dx: 12px;
    --dy: -24px;
    --dur: 17s;
    --opacidad: .13;
}

.cr-fondo-firma {
    top: 18%;
    left: 22%;
    width: clamp(78px, 6.5vw, 120px);
    --giro: 10deg;
    --vaiven: -7deg;
    --dx: 14px;
    --dy: -16px;
    --dur: 21s;
    --retraso: -9s;
    --opacidad: .12;
}

.cr-fondo-casco {
    top: 34%;
    left: 40%;
    width: clamp(70px, 5.8vw, 108px);
    --giro: -12deg;
    --vaiven: 8deg;
    --dx: -12px;
    --dy: -14px;
    --dur: 15s;
    --retraso: -6s;
    --opacidad: .12;
}

.cr-fondo-movil {
    top: 60%;
    left: 9%;
    width: clamp(64px, 5.6vw, 100px);
    --giro: 9deg;
    --vaiven: -6deg;
    --dx: -10px;
    --dy: 20px;
    --dur: 13s;
    --retraso: -4s;
    --opacidad: .15;
}

.cr-fondo-chaleco {
    top: 66%;
    left: 31%;
    width: clamp(62px, 5vw, 92px);
    --giro: -6deg;
    --vaiven: 7deg;
    --dx: 10px;
    --dy: -18px;
    --dur: 19s;
    --retraso: -12s;
    --opacidad: .12;
}

/* El carril: se funde por los dos lados para que el coche aparezca y se vaya sin corte. */
.cr-fondo-carril {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5.25rem;
    height: 58px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 64%, transparent 90%);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 64%, transparent 90%);
}

/* La caja ocupa el carril entero, así que su 100 % es el ancho del carril: el coche sale por
   la izquierda y llega justo al borde derecho. El retraso es negativo para que al cargar ya
   esté a medio camino y, sin movimiento, no se quede escondido fuera del carril. */
.cr-fondo-vehiculo {
    position: absolute;
    inset: 0;
    opacity: .2;
    animation: cr-fondo-circula 24s linear var(--retraso, 0s) infinite;
}

/* El coche: la carrocería y, encima, las dos ruedas. La caja guarda la proporción del dibujo
   (viewBox -36 0 172 60) para que las ruedas caigan en su sitio a cualquier altura. */
.cr-fondo-coche {
    position: relative;
    height: 100%;
    aspect-ratio: 172 / 60;
    animation: cr-fondo-bache .5s ease-in-out infinite alternate;
}

.cr-fondo-coche > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Las ruedas ruedan: una vuelta por cada vez su circunferencia que avanza el coche, más o
   menos, para que no parezca que patina. Cada una mide 18 × 18 del dibujo y va centrada en su
   eje: (32, 50) la de atrás y (104, 50) la de delante, contando con los 36 de la estela. */
.cr-fondo-rueda {
    position: absolute;
    top: calc((50 - 9) / 60 * 100%);
    width: calc(18 / 172 * 100%);
    height: calc(18 / 60 * 100%);
    animation: cr-fondo-gira 1.4s linear infinite;
}

.cr-fondo-rueda-trasera {
    left: calc((36 + 32 - 9) / 172 * 100%);
}

.cr-fondo-rueda-delantera {
    left: calc((36 + 104 - 9) / 172 * 100%);
}

.cr-fondo-rueda > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cr-fondo-estela {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .7;
}

@keyframes cr-fondo-circula {
    from { transform: translateX(-180px); }
    to { transform: translateX(100%); }
}

@keyframes cr-fondo-bache {
    to { transform: translateY(-1.5px); }
}

@keyframes cr-fondo-gira {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cr-entrada-reloj, .cr-entrada-reloj-halo, .cr-entrada-reloj-orbita, .cr-fondo-pieza, .cr-fondo-rueda {
        animation: none;
    }

    .cr-entrada-reloj .cr-aguja {
        transition: none;
    }

    .cr-fondo-vehiculo, .cr-fondo-coche {
        animation-play-state: paused;
    }
}

/* En reposo se para todo lo que se mueve de adorno, donde esté —se reanuda desde ahí, sin
   salto—. Sólo sigue el reloj, que dice la hora. */
.cr-entrada.cr-reposo :is(.cr-fondo-pieza, .cr-fondo-vehiculo, .cr-fondo-coche, .cr-fondo-rueda,
                           .cr-entrada-reloj-halo, .cr-entrada-reloj-orbita) {
    animation-play-state: paused;
}

.cr-entrada-nombre {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

.cr-entrada-nombre img, .cr-entrada-nombre svg {
    width: 44px;
    height: 44px;
}

.cr-entrada-lema {
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    line-height: 1.15;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.006em;
    max-width: 18ch;
    margin: 0 0 1rem;
    color: #fff;
}

.cr-entrada-texto {
    color: rgba(255, 255, 255, .72);
    max-width: 44ch;
    margin: 0;
}

.cr-entrada-pie {
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.cr-entrada-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem clamp(1.25rem, 5vw, 4rem);
}

.cr-entrada-caja {
    width: 100%;
    max-width: 24rem;
}

.cr-entrada-caja h1 {
    font-size: 1.85rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.0125em;
    margin-bottom: .35rem;
}

.cr-entrada-caja .cr-entrada-sub {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.cr-entrada-caja .form-control {
    padding: .7rem .9rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.cr-entrada-caja .btn-primary {
    padding: .75rem 1rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.cr-campo-clave {
    position: relative;
}

.cr-campo-clave .form-control {
    padding-right: 3rem;
}

.cr-campo-clave button {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
}

.cr-campo-clave button:hover {
    color: var(--brand-primary);
    background: var(--cr-tinta-1);
}

/* Los iconos dibujados a mano de la entrada y de la burbuja de colores, que tienen que verse
   sin Font Awesome (App.razor no lo carga en la entrada). Del tamaño y el color del texto,
   como un <i class="fas">. */
.cr-icono {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cr-icono .cr-icono-relleno {
    fill: currentColor;
    stroke: none;
}

.cr-campo-clave .cr-icono-ocultar,
.cr-campo-clave .cr-clave-visible .cr-icono-ver {
    display: none;
}

.cr-campo-clave .cr-clave-visible .cr-icono-ocultar {
    display: inline;
}

@media (max-width: 991.98px) {
    /* Una columna: arriba una cabecera con el color del tema, y el formulario debajo en una
       hoja blanca que se monta sobre ella con las esquinas redondeadas. Antes la franja se
       fundía a blanco en vertical, y el tramo del fundido —justo detrás de «Entrar»— salía de
       un gris azulado turbio; con la hoja no hay tramo intermedio. */
    .cr-entrada {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100dvh;
        background: var(--color-surface);
    }

    .cr-entrada-marca {
        isolation: isolate;
        overflow: hidden;
        min-height: 34dvh;
        padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem 3.6rem;
        background:
            radial-gradient(circle at 100% 100%, color-mix(in oklab, var(--brand-primary-light) 38%, transparent), transparent 62%),
            linear-gradient(in oklab 160deg, var(--brand-primary-dark) 0%, var(--brand-primary) 85%);
        background-color: var(--brand-primary-dark);
    }

    /* El reloj vivo asoma por la derecha de la cabecera, a medio salir. */
    .cr-entrada-reloj {
        --cr-reloj-tam: 16rem;
        top: 1.25rem;
        right: -6.5rem;
        bottom: auto;
    }

    .cr-entrada-reloj > svg {
        filter: drop-shadow(0 12px 24px rgba(8, 12, 40, .3));
    }

    /* En la cabecera no caben piezas flotando sin pisar el lema: sólo pasa la flota, pequeña,
       justo encima de la hoja del formulario. */
    .cr-fondo-pieza {
        display: none;
    }

    .cr-fondo-carril {
        bottom: 2.15rem;
        height: 26px;
    }

    .cr-entrada-pie {
        display: none;
    }

    .cr-entrada-texto {
        max-width: 13.5rem;
        margin-top: .6rem;
        font-size: .88rem;
        line-height: 1.45;
    }

    /* En dos líneas y a la izquierda: no pasa por encima del reloj. */
    .cr-entrada-lema {
        font-size: 1.45rem;
        margin: 1.5rem 0 0;
        max-width: 13ch;
        text-shadow: 0 2px 12px rgba(8, 12, 40, .35);
    }

    .cr-entrada-formulario {
        position: relative;
        z-index: 1;
        align-items: flex-start;
        margin-top: -1.75rem;
        padding: 2rem 1.25rem max(2rem, env(safe-area-inset-bottom));
        border-radius: 1.5rem 1.5rem 0 0;
        background: var(--color-surface);
        box-shadow: 0 -12px 30px -14px rgba(var(--brand-primary-rgb), .45);
    }

    .cr-entrada-caja {
        margin: 0 auto;
    }

    .cr-entrada-caja h1 {
        font-size: 1.6rem;
    }

    .cr-entrada-caja .cr-entrada-sub {
        margin-bottom: 1.5rem;
    }

    /* 16px en los campos: con menos, Safari del iPhone amplía la página al tocarlos. */
    .cr-entrada-caja .form-control {
        font-size: 16px;
    }

    /* La burbuja de colores, abajo, tapaba el botón de entrar en cuanto la pantalla era baja:
       aquí sube a la esquina de la cabecera y despliega hacia abajo. */
    body:has(.cr-entrada) .cr-temas {
        top: max(1.1rem, env(safe-area-inset-top));
        bottom: auto;
        flex-direction: column-reverse;
    }

    body:has(.cr-entrada) .cr-temas-lista {
        flex-direction: column;
    }

    body:has(.cr-entrada) .cr-temas-boton {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        border-width: 2px;
    }
}

/* Un móvil bajo (el iPhone SE, 667): sin la descripción y con la cabecera justa, el botón de
   entrar sigue cabiendo sin desplazar la página. */
@media (max-width: 991.98px) and (max-height: 740px) {
    .cr-entrada-marca {
        min-height: 0;
    }

    .cr-entrada-texto {
        display: none;
    }

    .cr-entrada-reloj {
        --cr-reloj-tam: 12rem;
        top: .5rem;
        right: -5rem;
    }
}

/* ══ Inicio ══════════════════════════════════════════════════════════════════
   El reloj del logotipo, vivo y con la hora de verdad: lo único llamativo de la consola, y
   por eso está sólo aquí. Debajo, las pantallas a las que se llega, por carpetas. */
.cr-portada {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2.25rem;
    padding: 2rem 2.25rem;
    border-radius: 20px;
    background: var(--cr-degradado);
    background-color: var(--brand-primary-dark);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 20px 44px -22px rgba(var(--brand-primary-rgb), .7);
    margin-bottom: 2rem;
}

.cr-portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, .12), transparent 55%);
    z-index: -1;
}

.cr-esfera {
    width: 168px;
    height: 168px;
    flex-shrink: 0;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .28));
}

.cr-esfera .cr-aguja {
    transform-origin: 100px 100px;
    transition: transform .45s cubic-bezier(.4, 2.1, .6, 1);
}

.cr-esfera .cr-aguja-segundos {
    transition: transform .2s cubic-bezier(.4, 2.6, .6, 1);
}

.cr-portada-fecha {
    color: rgba(255, 255, 255, .7);
    font-size: .95rem;
    margin-bottom: .35rem;
}

.cr-portada h1 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    margin: 0 0 .5rem;
}

.cr-portada-hora {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.cr-portada-hora small {
    font-size: .45em;
    color: rgba(255, 255, 255, .55);
    margin-left: .15em;
    letter-spacing: 0;
}

.cr-portada-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.4rem;
}

.cr-portada .btn-light {
    --bs-btn-color: var(--brand-primary-dark);
    --bs-btn-font-weight: 600;
    border-radius: 999px;
    padding: .55rem 1.2rem;
}

.cr-portada .btn-outline-light {
    border-radius: 999px;
    padding: .55rem 1.2rem;
    --bs-btn-border-color: rgba(255, 255, 255, .4);
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
}

@media (max-width: 767.98px) {
    .cr-portada {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
        text-align: left;
    }

    .cr-esfera {
        width: 112px;
        height: 112px;
    }
}

.cr-seccion-titulo {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
}

.cr-seccion-titulo .fas {
    color: var(--brand-primary);
    width: 1.1rem;
    text-align: center;
}

/* ── Inicio: el panel ─────────────────────────────────────────────────────
   Tarjetas que cargan cada una por su cuenta (TarjetaDeInicio). La rejilla se reparte sola:
   tres columnas en un escritorio, dos en una tableta, una en el móvil. */

.cr-jornada {
    margin-top: .35rem;
    max-width: 30rem;
}

.cr-jornada-estado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
}

.cr-jornada-punto {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.cr-jornada-trabajando .cr-jornada-punto {
    background: #5ee08a;
    box-shadow: 0 0 0 4px rgba(94, 224, 138, .25);
}

.cr-jornada-pausa .cr-jornada-punto {
    background: #ffc94d;
    box-shadow: 0 0 0 4px rgba(255, 201, 77, .25);
}

.cr-jornada-tiempo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    margin-top: .8rem;
    color: rgba(255, 255, 255, .75);
}

.cr-jornada-tiempo strong {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.cr-jornada-barra {
    height: 6px;
    margin-top: .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.cr-jornada-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transition: width var(--duration-normal) var(--ease-out);
}

.cr-jornada-cargando .cr-jornada-estado {
    color: rgba(255, 255, 255, .7);
}

.cr-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 2rem;
}

@media (min-width: 1200px) {
    .cr-panel > .cr-tarjeta-ancha {
        grid-column: span 2;
    }
}

.cr-panel-titulo {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.cr-tarjeta {
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--cr-linea);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--cr-sombra-1);
}

.cr-tarjeta-cabeza {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
}

.cr-tarjeta-cabeza h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
}

.cr-tarjeta-cabeza h2 > .fas {
    color: var(--brand-primary);
    width: 1.1rem;
    text-align: center;
}

.cr-tarjeta-cabeza h2 a {
    color: inherit !important;
    text-decoration: none !important;
}

.cr-tarjeta-cabeza h2 a:hover {
    color: var(--brand-primary) !important;
}

.cr-tarjeta-flecha {
    font-size: .7em;
    margin-left: .45rem;
    color: var(--color-text-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}

.cr-tarjeta-cabeza h2 a:hover .cr-tarjeta-flecha {
    transform: translateX(2px);
    color: var(--brand-primary);
}

.cr-tarjeta-contador {
    min-width: 1.5rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--cr-tinta-2);
    color: var(--brand-primary-dark);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
}

.cr-tarjeta-fecha {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: .85rem;
}

.cr-tarjeta-subtitulo {
    margin: 1.1rem 0 .4rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cr-tarjeta-pie,
.cr-tarjeta-error {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .9rem;
}

.cr-tarjeta-pie {
    margin-top: .6rem;
}

.cr-tarjeta-aviso {
    margin: .8rem 0 0;
    font-size: .8rem;
    color: var(--color-text-muted);
}

.cr-tarjeta-vacia {
    display: grid;
    justify-items: center;
    gap: .2rem;
    padding: 1.25rem 0 .75rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: .9rem;
}

.cr-tarjeta-vacia strong {
    color: var(--color-text);
    font-weight: 600;
}

.cr-tarjeta-vacia-icono {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .35rem;
    border-radius: 50%;
    background: rgba(29, 122, 52, .1);
    color: #1d7a34;
}

/* Esqueleto mientras carga: tres renglones que respiran. */
.cr-esqueleto {
    display: grid;
    gap: .6rem;
}

.cr-esqueleto span {
    height: .85rem;
    border-radius: 6px;
    background: var(--cr-tinta-2);
    animation: cr-esqueleto 1.4s ease-in-out infinite;
}

.cr-esqueleto span:nth-child(2) { width: 80%; }
.cr-esqueleto span:nth-child(3) { width: 55%; }

@keyframes cr-esqueleto {
    50% { opacity: .45; }
}

/* Listas de las tarjetas: icono, texto y detalle. */
.cr-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

.cr-lista-fila {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .55rem;
    margin: 0 -.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-text) !important;
    text-decoration: none !important;
}

a.cr-lista-fila[href]:hover {
    background: var(--cr-tinta-1);
}

.cr-lista-compacta .cr-lista-fila {
    padding-block: .35rem;
}

.cr-lista-icono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--cr-tinta-2);
    color: var(--brand-primary);
    font-size: .9rem;
}

.cr-lista-texto {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.cr-lista-texto > span {
    overflow-wrap: anywhere;
}

.cr-lista-texto small {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.cr-etiqueta {
    margin-left: auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(240, 165, 0, .14);
    color: #6b4200;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Tonos de los iconos: el de la marca y los de estado, legibles sobre su tinta. */
.cr-tono-marca { background: var(--cr-tinta-2); color: var(--brand-primary); }
.cr-tono-exito { background: rgba(29, 122, 52, .1); color: #1d7a34; }
.cr-tono-aviso { background: rgba(240, 165, 0, .15); color: #8a5500; }
.cr-tono-peligro { background: rgba(196, 43, 28, .1); color: #c42b1c; }
.cr-tono-neutro { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Mis ausencias: la cifra grande y lo usado. */
.cr-saldos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.cr-saldo {
    display: grid;
    align-content: start;
    gap: .15rem;
    flex: 1 1 10rem;
}

.cr-saldo strong,
.cr-cifra strong {
    font-size: 2.1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-primary-dark);
    font-variant-numeric: tabular-nums;
}

.cr-saldo > span,
.cr-cifra > span {
    color: var(--color-text-muted);
    font-size: .9rem;
}

.cr-saldo small {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.cr-saldo-secundario {
    flex: 0 1 auto;
}

.cr-saldo-secundario strong {
    font-size: 1.5rem;
}

.cr-saldo-barra {
    height: 6px;
    margin: .5rem 0 .2rem;
    border-radius: 999px;
    background: var(--cr-tinta-2);
    overflow: hidden;
}

.cr-saldo-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-primary-light);
}

.cr-cifra {
    display: grid;
    gap: .2rem;
    margin-bottom: .75rem;
}

/* Próximamente: una fila por día con su hoja de calendario. */
.cr-eventos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.cr-eventos li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .6rem .55rem .85rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border-left: 3px solid var(--cr-evento-color, var(--brand-primary));
}

.cr-evento-texto {
    display: grid;
    min-width: 0;
    flex: 1;
    line-height: 1.3;
}

.cr-evento-texto strong {
    font-weight: 600;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.cr-evento-texto small {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.cr-hoja-calendario {
    display: grid;
    justify-items: center;
    min-width: 2.6rem;
    padding: .2rem .3rem .25rem;
    border: 1px solid var(--cr-linea);
    border-radius: 8px;
    background: var(--color-surface);
    line-height: 1.05;
}

.cr-hoja-calendario small {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.cr-hoja-calendario strong {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Avatares apilados con iniciales; el nombre, en el título. */
.cr-avatares {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: .3rem;
}

.cr-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: -.3rem;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: default;
}

.cr-avatar-mas {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: .7rem;
}

/* Estado del equipo: una fila por situación, con sus avatares a la derecha. */
.cr-situaciones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.cr-situaciones li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .55rem 0;
}

.cr-situaciones li + li {
    border-top: 1px solid var(--cr-linea);
}

.cr-situacion-icono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: .85rem;
}

.cr-situacion-texto {
    display: grid;
    flex: 1 1 8rem;
    line-height: 1.25;
}

.cr-situacion-texto strong {
    font-weight: 600;
    font-size: .92rem;
}

.cr-situacion-texto small {
    color: var(--color-text-muted);
    font-size: .8rem;
}

/* Una tarjeta que ocupa la fila entera del panel: el mapa. */
.cr-panel > .cr-tarjeta-completa {
    grid-column: 1 / -1;
}

/* Las tres cifras de la tarjeta de plantilla: activos, altas y bajas del mes. */
.cr-plantilla-cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.cr-plantilla-cifras > div {
    display: grid;
    line-height: 1.2;
}

.cr-plantilla-cifras strong {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary-dark);
    font-variant-numeric: tabular-nums;
}

.cr-plantilla-cifras span {
    color: var(--color-text-muted);
    font-size: .8rem;
}

/* ── El mapa de hoy ──────────────────────────────────────────────────────────
   Los marcadores van aquí y no en CSS de componente: Leaflet los crea fuera del árbol de
   Blazor y el atributo del CSS aislado no los alcanzaría. Cada estado pone su color en
   --cr-mapa-color, y lo usan igual el marcador y la muestra de la leyenda. */
.cr-mapa-hoy {
    height: 26rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--cr-linea);
    /* Los paneles de Leaflet llevan z-index de 400 para arriba: sin esto pasaban por encima
       de la cabecera fija al bajar por la página. */
    isolation: isolate;
    z-index: 0;
}

.cr-mapa-trabajando { --cr-mapa-color: #1d7a34; }
.cr-mapa-pausa { --cr-mapa-color: #c27c00; }
.cr-mapa-terminado { --cr-mapa-color: #6b7280; }
.cr-mapa-en-uso { --cr-mapa-color: var(--brand-primary); }
.cr-mapa-libre { --cr-mapa-color: #0e7490; }
.cr-mapa-centro-muestra { --cr-mapa-color: var(--brand-primary-light); }

.cr-mapa-persona span,
.cr-mapa-vehiculo span,
.cr-mapa-centro span,
.cr-mapa-grupo span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}

.cr-mapa-persona span,
.cr-mapa-vehiculo span {
    background: var(--cr-mapa-color);
}

/* Con foto, el color de cómo está la persona va en el borde: el fondo lo tapa la foto. */
.cr-mapa-persona span.cr-mapa-con-foto {
    position: relative;
    overflow: hidden;
    border: 3px solid var(--cr-mapa-color);
}

.cr-mapa-con-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cr-mapa-vehiculo span {
    border-radius: 8px;
    font-size: 14px;
}

.cr-mapa-centro span {
    background: var(--brand-primary-light);
    font-size: 13px;
}

.cr-mapa-grupo span {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    font-size: 13px;
    box-shadow: 0 0 0 5px rgba(var(--brand-primary-rgb), .25), 0 1px 4px rgba(0, 0, 0, .4);
}

.cr-mapa-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--color-text-muted);
}

.cr-mapa-leyenda li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cr-mapa-muestra {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--cr-mapa-color);
}

.cr-mapa-muestra.cr-mapa-en-uso,
.cr-mapa-muestra.cr-mapa-libre {
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cr-esqueleto span {
        animation: none;
    }
}

/* ── Movimiento reducido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

.min-w-0 {
    min-width: 0;
}

/* Una fila de cifras de resumen: el mes en números antes del detalle. Cada caja es una
   etiqueta pequeña encima y la cifra grande debajo; la destacada lleva el degradado. */
.cr-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}

.cr-cifra-caja {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .95rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--cr-linea);
    border-radius: var(--radius-md);
    box-shadow: var(--cr-sombra-1);
}

.cr-cifra-caja > span {
    font-size: .78rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.cr-cifra-caja > strong {
    font-size: 1.45rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--brand-primary-dark);
    font-variant-numeric: tabular-nums;
}

.cr-cifra-caja > strong.text-success { color: #1d7a34 !important; }
.cr-cifra-caja > strong.text-danger { color: #b42318 !important; }

.cr-cifra-destacada {
    background: var(--cr-degradado);
    background-color: var(--brand-primary);
    border-color: transparent;
    box-shadow: 0 10px 24px -14px rgba(var(--brand-primary-rgb), .8);
}

.cr-cifra-destacada > span {
    color: rgba(255, 255, 255, .75);
}

.cr-cifra-destacada > strong {
    color: #fff;
}

/* El saldo de vacaciones u horas: la cifra grande, y lo gastado como una barra. */
.cr-saldo-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--cr-tinta-2);
    color: var(--brand-primary);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.cr-saldo-cifra {
    font-size: 1.9rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--brand-primary-dark);
    font-variant-numeric: tabular-nums;
}

.cr-saldo-cifra span {
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* El icono de un archivo en una lista de documentos. */
.cr-archivo {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: .6rem;
    border-radius: 8px;
    background: var(--cr-tinta-2);
    color: var(--brand-primary);
    font-size: .85rem;
    vertical-align: middle;
}

/* El bloque de subir un archivo, con un filo de puntos: se lee como «suelta aquí». */
.cr-subida {
    border: 1.5px dashed rgba(var(--brand-primary-rgb), .3);
    background: linear-gradient(180deg, var(--cr-tinta-1), var(--color-surface) 70%);
    box-shadow: none !important;
}

/* El «no hay nada» de casi todas las pantallas es `alert alert-light text-center`: cuarenta
   sitios. Se viste aquí como estado vacío —marco de puntos, aire y un icono encima— en vez de
   reescribirlos uno a uno; las pantallas nuevas usan `EstadoVacio`, que dice además qué hacer. */
.alert-light.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.25rem 1.5rem;
    border: 1.5px dashed var(--cr-linea-fuerte);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .95rem;
}

.alert-light.text-center::before {
    content: "\f49e";
    font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
    font-weight: 900;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--cr-tinta-2);
    color: var(--brand-primary);
    font-size: 1.2rem;
}

.alert-light.text-center.py-2::before,
.alert-light.text-center.small::before {
    display: none;
}

.alert-light.text-center.py-2,
.alert-light.text-center.small {
    padding: 1rem;
}

.cr-volver {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cr-linea-fuerte);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out);
}

.cr-volver:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background: var(--cr-tinta-1);
}

/* La tarjeta que resume una ficha: una franja del color de lo que es a la izquierda. */
.cr-resumen {
    border-left: 5px solid var(--cr-color, var(--brand-primary));
}

/* Las listas de dato y valor de las fichas (`<dl class="row">`). */
dl.row > dt {
    color: var(--color-text-muted);
    font-weight: 500 !important;
}

dl.row > dd {
    color: var(--color-text);
    font-weight: 500;
}

/* Una persona en una lista: su avatar de iniciales y el nombre con una línea debajo. */
.cr-persona {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cr-persona-avatar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: .78rem;
    flex-shrink: 0;
}

.cr-persona a {
    color: var(--brand-primary-dark);
}

.cr-persona a:hover {
    color: var(--brand-primary);
    text-decoration: underline !important;
}

/* Una cabecera que se queda arriba al bajar: la de las fichas largas, para no tener que volver
   al principio a guardar. Se pega bajo .cr-pegado (franja del soporte + cabecera del armazón) y
   se tapa con el fondo.

   --cr-pegado-alto es la altura real de ese bloque, medida por jornadoo.js con un
   ResizeObserver: --cr-cabecera-alto (60px fijos) sólo vale sin la franja del soporte, que
   cuando aparece —y más si envuelve el texto en el móvil— hace que .cr-pegado mida más que
   eso. El valor fijo queda sólo de respaldo, para el primer pintado antes de que el JS mida
   nada: sin franja los dos coinciden. */
.cr-cabecera-fija {
    position: sticky;
    top: var(--cr-pegado-alto, var(--cr-cabecera-alto));
    z-index: 20;
    margin: -1.75rem -2rem 1.5rem;
    padding: 1.1rem 2rem;
    background: rgba(243, 245, 249, .92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--cr-linea);
}

@media (max-width: 767.98px) {
    .cr-cabecera-fija {
        position: static;
        margin: 0 0 1.25rem;
        padding: 0;
        background: none;
        border: none;
        backdrop-filter: none;
    }
}

/* Los títulos de sección de una tarjeta (`card-header` > `h6`). */
.card-header h6, .card-header .h6 {
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary-dark);
    font-size: .95rem;
}

.card-header h6 .fas, .card-header .h6 .fas {
    color: var(--brand-primary);
}

fieldset:disabled .form-check-input {
    opacity: .7;
}

/* El número de un paso, en los procesos que de verdad van en orden. */
.cr-paso {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    vertical-align: middle;
}

/* La placa de las matrículas vive en J2J.Fichajes.Pantallas (Matricula.razor.css): la pintan
   igual las dos consolas. */

/* Los apartados dentro de un modal de alta (`h6` sueltos en el cuerpo). */
.modal-body h6 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-primary-dark) !important;
    padding-bottom: .45rem;
    margin: 1.25rem 0 .85rem;
    border-bottom: 1px solid var(--cr-linea);
}

.modal-body h6:first-child {
    margin-top: 0;
}

.modal-body h6 .fas {
    color: var(--brand-primary);
}

/* Los módulos de la licencia, como fichas: encendido lleva el filo de acento del logotipo. */
.cr-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .85rem;
}

.cr-modulo {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--cr-linea);
    border-radius: var(--radius-md);
    box-shadow: var(--cr-sombra-1);
    opacity: .72;
}

.cr-modulo-activo {
    opacity: 1;
    border-top: 3px solid var(--brand-primary-light);
}

.cr-modulo-nombre {
    color: var(--brand-primary-dark);
}

.cr-modulo-estado {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--cr-linea-fuerte);
}

.cr-modulo-activo .cr-modulo-estado {
    color: var(--brand-primary-light);
}

code {
    color: var(--brand-primary-dark);
    background: var(--cr-tinta-1);
    padding: .12em .4em;
    border-radius: 4px;
    font-size: .82em;
}

/* El título de un grupo dentro de una lista larga (eventos por módulo, campos por apartado). */
.cr-grupo-titulo {
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-primary-dark);
    margin: 1.5rem 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--cr-linea);
}

/* ── Los colores de significado ─────────────────────────────────────────────
   El tema «motronic» de BootstrapBlazor trae un verde y un rojo de pastel (#50CD89, #F1416C)
   sobre los que el texto blanco no se lee: un botón de «Entrar» se quedaba en 2,1:1. Se fijan
   aquí unos que sí llegan a 4,5:1. No son del tema de la instalación —ver `Tema.cs`—: un aviso
   de error tiene que ser rojo en todas. */
:root {
    --bs-success: #1d7a34;
    --bs-success-rgb: 29, 122, 52;
    --bs-danger: #c42b1c;
    --bs-danger-rgb: 196, 43, 28;
    --bs-warning: #f0a500;
    --bs-warning-rgb: 240, 165, 0;
    --bs-success-text-emphasis: #155d27;
    --bs-success-bg-subtle: #e3f4e6;
    --bs-success-border-subtle: #bfe3c6;
    --bs-danger-text-emphasis: #8f1d15;
    --bs-danger-bg-subtle: #fde8e7;
    --bs-danger-border-subtle: #f5c2bd;
    --bs-warning-text-emphasis: #6b4200;
    --bs-warning-bg-subtle: #fdf1d6;
    --bs-warning-border-subtle: #f6dd9e;
}

.btn-success {
    --bs-btn-bg: #1f8a3b;
    --bs-btn-border-color: #1f8a3b;
    --bs-btn-hover-bg: #1a7532;
    --bs-btn-hover-border-color: #1a7532;
    --bs-btn-active-bg: #16652b;
    --bs-btn-active-border-color: #16652b;
    --bs-btn-disabled-bg: #1f8a3b;
    --bs-btn-disabled-border-color: #1f8a3b;
}

.btn-danger {
    --bs-btn-bg: #c42b1c;
    --bs-btn-border-color: #c42b1c;
    --bs-btn-hover-bg: #a82417;
    --bs-btn-hover-border-color: #a82417;
    --bs-btn-active-bg: #911f14;
    --bs-btn-active-border-color: #911f14;
    --bs-btn-disabled-bg: #c42b1c;
    --bs-btn-disabled-border-color: #c42b1c;
}

.btn-outline-success {
    --bs-btn-color: #1d7a34;
    --bs-btn-border-color: #1d7a34;
    --bs-btn-hover-bg: #1d7a34;
    --bs-btn-hover-border-color: #1d7a34;
    --bs-btn-active-bg: #1d7a34;
    --bs-btn-active-border-color: #1d7a34;
}

.btn-outline-danger {
    --bs-btn-color: #c42b1c;
    --bs-btn-border-color: #c42b1c;
    --bs-btn-hover-bg: #c42b1c;
    --bs-btn-hover-border-color: #c42b1c;
    --bs-btn-active-bg: #c42b1c;
    --bs-btn-active-border-color: #c42b1c;
}

.btn-outline-warning {
    --bs-btn-color: #8a5a00;
    --bs-btn-border-color: #e0a100;
    --bs-btn-hover-color: #3a2600;
    --bs-btn-hover-bg: #f0a500;
    --bs-btn-hover-border-color: #f0a500;
    --bs-btn-active-bg: #f0a500;
    --bs-btn-active-border-color: #f0a500;
}

.text-success { color: #1d7a34 !important; }
.text-danger { color: #c42b1c !important; }
.text-warning { color: #a86b00 !important; }

/* La nota que va debajo de una tabla no puede ir pegada a su borde. */
.table-responsive + p, .table-responsive + .small, .card + p.small {
    margin-top: .75rem;
}

/* Un icono de Font Awesome 7 con `d-block` es un bloque de 1,25em: en un contenedor centrado
   se quedaba pegado a la izquierda. Se centra como el texto que lo acompaña. */
.text-center > i.d-block, .text-center > .fas.d-block, .text-center > .fa-solid.d-block {
    margin-left: auto;
    margin-right: auto;
}

.cr-pagina-titulo h1 .badge {
    font-size: .8rem !important;
    vertical-align: middle;
    margin-left: .5rem;
}

/* `card-body row g-3` —el cuerpo de una tarjeta que es a la vez su rejilla— hereda el margen
   negativo de `.row`, y el cuerpo se montaba sobre la cabecera: el título de cada apartado de
   la ficha quedaba pisado por su propia línea. Arriba, sin margen; a los lados, se compensa. */
.card-body.row {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(var(--bs-card-spacer-x) - var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-card-spacer-x) - var(--bs-gutter-x) * .5);
}

details > summary {
    color: var(--brand-primary);
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}

details > summary:hover {
    color: var(--brand-primary-dark);
}

details[open] > summary {
    margin-bottom: .6rem;
}

.cr-esfera.cr-quieto .cr-aguja {
    transition: none;
}

/* ══ La burbuja de colores ═══════════════════════════════════════════════════
   Un botón redondo abajo a la derecha con el degradado del tema en uso. Al pulsarlo suben las
   burbujas de cada tema, una encima de otra, con su nombre al lado; la elegida lleva un aro.
   Es lo único de la consola que flota, así que el contenido deja sitio abajo para no taparlo. */
.cr-contenido {
    padding-bottom: 5.5rem;
}

.cr-temas {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    /* Las burbujas plegadas son invisibles pero siguen ocupando su sitio, así que la caja
       mide lo que la pila entera con sus nombres: sin esto se tragaba los clics de toda la
       esquina inferior derecha —los botones de las tablas de media página para abajo—. */
    pointer-events: none;
}

.cr-temas-boton {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--cr-degradado);
    background-color: var(--brand-primary);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 10px 26px -8px rgba(var(--brand-primary-rgb), .7), 0 2px 6px rgba(15, 20, 40, .18);
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.cr-temas-boton:hover {
    transform: scale(1.07);
}

.cr-temas.abierto .cr-temas-boton {
    transform: rotate(-35deg);
}

.cr-temas-lista {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: .55rem;
    pointer-events: none;
}

.cr-burbuja {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: .6rem;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    transform: translateY(14px) scale(.4);
    transform-origin: right center;
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) cubic-bezier(.34, 1.56, .64, 1);
}

.cr-temas.abierto .cr-temas-lista {
    pointer-events: auto;
}

.cr-temas.abierto .cr-burbuja {
    opacity: 1;
    transform: none;
}

/* Suben de una en una, empezando por la de abajo: la de la instalación, la más cercana al
   botón (la lista va en `column-reverse`, así que la primera del marcado queda abajo). */
.cr-temas.abierto .cr-burbuja:nth-child(1) { transition-delay: 0ms; }
.cr-temas.abierto .cr-burbuja:nth-child(2) { transition-delay: 45ms; }
.cr-temas.abierto .cr-burbuja:nth-child(3) { transition-delay: 90ms; }
.cr-temas.abierto .cr-burbuja:nth-child(4) { transition-delay: 135ms; }

.cr-burbuja-muestra {
    width: 42px;
    height: 42px;
    margin-right: 5px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 6px 16px -6px rgba(15, 20, 40, .45);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.cr-burbuja:hover .cr-burbuja-muestra,
.cr-burbuja:focus-visible .cr-burbuja-muestra {
    transform: scale(1.1);
}

.cr-burbuja[aria-pressed="true"] .cr-burbuja-muestra {
    box-shadow: 0 0 0 3px var(--brand-primary), 0 6px 16px -6px rgba(15, 20, 40, .45);
}

.cr-burbuja:focus-visible {
    outline: none;
}

.cr-burbuja-nombre {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--brand-primary-dark);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--cr-sombra-2);
}

.cr-burbuja[aria-pressed="true"] .cr-burbuja-nombre::after {
    content: " \2713";
    color: var(--brand-primary);
}

.cr-burbuja:focus-visible .cr-burbuja-nombre {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .cr-temas {
        right: .9rem;
        bottom: .9rem;
    }

    .cr-temas-boton {
        width: 46px;
        height: 46px;
    }
}

/* ── Las carpetas de documentos ──
   Una rejilla de carpetas agrupadas por su categoría: la vista por carpetas de /documentos
   (CarpetasDeDocumentos) y la de /mis-documentos. */
.cr-carpetas-grupo {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 1.25rem 0 .5rem;
}

.cr-carpetas-grupo:first-child {
    margin-top: 0;
}

.cr-carpetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: .5rem;
}

.cr-carpeta {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .65rem .8rem;
    text-align: start;
    color: inherit;
    background: var(--bs-body-bg);
    border: 1px solid var(--cr-linea);
    border-radius: .6rem;
    box-shadow: var(--cr-sombra-1);
    transition: border-color .12s ease, background-color .12s ease;
}

.cr-carpeta:hover,
.cr-carpeta:focus-visible {
    border-color: var(--cr-tinta-3);
    background: var(--cr-tinta-1);
}

.cr-carpeta:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.cr-carpeta-icono {
    font-size: 1.25rem;
    color: var(--brand-primary);
    flex-shrink: 0;
}

.cr-carpeta-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cr-carpeta-nombre {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-carpeta-detalle {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-carpeta-cuenta {
    flex-shrink: 0;
    min-width: 1.75rem;
    padding: .1rem .45rem;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--brand-primary);
    background: var(--cr-tinta-2);
    border-radius: 999px;
}

.cr-carpeta-baja {
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-weight: 600;
}