/*
 * Tema de AutoNET 13 sobre Lumo. Propuesta de marca desde cero:
 * azul petróleo como color principal, acento turquesa, fondos claros, tipografía Inter y mucho aire.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

html {
    --an-petroleo: var(--an-tono-0f2e35);
    --an-petroleo-2: var(--an-tono-17464f);
    --an-turquesa: var(--an-tono-2bb3a3);
    --an-turquesa-claro: var(--an-tono-7ff0dd);
    --an-fondo: #f4f6f8;
    --an-borde: #e2e7eb;
    --an-texto: var(--an-tono-13232a);
    --an-texto-suave: #5b6b73;
    --an-superficie: #ffffff;
    --an-superficie-2: var(--an-tono-f7f9fa);
    --an-superficie-3: #eaeff2;
    --an-linea: #eef2f4;
    --an-hover: var(--an-tono-f1f5f7);
    --an-sombra: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.04), 0 8px 24px rgba(var(--an-tono-0f2e35-rgb), 0.08);

    --lumo-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lumo-primary-color: var(--an-tono-1a7a80);
    --lumo-primary-color-50pct: rgba(var(--an-tono-1a7a80-rgb), 0.5);
    --lumo-primary-color-10pct: rgba(var(--an-tono-1a7a80-rgb), 0.1);
    --lumo-primary-text-color: var(--an-tono-15666b);
    --lumo-body-text-color: var(--an-texto);
    --lumo-header-text-color: var(--an-texto);
    --lumo-border-radius-s: 6px;
    --lumo-border-radius-m: 10px;
    --lumo-border-radius-l: 16px;
}

body {
    background: var(--an-fondo);
    color: var(--an-texto);
}

/* Anillo de foco de los campos dibujado por dentro: así ningún contenedor lo recorta */
vaadin-text-field[focus-ring]::part(input-field),
vaadin-password-field[focus-ring]::part(input-field),
vaadin-text-area[focus-ring]::part(input-field),
vaadin-combo-box[focus-ring]::part(input-field),
vaadin-date-picker[focus-ring]::part(input-field),
vaadin-integer-field[focus-ring]::part(input-field),
vaadin-number-field[focus-ring]::part(input-field) {
    box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
}

/* ---- Logotipo ---- */
.an-logo-bloque {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.an-logo-bloque img {
    width: 36px;
    height: 36px;
}
.an-logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.an-logo::after {
    /* La versión instalada (data-version: «13.2.14» en AutoNET, «6.0.3» en SkyNET; en el menú, desde 2026-10-26) */
    content: " " attr(data-version);
    font-weight: 600;
    color: var(--an-turquesa);
}
.an-logo-claro .an-logo { color: #ffffff; }
.an-logo-claro .an-logo::after { color: var(--an-turquesa-claro); }
.an-logo-oscuro .an-logo { color: var(--an-petroleo); }

/* ---- Login ---- */
.an-login {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--an-fondo);
    position: relative;
}
/* Selector de idioma de la pantalla de entrada (arriba a la derecha, sobre la parte blanca) */
/* El formulario de Vaadin trae su propio fondo: transparente para que se vea el de la tarjeta (también en modo noche) */
.an-login-form { --lumo-base-color: transparent; --lumo-tint-5pct: transparent; --lumo-shade-5pct: transparent; background: transparent; }
.an-login-idioma { position: absolute; top: 18px; right: 22px; z-index: 2; display: flex; align-items: center; gap: .25rem; }
.an-login-marca {
    position: relative;
    overflow: hidden;
    /* Bloque (logo + textos) centrado en vertical en la zona oscura y el pie abajo, sea cual sea la altura */
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    padding: clamp(1.25rem, 5vh, 3rem) clamp(1.5rem, 5vw, 4.5rem);
    color: var(--an-tono-d9ecea);
    background: linear-gradient(155deg, var(--an-petroleo) 0%, var(--an-petroleo-2) 100%);
}
.an-login-brillo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(520px circle at 85% 10%, rgba(var(--an-tono-2bb3a3-rgb), 0.28), transparent 60%),
        radial-gradient(420px circle at 0% 100%, rgba(var(--an-tono-7ff0dd-rgb), 0.12), transparent 60%);
}
.an-login-brillo::after {
    /* Rejilla muy suave de fondo */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.an-login-marca > * { position: relative; }
.an-login-marca > .an-login-brillo { position: absolute; }
.an-login-grupo { display: flex; flex-direction: column; gap: clamp(1.25rem, 6vh, 4rem); min-height: 0; }
/* Ventanas bajas: todo más compacto y, si no cabe, se ocultan primero las ventajas y luego el texto */
@media (max-height: 820px) {
    .an-login .an-login-marca .an-logo-grande img { width: 72px; height: 72px; }
    .an-login .an-login-marca .an-logo-grande .an-logo { font-size: clamp(2.6rem, 5vw, 4.4rem); }
    .an-login .an-login-marca h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
    .an-login .an-login-marca .an-login-mensaje { gap: 0.9rem; }
    .an-login .an-login-marca .an-ventajas { gap: 0.55rem; }
}
@media (max-height: 680px) {
    .an-login .an-login-marca .an-ventajas { display: none; }
    .an-login .an-login-marca .an-logo-grande img { width: 60px; height: 60px; }
    .an-login .an-login-marca .an-logo-grande .an-logo { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
}
@media (max-height: 540px) {
    .an-login .an-login-marca p { display: none; }
}
.an-login-mensaje {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 34rem;
}
.an-etiqueta {
    align-self: flex-start;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--an-turquesa-claro);
    background: rgba(var(--an-tono-2bb3a3-rgb), 0.14);
    border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.25);
}
.an-login-marca h1 {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.an-login-marca p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(var(--an-tono-d9ecea-rgb), 0.82);
}
.an-ventajas {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}
.an-ventajas li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--an-tono-eaf6f4);
}
.an-ventaja-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--an-turquesa-claro);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.an-ventaja-icono vaadin-icon {
    width: 17px;
    height: 17px;
}
/* "AutoNET 13" grande en el panel de marca */
.an-logo-grande {
    gap: 1rem;
}
.an-logo-grande img {
    width: 92px;
    height: 92px;
}
.an-logo-grande .an-logo {
    font-size: clamp(2.8rem, 5.6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

/* Pie del panel de marca: copyright y versión */
.an-login-pie {
    font-size: 0.85rem;
    color: rgba(var(--an-tono-d9ecea-rgb), 0.55);
}

/* Logotipo de Neikom (oscuro sobre blanco): abajo y centrado en la parte clara */
/* Logotipo de la empresa: centrado entre el borde de arriba y la tarjeta del login, sea cual sea su tamaño
   (va en la primera fila de la rejilla de .an-login-formulario) */
.an-neikom {
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    mix-blend-mode: multiply;   /* el blanco de un logotipo sin transparencia se funde con el fondo gris claro */
    /* La altura se configura en application.properties (autonet.logo.login-altura); en ventanas bajas se reduce */
    max-height: 15vh;
}

/* Tres filas: [espacio con el logotipo centrado] [tarjeta] [espacio igual]: la tarjeta queda en el centro de la
   pantalla y el logotipo, en medio de lo que queda por encima */
.an-login-formulario {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: center;
    /* Arriba, sitio para el idioma y el modo noche: el logotipo nunca se monta sobre ellos */
    padding: 3.5rem 2rem 1rem;
    min-height: 100vh;
    box-sizing: border-box;
}
.an-login-formulario > .an-login-tarjeta { grid-row: 2; }.an-login-tarjeta {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2.25rem 1.75rem;
    background: var(--an-superficie);
    border: 1px solid var(--an-borde);
    border-radius: 20px;
    box-shadow: var(--an-sombra);
}
/* En escritorio el logotipo ya está en el panel de marca; en la tarjeta solo se ve en pantallas estrechas */
.an-login-tarjeta .an-logo-oscuro {
    display: none;
    margin-bottom: 1.5rem;
}
.an-login-tarjeta h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--an-texto);
}
.an-login-ayuda {
    margin: 0.35rem 0 0.5rem;
    color: var(--an-texto-suave);
}
/* El formulario de Vaadin, sin su propio título ni márgenes, integrado en la tarjeta */
vaadin-login-form.an-login-form {
    --lumo-space-l: 0;
    width: 100%;
}
vaadin-login-form-wrapper {
    background: transparent;
    --lumo-contrast-5pct: transparent;
    overflow: visible;
}
vaadin-login-form-wrapper::part(form) {
    padding: 0;
}
vaadin-login-form-wrapper::part(footer) {
    display: none;
}
vaadin-login-form-wrapper::part(form-title) {
    display: none;
}
vaadin-login-form vaadin-text-field,
vaadin-login-form vaadin-password-field {
    --lumo-text-field-size: 2.9rem;
}
vaadin-login-form vaadin-button[theme~="submit"] {
    height: 2.9rem;
    margin-top: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--an-tono-1f8a8d), var(--an-tono-17464f));
}

@media (max-width: 960px) {
    .an-login { grid-template-columns: minmax(0, 1fr); }
    .an-login-marca { padding: 2rem 1.25rem 2.25rem; gap: 1.5rem; }
    .an-login-marca .an-logo-claro, .an-ventajas { display: none; }
    .an-login-pie { display: none; }
    /* El logotipo, centrado en vertical entre la zona azul y la tarjeta del login: mismo espacio arriba (padding) que
       abajo (gap). La tarjeta y la zona azul quedan donde estaban. */
    .an-login-formulario { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; min-height: 0; }
    .an-neikom { max-height: 72px; order: -1; }
    .an-login-formulario { padding: 1.125rem 1rem 3rem; margin-top: 0; }
    .an-login-tarjeta { padding: 2rem 1.5rem 1.5rem; }
    .an-login-tarjeta .an-logo-oscuro { display: inline-flex; }
}

/* ---- Marco principal ---- */
vaadin-app-layout.an-main::part(drawer) {
    background: var(--an-petroleo);
    border-inline-end: none;
}
vaadin-app-layout.an-main::part(navbar) {
    background: var(--an-superficie);
    border-bottom: 1px solid var(--an-borde);
    min-height: 60px;
}
.an-menu-cabecera {
    padding: 1.25rem 1.25rem 1rem;
}
/* Buscador del menú: translúcido sobre el fondo oscuro */
.an-menu-buscar { width: 100%; margin-top: 0.9rem; padding: 0; }
.an-menu-buscar::part(input-field) {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
    color: #ffffff;
}
.an-menu-buscar:hover::part(input-field) { background: rgba(255, 255, 255, 0.12); }
.an-menu-buscar[focused]::part(input-field) { border-color: var(--an-tono-2bb3a3); box-shadow: 0 0 0 3px rgba(var(--an-tono-2bb3a3-rgb), 0.25); }
.an-menu-buscar vaadin-icon { color: rgba(var(--an-tono-e8f3f2-rgb), 0.7); }
.an-menu-buscar input::placeholder { color: rgba(var(--an-tono-e8f3f2-rgb), 0.55); }
.an-menu-buscar::part(clear-button) { color: rgba(var(--an-tono-e8f3f2-rgb), 0.7); }
.an-main vaadin-side-nav {
    padding: 0 0.5rem;
    --lumo-body-text-color: rgba(var(--an-tono-e8f3f2-rgb), 0.88);
    --lumo-secondary-text-color: rgba(var(--an-tono-e8f3f2-rgb), 0.6);
    --lumo-contrast-60pct: rgba(var(--an-tono-e8f3f2-rgb), 0.6);
    --lumo-primary-text-color: #ffffff;
    --lumo-primary-color-10pct: rgba(var(--an-tono-2bb3a3-rgb), 0.22);
    /* Colores de "resaltado" y fondos suaves en versión clara sobre el fondo oscuro del menú */
    --lumo-header-text-color: #ffffff;
    --lumo-contrast-5pct: rgba(255, 255, 255, 0.05);
    --lumo-contrast-10pct: rgba(255, 255, 255, 0.08);
    --lumo-contrast-20pct: rgba(255, 255, 255, 0.14);
    --lumo-contrast-90pct: #ffffff;
}
/* Textos del menú siempre enteros: el ancho se ajusta solo (MainLayout.JS_ANCHO_MENU); si ni así cabe, dos líneas */
.an-main vaadin-side-nav-item { white-space: normal; }
.an-main vaadin-side-nav-item::part(content) { white-space: normal; overflow-wrap: anywhere; }
.an-main vaadin-side-nav-item::part(content):hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}
/* Nodos principales del menú (los grupos de primer nivel: Mantenimientos, Tarjetas, Empleados…): degradado de lado a
   lado con barra turquesa, como las cabeceras del árbol de los listados (petición del usuario) */
.an-main vaadin-side-nav > vaadin-side-nav-item[has-children] { margin-block: 3px; }
.an-main vaadin-side-nav > vaadin-side-nav-item[has-children]::part(content) {
    font-weight: 650;
    color: #ffffff;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.34) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.12) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0) 100%);
    box-shadow: inset 3px 0 0 var(--an-tono-2bb3a3);
}
/* Submenús que también son cabecera (Usuarios, Datos analíticos, Horarios…): el mismo marco, más suave */
.an-main vaadin-side-nav > vaadin-side-nav-item vaadin-side-nav-item[has-children] { margin-block: 2px; }
.an-main vaadin-side-nav > vaadin-side-nav-item vaadin-side-nav-item[has-children]::part(content) {
    font-weight: 600;
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.16) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.05) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0) 100%);
    box-shadow: inset 2px 0 0 rgba(var(--an-tono-2bb3a3-rgb), 0.6);
}
.an-main vaadin-side-nav > vaadin-side-nav-item vaadin-side-nav-item[has-children]::part(content):hover {
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.26) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.1) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0.02) 100%);
}
.an-main vaadin-side-nav > vaadin-side-nav-item[has-children]::part(content):hover {
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.48) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.2) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0.04) 100%);
}
.an-barra {
    padding-inline: 0.75rem 1rem;
}

/* ---- Páginas ---- */
.an-pagina {
    padding: 1.75rem 2rem;
    gap: 1rem;
}
.an-pagina h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--an-petroleo);
}
.an-pagina vaadin-grid {
    border: 1px solid var(--an-borde);
    border-radius: var(--lumo-border-radius-l);
    background: var(--an-superficie);
    box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.04);
}
.an-subtitulo {
    display: block;
    margin: 1rem 0 0.25rem;
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
}
@media (max-width: 700px) {
    .an-pagina { padding: 1rem; }
}

/* ================================================================ Listado genérico */
.an-pagina-listado {
    height: 100%;
    box-sizing: border-box;
    padding: 1.25rem 1.5rem;
}
.an-listado {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
}
.an-listado-cabecera {
    flex: none;
    gap: 0.75rem;
    flex-wrap: wrap; /* en ventanas estrechas pasa a dos líneas en lugar de salirse por la derecha */
}
.an-listado-cabecera h2 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--an-petroleo);
}
.an-contador {
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    color: var(--an-texto-suave);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--an-superficie-3);
}
/* La búsqueda cede espacio (hasta 12rem) antes de que la cabecera pase a dos líneas con títulos largos */
.an-busqueda { width: auto; flex: 1 1 12rem; max-width: min(320px, 40vw); }
.an-limite { width: 10.5rem; }

.an-listado-cuerpo {
    flex: 1;
    min-height: 0;
    display: grid;
    /* El ancho del panel se ajusta arrastrando el separador (se guarda en el navegador) */
    grid-template-columns: var(--an-ancho-panel, 300px) 14px minmax(0, 1fr);
    gap: 0;
}
.an-zona-tabla {
    min-height: 0;
    display: flex;
}
.an-zona-tabla vaadin-grid {
    border: 1px solid var(--an-borde);
    border-radius: var(--lumo-border-radius-l);
    background: var(--an-superficie);
    box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.04);
}
.an-zona-tabla vaadin-grid::part(header-cell) {
    font-weight: 600;
    color: var(--an-texto-suave);
    background: var(--an-superficie-2);
}
.an-si { color: var(--lumo-primary-color); width: 18px; height: 18px; }

/* Panel lateral (el "árbol" de AutoNET 12) */
.an-arbol {
    overflow: auto;
    min-height: 0;
    padding: 0.5rem;
    background: var(--an-superficie);
    border: 1px solid var(--an-borde);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.04);
}
.an-seccion {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid var(--an-linea);
}
.an-seccion:last-child { border-bottom: none; }
/* Cabecera de cada nodo del árbol (Filtros, Ordenación…): degradado de lado a lado, para distinguirla de las opciones
   que se pulsan dentro (petición del usuario) */
.an-seccion > vaadin-details-summary {
    font-weight: 650;
    font-size: var(--lumo-font-size-s);
    color: var(--an-petroleo);
    padding-inline: 0.45rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--an-turquesa) 22%, var(--an-superficie)) 0%,
                color-mix(in srgb, var(--an-turquesa) 7%, var(--an-superficie)) 60%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--an-turquesa);
    margin: 0.2rem 0;
    transition: background-color .15s, filter .15s;
}
.an-seccion > vaadin-details-summary:hover { filter: brightness(0.97) saturate(1.15); }
html[theme~="dark"] .an-seccion > vaadin-details-summary {
    background: linear-gradient(90deg, color-mix(in srgb, var(--an-turquesa) 30%, var(--an-superficie)) 0%,
                color-mix(in srgb, var(--an-turquesa) 10%, var(--an-superficie)) 60%, transparent 100%);
}
html[theme~="dark"] .an-seccion > vaadin-details-summary:hover { filter: brightness(1.12); }
.an-seccion vaadin-icon { width: 16px; height: 16px; color: var(--lumo-primary-color); }
.an-seccion::part(content) { padding: 0 0.25rem 0.75rem; }

.an-elemento {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    font-size: var(--lumo-font-size-s);
    cursor: pointer;
    color: var(--an-texto);
}
.an-elemento:hover { background: var(--an-hover); }
.an-elemento.an-activo {
    background: rgba(var(--an-tono-1a7a80-rgb), 0.1);
    color: var(--lumo-primary-text-color);
    font-weight: 600;
}
.an-elemento .an-marca { width: 15px; height: 15px; flex: none; color: var(--an-tono-9fb0b7); }
.an-elemento.an-activo .an-marca { color: var(--lumo-primary-color); }
.an-elemento-texto {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.an-elemento vaadin-button { margin: 0; opacity: 0.55; }
.an-elemento:hover vaadin-button { opacity: 1; }
.an-elemento .an-variable { width: 14px; height: 14px; color: #c7861c; }
.an-elemento.an-no-compatible { color: #9a5b00; cursor: default; }
.an-elemento.an-no-compatible vaadin-icon[icon="vaadin:warning"] { width: 15px; height: 15px; color: #c7861c; }
.an-pronto {
    display: block;
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: var(--lumo-font-size-xs);
    line-height: 1.5;
    color: var(--an-texto-suave);
}
.an-check-columna { display: flex; padding-inline: 0.35rem; font-size: var(--lumo-font-size-s); }
.an-ayuda-panel { display: block; padding: 0.35rem 0.6rem 0.5rem; font-size: var(--lumo-font-size-s); line-height: 1.4; color: var(--an-texto-suave); }
.an-aviso-limite {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.25rem 0.25rem 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    font-size: var(--lumo-font-size-xs);
    line-height: 1.45;
    color: #7a4b00;
    background: #fff6e5;
    border: 1px solid #f6dfb2;
}
.an-aviso-limite vaadin-icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* Asistente de filtros */
.an-dialogo-filtro .an-ayuda { margin: 0 0 0.5rem; color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); }
.an-fila-filtro { gap: 0.5rem; padding: 0.15rem 0; flex-wrap: nowrap; }
.an-valor-filtro { flex: 1; min-width: 10.5rem; }
@media (max-width: 760px) { .an-fila-filtro { flex-wrap: wrap; } }
.an-campos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.an-chip {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: var(--lumo-font-size-xs);
    background: var(--an-superficie-3);
    color: var(--an-texto);
    cursor: pointer;
}
.an-chip:hover { background: rgba(var(--an-tono-1a7a80-rgb), 0.14); }
.an-dialogo-filtro .an-subtitulo { font-size: var(--lumo-font-size-s); font-weight: 600; color: var(--an-texto-suave); margin-top: 0.4rem; }
.an-operadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0 0.6rem; width: 100%; }
.an-operadores vaadin-select { width: 100%; }

/* Cabeceras de columna: la mano al pasar por encima (se pulsan para ordenar y se arrastran para mover),
   como los elementos del árbol de filtros; en el borde, la flecha de ensanchar */
vaadin-grid::part(header-cell) { cursor: pointer; transition: background-color .15s, color .15s; }
/* Al pasar el cursor, un tono turquesa suave pero visible (petición del usuario, 2026-10-17; antes 0.07 apenas se notaba) */
vaadin-grid::part(header-cell):hover { background-color: var(--an-hover-cabecera, rgba(var(--an-tono-1a7a80-rgb), 0.14)); color: var(--an-texto); }
html[theme~="dark"] vaadin-grid::part(header-cell):hover { background-color: rgba(var(--an-tono-7ff0dd-rgb), 0.13); }
/* Al arrastrar una columna para moverla, el mismo efecto que los favoritos de la barra: la columna «flota» con sombra y en
   su sitio queda un hueco con borde discontinuo turquesa */
vaadin-grid::part(reorder-ghost) {
    background: var(--an-superficie); color: var(--an-texto); font-weight: 600; border-radius: 12px; opacity: 1;
    border: 1px solid color-mix(in srgb, var(--an-turquesa) 55%, transparent);
    box-shadow: 0 14px 30px rgba(var(--an-tono-0f2e35-rgb), 0.28), 0 4px 10px rgba(var(--an-tono-0f2e35-rgb), 0.16);
}
/* La columna que se mueve: una banda turquesa continua con sus datos a la vista (Vaadin los oculta; petición del
   usuario, 2026-10-17: «se ve vacía»), cerrada arriba en la cabecera y abajo en la última fila con esquinas redondeadas */
vaadin-grid::part(reorder-dragging-cell) {
    background: color-mix(in srgb, var(--an-turquesa) 10%, var(--an-superficie));
    color: color-mix(in srgb, var(--an-turquesa) 55%, var(--an-texto));
    box-shadow: inset 2px 0 0 var(--an-turquesa), inset -2px 0 0 var(--an-turquesa);
}
vaadin-grid::part(header-cell reorder-dragging-cell) {
    background: color-mix(in srgb, var(--an-turquesa) 20%, var(--an-superficie)); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--an-turquesa), inset -2px 0 0 var(--an-turquesa), inset 0 2px 0 var(--an-turquesa);
    border-radius: 12px 12px 0 0;
}
vaadin-grid::part(last-row-cell reorder-dragging-cell) {
    box-shadow: inset 2px 0 0 var(--an-turquesa), inset -2px 0 0 var(--an-turquesa), inset 0 -2px 0 var(--an-turquesa);
    border-radius: 0 0 12px 12px;
}
vaadin-grid[reordering] vaadin-grid-cell-content { visibility: visible !important; opacity: 1 !important; }
vaadin-grid::part(reorder-allowed-cell) { background: rgba(var(--an-tono-2bb3a3-rgb), 0.04); }
vaadin-grid::part(resize-handle) { cursor: col-resize; }
vaadin-grid[reordering]::part(header-cell) { cursor: grabbing; }
vaadin-grid vaadin-grid-sorter { cursor: pointer; }

/* Selección arrastrando por las filas: sin seleccionar texto mientras tanto */
vaadin-grid.an-arrastrando-filas, vaadin-grid.an-arrastrando-filas vaadin-grid-cell-content { user-select: none; cursor: default; }

/* Árbol: el icono de Ordenación dibuja muy pequeño; las flechas de sentido, algo más grandes */
.an-seccion vaadin-icon.an-icono-ordenar { width: 1.6em; height: 1.6em; margin: -0.3em; }
.an-elemento vaadin-icon.an-icono-sentido { width: 1.25rem; height: 1.25rem; }
/* Botones de los elementos del árbol: editar, papelera y X más grandes y fáciles de pulsar */
.an-elemento vaadin-icon.an-icono-editar { width: 1.05rem; height: 1.05rem; }
/* Subir / bajar un atributo (el primero manda) */
.an-elemento vaadin-icon.an-icono-mover { width: 1.3rem; height: 1.3rem; }
.an-elemento vaadin-button.an-flecha-inactiva { opacity: 0.25; cursor: default; }
/* Con ratón, las flechas solo aparecen al pasar por encima (así el texto tiene sitio); en táctil, siempre */
@media (hover: hover) {
    .an-elemento vaadin-button.an-flecha { display: none; }
    .an-elemento:hover vaadin-button.an-flecha, .an-elemento:focus-within vaadin-button.an-flecha { display: inline-flex; }
}
.an-elemento vaadin-icon.an-icono-borrar { width: 1.15rem; height: 1.15rem; }
.an-elemento vaadin-icon.an-icono-quitar { width: 1.05rem; height: 1.05rem; }
.an-elemento vaadin-button[theme~="tertiary-inline"] { min-width: 1.9rem; height: 1.9rem; padding: 0 0.2rem; }
/* Buscador de los límites de usuario */
.an-buscar-limites { --vaadin-input-field-height: 2rem; font-size: var(--lumo-font-size-s); margin: 0.35rem 0 0.25rem; }

/* Formularios y avisos que se abren encima: el fondo de la pantalla queda como siempre (Lumo);
   solo el contorno de la ventana lleva una sombra oscura y marcada */
vaadin-dialog-overlay::part(overlay),
vaadin-confirm-dialog-overlay::part(overlay),
vaadin-dialog::part(overlay),
vaadin-confirm-dialog::part(overlay) {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(0, 0, 0, 0.42), 0 28px 70px rgba(0, 0, 0, 0.38);
}
html[theme~="dark"] vaadin-dialog-overlay::part(overlay),
html[theme~="dark"] vaadin-confirm-dialog-overlay::part(overlay),
html[theme~="dark"] vaadin-dialog::part(overlay),
html[theme~="dark"] vaadin-confirm-dialog::part(overlay) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.7), 0 28px 70px rgba(0, 0, 0, 0.6);
}

/* Pestaña del análisis (se genera en segundo plano) */
.an-analisis-pestana { display: flex; flex-direction: column; height: 100vh; background: var(--an-fondo, var(--lumo-base-color)); }
.an-analisis-barra {
    display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 1rem;
    background: var(--an-tono-0f3b3e); color: #fff; flex: none;
}
.an-analisis-marca { font-weight: 700; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 0.5rem; }
.an-analisis-logo { width: 28px; height: 28px; }
.an-analisis-titulo { flex: 1; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-analisis-descargar vaadin-button { background: rgba(255, 255, 255, 0.14); color: #fff; }
.an-analisis-contenido { flex: 1; display: flex; min-height: 0; }
.an-analisis-marco { flex: 1; border: 0; width: 100%; height: 100%; }
.an-analisis-espera {
    margin: auto; width: min(460px, 90vw); text-align: center; color: var(--an-texto);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.an-analisis-espera vaadin-progress-bar { width: 100%; }
.an-analisis-espera vaadin-icon { width: 2.4rem; height: 2.4rem; color: var(--an-texto-suave); }
.an-enlace-aviso { font-weight: 600; white-space: nowrap; }

/* Ayuda de los operadores y funciones del modo avanzado */
.an-op-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.15rem 0; max-width: 30rem; white-space: normal; }
.an-op-sintaxis { font-family: ui-monospace, Consolas, monospace; font-size: var(--lumo-font-size-s); font-weight: 600; }
.an-op-ayuda { font-size: var(--lumo-font-size-xs); color: var(--lumo-secondary-text-color); line-height: 1.35; }

/* Tabla sin datos: aviso centrado en horizontal y vertical */
vaadin-grid::part(empty-state) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.an-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    max-width: 26rem;
    animation: an-vacio-entrar 0.35s ease-out;
}
.an-vacio-icono {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    color: var(--lumo-primary-color);
    background: linear-gradient(145deg, color-mix(in srgb, var(--lumo-primary-color) 16%, transparent),
            color-mix(in srgb, var(--lumo-primary-color) 4%, transparent));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--lumo-primary-color) 5%, transparent),
            0 10px 24px color-mix(in srgb, var(--lumo-primary-color) 14%, transparent);
}
.an-vacio-icono vaadin-icon { width: 34px; height: 34px; }
.an-vacio-titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--lumo-body-text-color); }
.an-vacio-texto { font-size: 0.88rem; color: var(--an-texto-suave, var(--lumo-secondary-text-color)); }
@keyframes an-vacio-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .an-vacio { animation: none; } }

/* Columnas de color de los listados (incidencias, tipos de día, tarjetas...): la muestra en lugar de «r,g,b» */
.an-color-celda {
    display: inline-block;
    vertical-align: middle;
    width: 2.6rem;
    height: 1.05rem;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.10);
}
html[theme~="dark"] .an-color-celda { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.4); }

/* Atributos (colores por condición) */
.an-muestra-color {
    flex: none;
    font-size: var(--lumo-font-size-xxs);
    font-weight: 600;
    padding: 0 0.3rem;
    border-radius: 4px;
    border: 1px solid var(--an-borde, rgba(0, 0, 0, 0.12));
    line-height: 1.4;
}
.an-elemento:not(.an-activo) .an-muestra-color { opacity: 0.45; }
/* Atributo de fila: la muestra es como la fila (tono suave y barra de color a la izquierda) */
.an-muestra-fila { border-radius: 7px; box-shadow: inset 3px 0 0 var(--an-color-fila); padding-left: 0.55rem; }
.an-ejemplo-color.an-ejemplo-fila { border-radius: 9px; border-style: solid; border-color: transparent; box-shadow: inset 4px 0 0 var(--an-color-fila); padding-left: 1rem; }
.an-dialogo-atributo .an-colores { flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; }
.an-dialogo-atributo .an-fila-color { gap: 0.4rem; }
.an-color { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; cursor: pointer; background: none; }
.an-color:disabled { opacity: 0.35; cursor: default; }
.an-ejemplo-color { padding: 0.3rem 0.8rem; border-radius: 6px; border: 1px dashed rgba(0, 0, 0, 0.2); font-weight: 500; }
.an-error { display: block; color: var(--lumo-error-text-color); font-size: var(--lumo-font-size-s); min-height: 1.2em; }
/* ---------- Diagrama de permisos (Gantt): «sala de control» ---------- */
.an-gantt-dialogo::part(content) { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
.an-gantt-dialogo vaadin-dialog-content, .an-gantt-dialogo > * { min-height: 0; }
.an-gantt-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; }
.an-gantt-empleados { flex: 1 1 380px; min-width: 260px; }
.an-gantt-zooms { display: flex; gap: 0.25rem; padding-bottom: 0.2rem; }
.an-gantt-zoom { border-radius: 10px; background: var(--an-superficie-2); }
.an-gantt-resumen { margin-left: auto; padding-bottom: 0.55rem; font-weight: 700; color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); }
.an-gantt-pie-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; }
.an-gantt-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.an-gantt-leyenda-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--lumo-font-size-xs); font-weight: 600; color: var(--an-texto-suave); }
.an-gantt-muestra { position: relative; display: inline-block; width: 1.6rem; height: 0.9rem; border-radius: 4px; }
.an-gantt-muestra.an-gantt-media { height: 0.5rem; }
.an-gantt-muestra-finde { background: var(--an-tono-1c3a40); box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .25); }
.an-gantt-muestra-festivo { background: repeating-linear-gradient(135deg, rgba(255, 176, 74, .75) 0 3px, rgba(255, 176, 74, .25) 3px 6px); }
.an-gantt-ayuda { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }

.an-gantt-lienzo {
    --an-gantt-dia: 26px; --an-gantt-nombre: 250px;
    flex: 1 1 auto; min-height: 260px; height: calc(92vh - 250px); overflow: auto; border-radius: 18px; position: relative;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--an-tono-2bb3a3-rgb), .22), transparent 55%),
        radial-gradient(90% 80% at 0% 100%, rgba(92, 107, 192, .16), transparent 60%),
        linear-gradient(160deg, var(--an-tono-061719) 0%, var(--an-tono-0b2328) 45%, var(--an-tono-0e2d33) 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .12), 0 18px 40px rgba(var(--an-tono-061719-rgb), .35);
    color: var(--an-tono-dff7f3);
}
.an-gantt-tabla {
    display: grid; width: max-content; min-width: 100%;
    grid-template-columns: var(--an-gantt-nombre) calc(var(--an-gantt-n) * var(--an-gantt-dia));
    grid-template-rows: 62px; grid-auto-rows: 40px;
}
.an-gantt-esquina {
    position: sticky; top: 0; left: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 0 1rem; background: rgba(var(--an-tono-061719-rgb), .94); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .28); border-right: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .18);
}
.an-gantt-esquina-titulo { font-size: 0.68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-gantt-esquina-periodo { font-size: 0.75rem; color: rgba(var(--an-tono-dff7f3-rgb), .65); font-variant-numeric: tabular-nums; }
.an-gantt-cabecera {
    position: sticky; top: 0; z-index: 4; display: grid;
    grid-template-columns: repeat(var(--an-gantt-n), var(--an-gantt-dia)); grid-template-rows: 24px 38px;
    background: rgba(var(--an-tono-061719-rgb), .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .28);
}
.an-gantt-mes {
    grid-row: 1; display: flex; align-items: center; padding: 0 0.6rem; white-space: nowrap; overflow: clip;
    font-size: 0.7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--an-tono-7ff0dd);
    border-left: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .35);
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), .16), transparent 70%);
}
.an-gantt-mes-texto { position: sticky; left: calc(var(--an-gantt-nombre) + 0.6rem); }
.an-gantt-dia {
    grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1;
    border-left: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .07);
}
.an-gantt-dia.an-gantt-inicio-mes { border-left-color: rgba(var(--an-tono-7ff0dd-rgb), .35); }
.an-gantt-dia-semana { font-size: 0.55rem; font-weight: 700; color: rgba(var(--an-tono-dff7f3-rgb), .45); }
.an-gantt-dia-num { font-size: 0.72rem; font-weight: 700; color: var(--an-tono-e8fffb); font-variant-numeric: tabular-nums; }
.an-gantt-dia.an-gantt-finde .an-gantt-dia-num { color: rgba(var(--an-tono-dff7f3-rgb), .45); }
.an-gantt-dia.an-gantt-hoy-cab .an-gantt-dia-num {
    color: var(--an-tono-04211d); background: var(--an-tono-7ff0dd); border-radius: 6px; padding: 2px 4px; box-shadow: 0 0 12px rgba(var(--an-tono-7ff0dd-rgb), .8);
}
.an-gantt-nombre {
    position: sticky; left: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0 0.6rem 0 1rem; background: rgba(var(--an-tono-081c20-rgb), .93); backdrop-filter: blur(10px);
    border-right: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .18); border-bottom: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .07);
}
.an-gantt-nombre-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-weight: 600; color: var(--an-tono-e8fffb); }
.an-gantt-nombre-cifras { display: flex; gap: 0.25rem; flex: none; }
.an-gantt-cifra-ok, .an-gantt-cifra-no { font-size: 0.66rem; font-weight: 800; padding: 0.12rem 0.4rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.an-gantt-cifra-ok { color: var(--an-tono-04211d); background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3)); }
.an-gantt-cifra-no { color: #fff; background: linear-gradient(135deg, #ff8a80, #e5534b); }
.an-gantt-fila {
    position: relative; display: grid; grid-template-columns: repeat(var(--an-gantt-n), var(--an-gantt-dia)); grid-template-rows: 100%;
    border-bottom: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .07);
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--an-gantt-dia) - 1px), rgba(var(--an-tono-7ff0dd-rgb), .06) calc(var(--an-gantt-dia) - 1px) var(--an-gantt-dia));
}
.an-gantt-fila:hover { background-color: rgba(var(--an-tono-7ff0dd-rgb), .04); }
.an-gantt-fila > * { grid-row: 1; }
.an-gantt-fondo-finde { background: rgba(255, 255, 255, .035); }
/* Festivo: rayas ámbar bien visibles sobre el fondo oscuro, con un filo arriba y abajo (antes casi no se veía) */
/* Con el color de su tipo de día (--an-gantt-festivo) si lo tiene; si no, ámbar */
.an-gantt-fondo-festivo {
    --c: var(--an-gantt-festivo, rgb(255, 176, 74));
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 66%, transparent) 0 3px, color-mix(in srgb, var(--c) 20%, transparent) 3px 7px);
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 92%, white 8%), inset 0 -2px 0 color-mix(in srgb, var(--c) 92%, white 8%);
}
.an-gantt-hoy { justify-self: center; width: 2px; background: var(--an-tono-7ff0dd); box-shadow: 0 0 10px var(--an-tono-7ff0dd), 0 0 22px rgba(var(--an-tono-7ff0dd-rgb), .6); z-index: 1; }
.an-gantt-barra-permiso {
    position: relative; z-index: 2; margin: 8px 2px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: default; transition: transform .15s, box-shadow .15s, filter .15s;
}
.an-gantt-barra-permiso:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.12); z-index: 3; }
.an-gantt-barra-texto { font-size: 0.66rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.an-gantt-ok { background: linear-gradient(135deg, var(--an-tono-7ff0dd) 0%, var(--an-tono-2bb3a3) 55%, var(--an-tono-0f8f82) 100%); color: var(--an-tono-04211d);
    box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .6), 0 0 14px rgba(var(--an-tono-2bb3a3-rgb), .55); }
.an-gantt-no { background: repeating-linear-gradient(135deg, #ff8a80 0 6px, #e5534b 6px 12px); color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 138, 128, .6), 0 0 14px rgba(229, 83, 75, .5); }
.an-gantt-barra-permiso.an-gantt-media { height: 40%; }
.an-gantt-barra-permiso.an-gantt-manana { align-self: start; margin-top: 4px; }
.an-gantt-barra-permiso.an-gantt-tarde { align-self: end; margin-bottom: 4px; }
.an-gantt-barra-permiso.an-gantt-media .an-gantt-barra-texto { font-size: 0.56rem; }
.an-gantt-vacio {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
    color: rgba(var(--an-tono-dff7f3-rgb), .75); font-weight: 600;
}
.an-gantt-vacio vaadin-icon { width: 3rem; height: 3rem; color: var(--an-tono-7ff0dd); filter: drop-shadow(0 0 12px rgba(var(--an-tono-7ff0dd-rgb), .6)); }

/* ---------- Ficha de Mensajería ---------- */
.an-msj-columnas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.an-msj-columnas.an-msj-una-columna { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .an-msj-columnas { grid-template-columns: minmax(0, 1fr); } }
.an-msj-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 1.55rem; }
.an-msj-estado-titulo { width: 100%; margin-top: -1.55rem; font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color); font-weight: 500; }
.an-msj-chip { display: inline-flex; align-items: center; padding: 0.18rem 0.65rem; border-radius: 999px; font-size: var(--lumo-font-size-xs); font-weight: 700; }
.an-msj-chip-nuevo { background: color-mix(in srgb, var(--an-tono-2bb3a3) 14%, transparent); color: var(--an-tono-0f8f82); }
.an-msj-chip-leido { background: color-mix(in srgb, var(--an-tono-12343b) 10%, transparent); color: var(--an-tono-12343b); }
.an-msj-chip-sinleer { background: color-mix(in srgb, #f39a38 18%, transparent); color: #b5650d; }
.an-msj-chip-aceptado { background: color-mix(in srgb, #1a9a2a 16%, transparent); color: #146c20; }
.an-msj-chip-denegado { background: color-mix(in srgb, #e5534b 15%, transparent); color: #b3322b; }
.an-msj-chip-pendiente { background: color-mix(in srgb, #5c6bc0 14%, transparent); color: #3f4ba0; }
html[theme~="dark"] .an-msj-chip-leido { color: var(--an-tono-cfe3e6); }
html[theme~="dark"] .an-msj-chip-aceptado { color: #7fe08b; }
html[theme~="dark"] .an-msj-chip-denegado { color: #ff8a80; }
html[theme~="dark"] .an-msj-chip-sinleer { color: #ffc27a; }
.an-msj-duracion { font-size: var(--lumo-font-size-s); font-weight: 600; color: var(--an-turquesa-oscuro, var(--an-tono-0f8f82)); }
.an-msj-permisos { display: flex; flex-direction: column; gap: 0.7rem; }
.an-msj-permisos-quien { font-weight: 600; color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); }
.an-msj-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.an-msj-cifra-concedidos .an-msj-cifra-valor { color: #2f7d4a; }
html[theme~="dark"] .an-msj-cifra-concedidos .an-msj-cifra-valor { color: #8ef5a6; }
.an-msj-cifra {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.9rem; border-radius: 14px;
    background: linear-gradient(145deg, var(--an-superficie-2), var(--an-superficie)); border: 1px solid var(--an-borde, rgba(var(--an-tono-12343b-rgb), .1));
}
.an-msj-cifra-titulo { font-size: var(--lumo-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--an-texto-suave); }
.an-msj-cifra-valor { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--an-petroleo, var(--an-tono-12343b)); line-height: 1.1; }
html[theme~="dark"] .an-msj-cifra-valor { color: var(--an-tono-e8fffb); }
.an-msj-cifra-positiva { border-color: color-mix(in srgb, var(--an-tono-2bb3a3) 40%, transparent); }
.an-msj-cifra-positiva .an-msj-cifra-valor { color: var(--an-tono-0f8f82); }
.an-msj-cifra-negativa { border-color: color-mix(in srgb, #e5534b 45%, transparent); background: color-mix(in srgb, #e5534b 8%, var(--an-superficie)); }
.an-msj-cifra-negativa .an-msj-cifra-valor { color: #c0392b; }
.an-msj-tabla { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--an-borde, rgba(var(--an-tono-12343b-rgb), .1)); }
.an-msj-tabla > span { padding: 0.4rem 0.7rem; font-size: var(--lumo-font-size-s); border-top: 1px solid var(--an-borde, rgba(var(--an-tono-12343b-rgb), .08)); }
.an-msj-tabla > .an-msj-th { background: linear-gradient(135deg, var(--an-tono-12343b), var(--an-tono-1d5c61)); color: #fff; font-weight: 700; font-size: var(--lumo-font-size-xs); border-top: 0; }
.an-msj-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-msj-ok { color: #146c20; font-weight: 700; }
.an-msj-no { color: #b3322b; font-weight: 700; }
html[theme~="dark"] .an-msj-ok { color: #7fe08b; }
html[theme~="dark"] .an-msj-no { color: #ff8a80; }

/* Resultado de «Comprobar filtro» */
.an-filtro-comprobacion { font-size: var(--lumo-font-size-s); font-weight: 600; }
.an-filtro-comprobacion.an-ok { color: #1a8a2a; }
.an-filtro-comprobacion.an-mal { color: var(--lumo-error-text-color); }
html[theme~="dark"] .an-filtro-comprobacion.an-ok { color: #7fe08b; }

/* Ficha */
.an-ficha .an-dias { gap: 0.25rem 1rem; }

/* Bloques de una ficha (Identificación, Dirección...): tarjeta suave con título e icono */
.an-ficha-seccion {
    border: 1px solid var(--an-linea, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    padding: 0.55rem 0.9rem 0.7rem;
    margin-bottom: 0.75rem;
    background: var(--an-superficie, #fff);
}
.an-ficha-seccion-titulo {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: var(--lumo-font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--an-texto-suave, var(--lumo-secondary-text-color));
    margin-bottom: 0.15rem;
}
.an-ficha-seccion-icono { width: 1rem; height: 1rem; color: var(--lumo-primary-color); }

/* Fichas anchas (incidencias, horarios): los bloques en dos columnas; en pantallas estrechas, una */
.an-ficha-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.9rem; align-items: start; }
@media (max-width: 900px) { .an-ficha-columnas { grid-template-columns: minmax(0, 1fr); } }

/* Tecla de una opción del menú contextual (Ins, E, Supr, Esc, F5) */
.an-tecla {
    font-size: var(--lumo-font-size-xxs); font-weight: 600; color: var(--lumo-secondary-text-color);
    border: 1px solid var(--an-linea, rgba(0, 0, 0, 0.15)); border-bottom-width: 2px; border-radius: 5px;
    padding: 0 0.35rem; margin-left: 1.5rem; line-height: 1.5; font-family: inherit;
}

/* Ficha con pestañas: mismo tamaño en todas; el contenido se desplaza dentro */
.an-ficha-pestanas::part(content) { display: flex; flex-direction: column; }
.an-ficha-pestanas vaadin-tabsheet { flex: 1; min-height: 0; }

/* Menús visibles de un usuario: árbol igual que el menú lateral + vista previa en vivo */
.an-pestana-menus { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.an-sm { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.8fr); gap: 1rem; flex: 1; min-height: 0; }
.an-sm-izquierda { display: flex; flex-direction: column; min-height: 0; gap: .4rem; }
.an-sm-buscar { width: 100%; }
.an-sm-acciones { display: flex; align-items: center; gap: .25rem; }
.an-sm-resumen { margin-right: auto; font-weight: 600; font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); }
.an-sm-arbol {
    flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--an-borde); border-radius: 14px;
    background: var(--an-superficie); padding: .35rem;
}
.an-sm-grupo { border-radius: 10px; }
.an-sm-nivel-0 + .an-sm-nivel-0 { margin-top: 2px; }
.an-sm-cabecera { display: flex; align-items: center; gap: .35rem; padding: .25rem .5rem .25rem .2rem; border-radius: 10px; }
.an-sm-cabecera:hover { background: var(--an-hover); }
.an-sm-nivel-0 > .an-sm-cabecera .an-sm-titulo { font-weight: 650; }
.an-sm-nivel-1 > .an-sm-cabecera .an-sm-titulo, .an-sm-nivel-2 > .an-sm-cabecera .an-sm-titulo { font-weight: 600; color: var(--an-texto); }
.an-sm-titulo { flex: 1; cursor: pointer; user-select: none; }
.an-sm-icono { width: 18px; height: 18px; color: var(--an-turquesa); flex: none; }
.an-sm-desplegar { margin: 0; color: var(--an-texto-suave); }
.an-sm-desplegar vaadin-icon { transition: transform .2s ease; }
.an-sm-grupo.an-abierto > .an-sm-cabecera .an-sm-desplegar vaadin-icon { transform: rotate(90deg); }
.an-sm-casilla { margin: 0; }
.an-sm-contador {
    font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
    background: color-mix(in srgb, var(--an-turquesa) 14%, transparent); color: var(--an-tono-127a6e);
}
.an-sm-contador.an-sm-ninguno { background: var(--an-linea); color: var(--an-texto-suave); }
.an-sm-hijos { display: none; margin-left: 1.55rem; padding-left: .55rem; border-left: 2px solid var(--an-linea); }
.an-sm-grupo.an-abierto > .an-sm-hijos { display: block; }
.an-sm-fila-menu { display: flex; align-items: center; gap: .5rem; padding: .05rem .5rem; border-radius: 8px; }
.an-sm-fila-menu:hover { background: var(--an-hover); }
.an-sm-menu { flex: 1; }
.an-sm-etiqueta-sup {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; padding: .1rem .5rem;
    border-radius: 999px; background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #6d28d9; white-space: nowrap;
}
.an-sm-etiqueta-sup vaadin-icon { width: 11px; height: 11px; }
.an-desactivado .an-sm-arbol { opacity: .6; }

/* Vista previa: el menú lateral tal como lo verá el usuario */
.an-sm-derecha { display: flex; flex-direction: column; min-height: 0; gap: .4rem; }
.an-sm-vista-titulo { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--an-texto-suave); padding-top: .55rem; }
.an-sm-vista-menu {
    flex: 1; min-height: 0; overflow: auto; border-radius: 14px; padding: .7rem .5rem;
    background: linear-gradient(180deg, var(--an-tono-0f2e35) 0%, var(--an-tono-0b2329) 100%); color: var(--an-tono-e2edef); font-size: .85rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--an-sombra);
}
.an-sm-v-item, .an-sm-v-subgrupo, .an-sm-v-hoja { display: flex; align-items: center; gap: .55rem; padding: .28rem .55rem; border-radius: 8px; }
.an-sm-v-item { font-weight: 600; margin-top: .15rem; }
.an-sm-v-item vaadin-icon { width: 16px; height: 16px; color: var(--an-turquesa-claro); }
.an-sm-v-subgrupo { color: var(--an-tono-c5d8dc); font-weight: 600; }
.an-sm-v-hoja { color: var(--an-tono-b9cdd2); }
.an-sm-v-nivel-1 { padding-left: 2rem; }
.an-sm-v-nivel-2 { padding-left: 3rem; }
.an-sm-v-nivel-3 { padding-left: 4rem; }
.an-sm-v-vacio { display: block; padding: .6rem; color: var(--an-tono-91a6ad); font-style: italic; }
@media (max-width: 760px) {
    .an-sm { grid-template-columns: 1fr; }
    .an-sm-derecha { max-height: 240px; }
}

/* Campo de otro mantenimiento: lista + lupa de selección avanzada */
.an-campo-catalogo { gap: 0.15rem; }
.an-campo-catalogo-buscar { flex: none; margin: 0; }
/* «＋ Añadir … a Provincias…» al final de la lista: en el color de la marca y separado */
vaadin-combo-box-item.an-opcion-anadir {
    color: var(--lumo-primary-text-color); font-weight: 600;
    border-top: 1px solid var(--an-linea, rgba(0, 0, 0, 0.1)); margin-top: 0.2rem;
}
/* Ventana «Selección de …»: el listado ocupa todo el alto */
.an-dialogo-seleccion::part(content) { display: flex; flex-direction: column; }
.an-seleccion-contenedor { flex: 1; min-height: 0; padding: 0; }

/* Menú lateral: opciones aún no migradas, en tono apagado */
.an-menu-scroll { flex: 1; }

/* Favoritos: corazón al lado de cada opción (apagado por defecto, rojo si es favorito) */
.an-favorito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-inline-end: -0.25rem;
    border-radius: 50%;
    color: rgba(var(--an-tono-d9ecea-rgb), 0.32);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s, background-color 0.15s;
}
.an-favorito vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-main vaadin-side-nav-item:hover > .an-favorito,
.an-main vaadin-side-nav-item .an-favorito:hover { color: rgba(255, 255, 255, 0.75); }
.an-favorito:hover { background-color: rgba(255, 255, 255, 0.08); transform: scale(1.45); }
.an-favorito.an-activo,
.an-main vaadin-side-nav-item:hover > .an-favorito.an-activo { color: #ffb400; filter: drop-shadow(0 0 4px rgba(255, 180, 0, 0.55)); }

/* Barra de arriba: enlaces fijos de los favoritos abiertos en esta sesión */
.an-favoritos-barra {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0.25rem;
}
.an-favorito-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    color: var(--an-texto);
    background: var(--an-superficie-3, rgba(var(--an-tono-0f3b3e-rgb), 0.06));
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}
.an-favorito-enlace vaadin-icon { width: 0.95rem; height: 0.95rem; color: #f5a700; filter: drop-shadow(0 0 3px rgba(245, 167, 0, 0.45)); }
.an-favorito-enlace:hover { background: rgba(var(--an-tono-1a7a80-rgb), 0.12); }
.an-favorito-enlace.an-actual { background: rgba(var(--an-tono-1a7a80-rgb), 0.14); border-color: rgba(var(--an-tono-1a7a80-rgb), 0.35); color: var(--an-petroleo, var(--an-tono-0f3b3e)); }
html[theme~="dark"] .an-favorito-enlace.an-actual { color: #ffffff; }
.an-main vaadin-side-nav-item.an-nav-pendiente { opacity: 0.6; }
.an-usuario-nombre { font-weight: 500; }

/* Página de menú pendiente */
.an-pendiente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    color: var(--an-texto-suave);
}
.an-pendiente p { max-width: 46ch; line-height: 1.6; }
.an-pendiente-icono { width: 44px; height: 44px; color: var(--an-turquesa); }

@media (max-width: 1100px) {
    .an-listado-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(320px, 1fr); gap: 1rem; }
    .an-separador { display: none; }
    .an-arbol { max-height: 260px; }
}

/* Ficha de parte de presencia */
.an-tiempo-parte input { font-variant-numeric: tabular-nums; font-weight: 600; }
.an-tiempo-parte.an-negativo { --lumo-body-text-color: var(--lumo-error-text-color); }
.an-datos-terminal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: var(--an-superficie-2);
    border: 1px solid var(--an-borde);
}
.an-datos-terminal:empty { display: none; }
.an-datos-terminal-titulo {
    grid-column: 1 / -1;
    font-size: var(--lumo-font-size-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--an-texto-suave);
}
/* Las ventanas se pueden arrastrar por su título */
vaadin-dialog-overlay::part(header) { cursor: move; }
.an-dato { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.an-dato span:first-child { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }
.an-dato span:last-child { font-size: var(--lumo-font-size-s); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.an-marcas { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.an-marcas:empty { display: none; }
.an-etiqueta-estado { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: var(--lumo-font-size-xs); font-weight: 600; }
.an-etiqueta-aviso { color: #8a5a00; background: #fff3d6; }
.an-etiqueta-info { color: var(--an-tono-17606a); background: rgba(var(--an-tono-1a7a80-rgb), 0.12); }
.an-justificante { margin-top: 0.75rem; }
.an-justificante vaadin-upload { padding: 0.5rem; border-radius: 12px; }
@media (max-width: 700px) { .an-datos-terminal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Barra de selección del listado */
.an-zona-tabla { flex-direction: column; gap: 0.5rem; position: relative; }
/* Barra de la selección: flota sobre la parte de abajo de la tabla, así al aparecer o desaparecer no mueve las filas */
.an-barra-seleccion {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 5;
    flex: none;
    gap: 0.25rem;
    max-width: calc(100% - 32px);
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.35rem 0.5rem 0.35rem 0.95rem;
    border-radius: 14px;
    background: var(--an-superficie, #ffffff);
    border: 1px solid rgba(var(--an-tono-1a7a80-rgb), 0.3);
    box-shadow: 0 10px 30px rgba(var(--an-tono-0f2e35-rgb), 0.22), 0 2px 8px rgba(var(--an-tono-0f2e35-rgb), 0.12);
    animation: an-barra-entrar 0.16s ease-out;
}
@keyframes an-barra-entrar {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
html[theme~="dark"] .an-barra-seleccion { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); border-color: rgba(var(--an-tono-2bb3a3-rgb), 0.4); }
.an-cuantos { font-weight: 650; font-size: var(--lumo-font-size-s); color: var(--lumo-primary-text-color); margin-inline-end: 0.5rem; }
.an-icono-menu { width: 16px; height: 16px; color: var(--an-texto-suave); }

/* ================================================================ Modo noche
   Se activa con el botón de la barra superior; se guarda en el navegador (localStorage "autonet-tema"). */
html[theme~="dark"] {
    color-scheme: dark;
    --an-fondo: var(--an-tono-0c1316);
    --an-superficie: var(--an-tono-131c20);
    --an-superficie-2: var(--an-tono-172227);
    --an-superficie-3: var(--an-tono-1d2a30);
    --an-linea: var(--an-tono-1f2d33);
    --an-hover: var(--an-tono-1a272d);
    --an-borde: var(--an-tono-24343b);
    --an-texto: var(--an-tono-e2edef);
    --an-texto-suave: var(--an-tono-91a6ad);
    --an-sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --lumo-primary-color: var(--an-tono-2bb3a3);
    --lumo-primary-color-50pct: rgba(var(--an-tono-2bb3a3-rgb), 0.5);
    --lumo-primary-color-10pct: rgba(var(--an-tono-2bb3a3-rgb), 0.14);
    --lumo-primary-text-color: var(--an-tono-5fd3c4);
}
html[theme~="dark"] .an-pagina h2,
html[theme~="dark"] .an-listado-cabecera h2,
html[theme~="dark"] .an-seccion > vaadin-details-summary { color: var(--an-texto); }
html[theme~="dark"] .an-logo-oscuro .an-logo { color: #ffffff; }
html[theme~="dark"] .an-aviso-limite { color: #f3c77a; background: #2b2213; border-color: #4a3a1c; }
html[theme~="dark"] .an-etiqueta-aviso { color: #f3c77a; background: #2b2213; }
html[theme~="dark"] .an-elemento.an-no-compatible { color: #f0b45a; }
/* El logotipo del cliente suele ser oscuro sobre blanco: en modo noche va sobre una placa clara */
html[theme~="dark"] .an-neikom {
    mix-blend-mode: normal;
    padding: 0.6rem 1rem;
    border-radius: 14px;
    background: #f4f6f8;
    box-sizing: content-box;
}
html[theme~="dark"] vaadin-app-layout.an-main::part(drawer) { background: var(--an-tono-0a1215); }
html[theme~="dark"] .an-main vaadin-side-nav { --lumo-primary-color-10pct: rgba(var(--an-tono-2bb3a3-rgb), 0.18); }
.an-boton-tema { --lumo-icon-size-m: 22px; color: var(--an-texto-suave); }
.an-boton-tema vaadin-icon { width: 21px; height: 21px; }
.an-boton-tema:hover { color: var(--lumo-primary-text-color); }
/* Selector de idioma (junto al modo noche) */
.an-selector-idioma vaadin-menu-bar-button { color: var(--an-texto-suave); padding: 0 .35rem; }
.an-selector-idioma vaadin-menu-bar-button:hover { color: var(--lumo-primary-text-color); }
.an-bandera {
    width: 22px; height: 15px; object-fit: cover; border-radius: 3px; flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .12);
}
.an-selector-idioma .an-bandera { margin-right: .4rem; }
.an-idioma-opcion { gap: .6rem; }
.an-idioma-codigo {
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    padding: .1rem .38rem; border-radius: 999px;
    border: 1px solid var(--lumo-contrast-20pct);
}
/* Vista previa de justificantes */
.an-vista-previa::part(content) { display: flex; padding: 0 1rem 1rem; }
.an-vista-previa-contenido {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    border-radius: 12px;
    overflow: auto;
    background: var(--an-superficie-3);
}
.an-marco-previa { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #ffffff; }
.an-imagen-previa { max-width: 100%; max-height: 100%; object-fit: contain; }
.an-sin-vista { flex-direction: column; gap: 0.5rem; color: var(--an-texto-suave); }
.an-sin-vista vaadin-icon { width: 48px; height: 48px; }

/* Separador entre el panel lateral y la tabla: se arrastra para cambiar el ancho; doble clic = ajustar al texto */
.an-separador {
    position: relative;
    cursor: col-resize;
    touch-action: none;
}
.an-separador::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    background: var(--an-borde);
    transition: background 0.15s, height 0.15s;
}
.an-separador:hover::after,
.an-arrastrando .an-separador::after { background: var(--lumo-primary-color); height: 72px; }
.an-arrastrando { user-select: none; cursor: col-resize; }
/* Ventana del análisis */
.an-dialogo-analisis vaadin-horizontal-layout { gap: 1rem; }
.an-analisis-disponibles, .an-analisis-elegidas { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.an-analisis-disponibles { width: 15rem; flex: none; }
.an-analisis-disponibles > span, .an-analisis-elegidas > span {
    font-size: var(--lumo-font-size-s); font-weight: 600; color: var(--an-texto-suave);
}
.an-lista-columnas {
    height: 300px; overflow: auto; border: 1px solid var(--an-borde); border-radius: 10px; padding: 0.25rem;
    background: var(--an-superficie);
}
.an-analisis-elegidas vaadin-grid { border: 1px solid var(--an-borde); border-radius: 10px; }
.an-analisis-opciones {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.5rem; margin-top: 0.75rem;
    padding: 0.75rem 1rem; border-radius: 12px; background: var(--an-superficie-2); border: 1px solid var(--an-borde);
}
@media (max-width: 760px) { .an-analisis-opciones { grid-template-columns: 1fr; } .an-analisis-disponibles { width: 100%; } }
/* Columnas del análisis: la fila que se sube o baja se ve claramente (fondo turquesa y barra a la izquierda) */
vaadin-grid.an-analisis-columnas::part(selected-row-cell) {
    background-color: color-mix(in srgb, var(--an-turquesa) 20%, var(--an-superficie)); font-weight: 600;
}
vaadin-grid.an-analisis-columnas::part(selected-row-cell first-column-cell) { box-shadow: inset 4px 0 0 var(--an-turquesa); }
/* Opción desactivada: la ayuda dice qué falta, así que se lee con el color normal de las ayudas (no apagada) */
.an-analisis-opciones vaadin-checkbox[disabled]::part(helper-text) {
    color: var(--lumo-secondary-text-color); -webkit-text-fill-color: var(--lumo-secondary-text-color); opacity: 1;
}
/* ===================== Historial de cambios (línea de tiempo) ===================== */
.an-linea-tiempo { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.an-lt-dia {
    align-self: flex-start; margin: .9rem 0 .3rem; padding: .15rem .65rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--an-texto-suave); background: var(--an-linea);
}
.an-lt-item { display: grid; grid-template-columns: 34px 1fr; gap: .8rem; position: relative; }
.an-lt-item::before {
    content: ""; position: absolute; left: 16px; top: 34px; bottom: -.55rem; width: 2px; background: var(--an-linea);
}
.an-lt-item:last-child::before { display: none; }
.an-lt-punto {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 1;
    box-shadow: 0 0 0 4px var(--an-superficie), 0 4px 12px rgba(var(--an-tono-0f2e35-rgb), .18);
}
.an-lt-punto vaadin-icon { width: 15px; height: 15px; }
.an-lt-alta { background: linear-gradient(135deg, var(--an-tono-2bb3a3), var(--an-tono-1d8f82)); }
.an-lt-modificacion { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.an-lt-borrado { background: linear-gradient(135deg, #f0596b, #d63a4c); }
.an-lt-restauracion { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.an-lt-cuerpo {
    background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 14px; padding: .75rem .95rem;
    box-shadow: var(--an-sombra); margin-bottom: .45rem; min-width: 0;
}
.an-lt-cabecera { display: flex; align-items: baseline; gap: .75rem; }
.an-lt-titulo { flex: 1; min-width: 0; color: var(--an-texto-suave); line-height: 1.45; }
.an-lt-persona { font-weight: 650; color: var(--an-texto); }
.an-lt-registro { font-weight: 600; color: var(--an-texto); }
.an-lt-hora { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--an-texto-suave); white-space: nowrap; }
.an-lt-etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.an-lt-chip {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .12rem .55rem;
    border-radius: 999px; background: var(--an-linea); color: var(--an-texto-suave);
}
.an-lt-chip vaadin-icon { width: 12px; height: 12px; }
.an-lt-chip-menu { background: color-mix(in srgb, var(--an-turquesa) 14%, transparent); color: var(--an-tono-127a6e); }
.an-lt-chip-jornada { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #6d28d9; }
.an-lt-detalle { margin-top: .55rem; display: flex; flex-direction: column; gap: .35rem; }
.an-lt-cambios { display: flex; flex-direction: column; gap: .25rem; }
.an-lt-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; font-size: .9rem; }
.an-lt-campo { color: var(--an-texto-suave); min-width: 9rem; }
.an-lt-antes {
    padding: .05rem .4rem; border-radius: 6px; text-decoration: line-through; text-decoration-color: rgba(214, 58, 76, .55);
    background: color-mix(in srgb, #f0596b 9%, transparent); color: var(--an-texto-suave);
}
.an-lt-flecha { color: var(--an-texto-suave); }
.an-lt-despues {
    padding: .05rem .4rem; border-radius: 6px; font-weight: 600;
    background: color-mix(in srgb, var(--an-turquesa) 12%, transparent); color: var(--an-texto);
}
.an-lt-subregistro { font-size: .75rem; font-weight: 700; color: var(--an-texto-suave); margin-top: .35rem; }
.an-lt-nota { color: var(--an-texto-suave); font-size: .9rem; }
.an-lt-recuperar { align-self: flex-start; }
.an-lt-recuperado { align-self: flex-start; font-size: .75rem; font-weight: 600; color: #6d28d9; }
.an-lt-mas::part(summary) { font-size: .85rem; color: var(--lumo-primary-text-color); }
.an-lt-vacio {
    display: flex; align-items: center; gap: .6rem; padding: 2rem; justify-content: center; color: var(--an-texto-suave);
    border: 1px dashed var(--an-borde); border-radius: 14px;
}
.an-historial::part(content) { padding-top: 0; }
.an-boton-historial { color: var(--an-texto-suave); }
.an-boton-historial:hover { color: var(--lumo-primary-text-color); }

/* Pantalla Actividad */
/* Todo el ancho disponible, con el mismo margen que los listados */
.an-actividad { padding: 1.75rem 2rem 2rem; box-sizing: border-box; width: 100%; }
@media (max-width: 700px) { .an-actividad { padding: 1rem; } }
.an-lt-entrada { background: linear-gradient(135deg, #64748b, #475569); }
.an-lt-apertura { background: linear-gradient(135deg, var(--an-tono-2bb3a3), var(--an-tono-12806f)); }
.an-lt-entrada_fallida { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.an-lt-verificacion { background: linear-gradient(135deg, #6366f1, #3730a3); }
.an-lt-contrasena { background: linear-gradient(135deg, var(--an-tono-0ea5e9), #0369a1); }
.an-lt-recuperacion_neikom { background: linear-gradient(135deg, #f59e0b, #b45309); }
/* AutoNET recolocó partes por marcajes que llegaron tarde (docs/marcajes-tardios.md) */
.an-lt-recolocacion { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.an-lt-descarte { background: linear-gradient(135deg, #f97316, #c2410c); }
.an-actividad-cabecera { display: flex; align-items: center; gap: .8rem; }
.an-actividad-cabecera h2 { margin: 0; }
.an-actividad-cabecera vaadin-button { margin-left: auto; }
.an-actividad-filtros {
    /* Fechas con el ancho justo para dd/mm/aaaa; listas medianas; «Buscar» ocupa lo que sobra (texto de ejemplo entero) */
    display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: flex-end;
    background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 16px; padding: .4rem 1rem .8rem;
    box-shadow: var(--an-sombra); margin-bottom: .6rem;
}
.an-actividad-filtros > * { flex: 0 0 auto; }
.an-actividad-filtros .an-filtro-fecha { width: 9.5rem; }
.an-actividad-filtros .an-filtro-lista { width: 13rem; }
.an-actividad-filtros .an-filtro-buscar { flex: 1 1 18rem; min-width: 18rem; }
.an-actividad-pie { display: flex; justify-content: center; margin-top: .6rem; }
/* Actividad: dos anotaciones por fila si cabe (petición del usuario, 2026-10-11); los días siguen a todo el ancho. En dos
   columnas no se dibuja la línea que une los puntos (uniría tarjetas que no van seguidas) */
.an-actividad { container-type: inline-size; }
@container (min-width: 1100px) {
    .an-actividad .an-linea-tiempo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; row-gap: .6rem; align-items: start; }
    .an-actividad .an-lt-dia { grid-column: 1 / -1; justify-self: start; }
    .an-actividad .an-lt-vacio { grid-column: 1 / -1; }
    .an-actividad .an-lt-item::before { display: none; }
}
.an-integridad { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-radius: 14px; }
.an-integridad > vaadin-icon { width: 34px; height: 34px; flex: none; }
.an-integridad span { font-weight: 700; font-size: 1.05rem; }
.an-integridad p { margin: .35rem 0 0; color: var(--an-texto-suave); }
.an-integridad-ok { background: color-mix(in srgb, var(--an-turquesa) 12%, transparent); }
.an-integridad-ok > vaadin-icon { color: var(--an-tono-1d8f82); }
.an-integridad-mal { background: color-mix(in srgb, #f0596b 12%, transparent); }
.an-integridad-mal > vaadin-icon { color: #d63a4c; }

/* Vista previa al recuperar un borrado */
.an-recuperar-registro {
    border: 1px solid var(--an-borde); border-radius: 14px; padding: .75rem 1rem; margin-bottom: .6rem;
    background: color-mix(in srgb, #8b5cf6 4%, var(--an-superficie));
}
.an-recuperar-id { display: inline-block; font-size: .75rem; font-weight: 700; color: #6d28d9; margin-bottom: .35rem; }
.an-recuperar-campos { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .3rem 1rem; }
.an-recuperar-etiqueta { color: var(--an-texto-suave); }
.an-recuperar-valor { font-weight: 600; word-break: break-word; }
.an-recuperar-aviso { margin-top: .4rem; }

/* Campo de color (tipos de día, incidencias): como el resto de campos de la ficha */
.an-campo-color { display: flex; flex-direction: column; gap: .2rem; padding-top: var(--lumo-space-m); }
.an-campo-color-titulo { font-size: var(--lumo-font-size-s); font-weight: 500; color: var(--lumo-secondary-text-color); padding-left: .2rem; }
.an-campo-color-fila { display: flex; align-items: center; gap: .75rem; min-height: var(--lumo-size-m); }
.an-campo-color-ayuda { font-size: var(--lumo-font-size-xs); color: var(--lumo-secondary-text-color); padding-left: .2rem; line-height: 1.3; }

/* ============================================================ Ficha de Calendarios: los 12 meses a la vista */
.an-ficha-calendario { --an-cal-sin-color: #d9e1e6; }
html[theme~="dark"] .an-ficha-calendario { --an-cal-sin-color: var(--an-tono-3a4a52); }
.an-cal-ficha { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
/* El panel izquierdo mide lo mismo que los meses (no los estira): la lista de tipos de día se desplaza por dentro */
.an-cal-lateral { contain: size; display: flex; flex-direction: column; min-height: 0; overflow: auto; padding-right: 2px; }
.an-cal-lateral > .an-cal-seccion-tipos { flex: 1 1 auto; min-height: 9rem; display: flex; flex-direction: column; }
.an-cal-seccion-tipos > div:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.an-cal-seccion-tipos .an-cal-paleta { flex: 1; min-height: 0; max-height: none; }
.an-cal-lateral .an-ficha-seccion { margin-bottom: 0.6rem; }
.an-cal-lateral .an-ayuda { display: block; font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); margin: 0.15rem 0 0.4rem; }

/* Paleta = leyenda: un tipo de día por fila */
.an-cal-paleta { display: flex; flex-direction: column; gap: 0.3rem; overflow: auto; padding: 4px; }
.an-cal-chip {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.5rem; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s;
}
.an-cal-chip:hover { background: var(--an-hover); }
.an-cal-chip.an-activo {
    border-color: var(--an-turquesa); background: color-mix(in srgb, var(--an-turquesa) 9%, var(--an-superficie));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-turquesa) 18%, transparent);
}
.an-cal-muestra {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 1.7rem;
    padding: 0 0.3rem; border-radius: 8px; font-size: var(--lumo-font-size-xxs); font-weight: 700;
    background: var(--an-cal-fondo); color: var(--an-cal-texto);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px color-mix(in srgb, var(--an-cal-fondo) 45%, transparent);
}
.an-cal-muestra-goma { background: var(--an-superficie-3); color: var(--an-texto-suave); box-shadow: none; border: 1px dashed var(--an-borde); }
.an-cal-muestra-goma vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-cal-chip > div { display: flex; flex-direction: column; min-width: 0; }
.an-cal-chip-nombre { font-size: var(--lumo-font-size-s); font-weight: 600; color: var(--an-texto); line-height: 1.2; }
.an-cal-chip-info { font-size: var(--lumo-font-size-xxs); color: var(--an-texto-suave); }
.an-cal-cabecera-tipos { display: flex; flex-direction: column; align-items: stretch; gap: 0.1rem; margin-bottom: 0.3rem; }
.an-cal-buscar { padding-top: 0; }
.an-cal-nuevo-tipo { align-self: flex-start; margin: 0; }

/* Código: los 6 caracteres enteros */
.an-cal-datos { display: flex; flex-direction: column; }
.an-cal-codigo { width: 10rem; max-width: 100%; }

/* Resumen del año, a la derecha de la barra: horas teóricas en grande */
/* En columna (título, horas, días) para que la barra quepa en una línea con las tres herramientas */
.an-cal-resumen {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; white-space: nowrap;
    margin-left: auto; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .14);
}
.an-cal-horas-titulo { font-size: 0.6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.an-cal-resumen-dias { font-size: 0.7rem; color: rgba(255, 255, 255, .78); }
.an-cal-horas {
    font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffffff 25%, var(--an-turquesa-claro)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Herramientas, en la barra del año */
.an-cal-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.an-cal-herramienta { color: rgba(255, 255, 255, .92); margin: 0; border-radius: 8px; }
.an-cal-herramienta:hover { background: rgba(255, 255, 255, .12); }
.an-cal-herramienta[disabled] { color: rgba(255, 255, 255, .38); }
/* Herramientas (Aplicar a un período, Copiar, Deshacer): botones oscuros con borde turquesa luminoso y brillo,
   para que resalten sobre la barra sin ser chillones */
.an-cal-acciones { gap: 0.5rem; flex-wrap: nowrap; }
.an-cal-herramienta.an-cal-destacada {
    color: #fff; font-weight: 600; padding: 0 0.8rem; height: 2.1rem; border-radius: 999px; white-space: nowrap;
    --vaadin-button-background: var(--an-tono-0b3a3c); --vaadin-button-text-color: #fff;
    background: linear-gradient(135deg, var(--an-tono-0f5a57) 0%, var(--an-tono-0b4446) 55%, var(--an-tono-082f33) 100%) !important;
    border: 1px solid var(--an-turquesa-claro);
    box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .25), 0 0 14px rgba(var(--an-tono-2bb3a3-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: transform .12s, box-shadow .15s;
}
.an-cal-herramienta.an-cal-destacada:hover {
    background: linear-gradient(135deg, var(--an-tono-147370) 0%, var(--an-tono-0e5658) 55%, var(--an-tono-0a3c40) 100%) !important;
    box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .6), 0 0 20px rgba(var(--an-tono-2bb3a3-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}
.an-cal-herramienta.an-cal-destacada vaadin-icon { color: var(--an-turquesa-claro); }
.an-cal-herramienta.an-cal-destacada[disabled] {
    color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08) !important; box-shadow: none; border-color: rgba(255, 255, 255, .14);
}

/* Barra del año */
.an-cal-barra {
    display: flex; align-items: center; gap: 0.8rem; flex-wrap: nowrap; white-space: nowrap; margin-bottom: 0.7rem; padding: 0.35rem 0.8rem;
    border-radius: 14px; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(120% 180% at 100% 0%, rgba(var(--an-tono-2bb3a3-rgb), .45), transparent 55%),
                linear-gradient(120deg, var(--an-petroleo) 0%, var(--an-petroleo-2) 100%);
    box-shadow: 0 8px 24px rgba(var(--an-tono-0f2e35-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.an-cal-barra::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--an-turquesa-claro), transparent); opacity: .7;
}
.an-cal-navegacion { display: flex; align-items: center; gap: 0.25rem; }
.an-cal-navegacion vaadin-button { color: #fff; }
.an-cal-flecha { border-radius: 50%; background: rgba(255, 255, 255, .08); }
.an-cal-flecha:hover { background: rgba(255, 255, 255, .18); }
.an-cal-anio-numero {
    font-size: 2.75rem; font-weight: 800; letter-spacing: 0.04em; min-width: 7.2rem; text-align: center; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffffff 30%, var(--an-turquesa-claro)); -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 18px rgba(var(--an-tono-7ff0dd-rgb), .25);
}

/* Los 12 meses */
.an-cal-anio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; user-select: none; touch-action: none; }
.an-cal-anio[solo-lectura] { touch-action: auto; }
.an-cal-mes {
    border: 1px solid var(--an-borde); border-radius: 14px; padding: 0.4rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, var(--an-superficie) 0%, var(--an-superficie-2) 100%);
    box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), .04); transition: box-shadow .2s, border-color .2s;
}
.an-cal-mes:hover { border-color: color-mix(in srgb, var(--an-turquesa) 45%, var(--an-borde)); box-shadow: 0 6px 20px rgba(var(--an-tono-0f2e35-rgb), .10); }
.an-cal-mes-actual { border-color: color-mix(in srgb, var(--an-turquesa) 60%, var(--an-borde)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-turquesa) 14%, transparent); }
.an-cal-mes-titulo {
    font-size: var(--lumo-font-size-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--an-petroleo); padding: 0 0.15rem 0.25rem; display: flex; align-items: center; gap: 0.4rem;
}
.an-cal-mes-titulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--an-turquesa); box-shadow: 0 0 8px var(--an-turquesa); }
html[theme~="dark"] .an-cal-mes-titulo { color: var(--an-turquesa-claro); }
/* Cada mes, como mucho, cuadrado: la altura de las filas sale del ancho del mes (100cqw), sin pasar de lo que
   cabe en la pantalla (en 900 px de alto caben justos los 12 meses) */
.an-cal-mes { container-type: inline-size; }
.an-cal-rejilla {
    display: grid; grid-template-columns: 1.35rem repeat(7, minmax(0, 1fr)); gap: 2px;
    grid-auto-rows: min(clamp(1.3rem, calc((100vh - 480px) / 19.5), 2.3rem), calc((100cqw - 1.3rem - 12px) / 7));
}
.an-cal-cab-semana, .an-cal-semana { font-size: 0.6rem; color: var(--an-texto-suave); opacity: .7; display: flex; align-items: center; justify-content: center; }
.an-cal-oculto { visibility: hidden; }
.an-cal-cab-dia {
    font-size: 0.66rem; font-weight: 700; color: var(--an-texto-suave); display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer;
}
.an-cal-cab-dia:hover { background: color-mix(in srgb, var(--an-turquesa) 16%, transparent); color: var(--an-petroleo); }
.an-cal-anio[solo-lectura] .an-cal-cab-dia { cursor: default; background: none; }
.an-cal-dia {
    display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: crosshair;
    font-size: 0.72rem; font-weight: 500; color: var(--an-texto); font-variant-numeric: tabular-nums;
    transition: transform .08s, box-shadow .12s, background-color .15s;
}
.an-cal-dia.an-cal-finde { color: var(--an-texto-suave); }
.an-cal-dia:hover { box-shadow: 0 0 0 1.5px var(--an-turquesa); transform: scale(1.08); position: relative; z-index: 1; }
.an-cal-anio[solo-lectura] .an-cal-dia { cursor: default; }
.an-cal-anio[solo-lectura] .an-cal-dia:hover { transform: none; }
.an-cal-dia.an-cal-con-tipo {
    background: var(--an-cal-fondo); color: var(--an-cal-texto); font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 1px 3px color-mix(in srgb, var(--an-cal-fondo) 50%, transparent);
}
/* Permiso de media jornada: el día pintado a medias (arriba = mañana, abajo = tarde) con «½» en la esquina */
.an-cal-dia.an-cal-con-tipo.an-cal-media-manana,
.an-cal-dia.an-cal-con-tipo.an-cal-media-tarde { position: relative; color: var(--an-texto); text-shadow: 0 0 3px var(--an-superficie), 0 0 2px var(--an-superficie); }
.an-cal-dia.an-cal-con-tipo.an-cal-media-manana {
    background: linear-gradient(180deg, var(--an-cal-fondo) 0 50%, color-mix(in srgb, var(--an-cal-fondo) 14%, var(--an-superficie)) 50% 100%);
}
.an-cal-dia.an-cal-con-tipo.an-cal-media-tarde {
    background: linear-gradient(180deg, color-mix(in srgb, var(--an-cal-fondo) 14%, var(--an-superficie)) 0 50%, var(--an-cal-fondo) 50% 100%);
}
.an-cal-dia.an-cal-media-manana::after, .an-cal-dia.an-cal-media-tarde::after {
    content: "½"; position: absolute; top: 0; right: 2px; font-size: 0.55rem; font-weight: 800; line-height: 1; color: var(--an-texto); opacity: 0.8;
}
.an-cal-dia.an-cal-hoy { outline: 2px solid var(--an-turquesa); outline-offset: 1px; }
.an-cal-dia.an-cal-tramo {
    box-shadow: 0 0 0 2px var(--an-turquesa), 0 0 10px color-mix(in srgb, var(--an-turquesa) 70%, transparent);
    background-image: linear-gradient(color-mix(in srgb, var(--an-turquesa) 28%, transparent), color-mix(in srgb, var(--an-turquesa) 28%, transparent));
}
.an-cal-dias-semana::part(group-field) { display: grid; grid-template-columns: repeat(4, auto); gap: 0 0.6rem; }

@media (max-width: 1350px) { .an-cal-anio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Solo en ventanas estrechas la barra del año puede pasar a dos filas (si no, no cabría) */
@media (max-width: 1280px) { .an-cal-barra, .an-cal-acciones { flex-wrap: wrap; } }
@media (max-width: 1000px) {
    .an-cal-ficha { grid-template-columns: minmax(0, 1fr); }
    .an-cal-lateral { contain: none; overflow: visible; }
    .an-cal-seccion-tipos .an-cal-paleta { max-height: 15rem; }
}
@media (max-width: 720px) { .an-cal-anio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .an-cal-anio { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ «Cómo funcionan los horarios» (esquema visual) */
/* Zona izquierda del pie (Borrar + «Cómo funciona»): ocupa el hueco libre y el botón se centra en él */
.an-pie-izquierda { display: flex; align-items: center; gap: 0.25rem; flex: 1 1 auto; min-width: 0; }
/* «Cómo funcionan los horarios»: centrado en el pie de la ficha (petición del usuario), con Borrar a la izquierda y
   el resto de botones a la derecha */
.an-esq-boton { color: var(--an-turquesa); font-weight: 600; }
.an-pie-izquierda .an-esq-boton { margin-inline: auto; white-space: nowrap; }
.an-esq-intro { display: block; color: var(--an-texto-suave); margin: -0.25rem 0 0.9rem; font-size: var(--lumo-font-size-s); }

/* Lienzo oscuro con rejilla tenue */
.an-esq-lienzo {
    --an-esq-neon: var(--an-tono-7ff0dd);
    display: grid; grid-template-columns: minmax(180px, 1fr) minmax(90px, 0.7fr) minmax(180px, 1fr) minmax(90px, 0.7fr) minmax(180px, 1fr);
    grid-template-rows: auto 5.5rem auto; gap: 0; align-items: stretch;
    padding: 1.4rem; border-radius: 20px; position: relative; overflow: hidden; color: var(--an-tono-e8fffb);
    background:
        radial-gradient(60% 80% at 15% 0%, rgba(var(--an-tono-2bb3a3-rgb), .28), transparent 60%),
        radial-gradient(50% 70% at 100% 100%, rgba(var(--an-tono-2bb3a3-rgb), .22), transparent 60%),
        linear-gradient(rgba(var(--an-tono-7ff0dd-rgb), .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--an-tono-7ff0dd-rgb), .055) 1px, transparent 1px),
        linear-gradient(150deg, var(--an-tono-0b2a30) 0%, var(--an-tono-0f3a41) 55%, var(--an-tono-0a2328) 100%);
    background-size: auto, auto, 26px 26px, 26px 26px, auto;
    box-shadow: 0 18px 40px rgba(var(--an-tono-061c21-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Nodos */
.an-esq-nodo {
    position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.8rem 0.9rem 0.9rem;
    border-radius: 16px; border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .22);
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px); animation: an-esq-entrar .5s ease both;
}
.an-esq-nodo.an-esq-actual {
    border-color: var(--an-esq-neon);
    box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .45), 0 0 26px rgba(var(--an-tono-2bb3a3-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .12);
    animation: an-esq-entrar .5s ease both, an-esq-latido 2.4s ease-in-out infinite;
}
.an-esq-aqui {
    position: absolute; top: -0.65rem; right: 0.8rem; padding: 0.1rem 0.55rem; border-radius: 999px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--an-tono-06282d);
    background: linear-gradient(90deg, var(--an-esq-neon), var(--an-tono-2bb3a3)); box-shadow: 0 0 12px rgba(var(--an-tono-7ff0dd-rgb), .6);
}
.an-esq-cabecera { display: flex; align-items: center; gap: 0.6rem; }
.an-esq-icono {
    flex: none; width: 2.3rem; height: 2.3rem; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--an-tono-34c9b7), var(--an-tono-1d8c80)); box-shadow: 0 0 16px rgba(var(--an-tono-2bb3a3-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.an-esq-icono vaadin-icon { color: #fff; width: 1.15rem; height: 1.15rem; }
.an-esq-cabecera > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.an-esq-titulo { font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: .01em; }
.an-esq-donde { font-size: 0.66rem; color: rgba(var(--an-tono-7ff0dd-rgb), .85); letter-spacing: .03em; }
.an-esq-texto { font-size: 0.78rem; line-height: 1.35; color: rgba(var(--an-tono-e8fffb-rgb), .78); }

/* Mini dibujos */
.an-esq-laborable { --c: var(--an-tono-2bb3a3); }
.an-esq-festivo { --c: #ff5a5f; }
.an-esq-vacaciones { --c: #f5b041; }
.an-esq-libre { --c: rgba(255, 255, 255, .10); }
.an-esq-mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.an-esq-mini-cal > span { height: 0.62rem; border-radius: 3px; background: var(--c); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); }
.an-esq-mini-tipos { display: flex; flex-direction: column; gap: 0.3rem; }
.an-esq-tipo { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; }
.an-esq-punto { width: 0.75rem; height: 0.75rem; border-radius: 4px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.an-esq-mini-turnos { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.an-esq-chip {
    display: inline-flex; align-items: center; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
    color: var(--an-tono-e8fffb); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .45); background: rgba(var(--an-tono-2bb3a3-rgb), .18);
}
.an-esq-mini-horario { display: flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.an-esq-barra {
    flex: 1; height: 0.55rem; border-radius: 999px; background: linear-gradient(90deg, var(--an-tono-2bb3a3), var(--an-esq-neon));
    box-shadow: 0 0 10px rgba(var(--an-tono-7ff0dd-rgb), .55); position: relative; overflow: hidden;
}
.an-esq-barra::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: an-esq-brillo 2.2s linear infinite;
}
.an-esq-mini-empleados { display: flex; }
.an-esq-avatar {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 800; color: var(--an-tono-06282d); background: linear-gradient(135deg, var(--an-esq-neon), var(--an-tono-2bb3a3));
    border: 2px solid var(--an-tono-0f3a41); margin-left: -0.4rem;
}
.an-esq-avatar:first-child { margin-left: 0; }

/* Conectores con flujo animado */
.an-esq-con { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2rem; }
.an-esq-linea { position: absolute; border-radius: 2px; }
.an-esq-izq .an-esq-linea, .an-esq-der .an-esq-linea {
    left: 6px; right: 6px; top: 50%; height: 3px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, var(--an-esq-neon) 0 12px, transparent 12px 20px);
    filter: drop-shadow(0 0 4px rgba(var(--an-tono-7ff0dd-rgb), .8)); animation: an-esq-flujo-h .9s linear infinite;
}
.an-esq-izq .an-esq-linea { animation-direction: reverse; }
.an-esq-arr .an-esq-linea, .an-esq-aba .an-esq-linea {
    top: 4px; bottom: 4px; left: 50%; width: 3px; transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, var(--an-esq-neon) 0 12px, transparent 12px 20px);
    filter: drop-shadow(0 0 4px rgba(var(--an-tono-7ff0dd-rgb), .8)); animation: an-esq-flujo-v .9s linear infinite;
}
.an-esq-arr .an-esq-linea { animation-direction: reverse; }
.an-esq-con::after { content: ""; position: absolute; width: 0; height: 0; filter: drop-shadow(0 0 4px rgba(var(--an-tono-7ff0dd-rgb), .9)); }
.an-esq-der::after { right: 0; top: 50%; transform: translateY(-50%); border-left: 11px solid var(--an-esq-neon); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.an-esq-izq::after { left: 0; top: 50%; transform: translateY(-50%); border-right: 11px solid var(--an-esq-neon); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.an-esq-arr::after { top: 0; left: 50%; transform: translateX(-50%); border-bottom: 11px solid var(--an-esq-neon); border-left: 7px solid transparent; border-right: 7px solid transparent; }
.an-esq-aba::after { bottom: 0; left: 50%; transform: translateX(-50%); border-top: 11px solid var(--an-esq-neon); border-left: 7px solid transparent; border-right: 7px solid transparent; }
.an-esq-etiqueta {
    position: relative; z-index: 1; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    color: var(--an-tono-e8fffb); text-align: center; max-width: 12rem; line-height: 1.25;
    background: var(--an-tono-0d3238); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .4); box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}
.an-esq-arr .an-esq-etiqueta, .an-esq-aba .an-esq-etiqueta { margin: 0 0.4rem; }
.an-esq-formula {
    align-self: center; justify-self: center; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem;
    border-radius: 14px; font-weight: 800; color: var(--an-esq-neon);
    background: rgba(var(--an-tono-061e23-rgb), .65); border: 1px dashed rgba(var(--an-tono-7ff0dd-rgb), .45);
    box-shadow: 0 0 22px rgba(var(--an-tono-2bb3a3-rgb), .25);
}
.an-esq-formula .an-esq-chip { font-size: 0.8rem; }

/* Pasos */
.an-esq-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.an-esq-paso {
    display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.8rem; border-radius: 14px;
    border: 1px solid var(--an-borde); background: linear-gradient(180deg, var(--an-superficie), var(--an-superficie-2));
}
.an-esq-paso.an-esq-actual { border-color: var(--an-turquesa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-turquesa) 18%, transparent); }
.an-esq-num {
    flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--an-tono-34c9b7), var(--an-tono-1d8c80)); box-shadow: 0 0 10px rgba(var(--an-tono-2bb3a3-rgb), .45);
}
.an-esq-paso > div { display: flex; flex-direction: column; gap: 0.15rem; }
.an-esq-paso-titulo { font-weight: 700; color: var(--an-texto); font-size: var(--lumo-font-size-s); }
.an-esq-paso-texto { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); line-height: 1.4; }

/* Ejemplo */
.an-esq-ejemplo { margin-top: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--an-turquesa) 55%, var(--an-borde)); }
.an-esq-ejemplo-titulo { display: block; font-size: var(--lumo-font-size-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--an-turquesa); margin-bottom: 0.5rem; }
.an-esq-cadena { display: flex; align-items: stretch; gap: 0.4rem; flex-wrap: wrap; }
.an-esq-eslabon {
    flex: 1 1 10rem; display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.65rem; border-radius: 12px;
    background: color-mix(in srgb, var(--an-turquesa) 8%, var(--an-superficie));
}
.an-esq-eslabon vaadin-icon { flex: none; color: var(--an-turquesa); width: 1.2rem; height: 1.2rem; }
.an-esq-eslabon > div { display: flex; flex-direction: column; }
.an-esq-eslabon-titulo { font-weight: 700; font-size: var(--lumo-font-size-s); color: var(--an-texto); }
.an-esq-eslabon-texto { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }
.an-esq-flecha { align-self: center; color: var(--an-turquesa); font-weight: 800; font-size: 1.2rem; }

@keyframes an-esq-flujo-h { from { background-position: 0 0; } to { background-position: 20px 0; } }
@keyframes an-esq-flujo-v { from { background-position: 0 0; } to { background-position: 0 20px; } }
@keyframes an-esq-brillo { from { left: -30%; } to { left: 110%; } }
@keyframes an-esq-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes an-esq-latido {
    0%, 100% { box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .45), 0 0 18px rgba(var(--an-tono-2bb3a3-rgb), .45); }
    50% { box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .7), 0 0 32px rgba(var(--an-tono-2bb3a3-rgb), .75); }
}

/* Pantallas estrechas: nodos en columna, sin conectores */
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
    .an-esq-lienzo { display: flex; flex-direction: column; gap: 0.8rem; }
    .an-esq-con { display: none; }
    .an-esq-pasos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .an-esq-flecha { display: none; }
}
@media (max-width: 560px) { .an-esq-pasos { grid-template-columns: minmax(0, 1fr); } }

/* Copiar al año siguiente: tipos que se copian en la misma fecha y aviso de sustitución */
.an-cal-misma-fecha { display: block; margin-top: 0.2rem; padding-top: 0; }
vaadin-dialog.an-ficha .an-ayuda:has(+ .an-cal-misma-fecha) { display: block; margin-bottom: 0; min-height: 0; }
.an-cal-misma-fecha::part(group-field) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.8rem; }
.an-cal-aviso-copia { display: block; margin-top: 0.8rem; padding: 0.5rem 0.75rem; border-radius: 10px; font-size: var(--lumo-font-size-s); color: #8a5a00; background: rgba(245, 176, 65, .16); border: 1px solid rgba(245, 176, 65, .45); }
html[theme~="dark"] .an-cal-aviso-copia { color: #ffd38a; }

/* ============================================================ Ficha de Tarjetas: vista previa de la tarjeta */
/* Columnas de una ficha que terminan a la misma altura: el último bloque de cada columna se estira */
.an-columnas-iguales { align-items: stretch; }
.an-columnas-iguales > div { display: flex; flex-direction: column; }
.an-columnas-iguales > div > .an-ficha-seccion:last-child { flex: 1 1 auto; }

.an-tarjeta-vista {
    --an-tarjeta-color: var(--an-tono-17464f);
    /* Tarjeta grande (aprovecha el hueco del bloque de accesos); lo de dentro crece con ella (unidades cqw) */
    container-type: inline-size;
    position: relative; overflow: hidden; aspect-ratio: 1.586; width: 100%; max-width: 500px; margin: 0 auto 0.9rem;
    border-radius: 20px; padding: 1.35rem 1.6rem; display: flex; flex-direction: column; justify-content: space-between;
    box-sizing: border-box;
    color: #fff; font-weight: 600;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .28), transparent 55%),
        linear-gradient(135deg, var(--an-tarjeta-color) 0%, color-mix(in srgb, var(--an-tarjeta-color) 55%, var(--an-tono-04161a)) 100%);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--an-tarjeta-color) 35%, rgba(0, 0, 0, .25)),
                inset 0 1px 0 rgba(255, 255, 255, .25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: filter .25s, background .25s;
}
.an-tarjeta-vista::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px);
    pointer-events: none;
}
.an-tarjeta-vista[inactiva] { filter: grayscale(.85) brightness(.85); }
.an-tarjeta-arriba { display: flex; align-items: center; gap: 2.2cqw; position: relative; z-index: 1; }
.an-tarjeta-chip {
    width: 13cqw; height: 10cqw; border-radius: 2cqw;
    background: linear-gradient(135deg, #f8e7a1 0%, #d4af37 45%, #b08d2a 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.an-tarjeta-estado, .an-tarjeta-libre {
    font-size: max(0.66rem, 3cqw); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 0.7cqw 2.4cqw;
    border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
}
.an-tarjeta-estado { margin-left: auto; }
.an-tarjeta-libre { background: rgba(var(--an-tono-7ff0dd-rgb), .25); border-color: rgba(var(--an-tono-7ff0dd-rgb), .7); }
.an-tarjeta-numero {
    position: relative; z-index: 1; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: max(1.2rem, 7cqw);
    letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-tarjeta-abajo { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; position: relative; z-index: 1; }
.an-tarjeta-nombre { font-size: max(0.85rem, 4.3cqw); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tarjeta-tecnologia { font-size: max(0.7rem, 3.2cqw); opacity: .85; white-space: nowrap; }

/* Lápiz para modificar un tipo de día desde la paleta del calendario (se ve al pasar el ratón; en táctil, siempre) */
.an-cal-chip { position: relative; }
.an-cal-chip-editar { margin-left: auto; flex: none; color: var(--an-texto-suave); opacity: 0; transition: opacity .15s; }
.an-cal-chip:hover .an-cal-chip-editar, .an-cal-chip-editar:focus-visible { opacity: 1; }
.an-cal-chip-editar:hover { color: var(--an-turquesa); }
@media (hover: none) { .an-cal-chip-editar { opacity: 1; } }

/* ============================================================ «Cómo se da el acceso» (esquema de prioridades) */
.an-esq-lienzo-accesos { grid-template-rows: auto 4.5rem auto; }
.an-esq-prioridad {
    align-self: flex-start; font-size: 0.62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--an-tono-06282d); background: linear-gradient(90deg, var(--an-esq-neon), var(--an-tono-2bb3a3)); padding: 0.1rem 0.55rem;
    border-radius: 999px; box-shadow: 0 0 10px rgba(var(--an-tono-7ff0dd-rgb), .45);
}
.an-esq-asignaciones { display: flex; flex-direction: column; gap: 0.35rem; }
.an-esq-asig {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 10px;
    border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .3); background: rgba(var(--an-tono-2bb3a3-rgb), .12);
}
.an-esq-asig vaadin-icon { color: var(--an-esq-neon); width: 1rem; height: 1rem; flex: none; }
.an-esq-asig > div { display: flex; flex-direction: column; }
.an-esq-asig-titulo { font-size: 0.78rem; font-weight: 700; color: #fff; }
.an-esq-asig-cuando { font-size: 0.66rem; color: rgba(var(--an-tono-e8fffb-rgb), .7); }
.an-esq-asig-actual { border-color: var(--an-esq-neon); box-shadow: 0 0 12px rgba(var(--an-tono-2bb3a3-rgb), .55); }
.an-esq-mini-acceso { display: flex; flex-direction: column; gap: 0.35rem; }
.an-esq-mini-acceso .an-esq-mini-cal > span { height: 0.55rem; }
.an-esq-mini-texto { font-size: 0.7rem; color: rgba(var(--an-tono-7ff0dd-rgb), .85); }
.an-esq-resultado { align-items: center; text-align: center; gap: 0.6rem; }
.an-esq-formula-acceso { flex-wrap: wrap; justify-content: center; }
.an-esq-pasos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-esq-pasos-3 .an-esq-num vaadin-icon { width: 0.95rem; height: 0.95rem; color: #fff; }
@media (max-width: 900px) { .an-esq-pasos-3 { grid-template-columns: minmax(0, 1fr); } }

/* «Cómo se da el acceso»: decisión de cada nivel (✓ se usa este / ✗ siguiente) */
.an-esq-lienzo-accesos .an-esq-nodo:not(.an-esq-resultado) > div:not(.an-esq-cabecera) { display: flex; flex-direction: column; gap: 0.55rem; }
.an-esq-decisiones { display: flex; flex-direction: column; gap: 0.3rem; margin-top: auto; }
.an-esq-decision {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem; border-radius: 9px; font-size: 0.72rem;
    line-height: 1.25;
}
.an-esq-decision vaadin-icon { width: 0.95rem; height: 0.95rem; flex: none; }
.an-esq-decision > span:last-child { margin-left: auto; font-weight: 800; white-space: nowrap; }
.an-esq-decision-si { color: var(--an-tono-d6fff6); background: rgba(var(--an-tono-2bb3a3-rgb), .22); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .5); }
.an-esq-decision-si vaadin-icon { color: var(--an-esq-neon); }
.an-esq-decision-no { color: rgba(var(--an-tono-e8fffb-rgb), .75); background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .22); }
.an-esq-decision-no vaadin-icon { color: rgba(255, 140, 140, .9); }
.an-esq-lienzo-accesos .an-esq-prioridad { font-size: 0.68rem; padding: 0.15rem 0.7rem; box-shadow: 0 0 14px rgba(var(--an-tono-7ff0dd-rgb), .6); }
.an-esq-lienzo-accesos .an-esq-nodo { animation: an-esq-entrar .5s ease both; }
.an-esq-lienzo-accesos > :nth-child(3) { animation-delay: .12s; }
.an-esq-lienzo-accesos > :nth-child(5) { animation-delay: .24s; }

/* ============================================================ Ficha de Puntos de acceso: vista previa de la puerta */
.an-pa-vista {
    --an-pa-color: var(--an-tono-2bb3a3);
    position: relative; overflow: hidden; border-radius: 18px; padding: 1.1rem 1.2rem; margin-bottom: 0.75rem;
    color: #fff; display: flex; flex-direction: column; gap: 0.8rem;
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--an-pa-color) 55%, transparent), transparent 60%),
        linear-gradient(135deg, var(--an-tono-0f3a41) 0%, var(--an-tono-0a2328) 100%);
    box-shadow: 0 14px 30px rgba(var(--an-tono-061c21-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: filter .25s;
}
.an-pa-vista::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(var(--an-tono-7ff0dd-rgb), .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--an-tono-7ff0dd-rgb), .05) 1px, transparent 1px);
    background-size: 22px 22px;
}
.an-pa-vista[inactivo] { filter: grayscale(.85) brightness(.85); }
.an-pa-arriba { display: flex; align-items: center; gap: 0.85rem; position: relative; z-index: 1; }
.an-pa-puerta {
    flex: none; width: 3.4rem; height: 3.4rem; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--an-pa-color) 85%, #fff), var(--an-pa-color));
    box-shadow: 0 0 22px color-mix(in srgb, var(--an-pa-color) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.an-pa-puerta vaadin-icon { width: 1.7rem; height: 1.7rem; color: #fff; }
.an-pa-textos { display: flex; flex-direction: column; min-width: 0; }
.an-pa-nombre { font-size: 1.2rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-pa-sub { font-size: 0.78rem; color: rgba(var(--an-tono-e8fffb-rgb), .75); }
.an-pa-estado {
    margin-left: auto; font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .35);
}
.an-pa-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; position: relative; z-index: 1; }
.an-pa-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.76rem;
    font-weight: 700; background: rgba(var(--an-tono-2bb3a3-rgb), .2); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .45);
}
.an-pa-chip vaadin-icon { width: 0.9rem; height: 0.9rem; color: var(--an-tono-7ff0dd); }
.an-pa-aviso {
    display: block; padding: 0.45rem 0.7rem; border-radius: 10px; font-size: var(--lumo-font-size-s); color: #8a5a00;
    background: rgba(245, 176, 65, .16); border: 1px solid rgba(245, 176, 65, .45);
}
html[theme~="dark"] .an-pa-aviso { color: #ffd38a; }

/* ============================================================ Fichas de terminales (NKT2, NKT3, OCR) y controladoras CloudB Plus */
.an-term-ip { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; }
.an-term-ip > vaadin-text-field { flex: 1; min-width: 0; }
.an-term-ip > vaadin-button { margin-top: calc(var(--lumo-font-size-s) * 1.6 + 0.3rem); flex: none; }
.an-term-casillas { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.25rem 0.1rem; }
.an-term-subtitulo {
    display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--an-texto-suave); padding-top: 0.35rem; border-top: 1px dashed var(--lumo-contrast-20pct);
}
.an-term-subtitulo:first-child { border-top: 0; padding-top: 0; }
.an-pa-chip[estado="bien"] { background: rgba(46, 204, 113, .22); border-color: rgba(120, 240, 170, .6); }
.an-pa-chip[estado="bien"] vaadin-icon { color: #7dffb0; }
.an-pa-chip[estado="mal"] { background: rgba(231, 76, 60, .25); border-color: rgba(255, 140, 120, .6); }
.an-pa-chip[estado="mal"] vaadin-icon { color: #ffb0a0; }
.an-term-aviso ul { margin: 0 0 0.6rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.an-term-aviso p { margin: 0; font-weight: 700; }
/* Nota informativa dentro de una sección de ficha (como el texto de ayuda de los campos) */
.an-ficha-seccion .an-ayuda { display: block; font-size: var(--lumo-font-size-xs); line-height: 1.35; color: var(--an-texto-suave); margin-top: 0.35rem; }

/* Campos ÚNICOS al dar de alta (Campos.unico): punto verde junto al título */
.an-campo-unico {
    --lumo-required-field-indicator-color: #1a9a2a;
    --vaadin-input-field-required-indicator-color: #1a9a2a;
}
.an-campo-unico::part(required-indicator) { color: #1a9a2a; }
html[theme~="dark"] .an-campo-unico {
    --lumo-required-field-indicator-color: #4cd964;
    --vaadin-input-field-required-indicator-color: #4cd964;
}
html[theme~="dark"] .an-campo-unico::part(required-indicator) { color: #4cd964; }
/* Barra de favoritos: el corazón quita el favorito */
.an-favorito-enlace .an-favorito-quitar { cursor: pointer; border-radius: 50%; transition: transform .15s, filter .15s; }
.an-favorito-enlace .an-favorito-quitar:hover { transform: scale(1.6); filter: brightness(0.85) drop-shadow(0 0 4px rgba(245, 167, 0, .6)); }

/* Ficha de vehículos: foto */
.an-veh-foto { display: flex; flex-direction: column; gap: 0.6rem; }
.an-veh-foto-marco {
    position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, var(--an-tono-0f3a41) 0%, var(--an-tono-0a2328) 100%); box-shadow: 0 10px 24px rgba(var(--an-tono-061c21-rgb), .22);
    display: flex; align-items: center; justify-content: center;
}
.an-veh-foto-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-veh-foto-vacia { flex-direction: column; gap: 0.4rem; color: rgba(var(--an-tono-e8fffb-rgb), .7); }
.an-veh-foto-vacia vaadin-icon { width: 3.2rem; height: 3.2rem; color: var(--an-tono-7ff0dd); opacity: .8; }
.an-veh-foto-vacia span { font-size: var(--lumo-font-size-s); font-weight: 600; letter-spacing: .04em; }
.an-veh-foto-acciones { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; }
.an-veh-subir { flex: 1; min-width: 14rem; padding: 0.4rem 0.6rem; }.an-veh-subir [slot="drop-label"], .an-veh-subir span { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }
.an-veh-subir vaadin-upload-file-list, .an-veh-subir::part(file-list) { display: none; }
/* Listados: columna de fichero (documento del informe, fotos...) */
.an-fichero-celda { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 8px;
    background: color-mix(in srgb, var(--an-turquesa, var(--an-tono-2bb3a3)) 16%, transparent); color: var(--an-petroleo, var(--an-tono-12343b)); }
.an-fichero-celda vaadin-icon { width: 1rem; height: 1rem; }
html[theme~="dark"] .an-fichero-celda { color: var(--an-tono-7ff0dd); }

/* Paleta de colores básicos (PaletaColores), junto a los selectores de color */
.an-paleta { display: grid; grid-template-columns: repeat(12, 1.15rem); gap: 0.25rem; align-content: center; }
.an-paleta-color {
    width: 1.15rem; height: 1.15rem; border-radius: 6px; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: transform .12s, box-shadow .12s;
}
.an-paleta-color:hover { transform: scale(1.25); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .25); z-index: 1; }
.an-paleta-sel { box-shadow: 0 0 0 2px var(--lumo-base-color, #fff), 0 0 0 4px var(--an-turquesa, var(--an-tono-2bb3a3)); transform: scale(1.1); }
.an-paleta[solo-lectura] .an-paleta-color { cursor: default; opacity: .55; }
.an-paleta[solo-lectura] .an-paleta-color:hover { transform: none; }
.an-campo-color-fila { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; }
.an-colores-filas { display: flex; flex-direction: column; gap: 0.6rem; }
.an-colores-filas .an-fila-color { gap: 0.6rem; flex-wrap: wrap; }

/* Familias de puntos de acceso: puntos con su color (desplegable y elegidos) */
.an-fpa-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.an-fpa-color {
    flex: none; width: 0.9rem; height: 0.9rem; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.an-fpa-sin { background: repeating-linear-gradient(45deg, #fff 0 3px, var(--an-tono-d6dde0) 3px 6px); }
.an-fpa-puntos vaadin-multi-select-combo-box-chip, .an-fpa-puntos::part(chip), .an-fpa-puntos::part(overflow) { display: none; }
.an-fpa-elegidos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.25rem; }
.an-fpa-elegidos:empty { display: none; }
.an-fpa-chip {
    --an-fpa-tono: var(--an-tono-9fb3b8);
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.3rem 0.2rem 0.5rem; border-radius: 999px;
    font-size: var(--lumo-font-size-s); font-weight: 600; color: var(--lumo-body-text-color);
    background: color-mix(in srgb, var(--an-fpa-tono) 16%, var(--lumo-base-color, #fff));
    border: 1px solid color-mix(in srgb, var(--an-fpa-tono) 55%, transparent);
}
.an-fpa-chip .an-fpa-quitar { margin: 0; min-width: 0; width: 1.4rem; height: 1.4rem; color: var(--an-texto-suave); }

/* Selector de color (SelectorColor): botón con el color y desplegable futurista con la paleta y «Diseñar otro color…» */
.an-selector-color { display: inline-flex; }
.an-color-boton {
    display: inline-block; width: 2.6rem; height: 2.1rem; border-radius: 10px; cursor: pointer; position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), 0 2px 6px rgba(var(--an-tono-061c21-rgb), .15); transition: transform .12s, box-shadow .12s;
}
.an-color-boton::after {
    content: ""; position: absolute; right: -4px; bottom: -4px; width: 0.95rem; height: 0.95rem; border-radius: 50%;
    background: var(--an-petroleo, var(--an-tono-12343b)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237ff0dd' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
    box-shadow: 0 0 0 2px var(--lumo-base-color, #fff);
}
.an-color-boton:hover, .an-color-boton:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 3px color-mix(in srgb, var(--an-turquesa, var(--an-tono-2bb3a3)) 45%, transparent); outline: none; }
.an-color-boton[inactivo] { cursor: default; opacity: .6; }
.an-color-boton[inactivo]::after { display: none; }

vaadin-popover-overlay::part(overlay) { border-radius: 18px; }
.an-color-desplegable {
    display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.05rem 0.95rem; margin: -0.25rem; border-radius: 16px; color: var(--an-tono-e8fffb);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--an-tono-2bb3a3-rgb), .35), transparent 60%),
        linear-gradient(140deg, var(--an-tono-0f3a41) 0%, var(--an-tono-0a2328) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.an-color-desplegable-cabecera { display: flex; align-items: center; gap: 0.8rem; }
.an-color-desplegable-muestra {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 18px rgba(var(--an-tono-7ff0dd-rgb), .35);
}
.an-color-desplegable-titulo { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-color-desplegable-codigo { display: block; font-size: var(--lumo-font-size-s); font-weight: 600; font-variant-numeric: tabular-nums; opacity: .9; }
.an-color-desplegable .an-paleta { grid-template-columns: repeat(8, 1.6rem); gap: 0.4rem; }
.an-color-desplegable .an-paleta-color { width: 1.6rem; height: 1.6rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.an-color-desplegable .an-paleta-color:hover { transform: scale(1.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 12px rgba(var(--an-tono-7ff0dd-rgb), .55); }
.an-color-desplegable .an-paleta-sel { box-shadow: 0 0 0 2px var(--an-tono-0b2a30), 0 0 0 4px var(--an-tono-7ff0dd), 0 0 14px rgba(var(--an-tono-7ff0dd-rgb), .6); }
.an-color-desplegable-otro {
    display: flex; align-items: center; gap: 0.6rem; padding-top: 0.75rem; border-top: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .18);
    font-size: var(--lumo-font-size-s); font-weight: 600;
}
.an-color-desplegable-otro .an-color { width: 2rem; height: 2rem; border: 0; padding: 0; border-radius: 8px; background: none; cursor: pointer; }

/* Ficha de ingresos: tarjeta de saldos (antes y después de la recarga) */
.an-ing-saldos {
    display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 1.1rem; border-radius: 16px; color: var(--an-tono-e8fffb);
    background: radial-gradient(110% 90% at 100% 0%, rgba(var(--an-tono-2bb3a3-rgb), .35), transparent 60%), linear-gradient(140deg, var(--an-tono-0f3a41) 0%, var(--an-tono-0a2328) 100%);
    box-shadow: 0 12px 26px rgba(var(--an-tono-061c21-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.an-ing-cabecera { display: flex; flex-direction: column; padding-bottom: 0.6rem; margin-bottom: 0.2rem; border-bottom: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .18); }
.an-ing-saldo { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.an-ing-saldo-texto { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-ing-fila { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.6rem; font-variant-numeric: tabular-nums; }
.an-ing-concepto { font-weight: 600; opacity: .85; }
.an-ing-antes { opacity: .65; text-align: right; }
.an-ing-flecha vaadin-icon { width: 0.9rem; height: 0.9rem; color: var(--an-tono-7ff0dd); opacity: .8; }
.an-ing-ahora { font-weight: 800; text-align: right; min-width: 5.5rem; }
.an-ing-ahora[cambia="sube"] { color: #7dffb0; }
.an-ing-ahora[cambia="baja"] { color: #ffb0a0; }
.an-ing-saldos .an-ayuda { color: rgba(var(--an-tono-e8fffb-rgb), .7); }

.an-sufijo-euro { font-weight: 700; color: var(--an-texto-suave); padding-inline-end: 0.15rem; }

/* Ficha de empleados: pestañas, vista con la foto y filas de alta de pluses y costes */
.an-emp-pestanas vaadin-tab > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.an-emp-pestanas vaadin-tab vaadin-icon { width: 1.05rem; height: 1.05rem; }
.an-emp-vista { margin-bottom: 0.5rem; }
.an-emp-con-foto { padding: 0; overflow: hidden; }
.an-emp-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-emp-foto-marco { aspect-ratio: 4 / 3; }
.an-emp-fila-alta { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.an-emp-fila-alta vaadin-combo-box { flex: 2 1 16rem; }
.an-emp-fila-alta vaadin-number-field { flex: 1 1 9rem; }
.an-emp-anadir { margin-bottom: 0.3rem; }
.an-emp-cal-cabecera { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.an-emp-cal-cabecera .an-pa-aviso { flex: 1 1 24rem; margin: 0; }
.an-editor-dias { margin-top: 0.25rem; }

/* Recuadro cuyo último campo (p. ej. Observaciones) crece hasta el final, sin espacio muerto */
.an-ficha-seccion:has(> .an-relleno) { display: flex; flex-direction: column; }
.an-relleno { flex: 1 1 auto; display: flex; flex-direction: column; }
.an-relleno > vaadin-text-area { flex: 1 1 auto; }

/* Ficha de empleados: foto tamaño carnet al lado de la identificación */
.an-emp-identificacion { display: flex; align-items: flex-start; gap: 1rem; }
.an-emp-identificacion > vaadin-form-layout { flex: 1 1 auto; min-width: 0; }
.an-emp-carnet { flex: 0 0 auto; width: 6.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-top: 0.45rem; }
.an-emp-carnet-marco {
    width: 6.6rem; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--an-linea, rgba(0, 0, 0, 0.1));
    box-shadow: 0 2px 8px rgba(var(--an-tono-12343b-rgb), .12);
    background: linear-gradient(160deg, var(--an-tono-12343b), var(--an-tono-1d5a60));
}
.an-emp-carnet-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-emp-carnet-vacia { flex-direction: column; gap: 0.25rem; color: rgba(var(--an-tono-e8fffb-rgb), .75); }
.an-emp-carnet-vacia vaadin-icon { width: 2.2rem; height: 2.2rem; color: var(--an-tono-7ff0dd); opacity: .85; }
.an-emp-carnet-vacia span { font-size: var(--lumo-font-size-xxs); font-weight: 600; letter-spacing: .04em; }
.an-emp-carnet-acciones { display: flex; align-items: center; justify-content: center; gap: 0.1rem; }
.an-emp-carnet-subir { padding: 0; border: none; min-width: 0; }
.an-emp-carnet-subir::part(file-list) { display: none; }
.an-emp-carnet-subir vaadin-upload-file-list { display: none; }
@media (max-width: 520px) { .an-emp-identificacion { flex-direction: column; align-items: center; } }

/* Campo con lupa: la lista se estrecha para que la lupa no se salga en columnas estrechas */
.an-campo-catalogo { min-width: 0; }
.an-campo-catalogo > vaadin-combo-box { min-width: 0; flex: 1 1 auto; }

/* Ficha de empleados compacta: se ve entera sin desplazarse en una pantalla grande */
.an-ficha-empleado .an-emp-vista { padding: 0.65rem 1.1rem; margin-bottom: 0.35rem; }
.an-ficha-empleado .an-ficha-seccion { margin-bottom: 0.55rem; padding-bottom: 0.5rem; }
.an-ficha-empleado .an-ficha-columnas > div > .an-ficha-seccion:last-child { margin-bottom: 0; }

/* Ficha de empleados: cada pestaña ocupa todo el alto de la ventana (sin hueco abajo) */
.an-ficha-empleado .an-emp-pestanas::part(content) { display: flex; flex-direction: column; min-height: 0; }
.an-ficha-empleado .an-emp-pestanas > .an-emp-pestana { flex: 1 1 auto; min-height: 0; }
.an-ficha-empleado .an-emp-pestanas > .an-ficha-seccion.an-emp-pestana { display: flex; flex-direction: column; margin-bottom: 0; }
.an-relleno > vaadin-grid { flex: 1 1 auto; min-height: 7rem; height: auto; }
.an-relleno > .an-relleno { flex: 1 1 auto; }
.an-ficha-empleado vaadin-text-area { min-height: 4.5rem; }
.an-emp-tarjeta-activa { color: var(--lumo-success-color); width: 1rem; height: 1rem; }
.an-emp-tarjeta-inactiva { color: var(--lumo-disabled-text-color); width: 1rem; height: 1rem; }

/* Foto carnet algo mayor */
.an-emp-carnet, .an-emp-carnet-marco { width: 10.2rem; }

/* «GPS» en la barra oscura, como «Activo» */
.an-emp-gps { display: inline-flex; align-items: center; gap: 0.3rem; }
.an-emp-gps vaadin-icon { width: 0.8rem; height: 0.8rem; }
.an-emp-gps + .an-pa-estado { margin-left: 0; }


/* Calendario e incidencias del empleado: el editor llega hasta abajo (la lista de tipos se alarga) */
.an-emp-pestana-dias { display: flex; flex-direction: column; }
.an-emp-pestana-dias > .an-editor-dias { flex: 1 1 auto; min-height: 0; }

/* Foto carnet: el botón Añadir/Cambiar va sobre la parte baja de la foto (no ocupa una línea más) */
.an-emp-carnet { position: relative; padding-top: 0.3rem; }
.an-emp-carnet-acciones {
    position: absolute; left: 0; right: 0; bottom: 0.4rem; justify-content: center; gap: 0.25rem;
}
.an-emp-carnet-acciones vaadin-button {
    background: rgba(var(--an-tono-082428-rgb), .72); color: #fff; backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .25);
}
.an-emp-carnet-acciones vaadin-button vaadin-icon { color: var(--an-tono-7ff0dd); }

/* Calendario e incidencias del empleado: los meses se estiran hasta ocupar todo el espacio */
.an-ficha-empleado .an-cal-principal { display: flex; flex-direction: column; min-height: 0; }
.an-ficha-empleado .an-cal-anio { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-ficha-empleado .an-cal-mes { display: flex; flex-direction: column; min-height: 0; }
.an-ficha-empleado .an-cal-rejilla { flex: 1 1 auto; min-height: 0; grid-auto-rows: unset; grid-template-rows: repeat(7, minmax(1.05rem, 1fr)); }
/* Pantallas bajas: dos filas de seis meses para que los días no queden diminutos */
@media (max-height: 1000px) and (min-width: 1500px) { .an-ficha-empleado .an-cal-anio { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* El cuerpo del mes (envuelve la rejilla) también se estira: los días ocupan todo el recuadro del mes */
.an-ficha-empleado .an-cal-mes > div:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.an-ficha-empleado .an-cal-dia { font-size: 0.8rem; }

/* Resumen de la barra del año (título · horas · convenio y diferencia): separados entre sí */
.an-ficha-empleado .an-cal-resumen > div { display: flex; align-items: baseline; gap: 0.75rem; }

/* ============================================================ Menú lateral claro en modo día (en modo noche sigue oscuro) */
html:not([theme~="dark"]) vaadin-app-layout.an-main::part(drawer) {
    /* Un poco más oscuro que el fondo de la página (petición del usuario 2026-10-12; antes var(--an-tono-f7fbfb) → var(--an-tono-eef5f5)) */
    background: linear-gradient(180deg, var(--an-tono-e9f1f2) 0%, var(--an-tono-dde9eb) 100%);
    border-inline-end: 1px solid var(--an-tono-cddcdf);
}
html:not([theme~="dark"]) .an-menu-cabecera .an-logo { color: var(--an-petroleo); }
html:not([theme~="dark"]) .an-menu-cabecera .an-logo::after { color: var(--an-tono-1f9a8c); }
html:not([theme~="dark"]) .an-menu-buscar::part(input-field) { background: #ffffff; border: 1px solid var(--an-tono-d5e2e4); color: var(--an-petroleo); }
html:not([theme~="dark"]) .an-menu-buscar:hover::part(input-field) { background: #ffffff; border-color: var(--an-tono-b9cdd0); }
html:not([theme~="dark"]) .an-menu-buscar vaadin-icon,
html:not([theme~="dark"]) .an-menu-buscar::part(clear-button) { color: var(--an-tono-5d7a80); }
html:not([theme~="dark"]) .an-menu-buscar input::placeholder { color: var(--an-tono-8aa1a6); }
html:not([theme~="dark"]) .an-main vaadin-side-nav {
    --lumo-body-text-color: var(--an-tono-24434a);
    --lumo-secondary-text-color: var(--an-tono-5d7a80);
    --lumo-contrast-60pct: var(--an-tono-5d7a80);
    --lumo-primary-text-color: var(--an-tono-0f6f65);
    --lumo-primary-color-10pct: rgba(var(--an-tono-2bb3a3-rgb), 0.16);
    --lumo-header-text-color: var(--an-petroleo);
    --lumo-contrast-5pct: rgba(var(--an-tono-12343b-rgb), 0.04);
    --lumo-contrast-10pct: rgba(var(--an-tono-12343b-rgb), 0.07);
    --lumo-contrast-20pct: rgba(var(--an-tono-12343b-rgb), 0.12);
    --lumo-contrast-90pct: var(--an-petroleo);
}
html:not([theme~="dark"]) .an-main vaadin-side-nav-item::part(content):hover { color: var(--an-petroleo); background: rgba(var(--an-tono-2bb3a3-rgb), 0.10); }
html:not([theme~="dark"]) .an-main vaadin-side-nav > vaadin-side-nav-item[has-children]::part(content) {
    color: var(--an-petroleo);
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.22) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.08) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0) 100%);
}
html:not([theme~="dark"]) .an-main vaadin-side-nav > vaadin-side-nav-item[has-children]::part(content):hover {
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.34) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.14) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0.02) 100%);
}
html:not([theme~="dark"]) .an-main vaadin-side-nav > vaadin-side-nav-item vaadin-side-nav-item[has-children]::part(content) {
    background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), 0.12) 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.04) 55%, rgba(var(--an-tono-2bb3a3-rgb), 0) 100%);
}
html:not([theme~="dark"]) .an-main vaadin-side-nav-item[current]::part(content) {
    background: #ffffff; color: var(--an-tono-0f6f65); font-weight: 600;
    box-shadow: 0 1px 3px rgba(var(--an-tono-12343b-rgb), 0.12), inset 3px 0 0 var(--an-tono-2bb3a3);
}
/* Corazones de favoritos: visibles sobre el fondo claro */
html:not([theme~="dark"]) .an-favorito { color: rgba(var(--an-tono-12343b-rgb), 0.28); }
html:not([theme~="dark"]) .an-main vaadin-side-nav-item:hover > .an-favorito,
html:not([theme~="dark"]) .an-main vaadin-side-nav-item .an-favorito:hover { color: rgba(var(--an-tono-12343b-rgb), 0.65); }
html:not([theme~="dark"]) .an-favorito:hover { background-color: rgba(var(--an-tono-12343b-rgb), 0.06); }
html:not([theme~="dark"]) .an-favorito.an-activo,
html:not([theme~="dark"]) .an-main vaadin-side-nav-item:hover > .an-favorito.an-activo { color: #f59e0b; filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.5)); }

/* Horas de convenio dentro de la barra oscura del año: etiqueta a la izquierda y campo compacto */
.an-cal-barra .an-cal-convenio {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.6rem;
    padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .14);
}
.an-cal-convenio vaadin-number-field { padding: 0; }
.an-cal-convenio vaadin-number-field::part(input-field) {
    background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); min-height: 2.1rem;
}
.an-cal-convenio vaadin-number-field[focused]::part(input-field) { border-color: var(--an-turquesa-claro); box-shadow: 0 0 0 3px rgba(var(--an-tono-7ff0dd-rgb), .25); }
.an-cal-convenio vaadin-number-field input { color: #ffffff; -webkit-text-fill-color: #ffffff; font-weight: 700; text-align: right; }
.an-cal-barra .an-cal-convenio + .an-cal-resumen { margin-left: 0; }

/* Aviso del calendario dentro de la cabecera oscura de la ficha de empleados */
.an-emp-aviso-vista {
    flex: 1 1 auto; min-width: 0; margin: 0 0.5rem 0 1rem; padding: 0.4rem 0.8rem; border-radius: 10px;
    font-size: var(--lumo-font-size-xs); line-height: 1.35; color: #fff4dc;
    background: rgba(255, 196, 77, 0.14); border: 1px solid rgba(255, 196, 77, 0.45);
}
.an-pa-arriba .an-emp-aviso-vista + .an-pa-estado { margin-left: 0; }

/* Barra del año del empleado (con las horas de convenio): pasa a dos líneas en cuanto no cabe, a cualquier ancho */
.an-ficha-empleado .an-cal-barra { flex-wrap: wrap; row-gap: 0.4rem; }
.an-ficha-empleado .an-cal-resumen { white-space: nowrap; }

/* Valor de las horas de convenio sin el difuminado del final */
.an-cal-convenio vaadin-number-field { --_lumo-text-field-overflow-mask-image: none; }
.an-cal-convenio vaadin-number-field input { -webkit-mask-image: none; mask-image: none; }

/* Horas teóricas del año del empleado, fijas en el pie junto a «Esquema de horarios» (visibles en todas las pestañas) */
.an-pie-izquierda .an-cal-resumen {
    margin-left: 0.75rem; margin-right: 1.25rem; padding-left: 1rem; border-left: 1px solid var(--an-borde); align-items: flex-start;
}
.an-pie-izquierda .an-cal-resumen .an-cal-horas-titulo { color: var(--an-texto-suave); }
.an-pie-izquierda .an-cal-resumen .an-cal-horas {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--an-petroleo); font-size: 1.15rem;
}
html[theme~="dark"] .an-pie-izquierda .an-cal-resumen .an-cal-horas { color: var(--an-turquesa-claro); }
.an-pie-izquierda .an-cal-resumen .an-cal-resumen-dias { color: var(--an-texto-suave); font-size: var(--lumo-font-size-xs); }

/* Horas de convenio: el campo con el mismo aspecto que los de la ficha (claro, texto oscuro) para que se vea que se edita */
html:not([theme~="dark"]) .an-cal-convenio vaadin-number-field::part(input-field) {
    background: #e9eef1; border: 1px solid transparent;
}
html:not([theme~="dark"]) .an-cal-convenio vaadin-number-field:hover::part(input-field) { background: var(--an-tono-e1e8eb); }
html:not([theme~="dark"]) .an-cal-convenio vaadin-number-field input { color: var(--an-texto); -webkit-text-fill-color: var(--an-texto); }

/* ---------- Ficha del Histórico de accesos ---------- */
.an-acc-quien { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.an-acc-chip {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.8rem 0.4rem 0.6rem; border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--an-turquesa) 14%, var(--an-superficie)) 0%, var(--an-superficie-2) 100%);
    border: 1px solid color-mix(in srgb, var(--an-turquesa) 30%, transparent);
}
.an-acc-chip vaadin-icon { width: 1.1rem; height: 1.1rem; color: var(--an-turquesa); }
.an-acc-chip > div { display: flex; flex-direction: column; line-height: 1.2; }
.an-acc-chip-titulo { font-size: var(--lumo-font-size-xxs); text-transform: uppercase; letter-spacing: .06em; color: var(--an-texto-suave); }
.an-acc-chip-valor { font-weight: 600; }
.an-acc-duracion { display: block; margin-top: 0.5rem; font-weight: 600; color: var(--an-petroleo); }
html[theme~="dark"] .an-acc-duracion { color: var(--an-turquesa-claro); }
.an-acc-duracion.an-acc-abierto { color: #b26a00; }
.an-acc-duracion.an-error { color: var(--lumo-error-text-color); }
.an-acc-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.an-acc-foto { display: flex; flex-direction: column; gap: 0.35rem; }
.an-acc-foto-titulo { font-size: var(--lumo-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--an-texto-suave); }
.an-acc-foto-ampliable { cursor: zoom-in; }
.an-acc-sancion {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 10px;
    background: color-mix(in srgb, #c62828 10%, var(--an-superficie)); color: #b71c1c; font-weight: 600; font-size: var(--lumo-font-size-s);
}
html[theme~="dark"] .an-acc-sancion { color: #ff8a80; }
@media (max-width: 700px) { .an-acc-fotos { grid-template-columns: 1fr; } }

/* ---------- Ficha de Guardias ---------- */
.an-ficha-guardia .an-cal-ficha { grid-template-columns: 480px minmax(0, 1fr); }
.an-gua-tarjeta { display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.5rem; font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); }
.an-gua-tarjeta vaadin-icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--an-turquesa); margin-top: 0.1rem; }
.an-gua-tarjeta.an-gua-sin-tarjeta { color: #b26a00; font-weight: 600; }
.an-gua-tarjeta.an-gua-sin-tarjeta vaadin-icon { color: #f39a38; }
.an-gua-realizada {
    display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 12px; font-weight: 600;
    background: linear-gradient(135deg, color-mix(in srgb, #1a9a2a 16%, var(--an-superficie)), var(--an-superficie-2));
    border: 1px solid color-mix(in srgb, #1a9a2a 35%, transparent); color: #146c20;
}
html[theme~="dark"] .an-gua-realizada { color: #7fe08b; }
.an-gua-realizada vaadin-icon { color: #1a9a2a; flex: none; }
/* Tres meses en una fila; debajo, las últimas guardias en tarjetas que llenan el ancho */
.an-ficha-guardia .an-gua-meses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-ficha-guardia .an-cal-ficha { height: 100%; }
.an-ficha-guardia .an-cal-principal { display: flex; flex-direction: column; min-height: 0; }
.an-ficha-guardia .an-cal-principal > .an-ficha-seccion { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.an-ficha-guardia .an-cal-principal > .an-ficha-seccion > .an-gua-ultimas { flex: 1 1 auto; max-height: none; min-height: 9rem; }
/* Columna izquierda: la sección «Guardia» llega hasta abajo y las notas ocupan el alto que sobra */
.an-ficha-guardia .an-gua-seccion-datos { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
.an-gua-datos { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.an-gua-notas { flex: 1 1 auto; min-height: 6rem; margin-top: 0.4rem; }
.an-gua-notas::part(input-field) { height: 100%; align-items: flex-start; }
.an-ficha-guardia .an-cal-principal > .an-ficha-seccion { margin-top: 0.75rem; }
/* Barra: alto fijo, pase lo que pase (texto del periodo, leyenda de 3 tipos, botón de quitar) */
.an-ficha-guardia .an-cal-barra {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nav quitar res" "ley ley ley";
    grid-template-rows: 3rem 2rem; align-items: center; column-gap: 1rem; height: 5.4rem; padding: 0.15rem 1rem 0.25rem; white-space: normal;
}
.an-ficha-guardia .an-cal-barra > .an-cal-destacada { justify-self: end; }
.an-ficha-guardia .an-cal-barra > .an-cal-navegacion { grid-area: nav; }
.an-ficha-guardia .an-cal-barra > .an-gua-leyenda { grid-area: ley; }
.an-ficha-guardia .an-cal-barra > .an-cal-destacada { grid-area: quitar; }
.an-ficha-guardia .an-cal-barra > .an-gua-resumen { grid-area: res; margin-left: 0; }
.an-gua-periodo {
    display: inline-block; width: 19.5rem; text-align: center; font-weight: 700; font-size: var(--lumo-font-size-m); color: var(--an-tono-e8fffb);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-ficha-guardia .an-gua-leyenda {
    flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 1.4rem; height: 100%; padding: 0 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--lumo-font-size-s);
}
.an-ficha-guardia .an-gua-muestra { white-space: nowrap; }
.an-cal-mes-anio { margin-left: 0.4rem; font-weight: 500; opacity: .6; }
.an-gua-ultimas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-auto-rows: max-content; gap: 0.5rem;
    overflow: auto; padding: 2px;
}
.an-gua-ultimas > .an-ayuda { grid-column: 1 / -1; }
.an-gua-fila {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem;
    border-radius: 12px; background: var(--an-superficie-2); border: 1px solid var(--an-borde, rgba(var(--an-tono-12343b-rgb), .1));
    transition: box-shadow .15s, transform .15s;
}
.an-gua-fila:hover { box-shadow: 0 4px 14px rgba(var(--an-tono-12343b-rgb), .12); transform: translateY(-1px); }
.an-gua-fila-dia {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 10px;
    background: linear-gradient(145deg, var(--an-tono-12343b), var(--an-tono-1d5c61)); color: #fff; line-height: 1;
}
.an-gua-fila-num { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-gua-fila-mes { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--an-tono-a8efe4); margin-top: 2px; }
.an-gua-fila-cuerpo { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.an-gua-fila-semana { font-weight: 600; font-size: var(--lumo-font-size-s); }
.an-gua-fila-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--an-texto-suave); font-size: var(--lumo-font-size-xs); }
.an-gua-estado { font-size: 0.66rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.an-gua-estado-ok { background: color-mix(in srgb, #1a9a2a 15%, transparent); color: #146c20; }
.an-gua-estado-pte { background: color-mix(in srgb, var(--an-tono-2bb3a3) 16%, transparent); color: var(--an-tono-0f8f82); }
.an-gua-estado-no { background: color-mix(in srgb, #e5534b 14%, transparent); color: #b3322b; }
html[theme~="dark"] .an-gua-estado-ok { color: #7fe08b; }
html[theme~="dark"] .an-gua-estado-pte { color: var(--an-tono-7ff0dd); }
html[theme~="dark"] .an-gua-estado-no { color: #ff8a80; }
.an-gua-estado-festivo { background: color-mix(in srgb, #f39a38 18%, transparent); color: #b5650d; }
html[theme~="dark"] .an-gua-estado-festivo { color: #ffc27a; }
/* Festivo: el día en naranja (como en el calendario); la guardia que se está viendo, resaltada en turquesa */
.an-gua-fila-festivo .an-gua-fila-dia { background: linear-gradient(145deg, #f39a38, #e07b12); }
.an-gua-fila-actual { border-color: var(--an-tono-2bb3a3); box-shadow: inset 3px 0 0 var(--an-tono-2bb3a3), 0 0 0 2px color-mix(in srgb, var(--an-tono-2bb3a3) 25%, transparent);
    background: color-mix(in srgb, var(--an-tono-2bb3a3) 10%, var(--an-superficie)); }
@media (max-width: 1350px) { .an-ficha-guardia .an-gua-meses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-gua-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: var(--lumo-font-size-xs); color: rgba(var(--an-tono-e8fffb-rgb), .85); }
.an-gua-muestra { display: inline-flex; align-items: center; gap: 0.35rem; }
.an-gua-punto { width: 0.8rem; height: 0.8rem; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.an-gua-resumen { margin-left: auto; font-weight: 600; color: var(--an-tono-e8fffb); white-space: nowrap; }
@media (max-width: 1100px) { .an-ficha-guardia .an-cal-ficha { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ficha de Informes ---------- */
.an-inf-sistema {
    display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; padding: 0.65rem 0.9rem; border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--an-turquesa) 14%, var(--an-superficie)), var(--an-superficie-2));
    border: 1px solid color-mix(in srgb, var(--an-turquesa) 35%, transparent); font-size: var(--lumo-font-size-s);
}
.an-inf-sistema vaadin-icon { color: var(--an-turquesa); flex: none; }
.an-inf-sistema span { flex: 1; }
.an-inf-tarjeta {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 14px; color: var(--an-tono-e8fffb);
    background: linear-gradient(135deg, var(--an-tono-12343b) 0%, var(--an-tono-0b2328) 100%); box-shadow: 0 10px 24px rgba(var(--an-tono-061c21-rgb), .22);
}
.an-inf-tarjeta > vaadin-icon { width: 2.2rem; height: 2.2rem; color: var(--an-tono-7ff0dd); flex: none; }
.an-inf-tarjeta > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-inf-tarjeta-titulo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.an-inf-tarjeta-detalle { font-size: var(--lumo-font-size-xs); color: rgba(var(--an-tono-e8fffb-rgb), .75); }
.an-inf-tarjeta-aviso { background: linear-gradient(135deg, #7a4a00 0%, #4a2c00 100%); }
.an-inf-tarjeta-aviso > vaadin-icon { color: #ffd08a; }
.an-inf-tarjeta-vacia { opacity: .85; }
.an-inf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.8rem 0 0.4rem; }
.an-inf-subir, .an-dis-subir { display: inline-block; }
.an-inf-subir::part(file-list), .an-dis-subir::part(file-list) { display: none; }
.an-ficha-informe .an-ayuda { display: block; font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }

/* ---------- Diseñador de informes ---------- */
.an-dis::part(content) { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.an-dis .an-dis-barra { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-left: auto; }
.an-dis .an-dis-grupo { display: flex; align-items: center; gap: 0.15rem; padding: 0 0.5rem; border-left: 1px solid var(--an-linea); }
.an-dis .an-dis-grupo > span:first-child { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); text-transform: uppercase; letter-spacing: .06em; margin-right: 0.3rem; }
.an-dis-zoom { min-width: 3.2rem; text-align: center; font-size: var(--lumo-font-size-s); font-variant-numeric: tabular-nums; }
.an-dis-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 310px; height: 100%; }
.an-dis-izquierda, .an-dis-propiedades { overflow: auto; padding: 0.9rem; background: var(--an-superficie); display: flex; flex-direction: column; gap: 0.5rem; }
.an-dis-izquierda { border-right: 1px solid var(--an-linea); }
.an-dis-propiedades { border-left: 1px solid var(--an-linea); }
.an-dis-panel-titulo { font-weight: 700; font-size: var(--lumo-font-size-m); }
.an-dis .an-ayuda { display: block; font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }
.an-dis-campos { display: flex; flex-direction: column; gap: 2px; }
.an-dis-campo {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.3rem 0.45rem;
    border-radius: 8px; cursor: pointer; font-size: var(--lumo-font-size-s);
}
.an-dis-campo:hover { background: color-mix(in srgb, var(--an-turquesa) 14%, var(--an-superficie)); }
.an-dis-campo vaadin-icon { width: 1rem; height: 1rem; color: var(--an-turquesa); }
.an-dis-campo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }
.an-dis-campo-tipo { font-size: var(--lumo-font-size-xxs); color: var(--an-texto-suave); }
.an-dis-lienzo {
    overflow: auto; outline: none; padding: 1.5rem 2rem 3rem;
    background: radial-gradient(circle at 1px 1px, rgba(var(--an-tono-12343b-rgb), .10) 1px, transparent 0) 0 0 / 18px 18px, #e7ecef;
}
html[theme~="dark"] .an-dis-lienzo { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0) 0 0 / 18px 18px, var(--an-tono-0a1114); }
.an-dis-hoja { display: grid; grid-template-columns: 9.5rem max-content; width: max-content; margin: 0 auto; filter: drop-shadow(0 14px 22px rgba(var(--an-tono-061c21-rgb), .16)); }
.an-dis-banda { position: relative; background: #fff; color: #000; border-bottom: 1px dashed rgba(var(--an-tono-12343b-rgb), .28); }
.an-dis-hoja > .an-dis-banda:nth-child(2) { border-top-right-radius: 4px; border-top-left-radius: 4px; }
.an-dis-banda-nombre {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding: 0.15rem 0.6rem 0 0; text-align: right;
    font-size: 0.7rem; font-weight: 600; color: var(--an-tono-12343b); line-height: 1.2; filter: none;
}
html[theme~="dark"] .an-dis-banda-nombre { color: var(--an-tono-c9dde2); }
.an-dis-banda-nombre span { color: #5b6b73; font-weight: 400; font-size: 0.64rem; }
.an-dis-banda-nombre-sel { color: var(--an-tono-0f8f82); }
html[theme~="dark"] .an-dis-banda-nombre-sel { color: var(--an-tono-7ff0dd); }
.an-dis-banda-sel > .an-dis-banda-zona { background: color-mix(in srgb, var(--an-tono-2bb3a3) 9%, transparent); }
.an-dis-banda-zona { position: relative; box-shadow: inset 1px 0 0 rgba(var(--an-tono-12343b-rgb), .08), inset -1px 0 0 rgba(var(--an-tono-12343b-rgb), .08); }
.an-dis-tirador { position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; cursor: ns-resize; z-index: 3; }
.an-dis-tirador:hover { background: linear-gradient(transparent 3px, var(--an-tono-2bb3a3) 3px, var(--an-tono-2bb3a3) 5px, transparent 5px); }
.an-dis-el {
    position: absolute; box-sizing: border-box; overflow: hidden; line-height: 1.15; cursor: move; white-space: pre-wrap;
    font-family: Helvetica, Arial, sans-serif; user-select: none;
}
.an-dis-el:hover { outline: 1px dashed rgba(var(--an-tono-2bb3a3-rgb), .9); }
.an-dis-el.an-dis-sel { outline: 2px solid var(--an-tono-2bb3a3); overflow: visible; z-index: 2; box-shadow: 0 0 0 4px rgba(var(--an-tono-2bb3a3-rgb), .18); }
.an-dis-con-campo { color: var(--an-tono-0f5a57) !important; background-image: linear-gradient(rgba(var(--an-tono-2bb3a3-rgb), .10), rgba(var(--an-tono-2bb3a3-rgb), .10)); }
.an-dis-expresion { color: #6a3fb5 !important; background-image: linear-gradient(rgba(106, 63, 181, .08), rgba(106, 63, 181, .08)); font-style: italic; }
.an-dis-ellipse { border-radius: 50%; }
.an-dis-image, .an-dis-chart, .an-dis-otro, .an-dis-frame { border: 1px dashed #5b6b73; }
.an-dis-image, .an-dis-chart, .an-dis-otro { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, rgba(var(--an-tono-12343b-rgb), .04) 0 8px, rgba(var(--an-tono-12343b-rgb), .08) 8px 16px); }
.an-dis-image.an-dis-image-real { border: none; background: none; }
.an-dis-image-real img { width: 100%; height: 100%; display: block; pointer-events: none; }
.an-dis-image span, .an-dis-chart span, .an-dis-otro span { font-size: 0.72rem; color: var(--an-tono-12343b); font-weight: 600; background: rgba(255, 255, 255, .8); padding: 0.1rem 0.4rem; border-radius: 6px; }
.an-dis-asa { position: absolute; width: 8px; height: 8px; background: #fff; border: 2px solid var(--an-tono-2bb3a3); border-radius: 3px; z-index: 4; }
.an-dis-asa-n { top: -5px; left: calc(50% - 4px); cursor: n-resize; }
.an-dis-asa-s { bottom: -5px; left: calc(50% - 4px); cursor: s-resize; }
.an-dis-asa-e { right: -5px; top: calc(50% - 4px); cursor: e-resize; }
.an-dis-asa-w { left: -5px; top: calc(50% - 4px); cursor: w-resize; }
.an-dis-asa-ne { right: -5px; top: -5px; cursor: ne-resize; }
.an-dis-asa-nw { left: -5px; top: -5px; cursor: nw-resize; }
.an-dis-asa-se { right: -5px; bottom: -5px; cursor: se-resize; }
.an-dis-asa-sw { left: -5px; bottom: -5px; cursor: sw-resize; }
.an-dis-bloque { padding: 0.65rem 0.75rem; border-radius: 12px; background: var(--an-superficie-2); border: 1px solid var(--an-linea); }
.an-dis-bloque-titulo { display: block; font-size: var(--lumo-font-size-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--an-turquesa); margin-bottom: 0.2rem; }
.an-dis-rejilla4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 0.5rem; }
.an-dis-propiedades vaadin-integer-field, .an-dis-propiedades vaadin-number-field, .an-dis-propiedades vaadin-select,
.an-dis-propiedades vaadin-combo-box, .an-dis-propiedades vaadin-text-area { min-width: 0; width: 100%; --vaadin-field-default-width: 0; }
.an-dis-fila { display: flex; flex-wrap: wrap; align-items: end; gap: 0 0.6rem; }
.an-dis-fila > vaadin-integer-field { width: 7.5rem; flex: none; }
.an-dis-fila > vaadin-select { flex: 1; min-width: 8rem; }
.an-dis-color { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; }
.an-dis-color > span:first-child { min-width: 3.5rem; font-size: var(--lumo-font-size-s); }
.an-dis-acciones { display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.an-dis-codigo textarea { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }
.an-dis-pista { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }
.an-dis-traducciones { display: flex; flex-direction: column; gap: 0.15rem; }
.an-dis-traduccion { display: flex; align-items: center; gap: 0.5rem; }
.an-dis-bandera { width: 1.35rem; height: 1rem; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
/* ---------- Selector de dos posiciones (opciones de los informes) ---------- */
.an-dos { display: inline-flex; align-items: center; gap: 0.55rem; }
.an-dos-titulo { font-size: var(--lumo-font-size-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--an-texto-suave); }
.an-dos-pista {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; cursor: pointer; outline: none;
    background: linear-gradient(135deg, var(--an-tono-0b2328) 0%, var(--an-tono-12343b) 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 4px 14px rgba(var(--an-tono-061c21-rgb), .22), 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), .18);
}
.an-dos-pista:focus-visible { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 3px rgba(var(--an-tono-2bb3a3-rgb), .45); }
.an-dos-indicador {
    position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
    background: linear-gradient(135deg, var(--an-tono-40d6c2) 0%, var(--an-tono-1f9d8f) 55%, var(--an-tono-127068) 100%);
    box-shadow: 0 0 14px rgba(var(--an-tono-40d6c2-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.an-dos-pista.an-dos-si .an-dos-indicador { transform: translateX(100%); }
.an-dos-opcion {
    position: relative; z-index: 1; padding: 0.38rem 0.95rem; text-align: center; white-space: nowrap; user-select: none;
    font-size: var(--lumo-font-size-s); font-weight: 600; color: rgba(var(--an-tono-e8fffb-rgb), .62); transition: color .2s;
}
.an-dos-opcion:hover { color: var(--an-tono-e8fffb); }
.an-dos-opcion.an-dos-activa { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* En el pie de la vista previa: a la derecha de «Descargar», con espacio */
.an-vista-previa-opciones { display: inline-flex; gap: 1rem; margin: 0 1.5rem; }
/* Ventana «Sacar informe»: los interruptores (Horas, Empleados…) uno debajo de otro, con los títulos en una columna y
   todos empezando y acabando en el mismo sitio (petición del usuario 2026-10-12) */
.an-sacar-informe-opciones { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 0.9rem; row-gap: 0.6rem; }
.an-sacar-informe-opciones[hidden] { display: none; }
.an-sacar-informe-opciones > .an-dos { display: contents; }
.an-sacar-informe-opciones .an-dos-pista { width: 100%; box-sizing: border-box; }

/* ---------- Asistente de acceso de usuarios (diseño premium) ---------- */
.an-asis { --an-asis-neon: var(--an-tono-7ff0dd); padding: 1.5rem 2rem 2rem; box-sizing: border-box; width: 100%; max-width: 1560px; margin: 0 auto; }
@media (max-width: 700px) { .an-asis { padding: 0.75rem; } }
.an-asis .an-ayuda { color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); }

/* Cabecera: panel oscuro con rejilla tenue, halo turquesa, icono de cristal y progreso */
.an-asis-hero {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px);
    align-items: center; gap: 1.2rem; padding: 1.5rem 1.8rem; margin-bottom: 1.1rem; border-radius: 22px; color: var(--an-tono-e8fffb);
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--an-tono-7ff0dd-rgb), 0.28), transparent 42%),
        radial-gradient(circle at 95% 120%, rgba(var(--an-tono-2bb3a3-rgb), 0.35), transparent 45%),
        linear-gradient(rgba(var(--an-tono-7ff0dd-rgb), 0.05) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(var(--an-tono-7ff0dd-rgb), 0.05) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(125deg, var(--an-tono-0a2228) 0%, var(--an-petroleo) 45%, var(--an-tono-14505a) 100%);
    box-shadow: 0 18px 40px rgba(var(--an-tono-0a2228-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.an-asis-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--an-asis-neon), transparent); opacity: 0.8;
}
.an-asis-hero-icono {
    width: 3.4rem; height: 3.4rem; padding: 0.8rem; box-sizing: border-box; border-radius: 18px; color: var(--an-tono-06302c);
    background: linear-gradient(140deg, var(--an-tono-9ff7e8), var(--an-turquesa) 60%, var(--an-tono-138a7c));
    box-shadow: 0 0 0 6px rgba(var(--an-tono-7ff0dd-rgb), 0.12), 0 10px 30px rgba(var(--an-tono-2bb3a3-rgb), 0.55);
}
.an-asis-hero-textos h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.01em; }
.an-asis-hero-textos p { margin: 0.25rem 0 0; color: rgba(var(--an-tono-e2f5f2-rgb), 0.72); font-size: var(--lumo-font-size-s); }
.an-asis-hero-progreso { display: flex; flex-direction: column; gap: 0.5rem; }
.an-asis-hero-paso { font-size: var(--lumo-font-size-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--an-asis-neon); font-weight: 700; text-align: right; }
.an-asis-progreso { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.an-asis-progreso-relleno {
    height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2, .8, .2, 1);
    background: linear-gradient(90deg, var(--an-tono-138a7c), var(--an-turquesa), var(--an-asis-neon)); box-shadow: 0 0 14px rgba(var(--an-tono-7ff0dd-rgb), 0.75);
}
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
    .an-asis-hero { grid-template-columns: auto minmax(0, 1fr); }
    .an-asis-hero-progreso { grid-column: 1 / -1; }
    .an-asis-hero-paso { text-align: left; }
}

/* Cuerpo: asistente + panel «En vivo» */
.an-asis-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
@media (max-width: 1180px) { .an-asis-cuerpo { grid-template-columns: minmax(0, 1fr); } .an-asis-vivo { display: none; } }
.an-asis-tarjeta {
    background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 22px; display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.04), 0 22px 50px rgba(var(--an-tono-0f2e35-rgb), 0.1);
}

/* Pasos: línea de tiempo con conectores que se llenan */
.an-asis-pasos {
    /* Con overflow la sombra del paso actual se recortaba: más aire arriba, abajo y a los lados (aviso del usuario, 2026-10-16) */
    display: flex; align-items: center; gap: 0; padding: 1.15rem 1.6rem; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--an-linea); border-radius: 21px 21px 0 0;
    background: linear-gradient(180deg, var(--an-superficie-2), var(--an-superficie));
}
.an-asis-pasos::-webkit-scrollbar { display: none; }
.an-asis-paso {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.7rem 0.3rem 0.3rem; border-radius: 999px; flex: none;
    color: var(--an-texto-suave); white-space: nowrap; font-size: var(--lumo-font-size-s); transition: background .2s, color .2s;
}
.an-asis-paso.an-hecho { color: var(--an-texto); cursor: pointer; }
/* Pasos que faltan, cuando la barra no cabe: solo el número (2026-10-25) */
.an-asis-paso.an-solo-num { padding-right: 0.3rem; }
.an-asis-paso.an-solo-num .an-asis-paso-texto { display: none; }
.an-asis-paso.an-hecho:hover { background: color-mix(in srgb, var(--an-turquesa) 12%, transparent); }
.an-asis-paso.an-actual {
    color: #fff; font-weight: 700;
    background: linear-gradient(120deg, var(--an-petroleo), var(--an-tono-17646a)); box-shadow: 0 4px 12px rgba(var(--an-tono-0f2e35-rgb), 0.26), 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.35);
}
.an-asis-num {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
    font-size: 0.78rem; font-weight: 800; background: var(--an-superficie-3); color: var(--an-texto-suave);
}
.an-asis-num vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-asis-paso.an-hecho .an-asis-num { background: linear-gradient(140deg, var(--an-turquesa), var(--an-tono-138a7c)); color: #fff; box-shadow: 0 3px 10px rgba(var(--an-tono-2bb3a3-rgb), 0.4); }
.an-asis-paso.an-actual .an-asis-num {
    background: var(--an-asis-neon); color: var(--an-tono-06302c); animation: an-asis-latido 2.2s ease-in-out infinite;
}
@keyframes an-asis-latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--an-tono-7ff0dd-rgb), 0.55), 0 0 12px rgba(var(--an-tono-7ff0dd-rgb), 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(var(--an-tono-7ff0dd-rgb), 0), 0 0 18px rgba(var(--an-tono-7ff0dd-rgb), 0.9); }
}
.an-asis-conector { flex: 1 0 0.6rem; min-width: 0.6rem; height: 3px; margin: 0 0.25rem; border-radius: 3px; background: var(--an-superficie-3); }
.an-asis-conector.an-hecho { background: linear-gradient(90deg, var(--an-tono-138a7c), var(--an-turquesa)); box-shadow: 0 0 8px rgba(var(--an-tono-2bb3a3-rgb), 0.45); }

/* Contenido: cabecera del paso con su pregunta y entrada animada */
.an-asis-contenido { padding: 1.4rem 1.6rem 0.8rem; min-height: 24rem; }
.an-asis-entrar { animation: an-asis-entrar .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes an-asis-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.an-asis-paso-cabecera { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.an-asis-paso-icono {
    width: 2.9rem; height: 2.9rem; padding: 0.7rem; box-sizing: border-box; border-radius: 15px; flex: none; color: var(--an-turquesa);
    background: color-mix(in srgb, var(--an-turquesa) 13%, var(--an-superficie));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--an-turquesa) 35%, transparent);
}
.an-asis-pregunta { display: block; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 800; letter-spacing: -0.015em; color: var(--an-texto); }
.an-asis-explicacion { display: block; color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); margin-top: 0.1rem; }

/* Pie fijo con botones en píldora; el principal con degradado y brillo */
.an-asis-pie {
    position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.6rem;
    border-top: 1px solid var(--an-linea); border-radius: 0 0 21px 21px;
    background: color-mix(in srgb, var(--an-superficie) 88%, transparent); backdrop-filter: blur(10px);
    box-shadow: 0 -10px 24px rgba(var(--an-tono-0f2e35-rgb), 0.06);
}
.an-asis-pie vaadin-button { border-radius: 999px; font-weight: 600; }
.an-asis-pie vaadin-button[theme~="primary"] {
    padding: 0 1.4rem; min-height: 2.6rem; color: #fff;
    background: linear-gradient(120deg, var(--an-tono-138a7c), var(--an-turquesa)); box-shadow: 0 8px 22px rgba(var(--an-tono-2bb3a3-rgb), 0.45);
    transition: transform .15s, box-shadow .15s;
}
.an-asis-pie vaadin-button[theme~="primary"]:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(var(--an-tono-2bb3a3-rgb), 0.55); }

/* Opciones grandes (qué hacer, punto de partida, qué datos ve): tarjetas con borde degradado al elegirlas */
.an-asis-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0.3rem 0 1.1rem; }
.an-asis-opcion {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 20px; cursor: pointer;
    border: 1px solid var(--an-borde); background: linear-gradient(165deg, var(--an-superficie) 0%, var(--an-superficie-2) 100%);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s;
}
.an-asis-opcion::before {
    content: ""; position: absolute; inset: auto -30% 55% auto; width: 70%; height: 140%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--an-turquesa) 22%, transparent), transparent 65%); opacity: 0; transition: opacity .25s;
}
.an-asis-opcion:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(var(--an-tono-0f2e35-rgb), 0.14); border-color: color-mix(in srgb, var(--an-turquesa) 55%, var(--an-borde)); }
.an-asis-opcion:hover::before, .an-asis-opcion.an-activo::before { opacity: 1; }
.an-asis-opcion.an-activo {
    border: 1px solid transparent;
    background: linear-gradient(165deg, color-mix(in srgb, var(--an-turquesa) 12%, var(--an-superficie)), var(--an-superficie)) padding-box,
                linear-gradient(135deg, var(--an-asis-neon), var(--an-turquesa) 40%, var(--an-tono-17464f)) border-box;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--an-turquesa) 16%, transparent), 0 16px 34px rgba(var(--an-tono-0f2e35-rgb), 0.14);
}
.an-asis-opcion.an-activo::after {
    content: "✓"; position: absolute; top: 0.85rem; right: 0.9rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: linear-gradient(140deg, var(--an-asis-neon), var(--an-turquesa)); color: var(--an-tono-06302c); font-weight: 900;
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem; box-shadow: 0 0 14px rgba(var(--an-tono-7ff0dd-rgb), 0.7);
}
.an-asis-opcion.an-desactivada { cursor: default; opacity: 0.55; }
.an-asis-opcion.an-desactivada:hover { transform: none; box-shadow: none; }
.an-asis-opcion-icono {
    position: relative; width: 3.1rem; height: 3.1rem; padding: 0.7rem; box-sizing: border-box; border-radius: 16px; color: var(--an-tono-e8fffb);
    background: linear-gradient(140deg, var(--an-tono-3fd1bf), var(--an-turquesa) 45%, var(--an-petroleo-2));
    box-shadow: 0 10px 22px rgba(var(--an-tono-2bb3a3-rgb), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.an-asis-opcion-titulo { position: relative; font-weight: 800; font-size: var(--lumo-font-size-l); margin-top: 0.45rem; letter-spacing: -0.01em; }
.an-asis-opcion-texto { position: relative; color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); line-height: 1.45; }
.an-asis-opcion-pequena { padding: 1rem 1.1rem 1.1rem; }
.an-asis-opcion-pequena .an-asis-opcion-icono { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: 13px; }
.an-asis-opcion-pequena .an-asis-opcion-titulo { font-size: var(--lumo-font-size-m); }
.an-asis-copia { display: flex; flex-direction: column; gap: 0.3rem; max-width: 38rem; padding: 0.9rem 1rem; border-radius: 16px; background: var(--an-superficie-2); border: 1px solid var(--an-linea); }

.an-asis .an-ficha-seccion { border-radius: 16px; padding: 0.75rem 1.05rem 0.9rem; box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.04); }
.an-asis-interruptor {
    margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--an-turquesa) 60%, var(--an-borde));
    background: color-mix(in srgb, var(--an-turquesa) 8%, var(--an-superficie));
}
.an-asis-interruptor vaadin-checkbox { font-weight: 600; }
.an-asis-casillas { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }

/* Tablas de filas (permisos por menú, ajustes por menú, quitar, resumen) */
.an-asis-tabla { display: flex; flex-direction: column; border: 1px solid var(--an-linea); border-radius: 14px; overflow: hidden; }
.an-asis-fila { display: grid; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; border-top: 1px solid var(--an-linea); transition: background .15s; }
.an-asis-fila:first-child { border-top: none; }
.an-asis-fila:nth-child(even) { background: var(--an-superficie-2); }
.an-asis-fila:not(.an-asis-fila-cabecera):hover { background: color-mix(in srgb, var(--an-turquesa) 7%, var(--an-superficie)); }
.an-asis-fila-cabecera {
    background: linear-gradient(90deg, var(--an-petroleo), var(--an-tono-17646a)) !important; color: var(--an-tono-e8fffb); font-size: var(--lumo-font-size-xs);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.an-asis-fila-permisos { grid-template-columns: minmax(12rem, 1fr) repeat(5, 5.5rem) 9rem; }
.an-asis-fila-permisos > vaadin-checkbox, .an-asis-fila-permisos > span:not(.an-asis-chip) { justify-self: center; }
.an-asis-fila-cabecera.an-asis-fila-permisos > span:first-child { justify-self: start; }
.an-asis-fila-permisos.an-propio { box-shadow: inset 4px 0 0 var(--an-turquesa); background: color-mix(in srgb, var(--an-turquesa) 10%, var(--an-superficie)); }
.an-asis-fila-limites { grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1.4fr) 9.5rem 24rem; }
.an-asis-fila-quitar { grid-template-columns: auto minmax(12rem, 1fr) minmax(10rem, 1.6fr); }
.an-asis-fila-resumen { grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1.6fr) 12rem; }
.an-asis-fila-titulo { font-weight: 650; display: block; }
.an-asis-fila-grupo { display: block; font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); }
.an-asis-fila-que { color: var(--an-texto); font-size: var(--lumo-font-size-s); }
.an-asis-fila-acciones { display: flex; flex-wrap: wrap; gap: 0.1rem; justify-content: flex-end; }
.an-asis-chip {
    justify-self: start; padding: 0.18rem 0.65rem; border-radius: 999px; font-size: var(--lumo-font-size-xs); white-space: nowrap;
    background: var(--an-superficie-3); color: var(--an-texto-suave);
}
.an-asis-chip.an-propio {
    background: linear-gradient(120deg, color-mix(in srgb, var(--an-turquesa) 28%, var(--an-superficie)), color-mix(in srgb, var(--an-asis-neon) 18%, var(--an-superficie)));
    color: var(--an-texto); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--an-turquesa) 60%, transparent);
}
.an-asis-recuento {
    justify-self: end; font-variant-numeric: tabular-nums; font-size: var(--lumo-font-size-s); font-weight: 700; white-space: nowrap;
    padding: 0.2rem 0.75rem; border-radius: 999px; color: var(--an-tono-06302c);
    background: linear-gradient(120deg, color-mix(in srgb, var(--an-asis-neon) 55%, var(--an-superficie)), color-mix(in srgb, var(--an-turquesa) 35%, var(--an-superficie)));
    box-shadow: 0 2px 8px rgba(var(--an-tono-2bb3a3-rgb), 0.25);
}
.an-asis-recuento:empty { display: none; }
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
    .an-asis-fila-permisos, .an-asis-fila-limites, .an-asis-fila-resumen, .an-asis-fila-quitar { grid-template-columns: 1fr; }
    .an-asis-fila-cabecera.an-asis-fila-permisos { display: none; }
}

/* Organización: un dato por fila (modo + valores) */
.an-asis-organizacion { display: flex; flex-direction: column; gap: 0.2rem; }
.an-asis-dimension { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0.8rem; align-items: end; }
@media (max-width: 760px) { .an-asis-dimension { grid-template-columns: 1fr; } }

/* Avisos */
.an-asis-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 14px; margin: 0.2rem 0 1rem; font-size: var(--lumo-font-size-s); }
.an-asis-aviso vaadin-icon { flex: none; width: 1.15rem; height: 1.15rem; }
.an-asis-aviso > span { flex: 1 1 20rem; }
.an-asis-aviso.an-info { background: color-mix(in srgb, var(--an-turquesa) 11%, var(--an-superficie)); border: 1px solid color-mix(in srgb, var(--an-turquesa) 40%, transparent); }
.an-asis-aviso.an-info vaadin-icon { color: var(--an-turquesa); }
.an-asis-aviso.an-grave {
    background: linear-gradient(120deg, color-mix(in srgb, #f39a38 16%, var(--an-superficie)), color-mix(in srgb, #f39a38 6%, var(--an-superficie)));
    border: 1px solid color-mix(in srgb, #f39a38 55%, transparent); box-shadow: 0 6px 18px rgba(243, 154, 56, 0.12);
}
.an-asis-aviso.an-grave vaadin-icon { color: #e07b10; }
.an-asis-aviso vaadin-button { border-radius: 999px; }

/* Resumen */
.an-asis-resumen-linea { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 0.8rem; padding: 0.3rem 0; font-size: var(--lumo-font-size-s); border-bottom: 1px dashed var(--an-linea); }
.an-asis-resumen-que { color: var(--an-texto-suave); }
.an-asis-resumen-valor { font-weight: 650; }
.an-asis .an-ficha-seccion > .an-asis-tabla { margin-top: 0.6rem; }

/* Panel «En vivo»: cristal oscuro con lo elegido hasta ahora */
.an-asis-vivo {
    position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 22px; color: var(--an-tono-e2f5f2);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--an-tono-7ff0dd-rgb), 0.18), transparent 50%),
        linear-gradient(160deg, var(--an-tono-0d2a30) 0%, var(--an-petroleo) 55%, var(--an-tono-123e45) 100%);
    box-shadow: 0 18px 40px rgba(var(--an-tono-0a2228-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.an-asis-vivo-cabecera {
    display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; font-size: var(--lumo-font-size-xs); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--an-asis-neon);
}
.an-asis-vivo-punto { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--an-asis-neon); animation: an-asis-latido 2.2s ease-in-out infinite; }
.an-asis-vivo-dato {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; padding: 0.6rem 0.2rem; border-top: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.1);
    animation: an-asis-entrar .35s cubic-bezier(.2, .8, .2, 1);
}
.an-asis-vivo-icono {
    width: 1.9rem; height: 1.9rem; padding: 0.42rem; box-sizing: border-box; border-radius: 10px; color: var(--an-asis-neon);
    background: rgba(var(--an-tono-7ff0dd-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.22);
}
.an-asis-vivo-que { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--an-tono-e2f5f2-rgb), 0.55); }
.an-asis-vivo-valor { display: block; font-size: var(--lumo-font-size-s); font-weight: 600; line-height: 1.35; color: var(--an-tono-f2fffd); }
.an-asis-vivo-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.an-asis-vivo-chip {
    padding: 0.12rem 0.55rem; border-radius: 999px; font-size: var(--lumo-font-size-xs); font-weight: 700; color: var(--an-tono-06302c);
    background: linear-gradient(120deg, var(--an-asis-neon), var(--an-turquesa));
}

/* Modo noche */
html[theme~="dark"] .an-asis-tarjeta { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); }
html[theme~="dark"] .an-asis-hero, html[theme~="dark"] .an-asis-vivo { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.12); }
html[theme~="dark"] .an-asis-paso.an-actual { background: linear-gradient(120deg, var(--an-tono-11454b), var(--an-tono-17646a)); }
html[theme~="dark"] .an-asis-recuento { color: var(--an-tono-e8fffb); background: color-mix(in srgb, var(--an-turquesa) 35%, var(--an-superficie)); }

/* Sin panel «En vivo» (primer paso), la tarjeta ocupa todo el ancho; los pasos hechos solo con su ✓ */
.an-asis-cuerpo.an-asis-sin-vivo { grid-template-columns: minmax(0, 1fr); }
.an-asis-vivo[hidden] { display: none; }
.an-asis-paso.an-hecho { padding: 0.3rem; }
.an-asis-paso.an-hecho .an-asis-paso-texto { display: none; }
/* Asistente SIEMPRE centrado en la pantalla y del mismo tamaño en todos los pasos (petición del usuario):
   ocupa el alto visible sin desplazar la página, centrado en horizontal y vertical; lo largo se desplaza dentro de la tarjeta */
.an-asis {
    height: calc(100dvh - var(--vaadin-app-layout-navbar-offset-size, 61px)); max-width: 1440px; margin: 0 auto;
    display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 2rem 1.2rem; overflow: hidden;
}
.an-asis-hero { flex: none; margin-bottom: 0.9rem; }
.an-asis-cuerpo { flex: 0 1 820px; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.an-asis-tarjeta { height: 100%; min-height: 0; }
.an-asis-contenido { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.an-asis-pie { position: static; }
.an-asis-vivo { position: static; max-height: 100%; overflow-y: auto; align-self: start; }
@media (max-width: 900px), (max-height: 600px) {
    .an-asis { height: auto; overflow: visible; justify-content: flex-start; }
    .an-asis-cuerpo { flex: none; }
    .an-asis-tarjeta { height: auto; }
    .an-asis-pie { position: sticky; }
}

/* Ficha de usuarios: resumen de permisos, permisos por menú y «Qué datos ve» */
.an-usu-resumen {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.95rem; margin-bottom: 0.75rem; border-radius: 14px;
    font-weight: 650; font-size: var(--lumo-font-size-s); color: var(--an-tono-e8fffb);
    background: linear-gradient(120deg, var(--an-petroleo), var(--an-tono-17646a)); box-shadow: 0 8px 20px rgba(var(--an-tono-0f2e35-rgb), 0.18);
}
.an-usu-resumen vaadin-icon { width: 1.1rem; height: 1.1rem; color: var(--an-tono-7ff0dd); flex: none; }
.an-ficha .an-asis-fila-permisos { grid-template-columns: minmax(10rem, 1fr) repeat(5, 4.6rem) 8.5rem; }
.an-usu-fila-datos { grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1.4fr); }
.an-usu-datos .an-asis-tabla { margin: 0.5rem 0 0.9rem; }
.an-usu-asistente { border-radius: 999px; }

/* Asistente a PANTALLA COMPLETA, como la Actividad de usuarios (petición del usuario): todo el ancho y el alto visible;
   la tarjeta llena el resto y lo largo se desplaza dentro (no se mueve entre pasos) */
.an-asis { max-width: none; margin: 0; padding: 1.75rem 2rem 1.5rem; justify-content: flex-start; }
.an-asis-cuerpo { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 700px) { .an-asis { padding: 0.75rem; } }

/* Selección rápida de usuarios */
.an-asis-rapida {
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem 1rem; margin-bottom: 0.8rem; border-radius: 14px;
    background: var(--an-superficie-2); border: 1px solid var(--an-linea);
}
.an-asis-rapida-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.an-asis-rapida-titulo { font-size: var(--lumo-font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--an-texto-suave); margin-right: 0.3rem; }
.an-asis-rapida-boton { border-radius: 999px; }
.an-asis-rapida-dato { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; }
@media (max-width: 900px) { .an-asis-rapida-dato { grid-template-columns: 1fr; } }
.an-asis-contador {
    display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: var(--lumo-font-size-s); font-weight: 700;
    background: color-mix(in srgb, var(--an-turquesa) 16%, var(--an-superficie)); color: var(--an-texto);
}
.an-asis-lista-usuarios { margin-top: 0.4rem; }
.an-asis-lista-usuarios p { font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); margin: 0; }

/* Asistente de permisos y límites: «Qué columnas ve» (listado · estado · Elegir columnas…) */
.an-asis-fila-columnas { grid-template-columns: minmax(12rem, 1fr) auto auto; }
.an-asis-tabla > .an-asis-rapida { margin: 0.2rem 0 0.8rem; }

/* Tabla de permisos por menú: pantallas sin permisos (Actividad, Acerca de…) */
.an-tpm-sin-permisos { background: var(--an-superficie-2); }
.an-tpm-nota { grid-column: 2 / -1; font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); font-style: italic; }

/* Diagrama de permisos: lista de empleados con «Todos» y «Ninguno» al lado */
.an-gantt-seleccion { flex: 1 1 520px; min-width: 300px; display: flex; align-items: flex-end; gap: 0.4rem; }
.an-gantt-seleccion .an-gantt-empleados { flex: 1 1 auto; min-width: 200px; }
.an-gantt-seleccion vaadin-button { border-radius: 999px; margin-bottom: 0.15rem; }

/* ================================================================= Avisos de mensajes (abajo a la derecha, como la 12)
   Tarjeta oscura de cristal con borde de luz, sobre animado y el mensaje completo. No bloquea la pantalla. */
vaadin-notification-card.an-aviso-msj::part(overlay) { background: transparent; box-shadow: none; padding: 0; border-radius: 22px; }
vaadin-notification-card.an-aviso-msj::part(content) { padding: 0; }
vaadin-notification-card.an-aviso-msj { width: min(480px, calc(100vw - 2rem)); }
.an-aviso {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.85rem; padding: 1.15rem 1.2rem 1rem;
    width: min(480px, calc(100vw - 2rem)); box-sizing: border-box; border-radius: 22px; color: var(--an-tono-e6f7f4);
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--an-tono-5ff2dc-rgb), 0.20), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(var(--an-tono-2bb3a3-rgb), 0.16), transparent 50%),
        linear-gradient(160deg, rgba(var(--an-tono-0c262c-rgb), 0.97) 0%, rgba(var(--an-tono-0f343b-rgb), 0.97) 55%, rgba(var(--an-tono-124047-rgb), 0.97) 100%);
    backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.35), 0 0 26px rgba(var(--an-tono-2bb3a3-rgb), 0.28), 0 22px 50px rgba(var(--an-tono-041216-rgb), 0.55);
}
/* Rejilla tenue y halo que late */
.an-aviso::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image: linear-gradient(rgba(var(--an-tono-7ff0dd-rgb), 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--an-tono-7ff0dd-rgb), 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.an-aviso-halo {
    position: absolute; width: 220px; height: 220px; left: -70px; top: -90px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(var(--an-tono-5ff2dc-rgb), 0.35), transparent 65%); animation: an-aviso-halo 3.2s ease-in-out infinite;
}
.an-aviso > * { position: relative; }
.an-aviso > .an-aviso-halo { position: absolute; }
.an-aviso > .an-aviso-cerrar { position: absolute; top: 0.55rem; right: 0.55rem; color: rgba(var(--an-tono-e6f7f4-rgb), 0.6); z-index: 1; }
.an-aviso-cerrar:hover { color: #fff; }

.an-aviso-cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: center; padding-right: 1.6rem; }
.an-aviso-posicion { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.35rem; font-size: var(--lumo-font-size-xs); font-weight: 700; color: rgba(var(--an-tono-e6f7f4-rgb), 0.75); }
.an-aviso-posicion:empty { display: none; }
.an-aviso-posicion vaadin-button { min-width: 1.9rem; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; color: var(--an-tono-7ff0dd); background: rgba(var(--an-tono-7ff0dd-rgb), 0.1); }
.an-aviso-posicion vaadin-button[disabled] { opacity: 0.35; }
.an-aviso-etiqueta {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--an-tono-7ff0dd);
}
.an-aviso-etiqueta::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--an-tono-7ff0dd); box-shadow: 0 0 10px var(--an-tono-7ff0dd); animation: an-asis-latido 2s ease-in-out infinite; }
.an-aviso-titulo { margin: 0.15rem 0 0; font-size: 1.12rem; line-height: 1.3; font-weight: 750; color: #ffffff; }

/* Sobre: la solapa se abre, la carta sube y brilla */
.an-aviso-sobre {
    width: 3.4rem; height: 3.4rem; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(var(--an-tono-7ff0dd-rgb), 0.18), rgba(var(--an-tono-7ff0dd-rgb), 0.04));
    box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.35), 0 0 22px rgba(var(--an-tono-5ff2dc-rgb), 0.25);
}
.an-aviso-sobre svg { width: 2.6rem; height: 2.6rem; overflow: visible; }
.an-aviso-base { fill: url(#anAvisoG); }
.an-aviso-solapa { fill: var(--an-tono-7ff0dd); transform-origin: 32px 26px; }
.an-aviso-carta { fill: var(--an-tono-f4fffd); }
.an-aviso-linea { stroke: var(--an-tono-1b8f86); stroke-width: 2; stroke-linecap: round; }
.an-aviso-carta, .an-aviso-linea { transform: translateY(8px); }
.an-aviso-animar { animation: an-aviso-entrar .6s cubic-bezier(.2, .9, .25, 1.15) both; }
.an-aviso-animar .an-aviso-solapa { animation: an-aviso-solapa .55s .35s ease-out both; }
.an-aviso-animar .an-aviso-carta, .an-aviso-animar .an-aviso-linea { animation: an-aviso-carta .6s .7s cubic-bezier(.2, .9, .25, 1.2) both; }
.an-aviso-animar .an-aviso-sobre { animation: an-aviso-pulso 1.6s 1.2s ease-out 2; }
@keyframes an-aviso-entrar { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes an-aviso-solapa { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
@keyframes an-aviso-carta { from { transform: translateY(8px); } to { transform: translateY(-6px); } }
@keyframes an-aviso-pulso { 0% { box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.35), 0 0 0 0 rgba(var(--an-tono-5ff2dc-rgb), 0.55); }
    100% { box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.35), 0 0 0 18px rgba(var(--an-tono-5ff2dc-rgb), 0); } }
@keyframes an-aviso-halo { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
/* Ya abierta: solapa abierta y carta fuera */
.an-aviso:not(.an-aviso-animar) .an-aviso-solapa { transform: scaleY(-1); }
.an-aviso:not(.an-aviso-animar) .an-aviso-carta, .an-aviso:not(.an-aviso-animar) .an-aviso-linea { transform: translateY(-6px); }

.an-aviso-cuerpo { display: flex; flex-direction: column; gap: 0.7rem; }
.an-aviso-remitente { display: flex; align-items: center; gap: 0.65rem; }
.an-aviso-avatar {
    flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 800; color: var(--an-tono-06302c);
    background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3)); box-shadow: 0 0 0 3px rgba(var(--an-tono-7ff0dd-rgb), 0.18);
}
.an-aviso-datos { display: flex; flex-direction: column; min-width: 0; }
.an-aviso-de { font-weight: 700; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-aviso-cuando { font-size: var(--lumo-font-size-xs); color: rgba(var(--an-tono-e6f7f4-rgb), 0.6); }
.an-aviso-texto {
    max-height: 11rem; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--lumo-font-size-m); line-height: 1.5;
    padding: 0.8rem 0.95rem; border-radius: 14px; color: var(--an-tono-f2fffd);
    background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.14);
}
.an-aviso-solicitud {
    display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0.95rem; border-radius: 14px;
    background: linear-gradient(120deg, rgba(243, 154, 56, 0.16), rgba(243, 154, 56, 0.05)); box-shadow: inset 0 0 0 1px rgba(243, 154, 56, 0.35);
}
.an-aviso-solicitud-arriba { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.an-aviso-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #ffc27a; }
.an-aviso-chip vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-aviso-estado, .an-aviso-estado-si, .an-aviso-estado-no { padding: 0.1rem 0.6rem; border-radius: 999px; font-size: var(--lumo-font-size-xs); font-weight: 700; }
.an-aviso-estado { background: rgba(243, 154, 56, 0.22); color: #ffd7a6; }
.an-aviso-estado-si { background: rgba(76, 217, 100, 0.2); color: #9df0ae; }
.an-aviso-estado-no { background: rgba(255, 92, 92, 0.2); color: #ffb0b0; }
.an-aviso-incidencia { font-weight: 700; color: #ffffff; }
.an-aviso-fechas { font-size: var(--lumo-font-size-s); color: rgba(var(--an-tono-e6f7f4-rgb), 0.8); }

.an-aviso-pie { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; padding-top: 0.15rem; }
.an-aviso-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.an-aviso-botones vaadin-button { border-radius: 999px; margin: 0; font-size: var(--lumo-font-size-s); padding-inline: 0.85rem; }
.an-aviso-extras { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.an-aviso-extras:not(:has(vaadin-button:not([hidden]))) { display: none; }
/* Respuesta a una solicitud de permiso: verde si se acepta, rojo si se deniega */
.an-aviso-aceptado { box-shadow: 0 0 0 1px rgba(142, 245, 166, 0.45), 0 0 26px rgba(52, 181, 90, 0.3), 0 22px 50px rgba(var(--an-tono-041216-rgb), 0.55); }
.an-aviso-aceptado .an-aviso-etiqueta { color: #8ef5a6; }
.an-aviso-aceptado .an-aviso-etiqueta::before { background: #8ef5a6; box-shadow: 0 0 10px #8ef5a6; }
.an-aviso-denegado { box-shadow: 0 0 0 1px rgba(255, 140, 140, 0.5), 0 0 26px rgba(224, 33, 43, 0.3), 0 22px 50px rgba(var(--an-tono-041216-rgb), 0.55); }
.an-aviso-denegado .an-aviso-etiqueta { color: #ffaaaa; }
.an-aviso-denegado .an-aviso-etiqueta::before { background: #ff7b7b; box-shadow: 0 0 10px #ff7b7b; }
.an-aviso-denegado .an-aviso-avatar { background: linear-gradient(135deg, #ffb3b3, #e0212b); }

/* Aceptar permiso: incidencias que ya hay esos días y se sustituirán */
.an-msj-sustituir {
    display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; padding: 0.65rem 0.85rem; border-radius: 12px; font-size: var(--lumo-font-size-s);
    background: color-mix(in srgb, #f39a38 12%, var(--an-superficie)); border: 1px solid color-mix(in srgb, #f39a38 45%, transparent);
}
.an-msj-sustituir-titulo { display: flex; gap: 0.45rem; align-items: center; font-weight: 650; margin-bottom: 0.25rem; }
.an-msj-sustituir-titulo vaadin-icon { color: #e07b10; width: 1.05rem; height: 1.05rem; flex: none; }
.an-msj-sustituir > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; }

/* Aviso de «mensaje leído» (al remitente): verde en lugar de turquesa */
.an-aviso-leido .an-aviso-etiqueta { color: #8ef5a6; }
.an-aviso-leido .an-aviso-etiqueta::before { background: #8ef5a6; box-shadow: 0 0 10px #8ef5a6; }
.an-aviso-leido .an-aviso-avatar { background: linear-gradient(135deg, #a8f7b9, #34b55a); }
.an-aviso-leido .an-aviso-cuando { color: #b9f3c7; }
.an-aviso-despues { color: rgba(var(--an-tono-e6f7f4-rgb), 0.75); }
.an-aviso-ir { color: var(--an-tono-7ff0dd); background: rgba(var(--an-tono-7ff0dd-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.3); }
.an-aviso-abrir {
    color: var(--an-tono-06302c); font-weight: 750; background: linear-gradient(120deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3));
    box-shadow: 0 6px 18px rgba(var(--an-tono-2bb3a3-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.an-aviso-windows { color: rgba(var(--an-tono-e6f7f4-rgb), 0.7); font-size: var(--lumo-font-size-xs); }
.an-aviso-windows[hidden] { display: none; }

/* ================================================================= Asistente de análisis (ventana, mismo estilo que
   «Permisos y límites»): cabecera oscura con progreso, pasos en línea, tarjetas de opción y panel «En vivo» */
/* Esquinas redondeadas (petición del usuario): el marco Y su contenido, que si no tapa el redondeo */
vaadin-dialog.an-asis-ventana::part(overlay) { border-radius: 26px; overflow: hidden; }
vaadin-dialog.an-asis-ventana::part(content) { padding: 0; display: flex; flex-direction: column; min-height: 0; border-radius: 26px; overflow: hidden; }
vaadin-dialog.an-asis-ventana::part(header) { display: none; }
.an-asis.an-asis-popup {
    height: 100%; min-height: 0; max-width: none; margin: 0; padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column;
    justify-content: flex-start; overflow: hidden; border-radius: 26px; background: var(--an-fondo, var(--lumo-base-color));
}
/* Tarjetas de condición más pequeñas (hay muchas) */
.an-asis-opciones.an-asis-opciones-compactas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.7rem; }
.an-asis-opciones-compactas .an-asis-opcion { padding: 0.95rem 1rem 1rem; gap: 0.3rem; }
.an-asis-opciones-compactas .an-asis-opcion-titulo { font-size: var(--lumo-font-size-m); }
/* Valor: campo grande */
.an-asis-valor-grande { width: min(420px, 100%); --vaadin-input-field-height: 2.9rem; font-size: 1.05rem; margin-top: 0.4rem; }
/* Filtros: lista de condiciones */
.an-asis-condiciones { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; max-width: 760px; }
.an-asis-condicion {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem 0.6rem 1rem; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--an-turquesa) 35%, var(--an-borde));
    background: linear-gradient(120deg, color-mix(in srgb, var(--an-turquesa) 9%, var(--an-superficie)), var(--an-superficie));
}
.an-asis-condicion-union {
    flex: none; min-width: 4.6rem; text-align: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: var(--lumo-font-size-xs);
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--an-tono-06302c); background: linear-gradient(120deg, var(--an-tono-7ff0dd), var(--an-turquesa));
}
.an-asis-condicion-texto { flex: 1 1 auto; font-weight: 600; }
.an-asis-interrogante { width: 1.05rem; height: 1.05rem; color: #c7861c; margin-left: 0.4rem; vertical-align: -3px; }
/* Filtros: cuántos registros salen */
.an-asis-recuento-filtro {
    display: inline-flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0.4rem; padding: 0.75rem 1.2rem; border-radius: 16px; color: var(--an-tono-e8fffb);
    background: linear-gradient(120deg, var(--an-petroleo), var(--an-tono-17646a)); box-shadow: 0 10px 24px rgba(var(--an-tono-0f2e35-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.an-asis-recuento-filtro vaadin-icon { color: var(--an-tono-7ff0dd); width: 1.2rem; height: 1.2rem; }
.an-asis-recuento-cifra { font-size: 1.6rem; font-weight: 800; color: var(--an-tono-7ff0dd); text-shadow: 0 0 14px rgba(var(--an-tono-7ff0dd-rgb), 0.45); }
/* Colores: paso con la vista previa al lado */
.an-asis-con-previa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .an-asis-con-previa { grid-template-columns: 1fr; } }
.an-asis-previa {
    padding: 0.9rem; border-radius: 18px; border: 1px solid var(--an-borde);
    background: linear-gradient(165deg, var(--an-superficie-2), var(--an-superficie)); box-shadow: 0 14px 32px rgba(var(--an-tono-0f2e35-rgb), 0.1);
}
.an-asis-previa-titulo { display: block; margin-bottom: 0.6rem; font-size: var(--lumo-font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--an-texto-suave); }
.an-asis-previa-tabla { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--an-linea); background: var(--an-superficie); }
.an-asis-previa-fila { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; min-height: 2.4rem; border-bottom: 1px solid var(--an-linea); font-size: var(--lumo-font-size-s); }
.an-asis-previa-fila:last-child { border-bottom: none; }
.an-asis-previa-fila > span { padding: 0.35rem 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--an-texto-suave); }
.an-asis-previa-fila > span:nth-child(2) { color: var(--an-texto); font-weight: 600; }
.an-asis-previa-fila-color { box-shadow: inset 4px 0 0 var(--an-color-fila); }
.an-asis-previa-fila-color > span { color: inherit; font-weight: 600; }
.an-asis-previa-celda { margin: 3px; border-radius: 8px; }
.an-asis-colores { display: flex; flex-direction: column; gap: 0.7rem; }
.an-asis-color-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 420px; padding: 0.6rem 0.9rem; border-radius: 14px;
    border: 1px solid var(--an-borde); background: var(--an-superficie);
}
.an-asis-muestra-color { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: -1px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.an-asis-popup .an-asis-hero { padding: 1.1rem 3.2rem 1.1rem 1.4rem; margin-bottom: 0.8rem; cursor: move; }
.an-asis-popup .an-asis-hero vaadin-button { cursor: pointer; }
.an-asis-popup .an-asis-hero h2 { font-size: 1.35rem; }
.an-asis-analisis-cerrar { position: absolute; top: 0.7rem; right: 0.7rem; color: rgba(var(--an-tono-e8fffb-rgb), 0.75); z-index: 2; }
.an-asis-analisis-cerrar:hover { color: #fff; }
.an-asis-popup .an-asis-cuerpo { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); }
.an-asis-popup .an-asis-tarjeta { height: 100%; min-height: 0; }
.an-asis-popup .an-asis-contenido { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.an-asis-popup .an-asis-pie { position: static; }
.an-asis-popup .an-asis-vivo { position: static; max-height: 100%; overflow-y: auto; align-self: stretch; }
@media (max-width: 1100px) { .an-asis-popup .an-asis-cuerpo { grid-template-columns: minmax(0, 1fr); } .an-asis-popup .an-asis-vivo { display: none; } }
.an-asis-analisis-nombre { display: flex; flex-direction: column; gap: 0.3rem; max-width: 640px; }
.an-asis-analisis-nombre vaadin-text-field { --vaadin-input-field-height: 2.8rem; font-size: 1.05rem; }

/* Columnas: tarjetas que se encienden con su número de orden */
.an-asis-col-buscar { width: min(360px, 100%); }
.an-asis-col-cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; margin: 0.6rem 0 1rem; }
.an-asis-col {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem; border-radius: 14px; cursor: pointer; user-select: none;
    border: 1px solid var(--an-borde); background: linear-gradient(165deg, var(--an-superficie) 0%, var(--an-superficie-2) 100%);
    transition: transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .15s, border-color .15s;
}
.an-asis-col:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--an-turquesa) 55%, var(--an-borde)); box-shadow: 0 6px 16px rgba(var(--an-tono-0f2e35-rgb), 0.08); }
.an-asis-col > div { display: flex; flex-direction: column; min-width: 0; }
.an-asis-col > div > span:first-child { font-weight: 650; font-size: var(--lumo-font-size-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-asis-col-tipo { font-size: 0.7rem; color: var(--an-texto-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.an-asis-col-marca {
    flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800;
    border: 1.5px dashed color-mix(in srgb, var(--an-turquesa) 50%, var(--an-borde)); color: var(--an-tono-06302c);
}
.an-asis-col.an-activo {
    border-color: var(--an-turquesa);
    background: linear-gradient(165deg, color-mix(in srgb, var(--an-turquesa) 14%, var(--an-superficie)), var(--an-superficie));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--an-turquesa) 45%, transparent), 0 8px 20px color-mix(in srgb, var(--an-turquesa) 18%, transparent);
}
.an-asis-col.an-activo .an-asis-col-marca {
    border: none; background: linear-gradient(135deg, var(--an-asis-neon), var(--an-turquesa)); box-shadow: 0 0 10px color-mix(in srgb, var(--an-turquesa) 60%, transparent);
}
.an-asis-col-orden { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 0.6rem; border-top: 1px dashed var(--an-linea); }
.an-asis-col-orden-titulo {
    display: block; width: 100%; margin: 0.4rem 0 0.35rem; font-size: var(--lumo-font-size-xs); font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--an-texto-suave);
}
/* Agrupar y totales */
.an-asis-analisis-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); gap: 1rem; }
.an-asis-analisis-grupos vaadin-select { width: 100%; }
.an-asis-analisis-totales { display: flex; flex-direction: column; gap: 0.4rem; max-width: 720px; }
.an-asis-analisis-total {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.9rem; border-radius: 14px;
    border: 1px solid var(--an-borde); background: var(--an-superficie);
}
.an-asis-analisis-total > div { display: flex; flex-direction: column; }
.an-asis-analisis-resumen { display: flex; flex-direction: column; gap: 0.2rem; max-width: 820px; }
@media (max-width: 700px) { .an-asis-analisis-grupos { grid-template-columns: 1fr; } }
/* Botón del asistente en el apartado «Análisis» del listado */
.an-boton-asistente { color: var(--an-turquesa); font-weight: 700; }

/* Número de mensajes sin leer junto a «Mensajería» en el menú lateral */
.an-insignia-mensajes {
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: 0.7rem; font-weight: 800; color: #ffe14d; background: #e0212b; box-shadow: 0 0 0 2px var(--an-superficie), 0 0 10px rgba(224, 33, 43, 0.5);
    margin-right: 0.3rem; animation: an-asis-latido 2.2s ease-in-out infinite;
}
.an-insignia-mensajes[hidden] { display: none; }
/* En el grupo (Herramientas) solo con el grupo plegado: abierto, ya se ve junto a «Mensajería» */
vaadin-side-nav-item[expanded] > .an-insignia-grupo { display: none; }

/* Login: se cerró la sesión porque se entró con el mismo usuario en otro sitio */
.an-login-aviso {
    display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.9rem; margin: 0.2rem 0 0.6rem; border-radius: 14px;
    font-size: var(--lumo-font-size-s); line-height: 1.4;
    background: color-mix(in srgb, #f39a38 14%, var(--an-superficie)); border: 1px solid color-mix(in srgb, #f39a38 50%, transparent);
}
.an-login-aviso vaadin-icon { flex: none; color: #e07b10; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; }

/* Aviso fijo: el supervisor ha cambiado su acceso y la sesión se cerrará al guardar o cancelar (como mucho, 10 min) */
.an-aviso-cierre {
  position: fixed; inset: auto; margin: 0; height: auto; overflow: visible; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100000;
  display: flex; gap: 0.85rem; align-items: flex-start; width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 0.9rem 1.1rem; border-radius: 14px; background: #fff8ec; color: #3d2a08;
  border: 1px solid #f3c27a; box-shadow: 0 18px 40px -12px rgba(var(--an-tono-12343b-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: Inter, var(--lumo-font-family); font-size: 0.9rem; line-height: 1.4; pointer-events: none;
  animation: an-aviso-cierre-entra 0.35s ease-out;
}
.an-aviso-cierre.an-aviso-cierre-visto { animation: none; }
.an-aviso-cierre > div { display: flex; flex-direction: column; gap: 0.2rem; }
.an-aviso-cierre strong { font-size: 0.98rem; color: var(--an-tono-12343b); }
.an-aviso-cierre-icono { flex: none; width: 1.6rem; height: 1.6rem; color: #e07b10; margin-top: 0.1rem; }
.an-aviso-cierre-cuenta { font-weight: 600; font-variant-numeric: tabular-nums; color: #b86200; }
.an-aviso-cierre-ultimo { background: #fff0f0; border-color: #f0a0a0; }
.an-aviso-cierre-ultimo .an-aviso-cierre-icono, .an-aviso-cierre-ultimo .an-aviso-cierre-cuenta { color: #c62828; }
@keyframes an-aviso-cierre-entra { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* ==================================================================== Portal del empleado (2026-10-10) */
/* Todo el ancho disponible (petición del usuario, 2026-10-11); contenedor para que los mensajes vayan de 2 o de 4 por fila */
.an-portal { box-sizing: border-box; width: 100%; padding: 1.5rem 1.75rem 3rem; display: flex; flex-direction: column; gap: 1.4rem; container-type: inline-size; }
.an-portal-hero {
  position: relative; overflow: hidden; border-radius: 28px; padding: 2.4rem 2.6rem; display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap; color: var(--an-tono-eafffb);
  background: radial-gradient(1200px 400px at 85% -20%, rgba(var(--an-tono-7ff0dd-rgb), 0.35), transparent 60%),
              radial-gradient(600px 300px at 0% 120%, rgba(var(--an-tono-2bb3a3-rgb), 0.45), transparent 60%),
              linear-gradient(135deg, var(--an-tono-0f2e35) 0%, var(--an-tono-134a52) 55%, var(--an-tono-1b6b6a) 100%);
  box-shadow: 0 30px 60px -30px rgba(var(--an-tono-0f2e35-rgb), 0.6);
}
.an-portal-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.an-portal-hero-textos { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.2rem; }
/* Pantalla completa del Portal (igual que en Accesos online) */
.an-portal-completa { position: absolute; top: 1rem; right: 1rem; z-index: 2; min-width: 2.6rem; height: 2.6rem; padding: 0; margin: 0;
  border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--an-tono-eafffb); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.25); cursor: pointer; }
.an-portal-completa:hover { background: rgba(var(--an-tono-2bb3a3-rgb), 0.3); }
.an-portal-hola { font-size: 1.15rem; opacity: 0.85; }
.an-portal-nombre { margin: 0; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.an-portal-sub { font-size: 1.1rem; opacity: 0.85; margin-top: 0.4rem; }
vaadin-button.an-portal-pedir {
  position: relative; z-index: 1; height: 4.4rem; padding: 0 2.2rem; border-radius: 999px; font-size: 1.35rem; font-weight: 700;
  background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3)); color: var(--an-tono-05231f); box-shadow: 0 16px 36px -12px rgba(var(--an-tono-7ff0dd-rgb), 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
vaadin-button.an-portal-pedir:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 22px 44px -12px rgba(var(--an-tono-7ff0dd-rgb), 0.85); }
vaadin-button.an-portal-pedir vaadin-icon { width: 1.6rem; height: 1.6rem; }

.an-portal-saldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.an-portal-saldo-tarjeta {
  background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 22px; padding: 1.3rem 1.4rem;
  box-shadow: var(--an-sombra); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; align-items: center;
}
.an-portal-saldo-icono { grid-row: span 2; width: 2.8rem; height: 2.8rem; padding: 0.7rem; border-radius: 16px; box-sizing: border-box;
  background: color-mix(in srgb, var(--an-turquesa) 14%, transparent); color: var(--an-turquesa); }
.an-portal-saldo-valor { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--an-texto); font-variant-numeric: tabular-nums; }
.an-portal-saldo-texto { color: var(--an-texto-suave); font-size: 0.98rem; }
.an-portal-saldo-principal { background: linear-gradient(135deg, color-mix(in srgb, var(--an-turquesa) 16%, var(--an-superficie)), var(--an-superficie)); border-color: color-mix(in srgb, var(--an-turquesa) 40%, var(--an-borde)); }
.an-portal-saldo-principal .an-portal-saldo-valor { color: var(--an-tono-0f8f82); font-size: 2.9rem; }
.an-portal-saldo-negativo .an-portal-saldo-valor { color: #d33a32; }
.an-portal-saldo-negativo .an-portal-saldo-icono { background: rgba(229, 83, 75, 0.12); color: #d33a32; }
.an-portal-saldo-pendiente .an-portal-saldo-icono { background: rgba(243, 154, 56, 0.14); color: #e07b10; }
.an-portal-saldo-ok .an-portal-saldo-icono { background: rgba(26, 154, 42, 0.12); color: #1a9a2a; }

.an-portal-seccion-titulo { font-size: 1.25rem; font-weight: 750; color: var(--an-texto); margin-top: 0.4rem; }
.an-portal-solicitudes { display: flex; flex-direction: column; gap: 0.7rem; }
.an-portal-sol {
  display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.25rem; border-radius: 18px; background: var(--an-superficie);
  border: 1px solid var(--an-borde); box-shadow: var(--an-sombra); border-left: 6px solid var(--an-sol-color, var(--an-tono-9fb0b7));
}
.an-portal-sol-icono { flex: none; width: 2.6rem; height: 2.6rem; padding: 0.65rem; box-sizing: border-box; border-radius: 50%; color: #fff; background: var(--an-sol-color, var(--an-tono-9fb0b7)); }
.an-portal-sol-textos { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-portal-sol-que { font-size: 1.15rem; font-weight: 700; color: var(--an-texto); }
.an-portal-sol-cuando { color: var(--an-texto); font-size: 1rem; }
.an-portal-sol-para { color: var(--an-texto-suave); font-size: 0.9rem; }
.an-portal-sol-estado { flex: none; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  color: var(--an-sol-color, #5b6b73); background: color-mix(in srgb, var(--an-sol-color, var(--an-tono-9fb0b7)) 14%, transparent); }
.an-portal-sol-aceptada { --an-sol-color: #1a9a2a; }
.an-portal-sol-denegada { --an-sol-color: #d33a32; }
.an-portal-sol-vista { --an-sol-color: #2b7bd3; }
.an-portal-sol-enviada { --an-sol-color: #e07b10; }
.an-portal-vacio, .an-portal-sin-empleado {
  display: flex; gap: 1rem; align-items: center; padding: 1.4rem 1.5rem; border-radius: 20px; font-size: 1.08rem; line-height: 1.5;
  background: var(--an-superficie); border: 1px dashed var(--an-borde); color: var(--an-texto-suave);
}
.an-portal-vacio vaadin-icon, .an-portal-sin-empleado vaadin-icon { flex: none; width: 2.4rem; height: 2.4rem; color: var(--an-turquesa); }
.an-portal-sin-empleado { border-style: solid; border-color: #f3c27a; background: #fff8ec; color: #3d2a08; }
html[theme~="dark"] .an-portal-sin-empleado { background: #2a2110; color: #f5deb3; border-color: #7a5a22; }

/* «Mis mensajes» del Portal: buzón sencillo; cada mensaje es una tarjeta que se pulsa para abrirlo */
.an-portal-msj-cabecera { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.4rem; }
.an-portal-msj-cabecera .an-portal-seccion-titulo { margin-top: 0; }
.an-portal-msj-sinleer { padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem; color: #fff;
  background: linear-gradient(135deg, #f08a24, #e0611b); box-shadow: 0 4px 12px rgba(240, 138, 36, 0.35); }
.an-portal-msj-escribir { margin-inline-start: auto; font-weight: 650; }
/* Tarjetas de mensajes: 1 por fila en estrecho, 2 si caben y 4 en pantallas anchas (nunca 3: petición del usuario) */
.an-portal-mensajes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
@container (min-width: 820px) { .an-portal-mensajes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1720px) { .an-portal-mensajes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.an-portal-msj {
  --an-msj-color: var(--an-tono-2bb3a3);
  display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: 18px; cursor: pointer;
  background: var(--an-superficie); border: 1px solid var(--an-borde); box-shadow: var(--an-sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.an-portal-msj:hover, .an-portal-msj:focus-visible { transform: translateY(-1px); border-color: var(--an-msj-color); outline: none;
  box-shadow: var(--an-sombra), 0 0 0 3px color-mix(in srgb, var(--an-msj-color) 22%, transparent); }
.an-portal-msj-icono { flex: none; width: 2.4rem; height: 2.4rem; padding: 0.6rem; box-sizing: border-box; border-radius: 14px;
  color: var(--an-msj-color); background: color-mix(in srgb, var(--an-msj-color) 14%, transparent); }
.an-portal-msj-textos { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-portal-msj-que { font-size: 1.05rem; font-weight: 650; color: var(--an-texto); }
.an-portal-msj-texto { color: var(--an-texto); font-size: 0.97rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-portal-msj-cuando { color: var(--an-texto-suave); font-size: 0.85rem; }
.an-portal-msj-chip { flex: none; padding: 0.3rem 0.8rem; border-radius: 999px; font-weight: 650; font-size: 0.85rem;
  color: var(--an-msj-color); background: color-mix(in srgb, var(--an-msj-color) 13%, transparent); }
.an-portal-msj-chip-nuevo { flex: none; padding: 0.3rem 0.8rem; border-radius: 999px; font-weight: 750; font-size: 0.85rem; color: #fff;
  background: linear-gradient(135deg, #f08a24, #e0611b); }
/* Marca naranja por dentro (box-shadow): no mueve el contenido respecto a las leídas */
.an-portal-msj-nuevo { box-shadow: inset 6px 0 0 #f08a24, var(--an-sombra); }
.an-portal-msj-nuevo:hover, .an-portal-msj-nuevo:focus-visible { box-shadow: inset 6px 0 0 #f08a24, var(--an-sombra), 0 0 0 3px color-mix(in srgb, var(--an-msj-color) 22%, transparent); }
.an-portal-msj-nuevo .an-portal-msj-que { font-weight: 800; }
.an-portal-msj-solicitud { --an-msj-color: #3f6fd8; }
.an-portal-msj-aceptada { --an-msj-color: #1a9a2a; }
.an-portal-msj-denegada { --an-msj-color: #d33a32; }

/* ---------------------------------------------------------------- asistente «Pedir un permiso» */
vaadin-dialog.an-portal-asis::part(overlay), vaadin-dialog-overlay.an-portal-asis::part(overlay) { border-radius: 28px; overflow: hidden; }
vaadin-dialog.an-portal-asis::part(content), vaadin-dialog-overlay.an-portal-asis::part(content) { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.an-portal-asis-cabecera {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; color: var(--an-tono-eafffb); cursor: move; flex: none;
  background: radial-gradient(700px 200px at 90% -40%, rgba(var(--an-tono-7ff0dd-rgb), 0.35), transparent 60%), linear-gradient(135deg, var(--an-tono-0f2e35), var(--an-tono-155a5e));
}
.an-portal-asis-logo { width: 2.8rem; height: 2.8rem; padding: 0.65rem; box-sizing: border-box; border-radius: 16px; background: rgba(var(--an-tono-7ff0dd-rgb), 0.18); color: var(--an-tono-7ff0dd); flex: none; }
.an-portal-asis-textos h2 { margin: 0; font-size: 1.5rem; color: #fff; }
.an-portal-asis-quien { opacity: 0.8; font-size: 0.98rem; }
.an-portal-asis-textos { display: flex; flex-direction: column; }
.an-portal-pasos { margin-left: auto; display: flex; gap: 0.5rem; }
.an-portal-paso { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.45rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: rgba(var(--an-tono-eafffb-rgb), 0.7); font-weight: 600; font-size: 1rem; cursor: default; }
.an-portal-paso-num { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); font-weight: 800; }
.an-portal-paso.an-activo { background: var(--an-tono-7ff0dd); color: var(--an-tono-05231f); box-shadow: 0 0 0 4px rgba(var(--an-tono-7ff0dd-rgb), 0.25); }
.an-portal-paso.an-activo .an-portal-paso-num { background: var(--an-tono-05231f); color: var(--an-tono-7ff0dd); }
.an-portal-paso.an-hecho { cursor: pointer; color: var(--an-tono-eafffb); }
.an-portal-paso.an-hecho .an-portal-paso-num { background: var(--an-tono-2bb3a3); color: #fff; }
vaadin-button.an-portal-asis-cerrar { color: var(--an-tono-eafffb); margin-left: 0.4rem; }

.an-portal-asis-centro { flex: 1; min-height: 0; display: flex; gap: 0; overflow: hidden; background: var(--an-fondo); }
.an-portal-asis-cuerpo { flex: 1; min-width: 0; overflow: auto; padding: 1.6rem 1.8rem; }
.an-portal-asis-lateral { width: 360px; flex: none; overflow: auto; padding: 1.4rem; background: var(--an-superficie); border-left: 1px solid var(--an-borde);
  display: flex; flex-direction: column; gap: 1rem; }
.an-portal-entrar { animation: an-portal-entrar 0.3s ease-out; display: flex; flex-direction: column; gap: 1.3rem; }
@keyframes an-portal-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.an-portal-pregunta-cab { display: flex; gap: 1rem; align-items: center; }
.an-portal-pregunta-icono { width: 3.2rem; height: 3.2rem; padding: 0.75rem; box-sizing: border-box; border-radius: 18px; flex: none;
  background: color-mix(in srgb, var(--an-turquesa) 15%, transparent); color: var(--an-turquesa); }
.an-portal-pregunta-cab > div { display: flex; flex-direction: column; gap: 0.25rem; }
.an-portal-pregunta { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--an-texto); letter-spacing: -0.01em; line-height: 1.1; }
.an-portal-explicacion { font-size: 1.1rem; color: var(--an-texto-suave); }

.an-portal-incidencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.an-portal-inc {
  --an-inc-color: var(--an-tono-2bb3a3);
  display: flex; align-items: center; gap: 1rem; min-height: 6rem; padding: 1.1rem 1.3rem; border-radius: 22px; cursor: pointer;
  background: var(--an-superficie); border: 2px solid var(--an-borde); box-shadow: var(--an-sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.an-portal-inc:hover { transform: translateY(-3px); border-color: var(--an-turquesa); box-shadow: 0 18px 36px -16px rgba(var(--an-tono-0f2e35-rgb), 0.35); }
.an-portal-inc.an-activo { border-color: var(--an-turquesa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--an-turquesa) 25%, transparent); }
.an-portal-inc-circulo { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800;
  color: #fff; background: var(--an-inc-color); text-shadow: 0 1px 2px rgba(0,0,0,0.35); box-shadow: inset 0 -6px 12px rgba(0,0,0,0.15); }
.an-portal-inc-nombre { font-size: 1.25rem; font-weight: 700; color: var(--an-texto); line-height: 1.2; }

/* Calendario grande */
.an-cr { background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 24px; padding: 1rem 1.2rem 1.3rem; box-shadow: var(--an-sombra); }
.an-cr-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.an-cr-titulo { font-size: 1.15rem; font-weight: 700; color: var(--an-texto); }
vaadin-button.an-cr-flecha { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--an-hover); }
vaadin-button.an-cr-flecha vaadin-icon { width: 1.6rem; height: 1.6rem; }
.an-cr-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.an-cr-mes-nombre { display: block; text-align: center; font-weight: 800; font-size: 1.15rem; color: var(--an-texto); margin-bottom: 0.5rem; }
.an-cr-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.an-cr-semana { text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--an-texto-suave); padding-bottom: 0.2rem; }
.an-cr-dia {
  position: relative; aspect-ratio: 1; min-height: 2.9rem; border-radius: 14px; display: grid; place-items: center; cursor: pointer; user-select: none;
  font-size: 1.15rem; font-weight: 650; color: var(--an-texto); background: var(--an-hover); transition: transform 0.1s ease, background 0.1s ease;
}
.an-cr-dia:hover { transform: scale(1.06); background: color-mix(in srgb, var(--an-turquesa) 22%, var(--an-hover)); }
.an-cr-finde { color: var(--an-texto-suave); background: transparent; }
.an-cr-festivo { color: #c0392b; background: repeating-linear-gradient(135deg, rgba(229, 83, 75, 0.10) 0 6px, transparent 6px 12px); }
.an-cr-pasado { opacity: 0.45; }
.an-cr-hoy { box-shadow: inset 0 0 0 2px var(--an-turquesa); }
.an-cr-elegido { background: color-mix(in srgb, var(--an-turquesa) 30%, var(--an-superficie)); color: var(--an-texto); border-radius: 6px; opacity: 1; }
.an-cr-ini, .an-cr-fin { background: linear-gradient(135deg, var(--an-tono-2bb3a3), var(--an-tono-0f8f82)); color: #fff; border-radius: 14px; box-shadow: 0 8px 18px -8px rgba(var(--an-tono-0f8f82-rgb), 0.8); transform: scale(1.04); }
.an-cr-punto { position: absolute; bottom: 5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; }
.an-cr-aceptado { background: #1a9a2a; }
.an-cr-denegado { background: #d33a32; }
.an-cr-pendiente { background: #e07b10; }
.an-cr-muestra-festivo { background: repeating-linear-gradient(135deg, rgba(229, 83, 75, 0.6) 0 3px, transparent 3px 6px); border-radius: 3px; }
.an-portal-leyenda { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.an-portal-leyenda-item { display: flex; align-items: center; gap: 0.55rem; color: var(--an-texto-suave); font-size: 0.95rem; }
.an-portal-leyenda-item .an-cr-punto { position: static; margin: 0; width: 12px; height: 12px; }

/* Lateral: lo elegido */
.an-portal-lat-incidencia { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-turquesa); }
.an-portal-lat-fechas { font-size: 1.35rem; font-weight: 800; color: var(--an-texto); line-height: 1.25; }
.an-portal-lat-pista { font-size: 0.98rem; color: var(--an-texto-suave); background: var(--an-hover); padding: 0.7rem 0.9rem; border-radius: 12px; }
.an-portal-lat-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.5rem 0.5rem; color: var(--an-texto-suave); font-size: 1.05rem; }
.an-portal-lat-vacio vaadin-icon { width: 3rem; height: 3rem; color: var(--an-turquesa); animation: an-portal-toca 1.6s ease-in-out infinite; }
@keyframes an-portal-toca { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.an-portal-grupo { display: flex; flex-direction: column; gap: 0.5rem; }
.an-portal-grupo-titulo { font-weight: 700; color: var(--an-texto); font-size: 1rem; }
.an-portal-grupo-opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.an-portal-periodo {
  flex: 1 1 0; min-width: 5.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.8rem 0.4rem; border-radius: 16px; cursor: pointer;
  border: 2px solid var(--an-borde); background: var(--an-superficie); font-weight: 650; color: var(--an-texto); font-size: 0.98rem; text-align: center;
}
.an-portal-periodo vaadin-icon { width: 1.7rem; height: 1.7rem; color: var(--an-texto-suave); }
.an-portal-periodo:hover { border-color: var(--an-turquesa); }
.an-portal-periodo.an-activo { border-color: var(--an-turquesa); background: color-mix(in srgb, var(--an-turquesa) 14%, var(--an-superficie)); }
.an-portal-periodo.an-activo vaadin-icon { color: var(--an-turquesa); }
.an-portal-cifras { display: flex; gap: 0.7rem; }
.an-portal-cifra { flex: 1; border-radius: 18px; padding: 0.9rem 1rem; display: flex; flex-direction: column; background: var(--an-hover); }
.an-portal-cifra-valor { font-size: 2.2rem; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; color: var(--an-texto); }
.an-portal-cifra-texto { font-size: 0.92rem; color: var(--an-texto-suave); margin-top: 0.2rem; }
.an-portal-cifra-pide { background: linear-gradient(135deg, color-mix(in srgb, var(--an-turquesa) 22%, var(--an-superficie)), var(--an-hover)); }
.an-portal-cifra-pide .an-portal-cifra-valor { color: var(--an-tono-0f8f82); }
.an-portal-cifra-queda .an-portal-cifra-valor { color: #1a9a2a; }
.an-portal-cifra-negativa .an-portal-cifra-valor { color: #d33a32; }
.an-portal-aviso { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0.95rem; border-radius: 14px; font-size: 0.98rem; line-height: 1.4;
  background: #fff8ec; color: #3d2a08; border: 1px solid #f3c27a; }
.an-portal-aviso vaadin-icon { flex: none; color: #e07b10; width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; }
html[theme~="dark"] .an-portal-aviso { background: #2a2110; color: #f5deb3; border-color: #7a5a22; }

/* Paso 3 */
.an-portal-enviar { display: flex; flex-direction: column; gap: 1rem; }
.an-portal-resumen { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1.4rem 1.6rem; border-radius: 24px;
  background: var(--an-superficie); border: 1px solid var(--an-borde); box-shadow: var(--an-sombra); border-left: 8px solid var(--an-turquesa); }
.an-portal-resumen-textos { display: flex; flex-direction: column; gap: 0.25rem; }
.an-portal-resumen-incidencia { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-turquesa); }
.an-portal-resumen-fechas { font-size: 1.5rem; font-weight: 800; color: var(--an-texto); }
.an-portal-resumen-periodo { color: var(--an-texto-suave); font-size: 1.05rem; }
.an-portal-resumen .an-portal-cifras { min-width: 280px; }
.an-portal-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; }
.an-portal-persona { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; border-radius: 18px; background: var(--an-superficie);
  border: 2px solid var(--an-borde); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.an-portal-persona:hover { transform: translateY(-2px); border-color: var(--an-turquesa); }
.an-portal-persona.an-activo { border-color: var(--an-turquesa); background: color-mix(in srgb, var(--an-turquesa) 10%, var(--an-superficie)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--an-turquesa) 20%, transparent); }
.an-portal-avatar { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  color: var(--an-tono-05231f); background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3)); }
.an-portal-persona-nombre { font-size: 1.12rem; font-weight: 700; color: var(--an-texto); }
vaadin-text-area.an-portal-nota { --vaadin-input-field-height: auto; font-size: 1.1rem; min-height: 6rem; }
vaadin-text-area.an-portal-nota::part(input-field) { border-radius: 16px; min-height: 5.5rem; }
.an-gantt-lienzo.an-portal-gantt { height: auto; min-height: 0; max-height: 340px; flex: none; border-radius: 18px; }

.an-portal-asis-pie { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.6rem;
  background: var(--an-superficie); border-top: 1px solid var(--an-borde); }
vaadin-button.an-portal-boton-siguiente { margin-left: auto; height: 3.8rem; padding: 0 2rem; border-radius: 999px; font-size: 1.2rem; font-weight: 750;
  box-shadow: 0 14px 30px -14px rgba(var(--an-tono-0f8f82-rgb), 0.8); }
vaadin-button.an-portal-boton-atras { height: 3.4rem; font-size: 1.1rem; }

/* Enviado */
.an-portal-ok { height: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.an-portal-ok-icono { width: 7rem; height: 7rem; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3) 55%, var(--an-tono-0f8f82)); box-shadow: 0 0 0 14px rgba(var(--an-tono-2bb3a3-rgb), 0.15), 0 24px 50px -16px rgba(var(--an-tono-0f8f82-rgb), 0.8);
  animation: an-portal-ok 0.6s cubic-bezier(.2, 1.4, .4, 1); }
.an-portal-ok-icono vaadin-icon { width: 3.6rem; height: 3.6rem; }
@keyframes an-portal-ok { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.an-portal-ok-titulo { font-size: 2.2rem; font-weight: 850; color: var(--an-texto); }
.an-portal-ok-texto { font-size: 1.2rem; color: var(--an-texto-suave); max-width: 32rem; line-height: 1.5; }

/* Diagrama: lo que se pide y compañeros ausentes */
.an-gantt-pendiente { background: repeating-linear-gradient(135deg, #ffd27a 0 6px, #f39a38 6px 12px); color: #3d2a08;
  box-shadow: 0 0 0 2px rgba(243, 154, 56, 0.45), 0 6px 14px -6px rgba(243, 154, 56, 0.9); animation: an-gantt-latido 1.8s ease-in-out infinite; }
@keyframes an-gantt-latido { 0%, 100% { filter: none; } 50% { filter: brightness(1.12); } }
.an-gantt-ausente { background: linear-gradient(135deg, var(--an-tono-b8c6cc), var(--an-tono-8fa1a8)); color: var(--an-tono-13232a); }

@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
  .an-portal-hero { padding: 1.6rem; border-radius: 22px; }
  vaadin-button.an-portal-pedir { width: 100%; }
  .an-portal-asis-centro { flex-direction: column; overflow: auto; }
  .an-portal-asis-cuerpo { overflow: visible; padding: 1.1rem; }
  .an-portal-asis-lateral { width: auto; border-left: 0; border-top: 1px solid var(--an-borde); overflow: visible; }
  .an-cr-meses { grid-template-columns: 1fr; }
  .an-cr-mes:nth-child(2) { display: none; }
  .an-portal-pasos .an-portal-paso > span:not(.an-portal-paso-num) { display: none; }
  .an-portal-paso { padding: 0.3rem; }
  .an-portal-asis-textos h2 { font-size: 1.2rem; }
}

/* Aviso de mensajes: aceptar o denegar la solicitud desde el propio aviso (2026-10-10) */
.an-aviso-botones vaadin-button.an-aviso-aceptar { color: #062b12; font-weight: 750; background: linear-gradient(120deg, #9df2a8, #2fbf5a);
  box-shadow: 0 6px 18px rgba(47, 191, 90, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.an-aviso-botones vaadin-button.an-aviso-denegar { color: #ffd2cf; background: rgba(229, 83, 75, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 138, 128, 0.45); }
.an-aviso-con-solicitud .an-aviso-abrir { color: var(--an-tono-7ff0dd); background: rgba(var(--an-tono-7ff0dd-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--an-tono-7ff0dd-rgb), 0.3); font-weight: 600; }

/* Portal: deshacer el envio en 15 s */
@property --an-deshacer-p { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.an-portal-deshacer { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.8rem; padding: 1rem 1.3rem; border-radius: 20px;
  background: var(--an-superficie); border: 1px solid #f3c27a; box-shadow: 0 14px 30px -18px rgba(224, 123, 16, 0.6); text-align: left; }
.an-portal-deshacer-aro { position: relative; flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: conic-gradient(#f39a38 var(--an-deshacer-p), color-mix(in srgb, #f39a38 15%, transparent) 0); display: grid; place-items: center; }
.an-portal-deshacer-aro::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--an-superficie); }
.an-portal-deshacer-aro.an-corriendo { animation: an-deshacer var(--an-deshacer-ms, 15s) linear forwards; }
@keyframes an-deshacer { to { --an-deshacer-p: 0%; } }
.an-portal-deshacer-seg { position: relative; font-size: 1.6rem; font-weight: 850; color: #b86200; font-variant-numeric: tabular-nums; }
.an-portal-deshacer-textos { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.an-portal-deshacer-texto { font-size: 1.05rem; color: var(--an-texto); font-weight: 600; }
vaadin-button.an-portal-deshacer-boton { border-radius: 999px; font-weight: 750; color: #fff; background: linear-gradient(135deg, #f7b25c, #e07b10);
  box-shadow: 0 10px 22px -10px rgba(224, 123, 16, 0.8); }
.an-portal-deshacer-fin { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; padding: 0.8rem 1.1rem; border-radius: 16px;
  background: var(--an-hover); color: var(--an-texto-suave); font-size: 1rem; }
.an-portal-deshacer-fin vaadin-icon { color: #2b7bd3; }
.an-portal-pasos[hidden] + vaadin-button.an-portal-asis-cerrar { margin-left: auto; }

/* Destinatarios por departamento (asistente de configuración, paso Mensajes): el selector ocupa todo el ancho */
.an-asis-rapida-dato:has(> .an-asis-destino-dep) { grid-template-columns: minmax(0, 1fr) auto; }
.an-asis-destino-dep { width: 100%; }
.an-asis-destino-siempre { margin-top: 0.4rem; }

/* Aviso con solicitud de permiso: botones en dos filas ordenadas (petición del usuario: «más tabulado»).
   Arriba Más tarde · Ir a Mensajería · Abrir el mensaje a partes iguales; abajo Denegar | Aceptar, más grandes, mitad y mitad */
.an-aviso-con-solicitud .an-aviso-botones { gap: 0.5rem; justify-content: stretch; }
.an-aviso-con-solicitud .an-aviso-botones vaadin-button { flex: 1 1 36%; min-width: 0; justify-content: center; padding-inline: 0.6rem; }
.an-aviso-con-solicitud .an-aviso-botones vaadin-button.an-aviso-despues { flex: 1 1 20%; box-shadow: inset 0 0 0 1px rgba(var(--an-tono-e6f7f4-rgb), 0.22); color: rgba(var(--an-tono-e6f7f4-rgb), 0.85); }
.an-aviso-con-solicitud .an-aviso-botones vaadin-button.an-aviso-denegar,
.an-aviso-con-solicitud .an-aviso-botones vaadin-button.an-aviso-aceptar { flex: 1 1 calc(50% - 0.25rem); height: 2.6rem; margin-top: 0.35rem; font-size: var(--lumo-font-size-m); }

/* Mensajería: recibidos sin leer en negrita, con una marca a la izquierda (cuadra con el contador del menú) */
vaadin-grid::part(an-sin-leer) { font-weight: 750; }
vaadin-grid::part(an-sin-leer first-column-cell) { box-shadow: inset 4px 0 0 #f39a38; }

/* Aviso de mensajes: «Seguirá sin leer hasta que lo abras…» */
.an-aviso-nota { display: flex; align-items: center; gap: 0.4rem; font-size: var(--lumo-font-size-xs); color: rgba(var(--an-tono-e6f7f4-rgb), 0.7); }
.an-aviso-nota vaadin-icon { flex: none; width: 0.95rem; height: 0.95rem; color: #ffc27a; }

/* Empresa cliente junto al botón del menú (de momento fija; vendrá de la licencia) */
.an-barra-empresa {
    flex: none; padding-right: 0.9rem; margin-right: 0.2rem; border-right: 1px solid var(--lumo-contrast-10pct);
    font-size: 1.35rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1; color: var(--an-texto); white-space: nowrap;
}
@media (max-width: 600px) { .an-barra-empresa { font-size: 1rem; letter-spacing: 0.06em; padding-right: 0.5rem; } }

/* Portal: deshacer también desde «Mis solicitudes» (la última enviada, mientras dura el plazo) */
.an-portal-sol-deshacer { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.55rem; }
.an-portal-sol-deshacer .an-portal-deshacer-aro { width: 2.8rem; height: 2.8rem; }
.an-portal-sol-deshacer .an-portal-deshacer-aro::before { inset: 5px; }
.an-portal-sol-deshacer .an-portal-deshacer-seg { font-size: 1.05rem; }

/* Sacar un informe (Empleados › Informes): período con atajos y avance del cálculo */
.an-sacar-informe-form { display: flex; flex-direction: column; gap: 0.9rem; }
.an-sacar-informe-para { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.35rem 0.8rem;
  border-radius: 999px; font-weight: 650; color: var(--an-texto); background: color-mix(in srgb, var(--an-turquesa) 14%, transparent); }
.an-sacar-informe-para vaadin-icon { width: 1.05rem; height: 1.05rem; color: var(--an-turquesa); }
/* Qué calcula el informe y qué tiene en cuenta */
.an-sacar-informe-info { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem 1rem; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--an-turquesa) 11%, var(--an-superficie, #fff)) 0%, var(--an-superficie, #fff) 70%);
  border: 1px solid color-mix(in srgb, var(--an-turquesa) 28%, transparent); box-shadow: 0 6px 18px rgba(var(--an-tono-0f2e35-rgb), 0.07); }
.an-info-arriba { display: flex; gap: 0.8rem; align-items: flex-start; }
.an-info-icono { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--an-turquesa, var(--an-tono-2bb3a3)), var(--an-petroleo, var(--an-tono-12343b))); box-shadow: 0 4px 12px rgba(var(--an-tono-12343b-rgb), 0.25); }
.an-info-icono vaadin-icon { width: 1.25rem; height: 1.25rem; }
.an-info-textos { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.an-info-titulo { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--an-turquesa-oscuro, var(--an-tono-1d7f78)); }
.an-info-resumen { font-size: var(--lumo-font-size-s); line-height: 1.45; color: var(--an-texto); }
/* Qué hay que tener configurado: desplegable con pasos numerados */
.an-info-configurar { margin: 0; border-top: 1px solid color-mix(in srgb, var(--an-turquesa) 22%, transparent); padding-top: 0.25rem; }
.an-info-configurar::part(summary) { padding: 0.2rem 0; min-height: 2rem; }
.an-info-pasos-titulo { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--an-turquesa-oscuro, var(--an-tono-1d7f78)); }
.an-info-pasos-titulo vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-info-pasos-titulo > span:last-child { min-width: 1.15rem; padding: 0 0.35rem; border-radius: 999px; text-align: center; font-size: 0.66rem;
  line-height: 1.1rem; color: #fff; background: var(--an-turquesa, var(--an-tono-2bb3a3)); letter-spacing: 0; }
.an-info-pasos { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.15rem 0 0.25rem; max-height: 15rem; overflow-y: auto; }
.an-info-paso { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.55rem; align-items: start; }
.an-info-paso-num { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.68rem; font-weight: 800;
  color: var(--an-turquesa-oscuro, var(--an-tono-1d7f78)); background: color-mix(in srgb, var(--an-turquesa) 16%, transparent); }
.an-info-paso-texto { font-size: 0.8rem; line-height: 1.45; color: var(--an-texto); }
.an-sacar-informe-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.an-sacar-informe-fechas vaadin-date-picker { width: 100%; }
.an-sacar-informe-atajos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: -0.4rem; }
.an-sacar-informe-atajos vaadin-button { margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--an-turquesa) 9%, transparent); }
.an-sacar-informe-avance { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.2rem 0.2rem; }
.an-sacar-informe-texto { color: var(--an-texto-suave); font-weight: 600; }
@media (max-width: 520px) { .an-sacar-informe-fechas { grid-template-columns: 1fr; } }

/* Informes calculándose en segundo plano: tarjetas abajo a la derecha (se sigue trabajando mientras tanto) */
/* A la altura de la barra de selección de los listados (petición del usuario) */
.an-informes-en-curso { position: fixed; right: 1.25rem; bottom: 2.25rem; z-index: 900; display: flex; flex-direction: column;
  align-items: flex-end; gap: 0.5rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.an-informes-en-curso > * { width: 100%; box-sizing: border-box; }
/* Cabecera desplegada: icono, «Informes» con el número en píldora, resumen, «Cerrar todos» y plegar */
.an-informes-cabecera { pointer-events: auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.45rem 0.45rem 0.5rem;
  border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--an-tono-1a4a52) 0%, var(--an-petroleo, var(--an-tono-12343b)) 55%, var(--an-tono-0c2429) 100%);
  border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.35); box-shadow: 0 14px 34px rgba(var(--an-tono-0c2429-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.an-informes-cabecera-icono { flex: none; width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--an-turquesa, var(--an-tono-2bb3a3)), var(--an-tono-1d7f78)); box-shadow: 0 4px 10px rgba(var(--an-tono-2bb3a3-rgb), 0.35); }
.an-informes-cabecera-icono vaadin-icon { width: 1rem; height: 1rem; color: #fff; }
.an-informes-cabecera-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.an-informes-cabecera-textos > div { display: flex; align-items: center; gap: 0.4rem; }
.an-informes-titulo { font-weight: 750; font-size: var(--lumo-font-size-s); letter-spacing: 0.01em; }
.an-informes-cuantos { min-width: 1.25rem; padding: 0 0.4rem; border-radius: 999px; text-align: center; font-size: 0.7rem; font-weight: 800;
  line-height: 1.15rem; color: var(--an-tono-0c2429); background: var(--an-tono-7fe3d6); }
.an-informes-resumen { font-size: 0.7rem; color: rgba(var(--an-tono-cfeeea-rgb), 0.85); }
/* Con la barra de selección del listado a la vista, justo encima de ella para no taparla */
body:has(.an-barra-seleccion:not([hidden])) .an-informes-en-curso { bottom: 6rem; }
.an-informes-en-curso { transition: bottom .2s ease; }
.an-informes-cabecera vaadin-button { margin: 0; color: var(--an-tono-cfeeea); }
.an-informes-cerrar-todos { border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-weight: 600; }
.an-informes-cerrar-todos:hover { background: rgba(255, 255, 255, 0.16); }
.an-informes-plegar { width: 2rem; height: 2rem; min-width: 2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.an-informes-plegar:hover { background: rgba(255, 255, 255, 0.2); }
/* Iconos de los informes superpuestos: solo plegada */
.an-informes-miniaturas { display: none; flex: none; align-items: center; padding-left: 0.4rem; }
.an-informes-mini { position: relative; width: 1.75rem; height: 1.75rem; margin-left: -0.55rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--an-turquesa, var(--an-tono-2bb3a3)), var(--an-tono-1d6f6a)); border: 2px solid var(--an-tono-12343b); }
.an-informes-mini vaadin-icon { width: 0.85rem; height: 0.85rem; }
.an-informes-mini::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 2px solid var(--an-tono-12343b); background: var(--an-tono-7fe3d6); }
.an-informes-mini.an-mini-listo::after { background: #3ccf4e; }
.an-informes-mini.an-mini-aviso::after { background: #f0a040; }
.an-informes-mini.an-mini-calculando::after { background: var(--an-tono-7fe3d6); animation: an-mini-pulso 1.2s ease-in-out infinite; }
@keyframes an-mini-pulso { 50% { opacity: 0.35; } }
/* Plegada: una cápsula compacta a la derecha con los iconos y el resumen; se despliega pulsándola */
.an-informes-plegado .an-informes-cabecera { width: auto; max-width: 100%; border-radius: 999px; padding: 0.35rem 0.4rem 0.35rem 0.55rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease; }
.an-informes-plegado .an-informes-cabecera:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--an-tono-0c2429-rgb), 0.42); }
.an-informes-plegado .an-informes-cabecera-icono { display: none; }
.an-informes-en-curso.an-informes-plegado { width: auto; max-width: calc(100vw - 2rem); }
.an-informes-plegado .an-informes-resumen { white-space: nowrap; }
.an-informes-plegado .an-informes-miniaturas { display: flex; }
/* Las tarjetas: la más nueva arriba; si no caben, se desplaza dentro y nunca tapa la pantalla */
.an-informes-lista { pointer-events: auto; display: flex; flex-direction: column; gap: 0.6rem; max-height: calc(100vh - 19rem);
  overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem 0.35rem 0.5rem; margin: -0.25rem -0.35rem -0.5rem; }
@media (max-width: 640px) {
  .an-informes-en-curso { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; }
  .an-informes-lista { max-height: 40vh; }
}
/* Terminadas, más bajas: resultado y caducidad a la izquierda, «Cerrar / Ver» a la derecha */
.an-informe-tarea.an-informe-tarea-listo, .an-informe-tarea.an-informe-tarea-aviso { display: grid; grid-template-columns: 1fr auto;
  column-gap: 0.75rem; row-gap: 0.15rem; padding: 0.7rem 0.85rem; }
.an-informe-tarea-listo > .an-informe-tarea-cabecera, .an-informe-tarea-aviso > .an-informe-tarea-cabecera { grid-column: 1 / -1; margin-bottom: 0.25rem; }
.an-informe-tarea-listo > .an-informe-tarea-texto, .an-informe-tarea-aviso > .an-informe-tarea-texto { grid-column: 1; }
.an-informe-tarea-listo > .an-informe-tarea-caduca, .an-informe-tarea-aviso > .an-informe-tarea-caduca { grid-column: 1; }
.an-informe-tarea-listo > .an-informe-tarea-botones, .an-informe-tarea-aviso > .an-informe-tarea-botones { grid-column: 2; grid-row: 2 / span 2;
  align-self: center; }
.an-informe-tarea { pointer-events: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 16px;
  background: var(--an-superficie, #fff); color: var(--an-texto); box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.08), 0 16px 40px rgba(var(--an-tono-0f2e35-rgb), 0.22);
  border-left: 4px solid var(--an-turquesa); animation: an-tarea-entra .25s ease-out both; }
@keyframes an-tarea-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.an-informe-tarea-cabecera { display: flex; align-items: center; gap: 0.65rem; }
.an-informe-tarea-icono { position: relative; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--an-turquesa, var(--an-tono-2bb3a3)), var(--an-petroleo, var(--an-tono-12343b))); box-shadow: 0 4px 10px rgba(var(--an-tono-12343b-rgb), 0.25); }
.an-informe-tarea-tipo { width: 1.2rem; height: 1.2rem; }
/* Insignia del estado sobre el icono del tipo: verde listo, naranja aviso */
.an-informe-tarea-insignia { position: absolute; right: -5px; bottom: -5px; width: 1.05rem; height: 1.05rem; border-radius: 50%; display: grid;
  place-items: center; color: #fff; background: #1a9a2a; border: 2px solid var(--an-superficie, #fff); }
.an-informe-tarea-insignia vaadin-icon { width: 0.6rem; height: 0.6rem; }
.an-informe-tarea-aviso .an-informe-tarea-insignia { background: #e07b10; }
/* Análisis de un listado: violeta y con su etiqueta, para distinguirlo de los informes calculados */
.an-informe-tarea.an-informe-tarea-analisis { border-left-color: #7c5cff; }
.an-informe-tarea-analisis .an-informe-tarea-icono { background: linear-gradient(135deg, #9b7bff, #4b2fb5); box-shadow: 0 4px 10px rgba(75, 47, 181, 0.3); }
.an-informe-tarea-analisis vaadin-progress-bar::part(value) { background: #7c5cff; }
.an-informe-tarea-etiqueta { display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; vertical-align: 0.1em;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #7c5cff; }
.an-informes-mini.an-mini-analisis { background: linear-gradient(135deg, #9b7bff, #4b2fb5); }
.an-informe-tarea-textos { display: flex; flex-direction: column; min-width: 0; }
.an-informe-tarea-titulo { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-informe-tarea-detalle { font-size: var(--lumo-font-size-xs); color: var(--an-texto-suave); line-height: 1.35; }
.an-informe-tarea { flex: none; }
.an-informe-tarea vaadin-progress-bar { margin: 0; }
.an-informe-tarea-texto { font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); }
.an-informe-tarea-caduca { display: flex; align-items: center; gap: 0.35rem; font-size: var(--lumo-font-size-xxs); color: var(--an-texto-suave); }
.an-informe-tarea-caduca::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.55; }
.an-informe-tarea-botones { display: flex; justify-content: flex-end; gap: 0.35rem; }
/* Título de un apartado en un submenú de acciones (Informes › Presencia, Horarios…) */
.an-menu-tema { font-size: var(--lumo-font-size-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--an-turquesa, var(--an-tono-2bb3a3)); }
vaadin-context-menu-item[disabled]:has(.an-menu-tema) { opacity: 1; min-height: 1.6rem; cursor: default; }
.an-informe-tarea-botones vaadin-button { margin: 0; }
.an-informe-tarea-listo { border-left-color: #1a9a2a; }
.an-informe-tarea-aviso { border-left-color: #e07b10; }

/* Botón «Informes» de la cabecera de los listados y nota de las opciones que necesitan selección */
.an-grupos-cabecera { display: flex; gap: 0.3rem; }
.an-grupos-cabecera:empty { display: none; }
.an-boton-grupo { font-weight: 600; }
.an-menu-nota { display: block; margin-inline-start: 2.1rem; margin-top: -0.15rem; font-size: 0.8rem; color: var(--an-texto-suave); }

/* ---------------------------------------------------------------- fórmula del horario (FormulaHorarioDialog) */
.an-horario-formula { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.an-formula-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .an-formula-cuerpo { grid-template-columns: 1fr; } }
.an-formula-izquierda { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.an-formula-derecha { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.an-formula-nota { font-size: 0.9rem; color: var(--an-texto-suave); line-height: 1.45; }
/* El editor crece hasta que «Probar» acaba a la altura de «Cómo se escribe» (columna de la derecha; petición del usuario) */
vaadin-text-area.an-formula-editor { flex: 1 1 auto; min-height: 9rem; }
.an-formula-izquierda > .an-ficha-seccion:last-child, .an-formula-derecha > .an-ficha-seccion { margin-bottom: 0; }
vaadin-text-area.an-formula-editor::part(input-field) { align-items: stretch; }
vaadin-text-area.an-formula-editor textarea {
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-size: 0.92rem; line-height: 1.55; tab-size: 4;
}
.an-formula-herramientas { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.an-formula-herramientas vaadin-select { min-width: 18rem; }
.an-formula-estado { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; border-radius: 12px; }
.an-formula-estado:empty { display: none; }
.an-formula-estado.an-formula-ok, .an-formula-estado.an-formula-error { padding: 0.6rem 0.8rem; }
.an-formula-ok { color: #12642a; background: color-mix(in srgb, #1a9a2a 12%, transparent); }
.an-formula-error { color: #8a2420; background: color-mix(in srgb, #d33a32 12%, transparent); }
html[theme~="dark"] .an-formula-ok { color: #8fe0a0; }
html[theme~="dark"] .an-formula-error { color: #ffb3ad; }
.an-formula-estado vaadin-icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; }
.an-formula-lista { display: flex; flex-direction: column; gap: 0.3rem; }
.an-formula-fila { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.7rem; align-items: baseline; font-size: 0.88rem;
  color: var(--an-texto); }
.an-formula-fila-resultado .an-formula-codigo { background: linear-gradient(135deg, var(--an-tono-12343b), var(--an-tono-1b6b6a)); color: var(--an-tono-eafffb); }
.an-formula-codigo { font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-size: 0.82rem; padding: 0.12rem 0.45rem;
  border-radius: 7px; background: color-mix(in srgb, var(--an-turquesa, var(--an-tono-2bb3a3)) 13%, transparent); color: var(--an-texto); white-space: nowrap; justify-self: start; }
.an-formula-probar-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 0.6rem; align-items: end; }
.an-formula-probar-campos > * { min-width: 0; }
@media (max-width: 1200px) { .an-formula-probar-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-formula-resultado { margin-inline-start: 0.8rem; font-weight: 700; color: var(--an-texto); }
.an-formula-resultado-error { color: #b3261e; font-weight: 600; }
html[theme~="dark"] .an-formula-resultado-error { color: #ffb3ad; }

/* Ventana del análisis: con qué datos se hará («Se analizarán: …») */
.an-analisis-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-top: 0.6rem; padding: 0.55rem 0.8rem;
  border-radius: 12px; font-size: 0.9rem; color: var(--an-texto); background: color-mix(in srgb, var(--an-turquesa, var(--an-tono-2bb3a3)) 10%, transparent); }
.an-analisis-datos vaadin-icon { width: 1rem; height: 1rem; color: var(--an-turquesa, var(--an-tono-2bb3a3)); }
.an-analisis-datos-nota { flex-basis: 100%; padding-inline-start: 1.5rem; font-size: 0.82rem; font-style: italic; color: var(--an-texto-suave); }

/* Pestaña «Fórmula» de la ficha de Horarios */
.an-formula { padding: 0.2rem 0.1rem; }
.an-formula-sin-horario { display: flex; gap: 0.7rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 16px; font-size: 1rem;
  color: var(--an-texto-suave); background: var(--an-superficie); border: 1px dashed var(--an-borde); }
.an-formula-sin-horario vaadin-icon { color: var(--an-turquesa, var(--an-tono-2bb3a3)); }

/* ---------------------------------------------------------------- aviso «Ya tienes este análisis» (mismo estilo que los avisos de mensajes) */
vaadin-notification-card.an-aviso-repetido::part(overlay) { background: transparent; box-shadow: none; padding: 0; border-radius: 22px; }
vaadin-notification-card.an-aviso-repetido::part(content) { padding: 0; }
vaadin-notification-card.an-aviso-repetido { width: min(500px, calc(100vw - 2rem)); }
.an-aviso-repetido-tarjeta {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1rem; padding: 1.25rem 1.3rem 1.1rem;
    box-sizing: border-box; border-radius: 22px; color: var(--an-tono-e6f7f4); animation: an-repetido-entra 0.28s ease-out;
    background:
        radial-gradient(circle at 0% 0%, rgba(167, 139, 250, 0.22), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(var(--an-tono-2bb3a3-rgb), 0.16), transparent 50%),
        linear-gradient(160deg, rgba(var(--an-tono-0c262c-rgb), 0.97) 0%, rgba(var(--an-tono-0f343b-rgb), 0.97) 55%, rgba(var(--an-tono-124047-rgb), 0.97) 100%);
    backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.40), 0 0 26px rgba(139, 92, 246, 0.25), 0 22px 50px rgba(var(--an-tono-041216-rgb), 0.55);
}
.an-aviso-repetido-tarjeta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image: linear-gradient(rgba(196, 181, 253, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
@keyframes an-repetido-entra { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.an-aviso-repetido-icono {
    position: relative; width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(135deg, #8b5cf6, var(--an-tono-2bb3a3)); box-shadow: 0 0 18px rgba(139, 92, 246, 0.45);
}
.an-aviso-repetido-icono vaadin-icon { color: #fff; width: 1.5rem; height: 1.5rem; }
.an-aviso-repetido-textos { position: relative; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.an-aviso-repetido-titulo { font-size: 1.15rem; font-weight: 750; color: #fff; }
.an-aviso-repetido-nombre { font-weight: 650; color: #c4b5fd; }
.an-aviso-repetido-texto { font-size: 0.93rem; line-height: 1.45; color: var(--an-tono-cfe9e5); }
.an-aviso-repetido-botones { position: relative; grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.6rem; }
.an-aviso-repetido-cerrar { color: var(--an-tono-e6f7f4); }
.an-aviso-repetido-ver { background: linear-gradient(135deg, #8b5cf6, var(--an-tono-2bb3a3)); color: #fff; }

/* La tarjeta que ya existe «late» al intentar sacar otra igual */
.an-informe-tarea.an-informe-tarea-resaltada { animation: an-tarea-latido 0.65s ease-in-out 4; }
@keyframes an-tarea-latido {
    0%, 100% { box-shadow: var(--an-sombra); transform: none; }
    50% { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.75), 0 0 24px rgba(139, 92, 246, 0.55); transform: scale(1.02); }
}

/* Ficha de Horarios: las pestañas llenan el alto; en «Horario», el recuadro de los períodos crece hasta abajo */
.an-hor-pestanas::part(content) { display: flex; flex-direction: column; min-height: 0; }
.an-hor-pestana-horario { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.an-hor-pestana-horario > .an-ficha-seccion:last-child { flex: 1 1 auto; margin-bottom: 0; }

/* ================================================================ avisos rápidos (Aviso) — diseño AutoNET, día y noche */
vaadin-notification-card.an-toast::part(overlay) { background: transparent; box-shadow: none; padding: 0; border-radius: 18px; }
vaadin-notification-card.an-toast::part(content) { padding: 0; }
vaadin-notification-card.an-toast { width: min(460px, calc(100vw - 2rem)); }
.an-toast-tarjeta {
    --an-toast-c1: var(--an-tono-2bb3a3); --an-toast-c2: var(--an-tono-12343b); --an-toast-brillo: rgba(var(--an-tono-2bb3a3-rgb), 0.35);
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem;
    padding: 0.85rem 0.8rem 0.95rem 0.95rem; box-sizing: border-box; border-radius: 18px; color: var(--an-tono-e6f7f4);
    width: min(440px, calc(100vw - 2rem));
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--an-toast-c1) 28%, transparent), transparent 50%),
        linear-gradient(160deg, rgba(var(--an-tono-0c262c-rgb), 0.97) 0%, rgba(var(--an-tono-0f343b-rgb), 0.97) 60%, rgba(var(--an-tono-124047-rgb), 0.97) 100%);
    backdrop-filter: blur(14px);
    border-top: 3px solid var(--an-toast-c1);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--an-toast-c1) 55%, transparent), 0 0 22px var(--an-toast-brillo), 0 18px 40px rgba(var(--an-tono-041216-rgb), 0.5);
    animation: an-toast-entra 0.25s ease-out;
}
@keyframes an-toast-entra { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.an-toast-ok { --an-toast-c1: #34c759; --an-toast-c2: #1a9a2a; --an-toast-brillo: rgba(52, 199, 89, 0.30); }
.an-toast-error { --an-toast-c1: #ff6b5e; --an-toast-c2: #d33a32; --an-toast-brillo: rgba(255, 107, 94, 0.32); }
.an-toast-atencion { --an-toast-c1: #f5b54a; --an-toast-c2: #f08a24; --an-toast-brillo: rgba(245, 181, 74, 0.30); }
.an-toast-info { --an-toast-c1: var(--an-tono-5ff2dc); --an-toast-c2: var(--an-tono-2bb3a3); --an-toast-brillo: rgba(var(--an-tono-2bb3a3-rgb), 0.30); }
.an-toast-icono {
    width: 2.3rem; height: 2.3rem; border-radius: 12px; display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, var(--an-toast-c1), var(--an-toast-c2)); box-shadow: 0 0 14px var(--an-toast-brillo);
}
.an-toast-icono vaadin-icon { width: 1.2rem; height: 1.2rem; color: #fff; }
.an-toast-texto { font-size: 0.95rem; line-height: 1.4; color: var(--an-tono-f2fbf9); }
.an-toast-cerrar { color: var(--an-tono-9fc9c3); align-self: start; }
.an-toast-tiempo {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left center;
    background: linear-gradient(90deg, var(--an-toast-c1), var(--an-toast-c2)); animation-name: an-toast-gasta; animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes an-toast-gasta { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ================================================================ confirmaciones (Confirmacion) */
/* Franja de color solo arriba (el usuario probó una capa desplazada a la derecha y prefirió esta) */
vaadin-dialog.an-confirmacion, vaadin-dialog-overlay.an-confirmacion { --an-conf-color: var(--an-tono-2bb3a3); --an-conf-lado: var(--an-tono-0e534b); }
vaadin-dialog.an-confirmacion.an-confirmacion-roja, vaadin-dialog-overlay.an-confirmacion.an-confirmacion-roja { --an-conf-color: #d33a32; --an-conf-lado: #6e1611; }
vaadin-dialog.an-confirmacion::part(overlay), vaadin-dialog-overlay.an-confirmacion::part(overlay) {
    border-radius: 22px; overflow: hidden; border-top: 4px solid var(--an-conf-color);
}
.an-confirmacion-cuerpo { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 0.2rem 0.1rem 0.4rem; }
.an-confirmacion-icono {
    width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--an-tono-5ff2dc), var(--an-tono-2bb3a3) 55%, var(--an-tono-12343b)); box-shadow: 0 0 18px rgba(var(--an-tono-2bb3a3-rgb), 0.35);
}
.an-confirmacion-icono.an-confirmacion-peligro { background: linear-gradient(135deg, #ff8a7a, #d33a32); box-shadow: 0 0 18px rgba(211, 58, 50, 0.35); }
.an-confirmacion-icono vaadin-icon { width: 1.45rem; height: 1.45rem; color: #fff; }
.an-confirmacion-texto { font-size: 1rem; line-height: 1.55; color: var(--an-texto); padding-top: 0.35rem; }

/* ================================================================ reconexión (indicador de conexión de Vaadin)
   Sin conexión: fondo difuminado y una tarjeta de cristal oscuro en el centro, como los avisos; la barra fina de
   «cargando», turquesa. Los textos (dos líneas, la primera en negrita) los pone Application.JS_RECONEXION. */
vaadin-connection-indicator .v-loading-indicator {
    background: linear-gradient(90deg, var(--an-tono-5ff2dc), var(--an-tono-2bb3a3), var(--an-tono-12343b)) !important; height: 3px !important;
    box-shadow: 0 0 10px rgba(var(--an-tono-2bb3a3-rgb), 0.6) !important;
}
vaadin-connection-indicator[reconnecting], vaadin-connection-indicator[offline] {
    position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important;
    max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    display: grid !important; place-items: center !important;
    background: rgba(var(--an-tono-06161a-rgb), 0.38) !important; backdrop-filter: blur(3px); animation: an-reconexion-fondo 0.3s ease-out;
}
@keyframes an-reconexion-fondo { from { opacity: 0; } to { opacity: 1; } }
vaadin-connection-indicator[reconnecting] .v-status-message, vaadin-connection-indicator[offline] .v-status-message {
    position: relative !important; inset: auto !important; transform: none !important; max-height: none !important; height: auto !important;
    width: min(440px, calc(100vw - 2rem)) !important; box-sizing: border-box; overflow: hidden;
    display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem 1.2rem !important; border-radius: 20px !important; color: var(--an-tono-e6f7f4) !important; opacity: 1 !important;
    border-top: 3px solid #f5b54a;
    background:
        radial-gradient(circle at 0% 0%, rgba(245, 181, 74, 0.22), transparent 50%),
        linear-gradient(160deg, rgba(var(--an-tono-0c262c-rgb), 0.97) 0%, rgba(var(--an-tono-0f343b-rgb), 0.97) 60%, rgba(var(--an-tono-124047-rgb), 0.97) 100%) !important;
    box-shadow: 0 0 0 1px rgba(245, 181, 74, 0.45), 0 0 26px rgba(245, 181, 74, 0.25), 0 22px 50px rgba(var(--an-tono-041216-rgb), 0.55) !important;
    animation: an-toast-entra 0.25s ease-out;
}
vaadin-connection-indicator[offline] .v-status-message { border-top-color: #ff6b5e; box-shadow: 0 0 0 1px rgba(255, 107, 94, 0.45), 0 0 26px rgba(255, 107, 94, 0.25), 0 22px 50px rgba(var(--an-tono-041216-rgb), 0.55) !important; }
/* Icono: wifi tachado que late, dibujado con una máscara (no hay elemento propio dentro del indicador) */
vaadin-connection-indicator[reconnecting] .v-status-message::before, vaadin-connection-indicator[offline] .v-status-message::before {
    content: ""; width: 2.6rem; height: 2.6rem; border-radius: 14px; animation: an-reconexion-latido 1.4s ease-in-out infinite;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8.8a15 15 0 0 1 4.2-2.6'/><path d='M10.7 5.1A15 15 0 0 1 22 8.8'/><path d='M5 12.5a10 10 0 0 1 5.2-2.6'/><path d='M15.9 11.1a10 10 0 0 1 3.1 1.4'/><path d='M8.5 16.4a5 5 0 0 1 7 0'/><circle cx='12' cy='20' r='1'/><path d='M3 3l18 18'/></svg>") center / 1.4rem no-repeat,
        linear-gradient(135deg, #f5b54a, #f08a24);
    box-shadow: 0 0 16px rgba(245, 181, 74, 0.45);
}
vaadin-connection-indicator[offline] .v-status-message::before { background-color: transparent;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8.8a15 15 0 0 1 4.2-2.6'/><path d='M10.7 5.1A15 15 0 0 1 22 8.8'/><path d='M5 12.5a10 10 0 0 1 5.2-2.6'/><path d='M15.9 11.1a10 10 0 0 1 3.1 1.4'/><path d='M8.5 16.4a5 5 0 0 1 7 0'/><circle cx='12' cy='20' r='1'/><path d='M3 3l18 18'/></svg>") center / 1.4rem no-repeat,
        linear-gradient(135deg, #ff8a7a, #d33a32);
    box-shadow: 0 0 16px rgba(255, 107, 94, 0.45); }
@keyframes an-reconexion-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
vaadin-connection-indicator[reconnecting] .v-status-message .text, vaadin-connection-indicator[offline] .v-status-message .text {
    white-space: pre-line; font-size: 0.95rem; line-height: 1.45; color: var(--an-tono-cfe9e5) !important; text-align: left;
}
/* Sin el círculo de carga de Vaadin (ya hay icono) y el texto en bloque, para que solo la primera línea vaya en negrita */
vaadin-connection-indicator .v-status-message span.text { display: block !important; height: auto !important; }
vaadin-connection-indicator .v-status-message span.text::before { content: none !important; display: none !important; }
vaadin-connection-indicator .v-status-message .text::first-line { font-weight: 750; font-size: 1.08rem; color: #fff; }

/* ===================== Crear un horario (asistente de horarios y turnos rotativos, 2026-10-11) ===================== */
.an-crear-horario { box-sizing: border-box; width: 100%; padding: 1.5rem 1.75rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.an-crear-horario-hero {
  position: relative; overflow: hidden; border-radius: 28px; padding: 2.2rem 2.4rem; display: flex; align-items: center; gap: 1.6rem; color: var(--an-tono-eafffb);
  background: radial-gradient(1200px 400px at 85% -20%, rgba(var(--an-tono-7ff0dd-rgb), 0.35), transparent 60%),
              radial-gradient(600px 300px at 0% 120%, rgba(var(--an-tono-2bb3a3-rgb), 0.45), transparent 60%),
              linear-gradient(135deg, var(--an-tono-0f2e35) 0%, var(--an-tono-134a52) 55%, var(--an-tono-1b6b6a) 100%);
  box-shadow: 0 30px 60px -30px rgba(var(--an-tono-0f2e35-rgb), 0.6);
}
.an-crear-horario-hero h1 { margin: 0; color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; }
.an-crear-horario-hero span { font-size: 1.08rem; opacity: 0.88; }
.an-crear-horario-icono { width: 3.6rem; height: 3.6rem; padding: 0.9rem; border-radius: 20px; box-sizing: border-box; flex: none;
  color: var(--an-tono-05231f); background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3)); box-shadow: 0 14px 30px -12px rgba(var(--an-tono-7ff0dd-rgb), 0.8); }
.an-crear-horario h3 { margin: 0.6rem 0 0; font-size: 1.25rem; color: var(--an-texto); }
.an-crear-horario-lista { display: flex; flex-direction: column; gap: 0.4rem; }
.an-hor-franjas, .an-hor-ciclo { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.an-hor-ciclo { max-height: 340px; overflow-y: auto; padding-right: 0.3rem; }
.an-hor-franja { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; border-radius: 16px;
  border: 1px solid var(--an-borde); background: var(--an-superficie); }
.an-hor-franja vaadin-time-picker { width: 8.5rem; }
.an-hor-franja vaadin-select { min-width: 14rem; }
.an-hor-franja-num { font-weight: 700; color: var(--an-texto-suave); min-width: 4.6rem; padding-bottom: 0.55rem; }
/* Ciclo de rotación: dos días por fila para que la lista no sea tan larga (petición del usuario 2026-10-12); una sola
   columna en pantallas estrechas */
.an-hor-ciclo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.an-hor-ciclo .an-hor-franja { flex-wrap: nowrap; align-items: center; padding: 0.4rem 0.7rem; gap: 0.6rem; }
.an-hor-ciclo .an-hor-franja-num { min-width: 3.6rem; padding-bottom: 0; }
.an-hor-ciclo .an-hor-franja vaadin-select { min-width: 0; flex: 1; }
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
  .an-hor-ciclo { grid-template-columns: minmax(0, 1fr); }
}
/* Turnos rotativos › Inicio: qué semana le toca al equipo y vista previa de lunes a domingo (2026-10-12) */
.an-rot-semana-equipo { width: 100%; }
.an-rot-previa { margin-top: 1rem; }
.an-rot-previa > span { display: block; font-weight: 600; color: var(--an-texto-suave); margin-bottom: 0.4rem; font-size: 0.9rem; }
.an-rot-previa-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; max-width: 46rem; }
.an-rot-previa-cab { text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--an-texto-suave); text-transform: uppercase; }
.an-rot-previa-cab.an-finde { color: var(--lumo-error-text-color); }
.an-rot-previa-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-height: 3.1rem;
  padding: 0.25rem; border-radius: 12px; border: 1px solid var(--an-borde); background: var(--an-superficie); font-size: 0.74rem;
  overflow: hidden; text-align: center; line-height: 1.15; }
.an-rot-previa-dia > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.an-rot-previa-num { font-weight: 700; font-size: 0.9rem; }
.an-rot-previa-dia.an-descanso { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--an-borde) 6px 7px); color: var(--an-texto-suave); }
.an-rot-previa-dia.an-fuera { opacity: 0.35; border-style: dashed; }
.an-hor-bloque { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; }
.an-hor-bloque vaadin-select { min-width: 14rem; }
.an-hor-bloque vaadin-integer-field { width: 8rem; }
.an-hor-fechas { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Guía de horarios: redondeo de la entrada y de la salida, a dos columnas que ocupan todo el ancho (las etiquetas se leen enteras) */
.an-hor-redondeos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; }
.an-hor-redondeos vaadin-integer-field { width: 100%; }
/* Incidencia de la pausa elegida, con «Modificar» a la derecha */
.an-hor-pausa-inc { display: flex; align-items: center; gap: 0.6rem; }
.an-hor-pausa-inc > :first-child { flex: 1; min-width: 0; }
.an-hor-semana { display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.an-hor-quien { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.3rem 0 0.6rem; }
.an-hor-calendarios { display: flex; flex-direction: column; gap: 0.5rem; }
.an-hor-resultado { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.an-hor-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 0.4rem; }
.an-hor-cifra { border-radius: 18px; padding: 0.9rem 1.1rem; border: 1px solid var(--an-borde); background: var(--an-superficie);
  display: flex; flex-direction: column; gap: 0.15rem; }
.an-hor-cifra-valor { font-size: 1.6rem; font-weight: 800; color: var(--an-texto); font-variant-numeric: tabular-nums; }
.an-hor-cifra-que { color: var(--an-texto-suave); font-size: 0.92rem; }
.an-asis-horario vaadin-select, .an-asis-horario vaadin-text-field, .an-asis-horario vaadin-combo-box,
.an-asis-rotacion vaadin-text-field, .an-asis-rotacion vaadin-multi-select-combo-box { width: 100%; }

/* Portal: «Pedir un permiso» y «Cambiar un turno» */
.an-portal-botones { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }
vaadin-button.an-portal-cambiar { border-radius: 999px; height: 3.6rem; padding: 0 1.6rem; font-weight: 700; font-size: 1.05rem; color: var(--an-tono-eafffb);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.45); }
vaadin-button.an-portal-cambiar:hover { background: rgba(255, 255, 255, 0.2); }

.an-hor-contadores { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.8rem; }
/* Ficha de incidencias (petición del usuario, 2026-10-11): las dos columnas acaban a la misma altura */
/* Todas las fichas de dos columnas acaban cuadradas abajo: el último recuadro de la columna más corta se alarga (2026-10-12) */
.an-ficha-columnas { align-items: stretch; }
.an-ficha-columnas > div { display: flex; flex-direction: column; }
.an-ficha-columnas > div > :last-child { flex: 1 1 auto; }

/* ===================================================================== Ajustes (solo supervisores, 2026-10-12) */
.an-ajustes { padding: 1.6rem 2rem 3rem; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.an-aj-cabecera > div { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.an-aj-cabecera h2 { margin: 0; font-size: 1.75rem; letter-spacing: -0.02em; }
.an-aj-cabecera .an-ayuda { margin: 0.35rem 0 0; }
.an-aj-directo {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.75rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; color: var(--an-tono-0d7a6c); background: rgba(var(--an-tono-2bb3a3-rgb), 0.12);
    border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.35);
}
.an-aj-directo::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--an-turquesa);
    box-shadow: 0 0 0 0 rgba(var(--an-tono-2bb3a3-rgb), 0.6); animation: an-aj-latido 1.8s infinite;
}
.an-aj-directo.an-aj-pausa { color: var(--an-texto-suave); background: var(--an-hover); border-color: var(--an-borde); }
.an-aj-directo.an-aj-pausa::before { background: var(--an-texto-suave); animation: none; }
@keyframes an-aj-latido {
    0% { box-shadow: 0 0 0 0 rgba(var(--an-tono-2bb3a3-rgb), 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(var(--an-tono-2bb3a3-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--an-tono-2bb3a3-rgb), 0); }
}
.an-aj-seccion {
    margin: 2.1rem 0 0.85rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--an-texto-suave); display: flex; align-items: center; gap: 0.8rem;
}
.an-aj-seccion::after { content: ""; flex: 1; height: 1px; background: var(--an-borde); }
.an-aj-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; }
.an-aj-kpi {
    position: relative; background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 16px;
    padding: 1rem 1.1rem 1.05rem; box-shadow: var(--an-sombra); display: flex; flex-direction: column; gap: 0.3rem;
    overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.an-aj-kpi:hover { transform: translateY(-2px); }
.an-aj-kpi::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--an-turquesa), var(--an-turquesa-claro));
}
.an-aj-kpi > div:first-child { display: flex; align-items: center; gap: 0.55rem; }
.an-aj-kpi-icono {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--an-tono-12343b), var(--an-tono-1f6f6a));
}
.an-aj-kpi-icono vaadin-icon { width: 16px; height: 16px; }
.an-aj-kpi-titulo { font-size: 0.8rem; font-weight: 600; color: var(--an-texto-suave); }
.an-aj-kpi-valor { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: var(--an-texto); font-variant-numeric: tabular-nums; }
.an-aj-kpi-detalle { font-size: 0.78rem; color: var(--an-texto-suave); line-height: 1.35; }
.an-aj-kpi-barra { height: 6px; border-radius: 999px; background: var(--an-linea); overflow: hidden; margin-top: 0.35rem; }
.an-aj-kpi-relleno {
    height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--an-turquesa), var(--an-tono-1f8f84));
    transition: width 0.6s ease;
}
.an-aj-kpi.an-aj-aviso .an-aj-kpi-relleno { background: linear-gradient(90deg, #f3b13a, #e08a12); }
.an-aj-kpi.an-aj-alerta .an-aj-kpi-relleno { background: linear-gradient(90deg, #f06b5c, #d33a2c); }
.an-aj-kpi.an-aj-alerta::before { background: linear-gradient(90deg, #f06b5c, #d33a2c); }
.an-aj-tarjeta {
    background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 18px; box-shadow: var(--an-sombra);
    padding: 1.25rem 1.4rem 1.35rem; margin-top: 0.9rem;
}
.an-aj-tarjeta-cabecera { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 0.9rem; }
.an-aj-tarjeta-cabecera h3 { margin: 0.1rem 0 0; font-size: 1.05rem; }
.an-aj-tarjeta-cabecera .an-ayuda { margin: 0.25rem 0 0; }
.an-aj-tarjeta-icono {
    flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--an-turquesa), var(--an-tono-1a7f74)); box-shadow: 0 6px 16px rgba(var(--an-tono-2bb3a3-rgb), 0.3);
}
.an-aj-grafico { position: relative; }
.an-aj-grafico svg { width: 100%; height: 150px; display: block; overflow: visible; }
.an-aj-linea { fill: none; stroke: var(--an-turquesa); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.an-aj-max { stroke: var(--an-texto-suave); stroke-dasharray: 5 5; stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; }
.an-aj-grafico-pie { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--an-texto-suave); margin-top: 0.3rem; }
.an-aj-parametros { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem 1.6rem; }
.an-aj-grupo-titulo {
    display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.45rem; font-size: 0.9rem; color: var(--an-texto);
}
.an-aj-grupo-titulo vaadin-icon { width: 16px; height: 16px; color: var(--an-turquesa); }
.an-aj-param {
    display: grid; grid-template-columns: minmax(150px, 46%) 1fr; gap: 0.8rem; padding: 0.42rem 0;
    border-bottom: 1px dashed var(--an-linea); font-size: 0.84rem;
}
.an-aj-param:last-child { border-bottom: none; }
.an-aj-param-nombre { color: var(--an-texto-suave); }
.an-aj-param-valor { color: var(--an-texto); font-weight: 500; word-break: break-word; white-space: pre-line; }
.an-aj-detalles { margin-top: 1rem; }
.an-aj-todas { display: grid; gap: 0.15rem; font-size: 0.8rem; max-height: 340px; overflow: auto; padding-right: 0.4rem; }
.an-aj-todas > div {
    display: grid; grid-template-columns: minmax(220px, 40%) 1fr; gap: 0.8rem; padding: 0.25rem 0;
    border-bottom: 1px solid var(--an-linea);
}
.an-aj-todas-clave { font-family: ui-monospace, Consolas, monospace; color: var(--an-texto-suave); word-break: break-all; }
.an-aj-todas-valor { word-break: break-all; }
.an-aj-formulario { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.2rem 1rem; }
.an-aj-formulario > * { width: 100%; }
.an-aj-nota {
    background: rgba(243, 177, 58, 0.12); border: 1px solid rgba(243, 177, 58, 0.4); border-radius: 12px;
    padding: 0.7rem 0.9rem; margin: 0 0 0.8rem; color: var(--an-texto);
}
.an-aj-botones { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.an-aj-botones > div { display: flex; gap: 0.5rem; align-items: center; }
.an-aj-prueba { width: 260px; }
.an-aj-caminos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.9rem; margin-top: 0.4rem; }
.an-aj-camino {
    display: flex; gap: 0.8rem; padding: 0.95rem 1rem; border-radius: 14px; border: 1px solid var(--an-borde);
    background: linear-gradient(180deg, var(--an-hover), transparent);
}
.an-aj-camino-icono {
    flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    color: var(--an-turquesa); background: rgba(var(--an-tono-2bb3a3-rgb), 0.12);
}
.an-aj-camino > div:last-child { display: flex; flex-direction: column; gap: 0.25rem; }
.an-aj-camino-titulo { font-weight: 600; font-size: 0.9rem; }
.an-aj-camino-texto { font-size: 0.82rem; color: var(--an-texto-suave); line-height: 1.45; word-break: break-word; }
.an-aj-dialogo { display: flex; flex-direction: column; min-width: min(360px, 80vw); }
@media (max-width: 700px) {
    .an-ajustes { padding: 1rem 0.9rem 2rem; }
    .an-aj-parametros { grid-template-columns: 1fr; }
    .an-aj-param, .an-aj-todas > div { grid-template-columns: 1fr; gap: 0.1rem; }
    .an-aj-prueba { width: 100%; }
    .an-aj-botones > div { width: 100%; }
}

/* ¿Has olvidado la contraseña? (pantalla de entrada) */
.an-recuperar-cuerpo { display: flex; flex-direction: column; gap: 0.2rem; width: min(420px, 82vw); }
.an-recuperar-cuerpo .an-ayuda { margin: 0 0 0.5rem; }
.an-recuperar-mensaje {
    margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.85rem;
    background: rgba(240, 107, 92, 0.1); border: 1px solid rgba(240, 107, 92, 0.35); color: var(--an-texto);
}
/* Con la ayuda de Neikom: los dos códigos que se dictan, grandes y fáciles de leer (2026-10-23) */
.an-recuperar-codigos { display: grid; gap: 0.6rem; margin: 0.2rem 0 0.6rem; }
.an-recuperar-codigos > div {
    padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--lumo-contrast-5pct); border: 1px solid var(--lumo-contrast-10pct);
}
.an-recuperar-codigo-etiqueta { font-size: 0.75rem; color: var(--an-texto-suave); }
.an-recuperar-codigo {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em;
    color: var(--an-texto); user-select: all; word-break: break-all;
}
.an-recuperar-respuesta textarea { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; min-height: 4.5rem; }

/* Ajustes › Configuración a pantalla completa con cabecera premium (petición del usuario, 2026-10-12) */
.an-ajustes { padding: 0; max-width: none; margin: 0; min-height: 100%; background: var(--an-fondo); }
.an-aj-hero {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1.4rem 2rem; padding: 2.1rem 2.4rem 2rem; color: #fff;
    background:
        radial-gradient(900px 320px at 85% -40%, rgba(var(--an-tono-7ff0dd-rgb), 0.28), transparent 60%),
        radial-gradient(600px 260px at 10% 130%, rgba(var(--an-tono-2bb3a3-rgb), 0.25), transparent 60%),
        linear-gradient(120deg, var(--an-tono-0b2328) 0%, var(--an-tono-12343b) 45%, var(--an-tono-17575a) 100%);
}
.an-aj-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
    background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
}
.an-aj-hero > * { position: relative; z-index: 1; }
.an-aj-hero-textos > div { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.an-aj-miga { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-aj-hero h2 { margin: 0.35rem 0 0; font-size: 2.2rem; letter-spacing: -0.03em; color: #fff; }
.an-aj-lema { margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.72); max-width: 720px; }
.an-aj-hero .an-aj-directo { color: var(--an-tono-7ff0dd); background: rgba(var(--an-tono-7ff0dd-rgb), 0.12); border-color: rgba(var(--an-tono-7ff0dd-rgb), 0.4); }
.an-aj-hero .an-aj-directo.an-aj-pausa { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
.an-aj-hero-resumen { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.an-aj-pastilla {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1rem; min-width: 140px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px);
}
.an-aj-pastilla > vaadin-icon { width: 18px; height: 18px; color: var(--an-tono-7ff0dd); }
.an-aj-pastilla > div { display: flex; flex-direction: column; }
.an-aj-pastilla-nombre { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); }
.an-aj-pastilla-valor { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-aj-cuerpo { padding: 0.4rem 2.4rem 3rem; }
.an-aj-kpis { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.an-aj-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 0 1.4rem; align-items: stretch; }
/* Las dos cajas (Correo saliente y Superusuario) igual de altas: la más baja reparte el espacio (sin hueco debajo) */
.an-aj-dos > div { display: flex; flex-direction: column; }
.an-aj-dos > div > .an-aj-tarjeta { flex: 1; display: flex; flex-direction: column; }
.an-aj-dos .an-aj-caminos { flex: 1; }
.an-aj-dos .an-aj-botones { margin-top: 0.9rem; }
.an-aj-dos .an-aj-tarjeta { box-sizing: border-box; }
@media (max-width: 700px) {
    .an-aj-hero { padding: 1.4rem 1rem; }
    .an-aj-hero h2 { font-size: 1.7rem; }
    .an-aj-cuerpo { padding: 0.2rem 0.9rem 2rem; }
    .an-aj-dos { grid-template-columns: 1fr; }
    .an-aj-pastilla { min-width: 0; flex: 1 1 40%; }
}

/* Ficha de usuarios: pestaña «Superusuario» (opción A, 2026-10-12) */
.an-su { display: flex; flex-direction: column; gap: 1rem; padding: 0.4rem 0.2rem; }
.an-su-cabecera {
    display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: 16px; color: #fff;
    background: radial-gradient(500px 180px at 90% -30%, rgba(var(--an-tono-7ff0dd-rgb), 0.3), transparent 60%),
        linear-gradient(120deg, var(--an-tono-0b2328), var(--an-tono-12343b) 50%, var(--an-tono-17575a));
}
.an-su-icono {
    flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(var(--an-tono-7ff0dd-rgb), 0.16); color: var(--an-tono-7ff0dd);
}
.an-su-titulo { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.an-su-lista { display: flex; flex-direction: column; gap: 0.15rem; }
.an-su-fila {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.4rem; border-bottom: 1px dashed var(--an-linea);
    color: var(--an-texto); font-size: 0.92rem; line-height: 1.4;
}
.an-su-fila:last-child { border-bottom: none; }
.an-su-fila vaadin-icon { flex: none; width: 18px; height: 18px; color: var(--an-turquesa); margin-top: 0.1rem; }

/* Atajos de fechas (PatronesFechas, 2026-10-12) */
.an-patrones-fechas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.1rem; }
.an-patron-fecha { border-radius: 999px; background: var(--an-hover); border: 1px solid var(--an-borde); font-size: 0.78rem; min-height: 1.9rem; }
.an-patron-fecha:hover { border-color: var(--an-turquesa); color: var(--an-turquesa); }
.an-hor-aviso-pasado { display: block; margin: 0.3rem 0; padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.82rem; background: rgba(243, 177, 58, 0.12); border: 1px solid rgba(243, 177, 58, 0.4); color: var(--an-texto); }

/* Ficha de tipo de día: muestra en vivo de los colores (2026-10-12) */
.an-muestra-dia { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.2rem; }
.an-muestra-dia-titulo { font-size: 0.8rem; font-weight: 500; color: var(--an-texto-suave); }
.an-muestra-dia-celda { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 4px rgba(var(--an-tono-0f2e35-rgb), 0.08), 0 10px 22px rgba(var(--an-tono-0f2e35-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background 0.2s ease, color 0.2s ease; min-height: 3rem; }
.an-muestra-dia-numero { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.an-muestra-dia-nombre { font-size: 0.9rem; font-weight: 600; }

/* Favoritos de la barra: se ordenan arrastrando (2026-10-12) */
.an-favoritos-barra .an-favorito-enlace { cursor: grab; touch-action: none; user-select: none; }
.an-favorito-flotante {
    position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; margin: 0 !important;
    box-shadow: 0 14px 30px rgba(var(--an-tono-0f2e35-rgb), 0.28), 0 4px 10px rgba(var(--an-tono-0f2e35-rgb), 0.16);
    border-radius: 999px; transition: transform 0.04s linear; cursor: grabbing;
}
/* Hueco donde caerá el favorito (2026-10-18, petición del usuario: la línea discontinua era «un poco ruda»): carril hundido
   con degradado turquesa, anillo luminoso y un brillo que lo recorre */
.an-favorito-hueco {
    display: inline-block; height: 2.1rem; border-radius: 999px; flex: none; position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--an-tono-2bb3a3-rgb), 0.20) 0%, rgba(var(--an-tono-127068-rgb), 0.10) 100%);
    box-shadow: inset 0 2px 5px rgba(var(--an-tono-0f2e35-rgb), 0.20), inset 0 0 0 1.5px rgba(var(--an-tono-2bb3a3-rgb), 0.55),
                0 0 0 3px rgba(var(--an-tono-2bb3a3-rgb), 0.10), 0 0 14px rgba(var(--an-tono-2bb3a3-rgb), 0.28);
    animation: an-hueco-latido 1.6s ease-in-out infinite;
}
.an-favorito-hueco::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -50%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    animation: an-hueco-brillo 1.6s ease-in-out infinite;
}
html[theme~="dark"] .an-favorito-hueco {
    background: linear-gradient(135deg, rgba(var(--an-tono-2bb3a3-rgb), 0.24) 0%, rgba(var(--an-tono-7ff0dd-rgb), 0.08) 100%);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 0 0 1.5px rgba(var(--an-tono-7ff0dd-rgb), 0.55),
                0 0 0 3px rgba(var(--an-tono-2bb3a3-rgb), 0.14), 0 0 16px rgba(var(--an-tono-2bb3a3-rgb), 0.40);
}
html[theme~="dark"] .an-favorito-hueco::after { background: linear-gradient(100deg, transparent 0%, rgba(var(--an-tono-7ff0dd-rgb), 0.35) 50%, transparent 100%); }
@keyframes an-hueco-latido { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes an-hueco-brillo { 0% { left: -50%; } 100% { left: 110%; } }
/* Con «reducir animaciones» solo se quita lo que se desplaza (el brillo); el latido de color se queda */
@media (prefers-reduced-motion: reduce) { .an-favorito-hueco::after { animation: none; display: none; } }
body.an-arrastrando-favorito, body.an-arrastrando-favorito * { cursor: grabbing !important; user-select: none !important; }

/* Tipo de día con sus colores (ficha de horarios: campo y lista desplegable, 2026-10-12) */
.an-td-muestra {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.45rem; height: 1.2rem;
    border-radius: 6px; font-size: 0.66rem; font-weight: 700; margin-right: 0.35rem;
    box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25); border: 1px solid rgba(0, 0, 0, 0.06);
}
.an-td-opcion { display: inline-flex; align-items: center; }

/* Tarjeta al pasar el ratón por un día del calendario (CalendarioAnual: ficha de empleados, Calendarios, Guardias),
   en vez del «title» del sistema (petición del usuario 2026-10-12). La pinta el navegador en <body>. */
.an-cal-tip {
  position: fixed; z-index: 100000; pointer-events: none; display: flex; align-items: center; gap: 0.75rem;
  max-width: 22rem; padding: 0.65rem 0.9rem 0.65rem 0.65rem; border-radius: 16px;
  background: linear-gradient(160deg, var(--an-tono-15505a) 0%, var(--an-tono-0d3239) 100%); color: var(--an-tono-f2fbfa);
  border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.45);
  box-shadow: 0 12px 32px rgba(var(--an-tono-061e23-rgb), 0.35), 0 2px 6px rgba(var(--an-tono-061e23-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--lumo-font-family); line-height: 1.25;
  opacity: 0; transform: translateY(4px) scale(0.98); transition: opacity 0.14s ease, transform 0.14s ease; visibility: hidden;
}
.an-cal-tip.an-visible { opacity: 1; transform: none; visibility: visible; }
.an-cal-tip.an-debajo { transform-origin: top center; }
.an-cal-tip-simple { padding: 0.5rem 0.85rem; }
.an-cal-tip-muestra {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px;
  font-weight: 800; font-size: 1.05rem; background: rgba(255, 255, 255, 0.12); color: var(--an-tono-f2fbfa);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.an-cal-tip-muestra.an-sin-tipo { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, 0.14) 5px 6px); }
.an-cal-tip-cuerpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-cal-tip-titulo { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-cal-tip-fecha { font-size: 0.8rem; color: rgba(var(--an-tono-f2fbfa-rgb), 0.72); }
.an-cal-tip-simple .an-cal-tip-fecha { color: var(--an-tono-f2fbfa); font-size: 0.85rem; }
.an-cal-tip-marcas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.an-cal-tip-marca {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: 999px;
  background: rgba(var(--an-tono-2bb3a3-rgb), 0.25); color: var(--an-tono-9ff0e4); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.45);
}
/* Como popover (capa superior): sin los márgenes ni el marco que el navegador pone por defecto */
.an-cal-tip[popover] { inset: auto; margin: 0; overflow: visible; }

/* Ordenación del panel de los listados: prioridad (1, 2, 3…) y subir/bajar (petición del usuario 2026-10-12) */
.an-orden-numero {
  flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; background: color-mix(in srgb, var(--an-turquesa) 18%, transparent); color: var(--an-turquesa);
}
.an-orden-mover { display: inline-flex; flex: none; margin-left: auto; }
.an-elemento .an-orden-mover vaadin-button[theme~="tertiary-inline"] { min-width: 1.5rem; padding: 0; }
.an-elemento .an-orden-mover vaadin-button:not([disabled]) { color: var(--an-turquesa); opacity: 1; }
.an-elemento .an-orden-mover vaadin-button:not([disabled]):hover { background: color-mix(in srgb, var(--an-turquesa) 14%, transparent); }
.an-elemento .an-orden-mover vaadin-button[disabled] { opacity: 0.3; }
.an-elemento vaadin-icon.an-icono-mover { width: 1.2rem; height: 1.2rem; }

/* ============================================================ Accesos online (garita; 2026-10-12)
   Sala de control oscura también en modo día: la pantalla está encendida todo el día y se mira de lejos. */
.an-online {
  --on-fondo: var(--an-tono-071518); --on-panel: var(--an-tono-0d2328); --on-panel-2: var(--an-tono-11303a); --on-borde: rgba(var(--an-tono-7ff0dd-rgb), 0.14);
  --on-texto: var(--an-tono-e9fbf8); --on-suave: rgba(var(--an-tono-e9fbf8-rgb), 0.62); --on-turquesa: var(--an-tono-2bb3a3); --on-verde: #22c55e; --on-rojo: #ef4444;
  height: calc(100dvh - 61px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.25rem 1.25rem;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(var(--an-tono-2bb3a3-rgb), 0.18), transparent 60%), var(--on-fondo);
  color: var(--on-texto); overflow: hidden;
}
.an-online-cabecera {
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-radius: 18px; flex: none;
  background: linear-gradient(135deg, var(--an-tono-0f3a42) 0%, var(--an-tono-0b262c) 100%); border: 1px solid var(--on-borde);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.an-online-marca { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; flex: none;
  background: linear-gradient(135deg, var(--an-tono-40d6c2), var(--an-tono-127068)); box-shadow: 0 0 18px rgba(var(--an-tono-40d6c2-rgb), 0.45); }
.an-online-marca vaadin-icon { color: #fff; width: 1.5rem; height: 1.5rem; }
.an-online-titulos h2 { margin: 0; font-size: 1.35rem; color: var(--on-texto); letter-spacing: 0.01em; }
.an-online-resumen { font-size: 0.82rem; color: var(--on-suave); }
.an-online-zonas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: 0.5rem; }
.an-online-zona { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.82rem;
  background: rgba(var(--an-tono-2bb3a3-rgb), 0.14); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.35); color: var(--on-texto); }
.an-online-zona > span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.an-online-zona.an-casi { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.5); }
.an-online-zona.an-lleno { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.6); }
.an-online-derecha { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.an-online-conexion { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 700; color: var(--an-tono-7ff0dd);
  text-transform: uppercase; letter-spacing: 0.08em; }
.an-online-conexion > span:first-child { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--on-verde);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: an-online-latido 2s infinite; }
.an-online-conexion.an-mal { color: #fca5a5; }
.an-online-conexion.an-mal > span:first-child { background: var(--on-rojo); animation: none; }
@keyframes an-online-latido { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.an-online-reloj { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; min-width: 7.5ch; text-align: right; }
.an-online-boton { min-width: 2.6rem; height: 2.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--on-texto);
  border: 1px solid var(--on-borde); cursor: pointer; }
.an-online-boton:hover { background: rgba(var(--an-tono-2bb3a3-rgb), 0.2); }
.an-online-boton.an-activo { background: rgba(var(--an-tono-2bb3a3-rgb), 0.3); color: #fff; }

.an-online-cuerpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; }
.an-online-puntos { min-height: 0; overflow: auto; display: grid; gap: 1rem; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); grid-auto-rows: max-content; padding-right: 0.25rem; }
.an-online-puntos[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.an-online-sin-puntos { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 4rem 1rem;
  border-radius: 18px; border: 1px dashed var(--on-borde); color: var(--on-suave); text-align: center; }
.an-online-sin-puntos vaadin-icon { width: 3rem; height: 3rem; color: var(--on-turquesa); }
.an-online-sin-puntos > span:nth-child(2) { font-size: 1.1rem; font-weight: 700; color: var(--on-texto); }

.an-online-punto { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--on-panel);
  border: 1px solid var(--on-borde); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); transition: box-shadow 0.3s, border-color 0.3s; }
.an-online-punto.an-permitido { border-color: rgba(34, 197, 94, 0.35); }
.an-online-punto.an-denegado { border-color: rgba(239, 68, 68, 0.4); }
.an-online-punto.an-nueva.an-permitido { animation: an-online-nueva-verde 1.2s ease-out 2; }
.an-online-punto.an-nueva.an-denegado { animation: an-online-nueva-roja 1.2s ease-out 3; }
@keyframes an-online-nueva-verde { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.75); } 100% { box-shadow: 0 0 0 18px rgba(34, 197, 94, 0); } }
@keyframes an-online-nueva-roja { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.85); } 100% { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); } }
.an-online-punto-arriba { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--on-panel-2); }
.an-online-punto-titulos { display: flex; flex-direction: column; min-width: 0; }
.an-online-punto-nombre { font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-online-punto-sub { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--on-suave); }
.an-online-punto-sub vaadin-icon { width: 0.9rem; height: 0.9rem; }
.an-online-aforo { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); font-weight: 800; font-variant-numeric: tabular-nums; }
.an-online-aforo vaadin-icon { width: 1rem; height: 1rem; color: var(--on-turquesa); }
.an-online-foto { position: relative; aspect-ratio: 16 / 9; background: var(--an-tono-02090b); flex: none; }
.an-online-camara { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.an-online-sin-imagen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--on-suave); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, 0.025) 14px 15px); }
.an-online-sin-imagen[hidden], .an-online-camara[hidden] { display: none; }
.an-online-sin-imagen vaadin-icon { width: 2.4rem; height: 2.4rem; opacity: 0.6; }
.an-online-capa { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--an-tono-02090b-rgb), 0.55) 0%, transparent 28%, transparent 55%, rgba(var(--an-tono-02090b-rgb), 0.85) 100%); }
.an-online-estado { position: absolute; top: 0.8rem; left: 0.8rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem;
  border-radius: 999px; font-weight: 900; letter-spacing: 0.06em; font-size: 0.85rem; background: rgba(255, 255, 255, 0.14); color: #fff; }
.an-permitido .an-online-estado { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 0 22px rgba(34, 197, 94, 0.6); }
.an-denegado .an-online-estado { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 0 22px rgba(239, 68, 68, 0.65); }
.an-online-estado vaadin-icon { width: 1.1rem; height: 1.1rem; }
.an-online-tiempo { position: absolute; top: 0.8rem; right: 0.9rem; display: flex; flex-direction: column; align-items: flex-end; text-shadow: 0 1px 3px #000; }
.an-online-tiempo > span:first-child { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-online-tiempo > span:last-child { font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
.an-online-placa-caja { position: absolute; left: 0.9rem; bottom: 0.9rem; }
.an-online-punto-pie { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; flex-wrap: wrap; }
.an-online-vehiculo { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 600; min-width: 0; flex: 1 1 12rem; }
.an-online-vehiculo vaadin-icon { color: var(--on-turquesa); width: 1.1rem; height: 1.1rem; flex: none; }
.an-online-vehiculo.an-desconocido { color: #fcd34d; }
.an-online-vehiculo.an-desconocido vaadin-icon { color: #fcd34d; }
.an-online-apertura { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; transition: opacity 0.6s; }
.an-online-apertura.an-enviando { color: var(--an-tono-7ff0dd); }
.an-online-apertura.an-enviando vaadin-icon { animation: an-online-giro 1.2s linear infinite; }
.an-online-apertura.an-abierta { color: #86efac; }
.an-online-apertura.an-fallo { color: #fca5a5; }
.an-online-apertura.an-fuera { opacity: 0; }
@keyframes an-online-giro { to { transform: rotate(360deg); } }
/* Botón premium de abrir */
vaadin-button.an-online-abrir {
  margin-left: auto; height: 3.1rem; padding: 0 1.4rem; border-radius: 14px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--an-tono-04201c); background: linear-gradient(135deg, var(--an-tono-5eead4) 0%, var(--an-tono-2bb3a3) 45%, var(--an-tono-12806f) 100%);
  box-shadow: 0 8px 22px rgba(var(--an-tono-2bb3a3-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}
vaadin-button.an-online-abrir:hover { filter: brightness(1.08); box-shadow: 0 10px 28px rgba(var(--an-tono-2bb3a3-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
vaadin-button.an-online-abrir:active { transform: translateY(1px) scale(0.98); }
vaadin-button.an-online-abrir[disabled] { filter: grayscale(0.6) brightness(0.8); cursor: default; }
vaadin-button.an-online-abrir vaadin-icon { width: 1.3rem; height: 1.3rem; }

.an-online-historial { min-height: 0; display: flex; flex-direction: column; border-radius: 20px; background: var(--on-panel);
  border: 1px solid var(--on-borde); overflow: hidden; }
.an-online-historial-titulo { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; font-weight: 800; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--an-tono-7ff0dd); background: var(--on-panel-2); }
.an-online-historial-titulo vaadin-icon { width: 1.05rem; height: 1.05rem; }
.an-online-historial-lista { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.an-online-vacio { padding: 2rem 1rem; text-align: center; color: var(--on-suave); }
.an-online-entrada { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem 0.7rem 0.55rem 0.85rem; border-radius: 12px;
  background: rgba(255, 255, 255, 0.035); border-left: 4px solid var(--on-suave); animation: an-online-entra 0.4s ease-out; }
.an-online-entrada.an-permitido { border-left-color: var(--on-verde); }
.an-online-entrada.an-denegado { border-left-color: var(--on-rojo); background: rgba(239, 68, 68, 0.07); }
@keyframes an-online-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.an-online-entrada-arriba { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.an-online-entrada-hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.an-online-entrada-punto { font-size: 0.8rem; color: var(--on-suave); }
.an-online-entrada-quien { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-online-dialogo-quien { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; font-weight: 600; }
.an-online-dialogo-quien vaadin-icon { color: var(--an-turquesa); }
@media (max-width: 1100px) {
  .an-online { height: auto; min-height: calc(100dvh - 61px); overflow: visible; }
  .an-online-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .an-online-cabecera { flex-wrap: wrap; }
  .an-online-historial { max-height: 26rem; }
}

/* ---------- Accesos online · v2 (2026-10-12): hasta 6 viales a la vista, tarjetas y placas premium ---------- */
/* Placa europea con relieve: fondo reflectante, bisel, brillo, letras en relieve y franja azul con las estrellas */
.an-placa {
  position: relative; display: inline-flex; align-items: stretch; border-radius: 7px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 48%, #dde2e7 100%);
  box-shadow: 0 0 0 1.5px #24292e, 0 0 0 3px rgba(255, 255, 255, 0.28), 0 12px 26px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 #ffffff, inset 0 -3px 4px rgba(0, 0, 0, 0.16);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}
.an-placa::after { content: ""; position: absolute; inset: 0 0 52% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }
.an-placa-franja {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.12em; width: 1.25em;
  padding: 0.18em 0 0.16em; font-size: inherit; color: #ffffff; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #2457d6 0%, #0f339c 60%, #0a2678 100%); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35);
}
.an-placa-franja { font-size: 0.42em; }
.an-placa-franja::before { content: ""; width: 1.55em; height: 1.55em; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffd200'><circle cx='17' cy='10' r='1.25'/><circle cx='16.06' cy='13.5' r='1.25'/><circle cx='13.5' cy='16.06' r='1.25'/><circle cx='10' cy='17' r='1.25'/><circle cx='6.5' cy='16.06' r='1.25'/><circle cx='3.94' cy='13.5' r='1.25'/><circle cx='3' cy='10' r='1.25'/><circle cx='3.94' cy='6.5' r='1.25'/><circle cx='6.5' cy='3.94' r='1.25'/><circle cx='10' cy='3' r='1.25'/><circle cx='13.5' cy='3.94' r='1.25'/><circle cx='16.06' cy='6.5' r='1.25'/></svg>") center / contain no-repeat; }
.an-placa-texto {
  padding: 0.06em 0.42em 0.02em; font-weight: 800; letter-spacing: 0.12em; color: #16191c; line-height: 1.12; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 3px rgba(0, 0, 0, 0.18);
}
/* Tamaño: la de la cámara crece con la tarjeta; la de la lista, fija */
.an-online-placa-caja .an-placa { font-size: clamp(1.25rem, 6.2cqw, 2.4rem); }
.an-placa.an-pequena { font-size: 1.02rem; box-shadow: 0 0 0 1px #24292e, 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff; border-radius: 5px; }
.an-placa.an-pequena .an-placa-texto { letter-spacing: 0.08em; }

/* Tarjeta de cada vial: más profundidad y un filo de luz del color del estado */
.an-online-punto {
  position: relative; container-type: inline-size;
  background: linear-gradient(165deg, var(--an-tono-12333c) 0%, var(--an-tono-0b2026) 55%, var(--an-tono-081a1f) 100%);
  border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.an-online-punto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(var(--an-tono-7ff0dd-rgb), 0.55), transparent); }
.an-online-punto.an-permitido::before { background: linear-gradient(90deg, transparent, #22c55e, transparent); box-shadow: 0 0 16px rgba(34, 197, 94, 0.8); }
.an-online-punto.an-denegado::before { background: linear-gradient(90deg, transparent, #ef4444, transparent); box-shadow: 0 0 16px rgba(239, 68, 68, 0.85); }
.an-online-punto-arriba { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); border-bottom: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.08); }
.an-online-foto { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
/* Viñeta de la imagen, como un monitor de vigilancia */
.an-online-capa { background:
  radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(var(--an-tono-02090b-rgb), 0.55) 100%),
  linear-gradient(180deg, rgba(var(--an-tono-02090b-rgb), 0.55) 0%, transparent 26%, transparent 58%, rgba(var(--an-tono-02090b-rgb), 0.9) 100%); }
.an-online-estado { backdrop-filter: blur(4px); }
.an-online-tiempo > span:first-child { font-size: clamp(0.95rem, 3.2cqw, 1.2rem); }
.an-online-punto-nombre { font-size: clamp(0.95rem, 3.4cqw, 1.15rem); }
/* «ACCESO PERMITIDO/DENEGADO» y la fecha y hora siempre en la misma fila, sin pisarse: en tarjetas estrechas los dos
   textos se hacen algo más pequeños (petición del usuario, 2026-10-25: la hora debajo «queda fatal») */
.an-online-capa { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.5rem; padding: 0.8rem 0.9rem; }
.an-online-estado, .an-online-tiempo { position: static; }
.an-online-estado { white-space: nowrap; flex: none; font-size: clamp(0.6rem, 2.5cqw, 0.85rem); letter-spacing: clamp(0.01em, 0.2cqw, 0.06em);
  padding: 0.35rem clamp(0.45rem, 2cqw, 0.85rem); gap: 0.35rem; }
.an-online-estado vaadin-icon { width: clamp(0.85rem, 3cqw, 1.1rem); height: clamp(0.85rem, 3cqw, 1.1rem); }
.an-online-tiempo { margin-left: auto; white-space: nowrap; min-width: 0; overflow: hidden; text-align: right; }
.an-online-tiempo > span { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Con la tarjeta estrecha (al mover la ventana o con el menú abierto) se pisaban (aviso del usuario, 2026-10-25): primero
   el letrero corto («PERMITIDO»); más estrecha, la hora sin año ni segundos; y, si aun así no cabe, la hora se corta con «…» */
.an-online-estado-corto { display: none; }
@container (max-width: 400px) {
  .an-online-estado-largo { display: none; }
  .an-online-estado-corto { display: inline; }
}
@container (max-width: 320px) { .an-online-anio, .an-online-segundos { display: none; } }
.an-online-tiempo > span:first-child { font-size: clamp(0.72rem, 3.6cqw, 1.2rem); }
.an-online-tiempo > span:last-child { font-size: clamp(0.66rem, 2.4cqw, 0.78rem); }
/* En tarjetas estrechas, «Sin imagen de la cámara» quedaba detrás de la hora y la matrícula: solo el icono */
@container (max-width: 420px) { .an-online-sin-imagen span { display: none; } }

/* Todos los viales con OCR a la vista y del mismo tamaño: columnas y filas que pone la pantalla según cuántos hay (1-3 en
   fila, 4 en 2 × 2, 5-6 en 3 × 2, 7-8 en 4 × 2, 9 en 3 × 3…; petición del usuario, 2026-10-25). Si no caben, se desplaza */
@media (min-width: 1101px) {
  /* Las columnas previstas, pero ninguna tarjeta por debajo de 16rem: con la ventana pequeña o el menú abierto quedaban de
     125 px y los textos se pisaban (2026-10-25); entonces caben menos por fila y se desplaza */
  .an-online-puntos { grid-template-columns: repeat(auto-fill, minmax(max(16rem, calc((100% - (var(--on-columnas, 3) - 1) * 1rem) / var(--on-columnas, 3) - 0.5px)), 1fr));
    grid-auto-rows: minmax(min-content, 1fr); /* nunca más baja que su tarjeta: con 15rem se cortaba «Abrir barrera» (2026-10-25) */ align-content: stretch; }
  .an-online-puntos .an-online-punto { min-height: 0; }
  .an-online-puntos .an-online-foto { aspect-ratio: auto; flex: 1 1 auto; min-height: 7rem; }
  /* Con 5 o más viales: cabecera y pie más compactos */
  .an-online-muchos .an-online-punto-pie { padding: 0.6rem 0.8rem; gap: 0.5rem; }
  .an-online-muchos vaadin-button.an-online-abrir { height: 2.6rem; padding: 0 1rem; font-size: 0.95rem; }
  .an-online-muchos .an-online-punto-arriba { padding: 0.6rem 0.8rem; }
}

/* Accesos online en modo día: clara, como el resto de la aplicación (petición del usuario 2026-10-12); en modo noche,
   la sala de control oscura. La imagen de la cámara siempre sobre negro, como un monitor. */
html:not([theme~="dark"]) .an-online {
  --on-fondo: var(--an-tono-eef4f5); --on-panel: #ffffff; --on-panel-2: var(--an-tono-f5fafa); --on-borde: rgba(var(--an-tono-12343b-rgb), 0.10);
  --on-texto: var(--an-tono-12343b); --on-suave: var(--an-tono-5d7a80);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(var(--an-tono-2bb3a3-rgb), 0.12), transparent 60%), var(--on-fondo);
}
html:not([theme~="dark"]) .an-online-cabecera {
  background: linear-gradient(135deg, #ffffff 0%, var(--an-tono-f1f8f7) 100%); border-color: rgba(var(--an-tono-12343b-rgb), 0.08);
  box-shadow: 0 8px 24px rgba(var(--an-tono-12343b-rgb), 0.08), inset 0 1px 0 #ffffff;
}
html:not([theme~="dark"]) .an-online-conexion { color: var(--an-tono-0f8f80); }
html:not([theme~="dark"]) .an-online-boton { background: rgba(var(--an-tono-12343b-rgb), 0.05); }
html:not([theme~="dark"]) .an-online-boton:hover { background: rgba(var(--an-tono-2bb3a3-rgb), 0.16); }
html:not([theme~="dark"]) .an-online-boton.an-activo { background: var(--an-tono-2bb3a3); color: #fff; }
html:not([theme~="dark"]) .an-online-zona { background: rgba(var(--an-tono-2bb3a3-rgb), 0.10); border-color: rgba(var(--an-tono-2bb3a3-rgb), 0.35); }
html:not([theme~="dark"]) .an-online-punto {
  background: linear-gradient(165deg, #ffffff 0%, var(--an-tono-f8fbfb) 100%); border-color: rgba(var(--an-tono-12343b-rgb), 0.08);
  box-shadow: 0 14px 34px rgba(var(--an-tono-12343b-rgb), 0.10), 0 2px 6px rgba(var(--an-tono-12343b-rgb), 0.05);
}
html:not([theme~="dark"]) .an-online-punto.an-permitido { border-color: rgba(34, 197, 94, 0.45); }
html:not([theme~="dark"]) .an-online-punto.an-denegado { border-color: rgba(239, 68, 68, 0.5); }
html:not([theme~="dark"]) .an-online-punto-arriba { background: linear-gradient(180deg, var(--an-tono-f5fafa), #ffffff); border-bottom-color: rgba(var(--an-tono-12343b-rgb), 0.06); }
html:not([theme~="dark"]) .an-online-aforo { background: rgba(var(--an-tono-12343b-rgb), 0.06); }
html:not([theme~="dark"]) .an-online-vehiculo.an-desconocido, html:not([theme~="dark"]) .an-online-vehiculo.an-desconocido vaadin-icon { color: #b45309; }
html:not([theme~="dark"]) .an-online-apertura.an-enviando { color: var(--an-tono-0f8f80); }
html:not([theme~="dark"]) .an-online-apertura.an-abierta { color: #15803d; }
html:not([theme~="dark"]) .an-online-apertura.an-fallo { color: #b91c1c; }
html:not([theme~="dark"]) .an-online-historial { box-shadow: 0 14px 34px rgba(var(--an-tono-12343b-rgb), 0.08); }
html:not([theme~="dark"]) .an-online-historial-titulo { color: var(--an-tono-0f6f65); }
html:not([theme~="dark"]) .an-online-entrada { background: var(--an-tono-f4f8f9); }
html:not([theme~="dark"]) .an-online-entrada.an-denegado { background: #fdf2f2; }
html:not([theme~="dark"]) .an-online-sin-imagen { color: rgba(var(--an-tono-e9fbf8-rgb), 0.6); }
/* Sobre la imagen (siempre oscura), la hora en blanco también en modo día */
.an-online-tiempo { color: #ffffff; }

/* Guía de horarios: calendarios con turno rotativo, con su botón para abrir la ficha (2026-10-12) */
.an-crear-horario-lista .an-crear-horario-fila { grid-template-columns: minmax(10rem, 16rem) auto auto; justify-content: start; align-items: center; column-gap: 1.2rem; padding: 0.45rem 0; }
/* Botón premium claro: blanco, borde y texto turquesa, se eleva al pasar el ratón */
vaadin-button.an-boton-claro {
  height: 2.2rem; padding: 0 0.95rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  color: var(--an-tono-0f6f65); background: linear-gradient(180deg, #ffffff 0%, var(--an-tono-eef8f6) 100%);
  border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.45); box-shadow: 0 2px 6px rgba(var(--an-tono-12343b-rgb), 0.08), inset 0 1px 0 #ffffff;
  transition: transform 0.12s, box-shadow 0.2s, border-color 0.2s;
}
vaadin-button.an-boton-claro:hover { transform: translateY(-1px); border-color: var(--an-tono-2bb3a3); box-shadow: 0 6px 16px rgba(var(--an-tono-2bb3a3-rgb), 0.25), inset 0 1px 0 #ffffff; }
vaadin-button.an-boton-claro vaadin-icon { color: var(--an-tono-2bb3a3); width: 1rem; height: 1rem; }
html[theme~="dark"] vaadin-button.an-boton-claro { color: var(--an-tono-9ff0e4); background: linear-gradient(180deg, rgba(var(--an-tono-2bb3a3-rgb), 0.18), rgba(var(--an-tono-2bb3a3-rgb), 0.08)); border-color: rgba(var(--an-tono-7ff0dd-rgb), 0.35); box-shadow: none; }
html[theme~="dark"] vaadin-button.an-boton-claro vaadin-icon { color: var(--an-tono-7ff0dd); }

/* ============================================================ Licencia (Ayuda › Licencia; 2026-10-12) */
.an-licencia { padding: 1.75rem 2rem 2.5rem; box-sizing: border-box; max-width: 1180px; display: flex; flex-direction: column; gap: 1.25rem; }
.an-licencia-cabecera {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.6rem; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, var(--an-tono-12343b) 0%, var(--an-tono-1a5c63) 55%, var(--an-tono-2bb3a3) 100%);
  box-shadow: 0 16px 36px rgba(var(--an-tono-12343b-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.an-licencia-cabecera.an-evaluacion { background: linear-gradient(135deg, #3b2a0b 0%, #8a5a0f 55%, #f59e0b 100%); }
.an-licencia-cabecera.an-sin { background: linear-gradient(135deg, #3b0b0b 0%, #8a1f1f 55%, #ef4444 100%); }
.an-licencia-icono { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 18px; flex: none;
  background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.an-licencia-icono vaadin-icon { width: 2rem; height: 2rem; color: #fff; }
.an-licencia-textos h2 { margin: 0; color: #fff; font-size: 1.6rem; }
.an-licencia-textos > span { color: rgba(255, 255, 255, 0.85); }
.an-licencia-aviso-llave { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-radius: 12px;
  background: #fef3c7; color: #92400e; font-weight: 600; }
.an-licencia-seccion { padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--an-superficie); border: 1px solid var(--an-borde);
  box-shadow: var(--an-sombra); }
.an-licencia-seccion h3 { margin: 0 0 0.9rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--an-texto-suave); }
.an-licencia-modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 900px) { .an-licencia-modulos { grid-template-columns: minmax(0, 1fr); } }
.an-licencia-modulo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 0.85rem;
  row-gap: 0.2rem; padding: 1rem; border-radius: 16px; border: 1px solid var(--an-borde); background: var(--an-superficie); }
.an-licencia-modulo-icono { grid-row: 1 / 4; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 14px; }
.an-licencia-modulo-icono vaadin-icon { width: 1.4rem; height: 1.4rem; color: #fff; }
.an-licencia-modulo.an-incluido { border-color: rgba(var(--an-tono-2bb3a3-rgb), 0.45); background: linear-gradient(160deg, rgba(var(--an-tono-2bb3a3-rgb), 0.08), transparent 70%); }
.an-licencia-modulo.an-incluido .an-licencia-modulo-icono { background: linear-gradient(135deg, var(--an-tono-40d6c2), var(--an-tono-127068)); box-shadow: 0 6px 16px rgba(var(--an-tono-2bb3a3-rgb), 0.35); }
.an-licencia-modulo.an-no-incluido { opacity: 0.75; }
.an-licencia-modulo.an-no-incluido .an-licencia-modulo-icono { background: #94a3b8; }
.an-licencia-modulo-nombre { font-weight: 800; font-size: 1.05rem; }
.an-licencia-modulo-que { font-size: 0.82rem; color: var(--an-texto-suave); }
.an-licencia-modulo-estado { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; }
.an-incluido .an-licencia-modulo-estado { color: var(--an-tono-0f8f80); }
.an-no-incluido .an-licencia-modulo-estado { color: #64748b; }
.an-licencia-modulo-estado vaadin-icon { width: 1rem; height: 1rem; }
.an-licencia-empleados > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.an-licencia-cifra { font-size: 1.25rem; font-weight: 800; }
.an-licencia-tramo { font-weight: 700; color: var(--an-texto-suave); }
.an-licencia-barra { height: 0.8rem; border-radius: 999px; background: rgba(var(--an-tono-12343b-rgb), 0.08); overflow: hidden; }
.an-licencia-barra-lleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--an-tono-40d6c2), var(--an-tono-2bb3a3)); transition: width 0.4s; }
.an-licencia-barra.an-casi .an-licencia-barra-lleno { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.an-licencia-barra.an-lleno .an-licencia-barra-lleno { background: linear-gradient(90deg, #f87171, #ef4444); }
.an-licencia-fila-codigo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.an-licencia-codigo { font-family: Consolas, "Courier New", monospace; font-size: 1.55rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.55rem 1rem;
  border-radius: 12px; background: rgba(var(--an-tono-2bb3a3-rgb), 0.08); border: 1px dashed rgba(var(--an-tono-2bb3a3-rgb), 0.55); color: var(--an-texto); user-select: all; }
.an-licencia-llave textarea { font-family: Consolas, "Courier New", monospace; font-size: 0.85rem; }
.an-licencia-llave { --vaadin-text-area-min-height: 6rem; }
html[theme~="dark"] .an-licencia-barra { background: rgba(255, 255, 255, 0.08); }
html[theme~="dark"] .an-licencia-aviso-llave { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
/* Aviso de evaluación en la barra de arriba */
.an-licencia-aviso { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; text-decoration: none;
  font-size: 0.78rem; font-weight: 800; white-space: nowrap; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.an-licencia-aviso vaadin-icon { width: 0.9rem; height: 0.9rem; }
.an-licencia-aviso.an-sin-licencia { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
html[theme~="dark"] .an-licencia-aviso { color: #fcd34d; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.45); }
html[theme~="dark"] .an-licencia-aviso.an-sin-licencia { color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); }
/* Versión nueva de AutoNET (solo supervisores): turquesa con un pulso suave; ámbar si hay que renovar el mantenimiento */
.an-act-aviso:not(.an-act-renovar) { color: var(--an-tono-0f5a57); background: linear-gradient(135deg, var(--an-tono-d9f7f2), var(--an-tono-bdeee6)); border-color: var(--an-tono-5fd3c2);
  animation: an-act-pulso 2.8s ease-in-out infinite; }
html[theme~="dark"] .an-act-aviso:not(.an-act-renovar) { color: var(--an-tono-7ff0dd); background: rgba(var(--an-tono-2bb3a3-rgb), 0.16); border-color: rgba(var(--an-tono-2bb3a3-rgb), 0.55); }
@keyframes an-act-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--an-tono-2bb3a3-rgb), 0); } 50% { box-shadow: 0 0 0 4px rgba(var(--an-tono-2bb3a3-rgb), 0.22); } }
@media (prefers-reduced-motion: reduce) { .an-act-aviso { animation: none !important; } }
@media (max-width: 760px) { .an-act-aviso span { display: none; } }
/* Ventana «Hay una versión nueva» */
.an-act-nota { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; padding: 0.75rem 0.95rem; border-radius: 14px;
  font-size: 0.92rem; line-height: 1.45; color: var(--an-texto); background: var(--an-superficie-2); border: 1px solid var(--an-borde); }
.an-act-nota vaadin-icon { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; color: var(--an-tono-2bb3a3); }
.an-act-nota-importante { background: #fff7ed; border-color: #fdba74; color: #7c2d12; font-weight: 600; }
.an-act-nota-importante vaadin-icon { color: #ea580c; }
html[theme~="dark"] .an-act-nota-importante { background: rgba(234, 88, 12, 0.14); border-color: rgba(234, 88, 12, 0.5); color: #fed7aa; }
.an-nov-pie.an-act-pie { justify-content: space-between; gap: 0.75rem; }
.an-aj-actualizaciones { scroll-margin-top: 5rem; }

/* Licencia a pantalla completa (petición del usuario 2026-10-12): cabecera arriba; a la izquierda qué incluye y empleados,
   a la derecha código y activación; en pantallas estrechas, una columna */
.an-licencia { max-width: none; width: 100%; height: calc(100dvh - 61px); padding: 1.25rem 1.5rem 1.5rem; gap: 1rem; overflow: hidden; }
.an-licencia-cabecera { flex: none; padding: 1.2rem 1.6rem; }
.an-licencia-cuerpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; }
.an-licencia-columna { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.an-licencia-columna > .an-licencia-seccion:first-child { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.an-licencia-columna > .an-licencia-seccion:first-child > :last-child { flex: 1 1 auto; min-height: 0; }
/* Módulos: tarjetas grandes que llenan el alto */
.an-licencia-cuerpo .an-licencia-modulos { height: 100%; align-items: stretch; }
.an-licencia-cuerpo .an-licencia-modulo { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.55rem;
  padding: 1.5rem 1.4rem; border-radius: 20px; }
.an-licencia-cuerpo .an-licencia-modulo-icono { width: 4rem; height: 4rem; border-radius: 18px; margin-bottom: 0.4rem; }
.an-licencia-cuerpo .an-licencia-modulo-icono vaadin-icon { width: 2rem; height: 2rem; }
.an-licencia-cuerpo .an-licencia-modulo-nombre { font-size: 1.45rem; }
.an-licencia-cuerpo .an-licencia-modulo-que { font-size: 0.95rem; line-height: 1.4; }
.an-licencia-cuerpo .an-licencia-modulo-estado { margin-top: auto; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.82rem; }
.an-licencia-cuerpo .an-incluido .an-licencia-modulo-estado { background: rgba(var(--an-tono-2bb3a3-rgb), 0.12); }
.an-licencia-cuerpo .an-no-incluido .an-licencia-modulo-estado { background: rgba(100, 116, 139, 0.12); }
.an-licencia-cuerpo .an-licencia-cifra { font-size: 1.6rem; }
.an-licencia-cuerpo .an-licencia-barra { height: 1rem; }
/* Derecha: el código más grande y la llave estirada hasta abajo */
.an-licencia-cuerpo .an-licencia-codigo { font-size: clamp(1.3rem, 1.9vw, 2rem); }
.an-licencia-activacion { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.an-licencia-activacion > div { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 0.4rem; }
.an-licencia-activacion vaadin-text-area.an-licencia-llave { flex: 1 1 auto; min-height: 7rem; }
.an-licencia-activacion vaadin-button { align-self: flex-start; height: 2.9rem; padding: 0 1.4rem; font-size: 1rem; border-radius: 14px; }
@media (max-width: 1200px), (max-height: 760px) {
  .an-licencia { height: auto; overflow: visible; }
  .an-licencia-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .an-licencia-cuerpo .an-licencia-modulos { height: auto; }
}
@media (max-width: 900px) { .an-licencia-cuerpo .an-licencia-modulos { grid-template-columns: minmax(0, 1fr); } }

/* Licencia v3 (2026-10-12): cada módulo con lo que se puede hacer y dónde; datos de la licencia; nada vacío estirado */
.an-licencia-columna > .an-licencia-seccion:first-child { flex: none; }
.an-licencia-columna > .an-licencia-seccion:first-child > :last-child { flex: none; }
.an-licencia-cuerpo .an-licencia-modulos { height: auto; }
.an-licencia-cuerpo .an-licencia-modulo { justify-content: flex-start; gap: 0.9rem; padding: 1.2rem; }
.an-licencia-modulo-arriba { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.6rem; width: 100%; align-items: center; }
.an-licencia-modulo-arriba > div:nth-child(2) { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-licencia-modulo-arriba .an-licencia-modulo-estado { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
.an-licencia-cuerpo .an-licencia-modulo-icono { width: 3.2rem; height: 3.2rem; margin: 0; }
.an-licencia-cuerpo .an-licencia-modulo-icono vaadin-icon { width: 1.6rem; height: 1.6rem; }
.an-licencia-cuerpo .an-licencia-modulo-nombre { font-size: 1.25rem; }
.an-licencia-cuerpo .an-licencia-modulo-que { font-size: 0.85rem; }
.an-licencia-funciones { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; padding-top: 0.7rem; border-top: 1px dashed var(--an-borde); }
.an-licencia-funcion { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem;
  border-radius: 12px; color: var(--an-texto); text-decoration: none; transition: background 0.15s, transform 0.15s; }
.an-licencia-funcion-icono { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: rgba(var(--an-tono-2bb3a3-rgb), 0.12); }
.an-licencia-funcion-icono vaadin-icon { width: 1rem; height: 1rem; color: var(--an-tono-0f8f80); }
.an-licencia-funcion-textos { display: flex; flex-direction: column; min-width: 0; }
.an-licencia-funcion-nombre { font-weight: 700; font-size: 0.9rem; }
.an-licencia-funcion-donde { font-size: 0.74rem; color: var(--an-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-licencia-funcion-ir { opacity: 0; color: var(--an-tono-2bb3a3); transition: opacity 0.15s, transform 0.15s; }
.an-licencia-funcion-ir vaadin-icon { width: 1rem; height: 1rem; }
a.an-licencia-funcion:hover { background: rgba(var(--an-tono-2bb3a3-rgb), 0.10); transform: translateX(2px); }
a.an-licencia-funcion:hover .an-licencia-funcion-ir { opacity: 1; transform: translateX(2px); }
.an-no-incluido .an-licencia-funcion { opacity: 0.55; }
.an-no-incluido .an-licencia-funcion-icono { background: rgba(100, 116, 139, 0.12); }
.an-no-incluido .an-licencia-funcion-icono vaadin-icon { color: #64748b; }
html[theme~="dark"] .an-licencia-funcion-icono vaadin-icon { color: var(--an-tono-7ff0dd); }
/* Datos de la licencia: rejilla de dos columnas */
.an-licencia-seccion-datos { flex: 1 1 auto; }
.an-licencia-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem 1.2rem; }
.an-licencia-dato { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(var(--an-tono-2bb3a3-rgb), 0.05);
  border: 1px solid var(--an-borde); }
.an-licencia-dato-que { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--an-texto-suave); }
.an-licencia-dato-valor { font-weight: 700; overflow-wrap: anywhere; }
/* Licencia v4: datos a la derecha, la ruta del menú entera y cada columna con su desplazamiento si no cabe */
.an-licencia-funcion-donde { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.an-licencia-columna { overflow: auto; padding-right: 0.15rem; }
.an-licencia-seccion-datos { flex: none; }
.an-licencia-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-licencia-activacion vaadin-text-area.an-licencia-llave { min-height: 5.5rem; }
/* Licencia v5: datos en una franja compacta a todo el ancho; lista de funciones más apretada */
.an-licencia > .an-licencia-seccion-datos { flex: none; padding: 0.7rem 1.2rem; }
.an-licencia > .an-licencia-seccion-datos > h3 { display: none; }
.an-licencia > .an-licencia-seccion-datos .an-licencia-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0; }
.an-licencia > .an-licencia-seccion-datos .an-licencia-dato { background: none; border: none; border-radius: 0; padding: 0.2rem 0.9rem;
  border-left: 1px solid var(--an-borde); }
.an-licencia > .an-licencia-seccion-datos .an-licencia-dato:first-child { border-left: none; padding-left: 0.2rem; }
.an-licencia-funciones { gap: 0.1rem; padding-top: 0.5rem; }
.an-licencia-funcion { padding: 0.32rem 0.5rem; }
.an-licencia-cuerpo .an-licencia-modulo { gap: 0.6rem; padding: 1rem 1.1rem; }
.an-licencia-activacion vaadin-text-area.an-licencia-llave { min-height: 7rem; }

/* Entrada: empresa de la licencia bajo «Bienvenido» (2026-10-12) */
.an-login-empresa { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; margin: -0.2rem 0 0.4rem; padding: 0.35rem 0.85rem;
  border-radius: 999px; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--an-tono-0f6f65);
  background: linear-gradient(180deg, #ffffff, var(--an-tono-eef8f6)); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), 0.45); box-shadow: 0 2px 8px rgba(var(--an-tono-12343b-rgb), 0.08); }
.an-login-empresa vaadin-icon { width: 1rem; height: 1rem; color: var(--an-tono-2bb3a3); }
html[theme~="dark"] .an-login-empresa { color: var(--an-tono-9ff0e4); background: rgba(var(--an-tono-2bb3a3-rgb), 0.14); border-color: rgba(var(--an-tono-7ff0dd-rgb), 0.35); box-shadow: none; }
/* Licencia v6: «Qué incluye» ocupa el alto libre de la izquierda, así «Empleados» se alinea abajo con la activación */
.an-licencia-cuerpo > .an-licencia-columna:first-child > .an-licencia-seccion:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.an-licencia-cuerpo > .an-licencia-columna:first-child > .an-licencia-seccion:first-child > .an-licencia-modulos { flex: 1 1 auto; height: auto; align-items: stretch; }
/* Licencia v7: líneas de función compactas (el «dónde» entero al pasar el ratón) para que todo quepa sin pisar Empleados */
.an-licencia-cuerpo .an-licencia-modulo { overflow: hidden; }
.an-licencia-funcion { grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.22rem 0.45rem; }
.an-licencia-funcion-icono { width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.an-licencia-funcion-icono vaadin-icon { width: 0.85rem; height: 0.85rem; }
.an-licencia-funcion-nombre { font-size: 0.85rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-licencia-funcion-donde { font-size: 0.7rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-licencia-cuerpo .an-licencia-modulo-arriba { row-gap: 0.4rem; }
.an-licencia-cuerpo .an-licencia-modulo-que { font-size: 0.8rem; }
.an-licencia-funcion-nombre { white-space: normal; overflow: visible; text-overflow: clip; }
/* Licencia v8 (petición del usuario 2026-10-12): sin textos cortados y a tamaño normal; las tarjetas llenan su alto */
.an-licencia-funcion { grid-template-columns: 1.85rem minmax(0, 1fr) auto; gap: 0.55rem; padding: 0.3rem 0.5rem; }
.an-licencia-funcion-icono { width: 1.85rem; height: 1.85rem; border-radius: 9px; }
.an-licencia-funcion-icono vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-licencia-funcion-nombre { font-size: 0.92rem; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }
.an-licencia-funcion-donde { font-size: 0.76rem; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }
.an-licencia-cuerpo .an-licencia-modulo-que { font-size: 0.85rem; }
.an-licencia-funciones { flex: 1 1 auto; justify-content: space-between; }
/* Licencia v9: la izquierda más ancha (la derecha tenía sitio de sobra): las funciones caben enteras */
.an-licencia-cuerpo { grid-template-columns: minmax(0, 2.35fr) minmax(23rem, 1fr); }
.an-licencia-cuerpo .an-licencia-codigo { font-size: clamp(1.1rem, 1.45vw, 1.7rem); letter-spacing: 0.05em; }
/* Licencia v10: sello «Incluido» arriba a la derecha (sin fila propia) y el código en una línea */
.an-licencia-cuerpo .an-licencia-modulo { position: relative; }
.an-licencia-cuerpo .an-licencia-modulo-arriba .an-licencia-modulo-estado { position: absolute; top: 0.85rem; right: 0.85rem; grid-column: auto; margin: 0; }
.an-licencia-cuerpo .an-licencia-modulo-arriba > div:nth-child(2) { padding-right: 6.5rem; }
.an-licencia-cuerpo .an-licencia-codigo { white-space: nowrap; font-size: clamp(0.95rem, 1.2vw, 1.5rem); }
.an-licencia-cuerpo .an-licencia-modulo-arriba > div:nth-child(2) { padding-right: 0; }
.an-licencia-cuerpo .an-licencia-modulo-nombre { padding-right: 6.8rem; }
/* Licencia v11 (petición del usuario): funciones juntas y más grandes, sin repartir el espacio entre ellas */
.an-licencia-funciones { justify-content: flex-start; gap: 0.15rem; }
.an-licencia-funcion { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.65rem; padding: 0.32rem 0.5rem; }
.an-licencia-funcion-icono { width: 2.2rem; height: 2.2rem; border-radius: 11px; }
.an-licencia-funcion-icono vaadin-icon { width: 1.1rem; height: 1.1rem; }
.an-licencia-funcion-nombre { font-size: 1.02rem; }
.an-licencia-funcion-donde { font-size: 0.84rem; }
/* Licencia v12: 6 funciones por módulo y el sello «Incluido» de nuevo en su fila (el título no se parte) */
.an-licencia-cuerpo .an-licencia-modulo-arriba .an-licencia-modulo-estado { position: static; grid-column: 1 / -1; justify-self: start; }
.an-licencia-cuerpo .an-licencia-modulo-nombre { padding-right: 0; }

/* Menú: línea fina de separación entre grupos, como los separadores de la 12 (2026-10-12): degradado turquesa que se
   difumina en los extremos, con aire arriba y abajo */
.an-main vaadin-side-nav-item.an-separado { position: relative; margin-top: 0.55rem; padding-top: 0.45rem; }
.an-main vaadin-side-nav-item.an-separado::before {
  content: ""; position: absolute; top: 0; left: 0.75rem; right: 0.75rem; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--an-tono-2bb3a3-rgb), 0.55) 18%, rgba(var(--an-tono-2bb3a3-rgb), 0.55) 82%, transparent 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
html:not([theme~="dark"]) .an-main vaadin-side-nav-item.an-separado::before {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--an-tono-0f6f65-rgb), 0.35) 18%, rgba(var(--an-tono-0f6f65-rgb), 0.35) 82%, transparent 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.an-main vaadin-side-nav-item.an-separado { margin-top: 0.3rem; padding-top: 0.3rem; }

/* Perfil de usuarios: esquema animado de cómo se da acceso (2026-10-12), con el estilo del esquema de horarios */
.an-esqa { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.an-esqa-cabecera { display: flex; flex-direction: column; gap: 0.2rem; }
.an-esqa-titulo { font-size: 1.15rem; font-weight: 800; color: var(--an-texto); }
.an-esqa-intro { font-size: 0.9rem; color: var(--an-texto-suave); }
.an-esq-lienzo.an-esqa-lienzo { grid-template-columns: minmax(150px, 1fr) minmax(70px, 0.45fr) minmax(150px, 1fr) minmax(70px, 0.45fr) minmax(150px, 1fr) minmax(70px, 0.45fr) minmax(170px, 1.1fr);
  grid-template-rows: auto; }
.an-esqa-mini { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.an-esqa-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.12rem 0.5rem 0.12rem 0.35rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.an-esqa-chip vaadin-icon { width: 0.8rem; height: 0.8rem; }
.an-esqa-chip.an-si { color: var(--an-tono-e8fffb); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .5); background: rgba(var(--an-tono-2bb3a3-rgb), .22); }
.an-esqa-chip.an-no { color: rgba(var(--an-tono-e8fffb-rgb), .45); border: 1px dashed rgba(255, 255, 255, .2); text-decoration: line-through; }
.an-esqa-mini-usuario { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.an-esqa-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: 800; font-size: 0.75rem;
  background: linear-gradient(135deg, var(--an-tono-40d6c2), var(--an-tono-127068)); box-shadow: 0 0 12px rgba(var(--an-tono-40d6c2-rgb), .55); }
.an-esqa-mini-datos { display: flex; flex-direction: column; gap: 0.4rem; }
.an-esqa-caras { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.an-esqa-caras > span { aspect-ratio: 1; border-radius: 50%; }
.an-esqa-caras > span.an-ve { background: var(--an-tono-7ff0dd); box-shadow: 0 0 8px rgba(var(--an-tono-7ff0dd-rgb), .7); animation: an-esqa-latido 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
.an-esqa-caras > span.an-oculto { background: rgba(255, 255, 255, .12); }
@keyframes an-esqa-latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
.an-esqa-cuantos { font-size: 0.75rem; font-weight: 800; color: var(--an-tono-7ff0dd); }
.an-esqa-resultado { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.8rem; align-items: center; padding: 0.9rem 1.1rem;
  border-radius: 16px; background: linear-gradient(135deg, rgba(var(--an-tono-2bb3a3-rgb), .14), rgba(var(--an-tono-2bb3a3-rgb), .04)); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .4); }
.an-esqa-resultado > vaadin-icon { grid-row: 1 / 3; width: 1.6rem; height: 1.6rem; color: var(--an-tono-2bb3a3); }
.an-esqa-resultado > span:nth-child(2) { font-weight: 800; }
.an-esqa-resultado > span:nth-child(3) { font-size: 0.88rem; color: var(--an-texto-suave); }
.an-esqa-notas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
@media (max-width: 1100px) { .an-esqa-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-esq-lienzo.an-esqa-lienzo { grid-template-columns: 1fr; } .an-esqa-lienzo .an-esq-con { min-height: 2.2rem; } }
.an-esqa-nota { display: flex; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 14px; border: 1px solid var(--an-borde); background: var(--an-superficie); }
.an-esqa-nota-icono { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 10px; background: rgba(var(--an-tono-2bb3a3-rgb), .12); }
.an-esqa-nota-icono vaadin-icon { width: 1rem; height: 1rem; color: var(--an-tono-0f8f80); }
.an-esqa-nota > div { display: flex; flex-direction: column; gap: 0.1rem; }
.an-esqa-nota-titulo { font-weight: 800; font-size: 0.88rem; }
.an-esqa-nota-texto { font-size: 0.8rem; color: var(--an-texto-suave); }
.an-esqa-mini { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.an-esqa-chip { flex: none; width: auto; max-width: none; white-space: nowrap; position: static; }
.an-esqa-chip > span { position: static; display: inline; width: auto; }
.an-esqa-chip > vaadin-icon { position: static; flex: none; margin: 0; }

/* ============================================================ Ayuda (2026-10-12) */
/* Botón «?» de la barra: insignia redonda turquesa (2026-10-12) */
vaadin-button.an-boton-ayuda, vaadin-button.an-boton-ayuda[theme] { --vaadin-button-background: transparent; --lumo-button-background: transparent; min-width: 0; width: 34px; height: 34px; padding: 0; margin: 0 0.15rem; border-radius: 50%; cursor: pointer;
  background: linear-gradient(145deg, var(--an-tono-3cc9b6) 0%, var(--an-tono-2bb3a3) 45%, var(--an-tono-17696a) 100%) !important; color: #fff; border: none;
  box-shadow: 0 6px 16px -6px rgba(var(--an-tono-17696a-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
vaadin-button.an-boton-ayuda:hover { transform: translateY(-1px) scale(1.06); filter: brightness(1.06);
  box-shadow: 0 10px 22px -8px rgba(var(--an-tono-2bb3a3-rgb), 0.9), 0 0 0 4px rgba(var(--an-tono-2bb3a3-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
vaadin-button.an-boton-ayuda:active { transform: scale(0.96); }
.an-boton-ayuda-signo { font: 800 18px/1 var(--lumo-font-family); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); margin-top: -1px; }
html[theme~="dark"] vaadin-button.an-boton-ayuda { box-shadow: 0 6px 18px -6px rgba(var(--an-tono-2bb3a3-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.an-ayuda-vista { height: calc(100dvh - 61px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.4rem 1.2rem; overflow: hidden; }
.an-ay-cabecera { flex: none; display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.4rem; border-radius: 22px; color: #fff;
  background: radial-gradient(70% 140% at 0% 0%, rgba(var(--an-tono-7ff0dd-rgb), .25), transparent 60%), linear-gradient(135deg, var(--an-tono-0f3a42) 0%, var(--an-tono-12515a) 55%, var(--an-tono-2bb3a3) 130%);
  box-shadow: 0 16px 36px rgba(var(--an-tono-12343b-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .1); }
.an-ay-marca-icono { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 18px; flex: none; background: rgba(255, 255, 255, .15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 24px rgba(var(--an-tono-7ff0dd-rgb), .35); }
.an-ay-marca-icono vaadin-icon { width: 1.9rem; height: 1.9rem; color: #fff; }
.an-ay-titulos { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.an-ay-titulos h1 { margin: 0; font-size: 1.6rem; color: #fff; letter-spacing: -.01em; }
.an-ay-titulos > span { color: rgba(255, 255, 255, .82); font-size: .92rem; }
vaadin-text-field.an-ay-buscar { margin-left: auto; width: min(36rem, 45%); --vaadin-input-field-height: 2.9rem; }
vaadin-text-field.an-ay-buscar::part(input-field) { background: #fff; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); padding: 0 1rem; }
vaadin-text-field.an-ay-buscar vaadin-icon { color: var(--an-tono-2bb3a3); }
html[theme~="dark"] vaadin-text-field.an-ay-buscar::part(input-field) { background: var(--an-tono-0d2328); }
.an-ay-cuerpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.1rem; }
.an-ay-indice { overflow: auto; padding: .7rem; border-radius: 20px; background: var(--an-superficie); border: 1px solid var(--an-borde); box-shadow: var(--an-sombra); }
.an-ay-ind-grupo { margin-bottom: .1rem; }
a.an-ay-ind-cap { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 12px; text-decoration: none; color: var(--an-texto); font-weight: 650; font-size: .92rem; }
a.an-ay-ind-cap:hover { background: rgba(var(--an-tono-2bb3a3-rgb), .09); }
.an-ay-ind-grupo.an-abierto > a.an-ay-ind-cap { background: linear-gradient(90deg, rgba(var(--an-tono-2bb3a3-rgb), .2), rgba(var(--an-tono-2bb3a3-rgb), .04)); color: var(--an-tono-0f6f65); box-shadow: inset 3px 0 0 var(--an-tono-2bb3a3); }
html[theme~="dark"] .an-ay-ind-grupo.an-abierto > a.an-ay-ind-cap { color: var(--an-tono-9ff0e4); }
a.an-ay-ind-cap vaadin-icon { width: 1.05rem; height: 1.05rem; color: var(--an-tono-2bb3a3); flex: none; }
.an-ay-ind-subs { display: flex; flex-direction: column; padding: .2rem 0 .4rem 2.2rem; border-left: 1px dashed rgba(var(--an-tono-2bb3a3-rgb), .35); margin-left: 1.15rem; }
.an-ay-ind-sub { padding: .28rem .5rem; border-radius: 8px; font-size: .84rem; color: var(--an-texto-suave); cursor: pointer; }
.an-ay-ind-sub:hover { color: var(--an-texto); background: rgba(var(--an-tono-2bb3a3-rgb), .08); }
.an-ay-contenido { overflow: auto; padding: 1.6rem 2.2rem 3rem; border-radius: 20px; background: var(--an-superficie); border: 1px solid var(--an-borde);
  box-shadow: var(--an-sombra); scroll-behavior: smooth; }
.an-ay-cap-titulo { display: flex; align-items: center; gap: .8rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: .6rem; color: var(--an-texto); }
.an-ay-cap-titulo vaadin-icon { width: 2rem; height: 2rem; color: var(--an-tono-2bb3a3); padding: .45rem; border-radius: 14px; background: rgba(var(--an-tono-2bb3a3-rgb), .12); }
.an-ay-capitulo { max-width: 72rem; font-size: 1.02rem; line-height: 1.7; color: var(--an-texto); }
.an-ay-capitulo h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; padding-top: 1.2rem; border-top: 1px solid var(--an-borde); scroll-margin-top: 1rem; letter-spacing: -.01em; }
.an-ay-capitulo h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; color: var(--an-tono-0f6f65); }
html[theme~="dark"] .an-ay-capitulo h3 { color: var(--an-tono-7ff0dd); }
.an-ay-capitulo p { margin: .55rem 0; }
.an-ay-capitulo .an-ay-lead { font-size: 1.15rem; color: var(--an-texto-suave); margin: 0 0 1rem; }
.an-ay-capitulo ul, .an-ay-capitulo ol { padding-left: 1.4rem; margin: .5rem 0; }
.an-ay-capitulo li { margin: .25rem 0; }
.an-ay-capitulo b, .an-ay-capitulo strong { font-weight: 750; }
.an-ay-capitulo a { color: var(--an-tono-0f8f80); font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .4); }
.an-ay-capitulo kbd { font-family: inherit; font-size: .82em; font-weight: 700; padding: .05rem .45rem; border-radius: 6px; border: 1px solid var(--an-borde); border-bottom-width: 2px; background: var(--an-superficie); }
.an-ay-ruta { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--an-tono-0f6f65);
  background: rgba(var(--an-tono-2bb3a3-rgb), .1); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .35); white-space: nowrap; }
html[theme~="dark"] .an-ay-ruta { color: var(--an-tono-9ff0e4); }
.an-ay-nota, .an-ay-aviso, .an-ay-ejemplo { position: relative; margin: 1rem 0; padding: .9rem 1.1rem .9rem 3.2rem; border-radius: 16px; }
.an-ay-nota::before, .an-ay-aviso::before, .an-ay-ejemplo::before { position: absolute; left: 1rem; top: .85rem; font-size: 1.25rem; line-height: 1; }
.an-ay-nota { background: rgba(var(--an-tono-2bb3a3-rgb), .08); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .3); }
.an-ay-nota::before { content: "💡"; }
.an-ay-aviso { background: rgba(245, 158, 11, .09); border: 1px solid rgba(245, 158, 11, .4); }
.an-ay-aviso::before { content: "⚠️"; }
.an-ay-ejemplo { background: linear-gradient(135deg, rgba(var(--an-tono-2bb3a3-rgb), .1), rgba(var(--an-tono-2bb3a3-rgb), .02)); border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .35); box-shadow: 0 8px 22px rgba(var(--an-tono-12343b-rgb), .06); }
.an-ay-ejemplo::before { content: "🧭"; }
.an-ay-ejemplo > .an-ay-ej-titulo { display: block; font-weight: 800; color: var(--an-tono-0f6f65); margin-bottom: .3rem; font-size: 1.02rem; }
html[theme~="dark"] .an-ay-ejemplo > .an-ay-ej-titulo { color: var(--an-tono-9ff0e4); }
.an-ay-capitulo ol.an-ay-pasos { list-style: none; counter-reset: paso; padding-left: 0; }
.an-ay-capitulo ol.an-ay-pasos > li { counter-increment: paso; position: relative; padding: .55rem .8rem .55rem 3.1rem; margin: .45rem 0; border-radius: 14px; background: rgba(var(--an-tono-2bb3a3-rgb), .05); border: 1px solid var(--an-borde); }
.an-ay-capitulo ol.an-ay-pasos > li::before { content: counter(paso); position: absolute; left: .75rem; top: .6rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem;
  border-radius: 50%; font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, var(--an-tono-40d6c2), var(--an-tono-127068)); box-shadow: 0 3px 8px rgba(var(--an-tono-2bb3a3-rgb), .35); }
.an-ay-capitulo figure { margin: 1.2rem 0 1.4rem; }
.an-ay-capitulo figure img { display: block; max-width: 100%; border-radius: 14px; border: 1px solid var(--an-borde); box-shadow: 0 14px 34px rgba(var(--an-tono-12343b-rgb), .16); cursor: zoom-in; transition: transform .2s; }
.an-ay-capitulo figure img:hover { transform: translateY(-2px); }
.an-ay-capitulo figcaption { margin-top: .5rem; font-size: .88rem; color: var(--an-texto-suave); text-align: center; }
.an-ay-capitulo table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 1rem 0; font-size: .95rem; border: 1px solid var(--an-borde); border-radius: 14px; overflow: hidden; }
.an-ay-capitulo th { text-align: left; padding: .55rem .8rem; background: rgba(var(--an-tono-2bb3a3-rgb), .1); font-weight: 800; }
.an-ay-capitulo td { padding: .5rem .8rem; border-top: 1px solid var(--an-borde); vertical-align: top; }
.an-ay-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin: 1rem 0; }
.an-ay-tarjeta { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--an-borde); background: linear-gradient(160deg, rgba(var(--an-tono-2bb3a3-rgb), .07), transparent 70%); }
.an-ay-tarjeta > b:first-child { display: block; margin-bottom: .2rem; color: var(--an-tono-0f6f65); }
html[theme~="dark"] .an-ay-tarjeta > b:first-child { color: var(--an-tono-9ff0e4); }
mark.an-ay-marca { background: #fde68a; color: inherit; padding: 0 .1em; border-radius: 4px; }
html[theme~="dark"] mark.an-ay-marca { background: rgba(253, 230, 138, .35); }
/* Guía paso a paso («vídeo») */
.an-ay-video { margin: 1.4rem 0 1.8rem; border-radius: 20px; overflow: hidden; background: var(--an-tono-071518); box-shadow: 0 20px 44px rgba(var(--an-tono-061c21-rgb), .35); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .2); }
.an-ay-video-cab { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; background: linear-gradient(90deg, var(--an-tono-0f3a42), var(--an-tono-0b262c)); }
.an-ay-video-marca { font-size: .72rem; font-weight: 900; letter-spacing: .12em; color: var(--an-tono-071518); background: var(--an-tono-7ff0dd); padding: .18rem .6rem; border-radius: 999px; }
.an-ay-video-titulo { color: var(--an-tono-e9fbf8); font-weight: 750; }
.an-ay-video-pantalla { position: relative; aspect-ratio: 16 / 9; background: var(--an-tono-02090b); }
.an-ay-fotograma { position: absolute; inset: 0; margin: 0 !important; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.an-ay-fotograma.an-activo { opacity: 1; pointer-events: auto; }
.an-ay-fotograma img { width: 100%; height: 100%; object-fit: contain; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--an-tono-02090b); }
.an-ay-fotograma.an-activo img { animation: an-ay-kenburns 4.2s ease-out both; }
@keyframes an-ay-kenburns { from { transform: scale(1); } to { transform: scale(1.025); } }
.an-ay-video.an-pausa .an-ay-fotograma.an-activo img { animation: none; }
.an-ay-fotograma figcaption { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(90%, 52rem); margin: 0 !important; display: flex; gap: .7rem; align-items: center;
  padding: .7rem 1rem; border-radius: 14px; text-align: left !important; font-size: 1rem !important; color: #fff !important; background: rgba(var(--an-tono-071518-rgb), .86); backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), .25); }
.an-ay-fotograma figcaption b { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--an-tono-2bb3a3); color: var(--an-tono-04201c); font-weight: 900; }
.an-ay-video-controles { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; background: var(--an-tono-0b262c); flex-wrap: wrap; }
.an-ay-video-controles button { border: none; cursor: pointer; font: inherit; }
.an-ay-ant, .an-ay-sig, .an-ay-play { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--an-tono-e9fbf8); font-size: 1.1rem; font-weight: 800; }
.an-ay-play { background: var(--an-tono-2bb3a3); color: var(--an-tono-04201c); }
.an-ay-ant:hover, .an-ay-sig:hover { background: rgba(var(--an-tono-7ff0dd-rgb), .2); }
.an-ay-puntos { display: flex; gap: .35rem; }
.an-ay-punto { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(255, 255, 255, .25); padding: 0; }
.an-ay-punto.an-activo { background: var(--an-tono-7ff0dd); box-shadow: 0 0 8px var(--an-tono-7ff0dd); }
.an-ay-progreso { flex: 1 1 8rem; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.an-ay-progreso > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--an-tono-2bb3a3), var(--an-tono-7ff0dd)); }
/* Vídeo de verdad (2026-10-15) */
.an-ay-video-real video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--an-tono-02090b); outline: none; }
/* Muestras de informes (2026-10-15) */
.an-ay-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; margin: 1rem 0 1.6rem; }
.an-ay-capitulo .an-ay-muestras figure { margin: 0; display: flex; flex-direction: column; }
.an-ay-capitulo .an-ay-muestras figure img { width: 100%; height: 13rem; object-fit: cover; object-position: top left; background: #fff; }
.an-ay-capitulo .an-ay-muestras figcaption { text-align: left; line-height: 1.45; }
.an-ay-capitulo .an-ay-muestras figcaption b { color: var(--an-texto); }
/* Ampliar imagen */
.an-ay-zoom { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem;
  background: rgba(var(--an-tono-040e10-rgb), .88); backdrop-filter: blur(4px); cursor: zoom-out; animation: an-ay-entra .2s ease-out; }
.an-ay-zoom img { max-width: 96vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.an-ay-zoom-texto { color: var(--an-tono-e9fbf8); font-size: 1rem; }
@keyframes an-ay-entra { from { opacity: 0; } to { opacity: 1; } }
/* Resultados de búsqueda */
.an-ay-resultado { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1rem; margin: .5rem 0; border-radius: 16px; border: 1px solid var(--an-borde); cursor: pointer;
  transition: background .15s, transform .15s; max-width: 72rem; }
.an-ay-resultado:hover { background: rgba(var(--an-tono-2bb3a3-rgb), .07); transform: translateX(3px); }
.an-ay-resultado > vaadin-icon { flex: none; width: 1.3rem; height: 1.3rem; color: var(--an-tono-2bb3a3); margin-top: .15rem; }
.an-ay-resultado > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.an-ay-res-donde { font-weight: 800; }
.an-ay-res-frag { color: var(--an-texto-suave); font-size: .93rem; line-height: 1.5; }
.an-ay-sin-resultados { color: var(--an-texto-suave); }
a.an-ay-siguiente { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.5rem; padding: .8rem 1.2rem; border-radius: 16px; text-decoration: none; color: var(--an-texto);
  border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .45); background: linear-gradient(135deg, rgba(var(--an-tono-2bb3a3-rgb), .12), transparent); font-weight: 750; }
a.an-ay-siguiente > span:first-child { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--an-texto-suave); }
a.an-ay-siguiente vaadin-icon { color: var(--an-tono-2bb3a3); }
@media (max-width: 1000px) {
  .an-ayuda-vista { height: auto; overflow: visible; }
  .an-ay-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .an-ay-indice { max-height: 16rem; }
  .an-ay-cabecera { flex-wrap: wrap; }
  vaadin-text-field.an-ay-buscar { width: 100%; margin-left: 0; }
  .an-ay-contenido { padding: 1.1rem; }
}
/* Permisos por menú: la cabecera (Alta, Modificar, Borrar…) se queda arriba al bajar (petición del usuario 2026-10-12) */
.an-asis-tabla > .an-asis-fila-cabecera.an-asis-fila-permisos { position: sticky; top: 0; z-index: 3; background: var(--an-superficie); box-shadow: 0 6px 10px -8px rgba(var(--an-tono-12343b-rgb), 0.35); }
.an-asis-tabla:has(> .an-asis-fila-cabecera.an-asis-fila-permisos) { overflow: clip; }
.an-licencia-detalle-empleados { display: block; margin-top: 0.55rem; font-size: 0.82rem; color: var(--an-texto-suave); line-height: 1.4; }
.an-licencia-dato-linea { display: flex; align-items: center; gap: 0.2rem; }
.an-licencia-copiar-dato { color: var(--an-turquesa, var(--an-tono-2bb3a3)); margin: -0.15rem 0 0; min-width: 0; padding: 0 0.15rem; cursor: pointer; }

/* Ajustes › Actualizaciones (2026-10-16) */
.an-aj-actualizaciones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.an-aj-act-datos { display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; margin-bottom: 0.9rem; }
.an-aj-act-datos > div { display: flex; flex-direction: column; gap: 0.15rem; }
.an-aj-act-etiqueta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--an-texto-suave); }
.an-aj-act-valor { font-size: 1.25rem; font-weight: 700; color: var(--an-texto); }
.an-aj-act-estado { display: flex; flex-direction: column; gap: 0.8rem; }
.an-aj-act-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.an-aj-act-novedad { border: 1px solid var(--an-borde); border-left: 4px solid var(--an-turquesa); border-radius: 12px;
    padding: 0.9rem 1rem; background: var(--an-superficie-2); display: flex; flex-direction: column; gap: 0.5rem; }
.an-aj-act-novedad h3 { margin: 0; font-size: 1.05rem; }
.an-aj-act-notas { margin: 0; white-space: pre-line; }
.an-aj-act-aviso { display: flex; gap: 0.6rem; align-items: flex-start; flex-wrap: wrap; padding: 0.7rem 0.9rem; border-radius: 10px;
    background: color-mix(in srgb, var(--an-turquesa) 10%, transparent); color: var(--an-texto); }
.an-aj-act-aviso > vaadin-icon { color: var(--an-turquesa); flex: none; margin-top: 0.1rem; }
.an-aj-act-aviso > span { flex: 1 1 260px; }
.an-aj-act-aviso-importante { background: color-mix(in srgb, #f39a38 14%, transparent); }
.an-aj-act-aviso-importante > vaadin-icon { color: #d9822b; }
.an-aj-act-caminos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.an-aj-act-camino { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.an-aj-act-camino h3 { margin: 0; font-size: 0.98rem; }
.an-aj-act-camino .an-ayuda { margin: 0; }
.an-aj-act-camino vaadin-upload { width: 100%; }
.an-aj-act-modo { margin-bottom: 0.4rem; }
.an-aj-act-campos { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-bottom: 0.4rem; }
.an-aj-act-campos vaadin-text-field { flex: 1 1 240px; }
/* «Cuándo y cómo buscar»: el botón Guardar abajo a la izquierda de la caja, como en el resto de Ajustes */
.an-aj-act-cuando { display: flex; flex-direction: column; }
.an-aj-act-opciones { flex: 1; display: flex; flex-direction: column; }
.an-aj-act-opciones > .an-aj-botones { margin-top: auto; padding-top: 1rem; justify-content: flex-start; }
.an-aj-act-historial { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--an-texto-suave); }
/* Los dos programas en el mismo equipo (2026-10-25): una ficha por programa, lado a lado */
.an-aj-act-pareja { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.an-aj-act-programa { border: 1px solid var(--an-borde); border-left: 4px solid var(--an-turquesa); border-radius: 12px;
    padding: 0.9rem 1rem; background: var(--an-superficie-2); display: flex; flex-direction: column; gap: 0.45rem; }
.an-aj-act-programa > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.an-aj-act-programa h3 { margin: 0; font-size: 1.05rem; }
.an-aj-act-programa-version { font-size: 1.25rem; font-weight: 700; color: var(--an-texto); }
.an-aj-act-chip { font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.an-aj-act-chip-ok { background: color-mix(in srgb, var(--an-turquesa) 16%, transparent); color: var(--an-turquesa); }
.an-aj-act-chip-lista { background: var(--an-turquesa); color: #fff; }
.an-aj-act-chip-falta { background: color-mix(in srgb, #f39a38 18%, transparent); color: #c4711f; }
.an-aj-act-chip-parado { background: color-mix(in srgb, #8a94a0 20%, transparent); color: var(--an-texto-suave); }

/* Verificación en dos pasos (2026-10-16): tarjeta centrada sobre el fondo de la marca, como la entrada */
.an-ver {
    min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box;
    background: radial-gradient(1200px 600px at 15% 10%, rgba(var(--an-tono-2bb3a3-rgb), 0.28), transparent 60%),
        linear-gradient(135deg, var(--an-tono-0b252b) 0%, var(--an-petroleo) 45%, var(--an-tono-17464f) 100%);
}
.an-ver-tarjeta {
    width: min(100%, 440px); background: var(--an-superficie); border-radius: 22px; padding: 2rem 2rem 1.6rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 0.75rem; box-sizing: border-box;
}
.an-ver-icono {
    width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--an-turquesa), var(--an-tono-1a7f74)); box-shadow: 0 10px 24px rgba(var(--an-tono-2bb3a3-rgb), 0.35);
}
.an-ver-icono vaadin-icon { width: 26px; height: 26px; }
.an-ver-tarjeta h2 { margin: 0.2rem 0 0; font-size: 1.45rem; color: var(--an-texto); }
.an-ver-texto { margin: 0; color: var(--an-texto-suave); line-height: 1.5; }
.an-ver-codigo input { font-size: 1.6rem; letter-spacing: 0.45em; text-align: center; font-weight: 700; }
.an-ver-error { margin: 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #fdecea; color: #a8281c; font-size: 0.92rem; }
.an-ver-aviso { margin: 0; padding: 0.7rem 0.9rem 0.7rem 1.1rem; border-radius: 12px; position: relative; background: linear-gradient(135deg, #fff7ea, #ffefd6); color: #7a4a00; font-size: 0.92rem; box-shadow: inset 4px 0 0 #f39a38, 0 6px 18px -10px rgba(243, 154, 56, 0.6); }
html[theme~="dark"] .an-ver-aviso { background: linear-gradient(135deg, rgba(243, 154, 56, 0.18), rgba(243, 154, 56, 0.08)); color: #ffd29a; }
.an-ver-boton { height: 44px; font-weight: 700; margin-top: 0.2rem; }
.an-ver-enlaces { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1.2rem; margin-top: 0.3rem; }
.an-ver-enlace { color: var(--an-tono-1a7f74); font-weight: 600; cursor: pointer; font-size: 0.92rem; text-decoration: none; }
.an-ver-enlace:hover { text-decoration: underline; }
.an-ver-opciones { display: flex; flex-direction: column; gap: 0.7rem; }
.an-ver-opcion {
    display: flex; gap: 0.9rem; align-items: center; padding: 0.9rem 1rem; border: 1px solid var(--an-borde); border-radius: 14px;
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.an-ver-opcion:hover { border-color: var(--an-turquesa); box-shadow: 0 8px 22px rgba(var(--an-tono-0f2e35-rgb), 0.1); transform: translateY(-1px); }
.an-ver-opcion-icono {
    flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--an-turquesa) 14%, transparent); color: var(--an-tono-1a7f74);
}
.an-ver-opcion-titulo { display: block; font-weight: 700; color: var(--an-texto); }
.an-ver-opcion-texto { display: block; font-size: 0.88rem; color: var(--an-texto-suave); margin-top: 0.15rem; }
.an-ver-qr { width: 190px; height: 190px; margin: 0.2rem auto; padding: 8px; border-radius: 14px; border: 1px solid var(--an-borde); background: #fff; }
.an-ver-qr svg { width: 100%; height: 100%; display: block; }
.an-ver-manual { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; font-size: 0.85rem; color: var(--an-texto-suave); text-align: center; }
.an-ver-clave { font-family: Consolas, monospace; font-size: 0.95rem; color: var(--an-texto); letter-spacing: 0.06em; word-break: break-all; }
.an-ver-recuperacion {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; padding: 0.9rem; border-radius: 14px; background: var(--an-superficie-2);
    border: 1px dashed var(--an-borde); font-family: Consolas, monospace; font-size: 1rem; text-align: center; color: var(--an-texto);
}
html[theme~='dark'] .an-ver-tarjeta { background: var(--an-tono-13262b); }
html[theme~='dark'] .an-ver-error { background: rgba(240, 107, 92, 0.15); color: #ffb4a8; }

/* Ajustes › Doble verificación */
.an-aj-dv { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.an-aj-dv-opciones { display: flex; flex-direction: column; gap: 0.5rem; }
.an-aj-dv-usuarios { display: flex; flex-direction: column; gap: 0.6rem; }
.an-aj-dv-fila { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.an-aj-dv-fila vaadin-combo-box { flex: 1 1 240px; }
.an-aj-dv-resumen { font-size: 0.9rem; color: var(--an-texto-suave); }

/* ======================================================================================================================
   INICIO (2026-10-16): panel gráfico a pantalla completa (PanelInicio). Cabecera petróleo con las cifras clave, aviso de
   incendio o alarma y rejilla de tarjetas que ocupa el alto de la ventana (--an-ini-columnas y --an-ini-ancho los pone
   Java). Modo «pantalla completa» (html.an-ini-tv): sin menú ni barra, para recepción o la garita.
   ====================================================================================================================== */
.an-inicio-raiz { height: 100%; }
.an-inicio {
  --ini-r: 18px; --ini-hueco: 0.9rem;
  height: calc(100dvh - var(--vaadin-app-layout-navbar-offset-size, 61px)); box-sizing: border-box; overflow: auto;
  display: flex; flex-direction: column; gap: var(--ini-hueco); padding: 1rem 1.15rem 1.15rem;
  background: radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--an-turquesa) 10%, transparent), transparent 70%), var(--an-fondo);
}
html.an-ini-tv vaadin-app-layout.an-main::part(navbar), html.an-ini-tv vaadin-app-layout.an-main::part(drawer) { display: none; }
html.an-ini-tv vaadin-app-layout.an-main { --vaadin-app-layout-drawer-offset-size: 0px; --vaadin-app-layout-navbar-offset-size: 0px; }
html.an-ini-tv .an-inicio { height: 100dvh; font-size: 1.08rem; padding: 1.2rem 1.4rem; }

/* ---------- cabecera */
.an-ini-cabecera {
  position: relative; overflow: hidden; flex: none; border-radius: calc(var(--ini-r) + 4px); padding: 0.85rem 1.2rem 0.9rem; color: var(--an-tono-e9fbf8);
  background:
    radial-gradient(600px 260px at 88% -30%, rgba(var(--an-tono-7ff0dd-rgb), 0.32), transparent 70%),
    radial-gradient(500px 300px at -5% 130%, rgba(var(--an-tono-39c8ff-rgb), 0.22), transparent 70%),
    linear-gradient(135deg, var(--an-tono-0b2a31) 0%, var(--an-tono-0f3a43) 55%, var(--an-tono-0a242a) 100%);
  box-shadow: 0 18px 40px -18px rgba(var(--an-tono-08242a-rgb), 0.65);
}
.an-ini-cabecera::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: linear-gradient(rgba(var(--an-tono-7ff0dd-rgb), 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--an-tono-7ff0dd-rgb), 0.35) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); }
.an-ini-cabecera > * { position: relative; }
.an-ini-cabecera-fila { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.8rem 1.5rem; }
.an-ini-saludo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 26rem; }
.an-ini-fecha { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--an-tono-7ff0dd); font-weight: 600; }
.an-ini-saludo h1 { margin: 0; font-size: clamp(1.3rem, 1.9vw, 1.85rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.an-ini-modulos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.an-ini-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
  color: var(--an-tono-cffaf2); background: rgba(var(--an-tono-7ff0dd-rgb), 0.1); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.28); }
.an-ini-chip vaadin-icon { width: 0.85rem; height: 0.85rem; }
.an-ini-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; flex: 0 0 auto; }
.an-ini-hora { display: flex; align-items: flex-start; gap: 0.2rem; font-variant-numeric: tabular-nums; line-height: 1; }
.an-ini-reloj { font-size: clamp(2rem, 2.9vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 24px rgba(var(--an-tono-7ff0dd-rgb), 0.35); }
.an-ini-segundos { font-size: 1rem; font-weight: 700; color: var(--an-tono-7ff0dd); margin-top: 0.3rem; }
.an-ini-actualizado { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: rgba(var(--an-tono-e9fbf8-rgb), 0.7); }
.an-ini-vivo, .an-ini-sin-conexion { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; animation: an-ini-latir 2s infinite; }
.an-ini-sin-conexion { background: #f59e0b; animation: none; }
@keyframes an-ini-latir { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.an-ini-botones { display: flex; gap: 0.45rem; }
.an-ini-derecha-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.8rem; }
/* Versión instalada junto a «En directo»: una pastilla discreta (petición del usuario, 2026-10-16) */
.an-ini-version { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(var(--an-tono-e9fbf8-rgb), 0.75); padding: 0.15rem 0.55rem;
  border-radius: 999px; border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.25); background: rgba(var(--an-tono-7ff0dd-rgb), 0.08); white-space: nowrap; }
.an-ini-boton, .an-ini-boton-evac { margin: 0; min-width: 0; height: 2.2rem; border-radius: 10px; color: var(--an-tono-e9fbf8); cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.3); }
.an-ini-boton-evac { padding: 0 0.85rem; font-weight: 600; font-size: 0.82rem; }
.an-ini-boton:hover, .an-ini-boton-evac:hover { background: rgba(var(--an-tono-7ff0dd-rgb), 0.18); }

/* ---------- cifras clave */
.an-ini-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.an-ini-cifra { --c: var(--an-tono-2bb3a3); display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 14px; min-width: 0;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(6px); transition: transform 0.15s, background 0.15s; }
.an-ini-cifra.an-ini-enlace { cursor: pointer; }
.an-ini-cifra.an-ini-enlace:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.an-ini-cifra-icono { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, var(--an-tono-0b2a31))); box-shadow: 0 6px 18px -6px var(--c); }
.an-ini-cifra-icono vaadin-icon { width: 1.15rem; height: 1.15rem; }
.an-ini-cifra-textos { display: flex; flex-direction: column; min-width: 0; }
.an-ini-cifra-titulo { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--an-tono-e9fbf8-rgb), 0.68);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-cifra-valor { font-size: 1.4rem; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.an-ini-cifra-bajo { font-size: 0.72rem; color: rgba(var(--an-tono-e9fbf8-rgb), 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-latido { animation: an-ini-alerta 1.2s ease-in-out infinite; }
@keyframes an-ini-alerta { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 0%, transparent); } }

/* Colores de acento (cifras y tarjetas) */
.an-ini-c-turquesa { --c: var(--an-tono-2bb3a3); } .an-ini-c-violeta { --c: #8b5cf6; } .an-ini-c-ambar { --c: #f5a524; } .an-ini-c-rosa { --c: #e5609c; }
.an-ini-c-cian { --c: var(--an-tono-22b8e6); } .an-ini-c-azul { --c: #5b7cfa; } .an-ini-c-verde { --c: #22c55e; } .an-ini-c-rojo { --c: #ef4444; }
.an-ini-c-naranja { --c: #f97316; }

/* ---------- aviso de incendio o alarma */
.an-ini-aviso-zona:empty { display: none; }
.an-ini-aviso { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border-radius: var(--ini-r); color: #fff;
  animation: an-ini-aviso 1.4s ease-in-out infinite; }
.an-ini-aviso-incendio { background: linear-gradient(90deg, #b91c1c, #ef4444 60%, #f97316); box-shadow: 0 10px 30px -10px rgba(239, 68, 68, 0.8); }
.an-ini-aviso-alarma { background: linear-gradient(90deg, #b45309, #f59e0b); box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.8); }
@keyframes an-ini-aviso { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.an-ini-aviso-icono { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.2); }
.an-ini-aviso-icono vaadin-icon { width: 1.5rem; height: 1.5rem; }
.an-ini-aviso-textos { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.an-ini-aviso-titulo { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; }
.an-ini-aviso-detalle { font-size: 0.88rem; opacity: 0.92; }
.an-ini-aviso-boton { margin: 0; background: #fff; color: #b91c1c; font-weight: 700; border-radius: 10px; cursor: pointer; }

/* ---------- rejilla de tarjetas */
.an-ini-cuerpo { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--ini-hueco);
  grid-template-columns: repeat(var(--an-ini-columnas, 4), minmax(0, 1fr)); grid-auto-rows: minmax(215px, 1fr); }
.an-ini-tarjeta { --c: var(--an-tono-2bb3a3); grid-column: span var(--an-ini-ancho, 1); position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border-radius: var(--ini-r); background: var(--an-superficie); border: 1px solid var(--an-borde); box-shadow: var(--an-sombra); overflow: hidden;
  padding: 0.85rem 0.95rem 0.9rem; animation: an-ini-entrar 0.45s ease both; }
.an-ini-tarjeta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); }
@keyframes an-ini-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Al refrescar con datos nuevos, las tarjetas se rehacen sin volver a entrar (si no, parpadeaba toda la pantalla) */
.an-ini-quieto .an-ini-tarjeta { animation: none; }
.an-ini-t-cabecera { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; border-radius: 10px; }
.an-ini-t-cabecera.an-ini-enlace { cursor: pointer; }
.an-ini-t-icono { flex: none; width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); }
.an-ini-t-icono vaadin-icon { width: 1rem; height: 1rem; }
.an-ini-t-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.an-ini-t-titulo { font-weight: 700; font-size: 0.95rem; color: var(--an-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-t-sub { font-size: 0.74rem; color: var(--an-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-t-ir { flex: none; color: var(--an-texto-suave); opacity: 0; transform: translateX(-4px); transition: 0.15s; }
.an-ini-t-ir vaadin-icon { width: 0.95rem; height: 0.95rem; }
.an-ini-t-cabecera.an-ini-enlace:hover .an-ini-t-ir { opacity: 1; transform: none; color: var(--c); }
.an-ini-t-contenido { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.an-ini-t-contenido > div { min-height: 0; }
.an-ini-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center;
  color: var(--an-texto-suave); font-size: 0.85rem; padding: 0.5rem; }
.an-ini-vacio vaadin-icon { width: 1.8rem; height: 1.8rem; color: color-mix(in srgb, var(--c) 70%, var(--an-texto-suave)); opacity: 0.7; }
.an-ini-calculando vaadin-icon { animation: an-ini-girar 2.4s linear infinite; }
@keyframes an-ini-girar { to { transform: rotate(360deg); } }

/* ---------- barras */
.an-ini-barras { flex: 1 1 auto; min-height: 90px; display: flex; align-items: stretch; gap: 3px; padding-top: 0.95rem; }
.an-ini-t-contenido > div:has(> .an-ini-barras) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.4rem; }
.an-ini-barra { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.an-ini-barra-zona { flex: 1; min-height: 0; display: flex; align-items: flex-end; border-radius: 6px;
  background: repeating-linear-gradient(0deg, var(--an-linea) 0 1px, transparent 1px 25%); }
.an-ini-pila { position: relative; width: 100%; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 3px 3px;
  transition: height 0.6s cubic-bezier(.2, .8, .2, 1); }
.an-ini-tramo { min-height: 2px; flex-basis: 0; background: var(--c); }
.an-ini-pila > .an-ini-tramo:last-child { border-radius: 6px 6px 0 0; }
.an-ini-pila > .an-ini-tramo:only-of-type { border-radius: 6px 6px 3px 3px; }
.an-ini-tramo-a { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); }
.an-ini-tramo-rojo { background: linear-gradient(180deg, #fb7185, #ef4444); }
.an-ini-tramo-naranja { background: linear-gradient(180deg, #fdba74, #f97316); }
.an-ini-barra-valor { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: 0.68rem; font-weight: 700;
  color: var(--an-texto); white-space: nowrap; }
.an-ini-barra-etiqueta { height: 0.9rem; font-size: 0.66rem; text-align: center; color: var(--an-texto-suave); white-space: nowrap; overflow: visible; }
.an-ini-resaltada .an-ini-barra-zona { background: repeating-linear-gradient(0deg, var(--an-linea) 0 1px, transparent 1px 25%), color-mix(in srgb, var(--c) 9%, transparent); }
.an-ini-resaltada .an-ini-barra-etiqueta { color: var(--c); font-weight: 800; }

/* ---------- áreas (horas por día) */
.an-ini-horas { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 0.42fr); gap: 1rem; }
.an-ini-horas-izq { min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.an-ini-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.an-ini-dato { --d: var(--an-tono-2bb3a3); padding: 0.3rem 0.55rem; border-radius: 12px; background: color-mix(in srgb, var(--d) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--d) 22%, transparent); display: flex; flex-direction: column; min-width: 0; }
.an-ini-dato-titulo { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--an-texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-dato-valor { font-size: 1.12rem; font-weight: 800; color: color-mix(in srgb, var(--d) 75%, var(--an-texto)); font-variant-numeric: tabular-nums; }
.an-ini-d-turquesa { --d: var(--an-tono-2bb3a3); } .an-ini-d-gris { --d: #64748b; } .an-ini-d-violeta { --d: #8b5cf6; } .an-ini-d-rosa { --d: #e5609c; }
.an-ini-areas { flex: 1 1 auto; min-height: 80px; display: flex; flex-direction: column; gap: 0.2rem; }
.an-ini-areas-lienzo { position: relative; flex: 1; min-height: 0; margin: 0.4rem 0.3rem 0; }
.an-ini-areas-svg { position: absolute; inset: 0; color: var(--c); }
.an-ini-areas-svg > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.an-ini-guia { stroke: var(--an-linea); stroke-width: 1; }
.an-ini-linea-a { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; }
.an-ini-linea-b { fill: none; stroke: var(--an-texto-suave); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.8; }
.an-ini-punto { position: absolute; width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: var(--an-superficie);
  border: 2px solid var(--c); box-sizing: border-box; transition: transform 0.12s; }
.an-ini-punto:hover { transform: scale(1.6); }
.an-ini-areas-ejes { position: relative; height: 1.05rem; margin: 0 0.3rem 0.15rem; }
.an-ini-areas-ejes > span { position: absolute; transform: translateX(-50%); font-size: 0.66rem; color: var(--an-texto-suave); }
.an-ini-leyenda-linea { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.an-ini-l { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--an-texto-suave); }
.an-ini-l-marca { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--c); }
.an-ini-l-b { background: transparent; border-top: 2px dashed var(--an-texto-suave); height: 0; border-radius: 0; }
.an-ini-l-rojo { background: #ef4444; }
.an-ini-leyenda-chips { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.an-ini-ranking { min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; padding-left: 1rem; border-left: 1px solid var(--an-linea); overflow: hidden; }
.an-ini-ranking-titulo { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--an-texto-suave); }
.an-ini-ranking-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.an-ini-ranking-nombre { display: block; font-size: 0.8rem; font-weight: 600; color: var(--an-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-ranking-barra { height: 5px; margin-top: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent)); }
.an-ini-ranking-valor { font-size: 0.8rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.an-ini-ranking .an-ini-vacio { font-size: 0.78rem; }

/* ---------- anillo */
.an-ini-anillo-caja { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.an-ini-anillo { position: relative; flex: none; width: min(150px, 100%); aspect-ratio: 1; }
.an-ini-anillo-svg, .an-ini-anillo-svg > svg { display: block; width: 100%; height: 100%; }
.an-ini-anillo-fondo { fill: none; stroke: var(--an-linea); stroke-width: 14; }
.an-ini-anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.an-ini-anillo-numero { font-size: 2.1rem; font-weight: 800; color: var(--an-texto); line-height: 1; letter-spacing: -0.03em; }
.an-ini-anillo-bajo { font-size: 0.72rem; color: var(--an-texto-suave); }
.an-ini-leyenda { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; max-width: 100%; }
.an-ini-leyenda-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; font-size: 0.78rem; }
.an-ini-leyenda-punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.an-ini-leyenda-texto { color: var(--an-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-leyenda-valor { font-weight: 700; color: var(--an-texto); font-variant-numeric: tabular-nums; }

/* ---------- medidores de aforo */
.an-ini-medidores { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0.6rem; align-content: center; overflow: auto; }
.an-ini-medidor { --m: #22c55e; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.4rem 0.45rem; border-radius: 14px;
  background: color-mix(in srgb, var(--m) 7%, transparent); border: 1px solid color-mix(in srgb, var(--m) 18%, transparent); }
.an-ini-medidor-casi { --m: #f59e0b; } .an-ini-medidor-lleno { --m: #ef4444; } .an-ini-medidor-libre { --m: var(--an-tono-22b8e6); }
.an-ini-medidor-svg { width: 100%; max-width: 130px; }
.an-ini-medidor-svg > svg { display: block; width: 100%; height: auto; overflow: visible; }
.an-ini-medidor-fondo { fill: none; stroke: var(--an-linea); stroke-width: 9; stroke-linecap: round; }
.an-ini-medidor-valor { fill: none; stroke: var(--m); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--m) 60%, transparent)); }
.an-ini-medidor-cifra { margin-top: -1.55rem; display: flex; align-items: baseline; gap: 0.2rem; }
.an-ini-medidor-numero { font-size: 1.45rem; font-weight: 800; color: var(--an-texto); font-variant-numeric: tabular-nums; }
.an-ini-medidor-de { font-size: 0.78rem; color: var(--an-texto-suave); }
.an-ini-medidor-zona { margin-top: 0.15rem; font-size: 0.76rem; font-weight: 600; color: var(--an-texto); text-align: center; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- estado de alarmas y línea de tiempo */
.an-ini-estado { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 14px; }
.an-ini-estado > vaadin-icon { flex: none; width: 2rem; height: 2rem; }
.an-ini-estado > div { display: flex; flex-direction: column; min-width: 0; }
.an-ini-estado > div > span:first-child { font-weight: 800; font-size: 1rem; }
.an-ini-estado > div > span:last-child { font-size: 0.74rem; color: var(--an-texto-suave); }
.an-ini-estado-bien { background: color-mix(in srgb, #22c55e 11%, transparent); color: #15803d; }
.an-ini-estado-fuego { background: linear-gradient(90deg, #ef4444, #f97316); color: #fff; animation: an-ini-aviso 1.2s infinite; }
.an-ini-estado-alarma { background: linear-gradient(90deg, #d97706, #f59e0b); color: #fff; }
.an-ini-estado-fuego > div > span:last-child, .an-ini-estado-alarma > div > span:last-child { color: rgba(255, 255, 255, 0.9); }
html[theme~="dark"] .an-ini-estado-bien { color: #7fe08b; }
.an-ini-linea-tiempo { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem; }
.an-ini-lt-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; }
.an-ini-lt-icono { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; }
.an-ini-lt-icono vaadin-icon { width: 0.85rem; height: 0.85rem; }
.an-ini-lt-fuego { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.an-ini-lt-alarma { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #d97706; }
.an-ini-lt-apagada { background: var(--an-hover); color: var(--an-texto-suave); }
.an-ini-lt-fila > div { display: flex; flex-direction: column; min-width: 0; }
.an-ini-lt-texto { font-size: 0.8rem; font-weight: 600; color: var(--an-texto); }
.an-ini-lt-donde { font-size: 0.7rem; color: var(--an-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-lt-cuando { font-size: 0.72rem; color: var(--an-texto-suave); font-variant-numeric: tabular-nums; }
.an-ini-lt-nada { font-size: 0.78rem; color: var(--an-texto-suave); }

/* ---------- listas (permisos, dentro, vehículos) */
.an-ini-lista { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.15rem; }
.an-ini-lista-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.3rem 0.35rem; border-radius: 10px; }
.an-ini-lista-fila:hover { background: var(--an-hover); }
.an-ini-lista-textos { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.an-ini-lista-textos > div { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.an-ini-lista-nombre { font-size: 0.84rem; font-weight: 600; color: var(--an-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-lista-detalle { font-size: 0.72rem; color: var(--an-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-lista-hora, .an-ini-hace { font-size: 0.74rem; font-weight: 600; color: var(--an-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-ini-etiqueta { --an-ini-etiqueta: var(--an-tono-2bb3a3); flex: none; max-width: 60%; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  color: color-mix(in srgb, var(--an-ini-etiqueta) 70%, var(--an-texto)); background: color-mix(in srgb, var(--an-ini-etiqueta) 16%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-avatar { --an-ini-tono: 170; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
  font-weight: 800; color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(135deg, hsl(var(--an-ini-tono) 62% 52%), hsl(calc(var(--an-ini-tono) + 40) 62% 40%)); }
.an-ini-boton-lista { margin: 0.2rem 0 0; align-self: flex-start; font-size: 0.8rem; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent);
  border-radius: 10px; cursor: pointer; }
.an-ini-t-contenido > div:has(> .an-ini-lista) { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- OCR */
.an-ini-ocr { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.an-ini-ocr-foto { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; border-radius: 12px; background: var(--an-tono-0b1b1f); }
.an-ini-ocr-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.an-ini-matricula { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem 0.2rem 1.25rem; border-radius: 6px; font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em; color: #111; background: linear-gradient(90deg, #1d4ed8 0 0.8rem, #fff 0.8rem);
  border: 2px solid #111; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); white-space: nowrap; }
.an-ini-matricula-pequena { font-size: 0.78rem; padding: 0.1rem 0.4rem 0.1rem 0.9rem; background: linear-gradient(90deg, #1d4ed8 0 0.55rem, #fff 0.55rem); border-width: 1.5px; }
.an-ini-ocr-estado { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.an-ini-ocr-estado vaadin-icon { width: 0.8rem; height: 0.8rem; }
.an-ini-ocr-si { color: #15803d; background: color-mix(in srgb, #22c55e 15%, transparent); }
.an-ini-ocr-no { color: #b91c1c; background: color-mix(in srgb, #ef4444 15%, transparent); }
html[theme~="dark"] .an-ini-ocr-si { color: #7fe08b; }
html[theme~="dark"] .an-ini-ocr-no { color: #ff8a80; }

/* ---------- plan de evacuación */
vaadin-dialog-overlay.an-ini-evacuacion::part(overlay), .an-ini-evacuacion::part(overlay) { border-radius: 22px; overflow: hidden; }
vaadin-dialog-overlay.an-ini-evacuacion::part(content), .an-ini-evacuacion::part(content) { padding: 0; }
.an-ini-evac { height: 100%; display: flex; flex-direction: column; }
.an-ini-evac-cabecera { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--an-tono-0b2a31), var(--an-tono-0f3a43) 60%, var(--an-tono-145a63)); }
.an-ini-evacuacion-incendio .an-ini-evac-cabecera { background: linear-gradient(90deg, #b91c1c, #ef4444 60%, #f97316); }
.an-ini-evac-icono { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.an-ini-evac-icono vaadin-icon { width: 1.6rem; height: 1.6rem; }
.an-ini-evac-textos { flex: 1; min-width: 0; }
.an-ini-evac-textos h2 { margin: 0; color: #fff; font-size: 1.45rem; font-weight: 800; }
.an-ini-evac-resumen { font-size: 0.86rem; opacity: 0.9; }
.an-ini-evac-contador { padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.15); font-weight: 800; font-variant-numeric: tabular-nums; }
.an-ini-evac-contador.an-ini-evac-todos { background: #22c55e; }
.an-ini-evac-cerrar { color: #fff; }
.an-ini-evac-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 0.8rem 1.3rem; border-bottom: 1px solid var(--an-borde); }
.an-ini-evac-aviso { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: #b91c1c; }
html[theme~="dark"] .an-ini-evac-aviso { color: #ff8a80; }
.an-ini-evac-buscar { flex: 1 1 300px; }
.an-ini-evac-zonas { flex: 1; min-height: 0; overflow: auto; padding: 1rem 1.3rem 1.3rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-content: start; }
.an-ini-evac-zona { border: 1px solid var(--an-borde); border-radius: 16px; overflow: hidden; background: var(--an-superficie); }
.an-ini-evac-zona-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--an-turquesa) 10%, transparent); }
.an-ini-evac-zona-nombre { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--an-texto); }
.an-ini-evac-zona-cuenta { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--an-texto-suave); }
.an-ini-evac-completa { color: #16a34a; }
.an-ini-evac-filas { display: flex; flex-direction: column; }
.an-ini-evac-fila { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.45rem 0.85rem;
  border-top: 1px solid var(--an-linea); transition: background 0.15s; }
.an-ini-evac-fila.an-ini-evac-localizado { background: color-mix(in srgb, #22c55e 9%, transparent); }
.an-ini-evac-fila.an-ini-evac-localizado .an-ini-evac-nombre { text-decoration: line-through; color: var(--an-texto-suave); }
.an-ini-evac-fila > div { display: flex; flex-direction: column; min-width: 0; }
.an-ini-evac-nombre { font-weight: 700; color: var(--an-texto); }
.an-ini-evac-detalle { font-size: 0.76rem; color: var(--an-texto-suave); }
.an-ini-evac-vacio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 3rem; color: var(--an-texto-suave); }
.an-ini-evac-vacio vaadin-icon { width: 2.5rem; height: 2.5rem; color: #22c55e; }

/* ---------- tamaños: según el ancho REAL del panel (con o sin menú lateral), no el de la ventana */
.an-inicio { container: inicio / inline-size; }
.an-ini-cifras { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.an-ini-cifra-valor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-cuerpo { grid-auto-flow: row dense; }
@container inicio (max-width: 1150px) {
  .an-ini-cifra-icono { display: none; }
  .an-ini-cifras { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
  .an-ini-cifra-titulo { white-space: normal; line-height: 1.15; }
}
.an-ini-datos { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.an-ini-areas-lienzo { min-height: 70px; }
/* Las filas que no caben enteras pasan a otra columna invisible (nunca se ve media fila) */
.an-ini-lista, .an-ini-linea-tiempo, .an-ini-ranking { flex-wrap: wrap; align-content: flex-start; column-gap: 400px; }
.an-ini-lista > *, .an-ini-linea-tiempo > *, .an-ini-ranking > * { width: 100%; box-sizing: border-box; }
@container inicio (max-width: 1400px) {
  .an-ini-cuerpo { grid-template-columns: repeat(min(var(--an-ini-columnas, 4), 3), minmax(0, 1fr)); }
  .an-ini-tarjeta { grid-column: span min(var(--an-ini-ancho, 1), 3); }
  .an-ini-horas { grid-template-columns: minmax(0, 1fr) minmax(150px, 0.38fr); }
}
@container inicio (max-width: 980px) {
  .an-ini-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); }
  .an-ini-tarjeta { grid-column: span min(var(--an-ini-ancho, 1), 2); }
  .an-ini-horas { grid-template-columns: 1fr; }
  .an-ini-areas { min-height: 150px; }
  /* La tarjeta crece con lo que lleva (con altura fija, gráfica y lista se pisaban) */
  .an-ini-cuerpo, .an-ini-t-contenido, .an-ini-horas { flex: none; }
  .an-ini-horas-izq, .an-ini-ranking { min-height: auto; }
  .an-ini-ranking { padding-left: 0; border-left: 0; }
  .an-ini-barras { min-height: 130px; }
}
@container inicio (max-width: 640px) {
  .an-ini-cuerpo { grid-template-columns: 1fr; }
  .an-ini-tarjeta { grid-column: auto; }
  .an-ini-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-ini-derecha { align-items: flex-start; }
  .an-ini-derecha-pie { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .an-inicio { padding: 0.6rem; }
}
/* Pantallas bajas (portátiles de 768 px): filas algo más bajas y sin la línea de debajo de las cifras */
@media (max-height: 860px) {
  .an-ini-cuerpo { grid-auto-rows: minmax(190px, 1fr); }
  .an-ini-cifra-bajo { display: none; }
  .an-ini-modulos { display: none; }
}

/* ======================================================================================================================
   AVISO DE NOVEDADES tras una actualización (AvisoNovedades, 2026-10-16)
   ====================================================================================================================== */
vaadin-dialog-overlay.an-novedades::part(overlay), .an-novedades::part(overlay) { border-radius: 22px; overflow: hidden; }
vaadin-dialog-overlay.an-novedades::part(content), .an-novedades::part(content) { padding: 0; }
.an-nov { display: flex; flex-direction: column; max-height: 88vh; }
.an-nov-cabecera { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; color: var(--an-tono-e9fbf8);
  background:
    radial-gradient(420px 200px at 95% -20%, rgba(var(--an-tono-7ff0dd-rgb), 0.35), transparent 70%),
    linear-gradient(135deg, var(--an-tono-0b2a31) 0%, var(--an-tono-0f3a43) 60%, var(--an-tono-145a63) 100%); }
.an-nov-icono { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--an-tono-2bb3a3), var(--an-tono-39c8ff)); box-shadow: 0 8px 22px -6px rgba(var(--an-tono-2bb3a3-rgb), 0.8); }
.an-nov-icono vaadin-icon { width: 1.7rem; height: 1.7rem; }
.an-nov-textos { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.an-nov-etiqueta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-nov-textos h2 { margin: 0; color: #fff; font-size: 1.35rem; line-height: 1.2; font-weight: 800; }
.an-nov-sub { font-size: 0.84rem; color: rgba(var(--an-tono-e9fbf8-rgb), 0.75); }
.an-nov-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1.1rem 1.5rem 0.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.an-nov-intro { color: var(--an-texto-suave); font-size: 0.92rem; }
.an-nov-bloque { border: 1px solid var(--an-borde); border-radius: 16px; padding: 0.8rem 1rem 0.6rem; background: var(--an-superficie); }
.an-nov-version { display: inline-flex; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; color: var(--an-tono-0f766e);
  background: color-mix(in srgb, var(--an-tono-2bb3a3) 15%, transparent); }
html[theme~="dark"] .an-nov-version { color: var(--an-tono-7ff0dd); }
.an-nov-lista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.an-nov-lista li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; color: var(--an-texto); line-height: 1.45; font-size: 0.93rem; }
.an-nov-lista li vaadin-icon { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--an-tono-2bb3a3); }
.an-nov-pie { display: flex; justify-content: flex-end; padding: 0.9rem 1.5rem 1.2rem; }
.an-nov-boton { margin: 0; }

/* Ayuda desde el login (2026-10-16): la ventana con el capítulo de la verificación en dos pasos */
.an-login-ayuda-olvido { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; margin-bottom: .6rem; border-radius: 12px; line-height: 1.5;
  background: color-mix(in srgb, var(--an-turquesa) 10%, transparent); border: 1px solid color-mix(in srgb, var(--an-turquesa) 25%, transparent); color: var(--an-texto); }
.an-login-ayuda-olvido > vaadin-icon { flex: none; color: var(--an-turquesa); margin-top: .15rem; }
.an-login-ayuda-ventana .an-ay-capitulo h2:first-of-type { margin-top: 1.2rem; }
/* Buscador de la ayuda del login, siempre arriba (2026-10-25) */
.an-login-ayuda-buscar { position: sticky; top: calc(-1 * var(--lumo-space-l, 1.5rem)); z-index: 2; display: flex; flex-direction: column; gap: .25rem;
  margin: calc(-1 * var(--lumo-space-l, 1.5rem)) 0 .8rem; padding: var(--lumo-space-l, 1.5rem) 0 .6rem; background: var(--lumo-base-color); border-bottom: 1px solid var(--an-borde); }
.an-login-ayuda-resultado { font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); min-height: 1.2em; }
.an-login-ayuda-contenido mark.an-ay-marca { background: #fde68a; color: #1f2937; border-radius: 3px; padding: 0; }
.an-login-ayuda-contenido mark.an-ay-marca.an-actual { background: #f59e0b; color: #111827; box-shadow: 0 0 0 2px rgba(245, 158, 11, .35); }

/* «Actualizar» en marcha (2026-10-18, petición del usuario: «Actualizar (activado)» no se veía). En el árbol, píldora
   «En vivo» con un punto que late como un radar, filo turquesa más intenso y el icono girando despacio; «En pausa» en
   ámbar. Junto al contador del listado, el mismo indicador (pulsándolo se abre la sección). Las filas que cambian en
   cada recarga automática se iluminan un momento. */
.an-seccion-vivo > vaadin-details-summary, .an-seccion-pausa > vaadin-details-summary { width: 100%; }
.an-seccion-vivo > vaadin-details-summary > vaadin-horizontal-layout,
.an-seccion-pausa > vaadin-details-summary > vaadin-horizontal-layout { flex: 1; width: 100%; }
.an-seccion-vivo > vaadin-details-summary {
    box-shadow: inset 4px 0 0 var(--an-turquesa), 0 0 0 1px color-mix(in srgb, var(--an-turquesa) 45%, transparent),
                0 0 14px color-mix(in srgb, var(--an-turquesa) 30%, transparent);
}
.an-seccion-pausa > vaadin-details-summary { box-shadow: inset 4px 0 0 #f59e0b; }
.an-seccion-vivo .an-icono-seccion { animation: an-vivo-girar 2.8s linear infinite; }
@keyframes an-vivo-girar { to { transform: rotate(360deg); } }

.an-vivo-pildora, .an-vivo-cabecera {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none; white-space: nowrap;
    border-radius: 999px; font-weight: 800; line-height: 1;
    color: var(--an-tono-0b5f57); background: linear-gradient(135deg, var(--an-tono-d9f7f2), var(--an-tono-b9eee5));
    border: 1px solid var(--an-tono-6fd8c8); box-shadow: 0 0 10px rgba(var(--an-tono-2bb3a3-rgb), 0.30);
}
.an-vivo-pildora { margin-left: auto; padding: 0.22rem 0.55rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.an-vivo-cabecera { padding: 0.28rem 0.7rem; font-size: 0.76rem; cursor: pointer; align-self: center; transition: filter .15s, transform .15s; }
.an-vivo-cabecera:hover { filter: brightness(1.04) saturate(1.2); transform: translateY(-1px); }
.an-vivo-punto { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--an-tono-14b8a6); flex: none; }
.an-vivo-punto::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--an-tono-14b8a6);
    animation: an-vivo-radar 1.6s ease-out infinite;
}
@keyframes an-vivo-radar { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
.an-vivo-pausa { color: #92400e; background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fbbf24; box-shadow: none; }
.an-vivo-pausa .an-vivo-punto { background: #f59e0b; }
.an-vivo-pausa .an-vivo-punto::after { animation: none; display: none; }
html[theme~="dark"] .an-vivo-pildora, html[theme~="dark"] .an-vivo-cabecera {
    color: var(--an-tono-7ff0dd); background: rgba(var(--an-tono-2bb3a3-rgb), 0.16); border-color: rgba(var(--an-tono-7ff0dd-rgb), 0.5); box-shadow: 0 0 12px rgba(var(--an-tono-2bb3a3-rgb), 0.35);
}
html[theme~="dark"] .an-vivo-pausa { color: #fcd34d; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.5); box-shadow: none; }
html[theme~="dark"] .an-vivo-punto, html[theme~="dark"] .an-vivo-punto::after { background: var(--an-tono-2dd4bf); }

/* Filas nuevas o cambiadas en la última recarga automática: destello turquesa que se apaga */
vaadin-grid::part(an-fila-cambiada) { animation: an-fila-destello 2.6s ease-out 1; }
@keyframes an-fila-destello {
    0% { box-shadow: inset 0 0 0 100vmax rgba(var(--an-tono-2bb3a3-rgb), 0.34); }
    100% { box-shadow: inset 0 0 0 100vmax rgba(var(--an-tono-2bb3a3-rgb), 0); }
}
/* Con «reducir animaciones» (Windows con las animaciones desactivadas) solo se quita el movimiento: el icono deja de
   girar y el radar pasa a un parpadeo de color; el destello de las filas (solo color) se mantiene */
@media (prefers-reduced-motion: reduce) {
    .an-seccion-vivo .an-icono-seccion { animation: none; }
    .an-vivo-punto::after { animation: none; display: none; }
    .an-vivo-punto { animation: an-vivo-parpadeo 1.6s ease-in-out infinite; }
    .an-vivo-pausa .an-vivo-punto { animation: none; }
}
@keyframes an-vivo-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Inicio: tarjeta al pasar el ratón por una incidencia o por una hora de entradas, con quién (2026-10-18, petición del
   usuario). La pinta el navegador en <body> (PanelInicio.JS_TARJETA_DETALLE), en la capa superior como la del calendario */
.an-ini-tip {
  --an-ini-tip-color: var(--an-tono-2bb3a3);
  position: fixed; z-index: 100000; pointer-events: none; width: max-content; min-width: 15rem; max-width: 21rem;
  padding: 0.75rem 0.8rem 0.6rem; border-radius: 18px; color: var(--an-tono-f2fbfa); font-family: var(--lumo-font-family); line-height: 1.25;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--an-ini-tip-color) 30%, transparent), transparent 55%),
              linear-gradient(160deg, var(--an-tono-15505a) 0%, var(--an-tono-0d3239) 100%);
  border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.35);
  box-shadow: 0 16px 38px rgba(var(--an-tono-061e23-rgb), 0.40), 0 3px 8px rgba(var(--an-tono-061e23-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  opacity: 0; transform: translateY(5px) scale(0.97); transition: opacity 0.15s ease, transform 0.15s ease; visibility: hidden;
}
.an-ini-tip.an-visible { opacity: 1; transform: none; visibility: visible; }
.an-ini-tip[popover] { inset: auto; margin: 0; overflow: visible; }
.an-ini-tip-cab { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.55rem; margin-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.an-ini-tip-muestra {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; font-weight: 800; font-size: 1.05rem;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, color-mix(in srgb, var(--an-ini-tip-color) 100%, #fff 18%), color-mix(in srgb, var(--an-ini-tip-color) 78%, #000));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 12px color-mix(in srgb, var(--an-ini-tip-color) 45%, transparent);
}
.an-ini-tip-textos { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-ini-tip-titulo { font-weight: 750; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ini-tip-sub { font-size: 0.78rem; color: rgba(var(--an-tono-f2fbfa-rgb), 0.72); }
.an-ini-tip-sub::first-letter { text-transform: uppercase; }
.an-ini-tip-lista { display: flex; flex-direction: column; gap: 0.15rem; }
.an-ini-tip-fila { display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0.3rem; border-radius: 10px; }
.an-ini-tip-fila:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.an-ini-tip-avatar { --an-ini-tono: 170; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 800; color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(135deg, hsl(var(--an-ini-tono) 62% 52%), hsl(calc(var(--an-ini-tono) + 40) 62% 40%));
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.an-ini-tip-nombre { font-size: 0.84rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ini-tip-extra { margin-left: auto; padding-left: 0.6rem; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--an-tono-9ff0e4); }
.an-ini-tip-mas { display: block; padding: 0.3rem 0.3rem 0; font-size: 0.75rem; font-weight: 600; color: rgba(var(--an-tono-f2fbfa-rgb), 0.7); }
/* Lo que lleva tarjeta: se nota al pasar el ratón */
.an-ini-barras [data-tip-titulo] { cursor: pointer; }
.an-ini-tramo[data-tip-titulo] { transition: filter 0.15s, box-shadow 0.15s; }
.an-ini-tramo[data-tip-titulo]:hover { filter: brightness(1.12) saturate(1.15); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 12px rgba(var(--an-tono-2bb3a3-rgb), 0.45); }
.an-ini-barra[data-tip-titulo]:hover .an-ini-tramo { filter: brightness(1.12) saturate(1.15); }
/* Pasos con algún denegado: el recuento en rojo claro */
.an-ini-tip-extra-mal { color: #ffb4b6; }

/* Ajustes › Correo: por dónde salen los correos (2026-10-18, estilo premium) */
.an-aj-via {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem;
    margin: 0.2rem 0 1rem; padding: 1rem 1.2rem; border-radius: 16px;
    background: linear-gradient(135deg, var(--an-tono-0f2e35) 0%, var(--an-tono-12434a) 55%, var(--an-tono-16635f) 100%);
    color: var(--an-tono-eaf6f4); box-shadow: 0 10px 28px -12px rgba(var(--an-tono-08282e-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.an-aj-via::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 160px at 85% -20%, rgba(var(--an-tono-2bb3a3-rgb), 0.35), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 18px;
}
.an-aj-via::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--an-tono-5eead4), var(--an-tono-2bb3a3)); box-shadow: 0 0 14px rgba(var(--an-tono-5eead4-rgb), 0.7);
}
.an-aj-via-icono {
    position: relative; flex: none; width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 0 18px rgba(var(--an-tono-2bb3a3-rgb), 0.45);
}
.an-aj-via-icono vaadin-icon { width: 1.5rem; height: 1.5rem; color: var(--an-tono-5eead4); filter: drop-shadow(0 0 6px rgba(var(--an-tono-5eead4-rgb), 0.8)); }
.an-aj-via-textos { position: relative; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-aj-via-etiqueta { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--an-tono-8fd9cf); font-weight: 600; }
.an-aj-via-titulo { font-size: 1.12rem; font-weight: 700; color: #fff; }
.an-aj-via-texto { font-size: 0.88rem; color: rgba(var(--an-tono-eaf6f4-rgb), 0.82); }
.an-aj-via-propia { background: linear-gradient(135deg, #102a3a 0%, #17405a 55%, var(--an-tono-1d5b7a) 100%); }
.an-aj-via-propia::after { background: linear-gradient(180deg, #7cc8ff, #3b8fd6); box-shadow: 0 0 14px rgba(124, 200, 255, 0.7); }
.an-aj-via-propia .an-aj-via-icono vaadin-icon { color: #9ad4ff; filter: drop-shadow(0 0 6px rgba(124, 200, 255, 0.8)); }
.an-aj-via-ninguna { background: linear-gradient(135deg, #3a1f0e 0%, #5a2f12 55%, #7a4216 100%); }
.an-aj-via-ninguna::after { background: linear-gradient(180deg, #ffc27a, #f39a38); box-shadow: 0 0 14px rgba(243, 154, 56, 0.7); }
.an-aj-via-ninguna .an-aj-via-icono vaadin-icon { color: #ffc27a; filter: drop-shadow(0 0 6px rgba(243, 154, 56, 0.8)); }

/* «Mi verificación en dos pasos» (menú del usuario, 2026-10-18) */
.an-mi-ver-contenido { display: flex; flex-direction: column; gap: 0.75rem; }
.an-mi-ver-titulo { display: flex; align-items: center; gap: 0.75rem; }
.an-mi-ver-titulo h3 { margin: 0; font-size: 1.15rem; color: var(--an-texto); }
.an-mi-ver .an-aj-via { margin-top: 0; }

/* Buscador del menú sin resultados (2026-10-18): que no parezca que el programa se ha roto */
.an-menu-sin-resultados {
    margin: 0.35rem 0.2rem 0; padding: 0.5rem 0.7rem; border-radius: 10px; font-size: 0.85rem; line-height: 1.35;
    color: var(--an-texto-suave); background: color-mix(in srgb, var(--an-turquesa) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--an-turquesa) 35%, transparent);
    display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline;
}
.an-menu-sin-resultados[hidden] { display: none; }
.an-menu-sin-borrar { color: var(--an-tono-1a7f74); font-weight: 600; cursor: pointer; }
.an-menu-sin-borrar:hover { text-decoration: underline; }
html[theme~='dark'] .an-menu-sin-borrar { color: var(--an-tono-5eead4); }

/* ======================================================================================================================
   Inicio de SkyNET: las máquinas ahora (2026-10-20, petición del usuario: «muy gráfico y visual»). Una ficha por máquina
   con el color de su estado: verde y el engranaje girando si trabaja, ámbar si está parada, gris sin actividad.
   ====================================================================================================================== */
.an-ini-taller { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; align-content: start;
  min-height: 0; overflow: auto; padding: 2px; }
.an-ini-maq { --m: #94a3b8; position: relative; min-width: 0; display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.75rem;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--m) 38%, transparent);
  background: color-mix(in srgb, var(--m) 9%, var(--an-superficie)); }
.an-ini-maq-trabajando { --m: #16a34a; }
.an-ini-maq-parada { --m: #f59e0b; }
.an-ini-maq-sin { --m: #94a3b8; }
.an-ini-maq-icono { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--m), color-mix(in srgb, var(--m) 68%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--m) 35%, transparent); }
.an-ini-maq-icono vaadin-icon { width: 1.5rem; height: 1.5rem; }
.an-ini-maq-trabajando .an-ini-maq-icono vaadin-icon { animation: an-ini-girar 3.5s linear infinite; }
.an-ini-maq-sin .an-ini-maq-icono { color: var(--m); background: color-mix(in srgb, var(--m) 22%, var(--an-superficie)); box-shadow: none; }
.an-ini-maq-textos { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.an-ini-maq-nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ini-maq-estado { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700;
  color: color-mix(in srgb, var(--m) 80%, var(--lumo-body-text-color)); }
.an-ini-maq-estado::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--m); }
.an-ini-maq-trabajando .an-ini-maq-estado::before { animation: an-ini-latir-maq 1.6s ease-out infinite; }
.an-ini-maq-detalle, .an-ini-maq-desde { font-size: 0.75rem; color: var(--lumo-secondary-text-color); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
@keyframes an-ini-girar { to { transform: rotate(360deg); } }
@keyframes an-ini-latir-maq { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .an-ini-maq-trabajando .an-ini-maq-icono vaadin-icon, .an-ini-maq-trabajando .an-ini-maq-estado::before { animation: none; }
}

/* Inicio de SkyNET (2026-10-20, «muy gráfico y premium»): rejilla de 12 columnas (tercios y mitades), filas con la barra de
   su color y avance, etiquetas de plazo, cifras pequeñas y la tira de la semana. */
.an-ini-cuerpo.an-sky-rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.an-sky-rejilla > .an-ini-tarjeta { grid-column: span var(--sky-ancho, 4); }
@container inicio (max-width: 980px) { .an-sky-rejilla > .an-ini-tarjeta { grid-column: span 6; } }
@container inicio (max-width: 640px) { .an-sky-rejilla > .an-ini-tarjeta { grid-column: span 12; } }
.an-sky-lista { display: flex; flex-direction: column; gap: 0.45rem; min-height: 0; overflow: auto; padding-right: 2px; }
.an-sky-fila { --s: #94a3b8; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; row-gap: 0.15rem;
  align-items: center; padding: 0.45rem 0.65rem 0.5rem 0.75rem; border-radius: 11px; border-left: 3px solid var(--s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--s) 11%, transparent), color-mix(in srgb, var(--s) 3%, transparent)); }
.an-sky-fila-titulo { font-weight: 650; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-sky-fila-sub { grid-column: 1; font-size: 0.74rem; color: var(--lumo-secondary-text-color); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.an-sky-fila > .an-sky-pill { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.an-sky-progreso { grid-column: 1 / -1; height: 5px; margin-top: 0.25rem; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--s) 16%, transparent); }
.an-sky-progreso > span { display: block; height: 100%; min-width: 3px; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--s) 55%, #fff), var(--s)); }
.an-sky-pill { --p: #64748b; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 99px; white-space: nowrap;
  background: color-mix(in srgb, var(--p) 15%, transparent); color: color-mix(in srgb, var(--p) 82%, var(--lumo-body-text-color)); }
.an-sky-pill-rojo { --p: #ef4444; } .an-sky-pill-ambar { --p: #f59e0b; } .an-sky-pill-verde { --p: #16a34a; }
.an-sky-pill-azul { --p: #2f80ed; } .an-sky-pill-gris { --p: #94a3b8; }
.an-sky-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.4rem; }
.an-sky-kpi { --k: #2f80ed; display: flex; flex-direction: column; padding: 0.45rem 0.65rem; border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--k) 14%, transparent), color-mix(in srgb, var(--k) 4%, transparent)); }
.an-sky-kpi > span:first-child { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--lumo-secondary-text-color); }
.an-sky-kpi-valor { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--k) 85%, var(--lumo-body-text-color)); }
.an-sky-grafica { flex: 1; min-height: 90px; }
.an-sky-semana { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.an-sky-dia { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.2rem; border-radius: 12px;
  background: var(--lumo-contrast-5pct); }
.an-sky-dia-hoy { background: color-mix(in srgb, var(--an-tono-2bb3a3) 14%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--an-tono-2bb3a3) 60%, transparent); }
.an-sky-dia-nombre { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lumo-secondary-text-color); }
.an-sky-dia-num { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.an-sky-marca { --c: #2f80ed; min-width: 1.6rem; text-align: center; font-size: 0.74rem; font-weight: 800; color: #fff; padding: 0.15rem 0.35rem;
  border-radius: 99px; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 35%, transparent); }
.an-sky-dia-nada { color: var(--lumo-tertiary-text-color); font-weight: 800; }
.an-sky-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.5rem; font-size: 0.74rem; }

/* ================================================================= Terminal virtual (fichaje de presencia en pantalla, de SkyCAP; 2026-10-21) */
.an-tv {
  position: relative; overflow: hidden; border-radius: 28px; min-height: calc(100vh - 7.5rem); display: flex; flex-direction: column;
  gap: 1.8rem; padding: 2rem 2.4rem 2.4rem; color: var(--an-tono-eafffb);
  background: radial-gradient(1100px 520px at 12% -10%, rgba(var(--an-tono-7ff0dd-rgb), 0.28), transparent 60%),
              radial-gradient(800px 520px at 100% 110%, rgba(var(--an-tono-2bb3a3-rgb), 0.38), transparent 62%),
              linear-gradient(140deg, var(--an-tono-0f2e35) 0%, var(--an-tono-134a52) 58%, var(--an-tono-1b6b6a) 100%);
  box-shadow: 0 40px 80px -40px rgba(var(--an-tono-0f2e35-rgb), 0.7);
}
.an-tv-fondo { position: absolute; inset: 0; pointer-events: none; opacity: 0.16;
  background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 38px 38px; mask-image: radial-gradient(circle at 25% 40%, #000, transparent 75%); }
/* Cabecera en tres columnas: marca y pantalla · hora · fecha y botones */
.an-tv-cabecera { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 2rem; padding: 1.5rem 2rem; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.13); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); }
.an-tv-cab-izq { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.an-tv-cab-centro { display: flex; justify-content: center; padding: 0 1.6rem; border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1); }
.an-tv-cab-der { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; text-align: right; }
.an-tv-marca { align-self: flex-start; white-space: nowrap; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.28); }
.an-tv-reloj { display: flex; align-items: flex-start; gap: 0.5rem; line-height: 0.9; }
.an-tv-hora { font-size: clamp(4.4rem, 8vw, 7.4rem); font-weight: 800; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 18px 50px rgba(0,0,0,0.35); }
.an-tv-segundos { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 700; color: var(--an-tono-7ff0dd); margin-top: 0.6rem;
  font-variant-numeric: tabular-nums; }
.an-tv-fecha { display: flex; flex-direction: column; align-items: inherit; gap: 0.15rem; white-space: nowrap; }
.an-tv-fecha-dia { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-tv-fecha-resto { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; opacity: 0.92; }
.an-tv-lugar { font-size: 1rem; color: var(--an-tono-7ff0dd); opacity: 0.85; padding-left: 0.2rem; }
.an-tv-derecha { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-start; justify-content: center; }
.an-tv-panel { width: min(720px, 100%); padding: 2.4rem 2.6rem; border-radius: 30px; display: flex; flex-direction: column; gap: 1.1rem;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12); animation: an-tv-entra 0.28s ease; }
@keyframes an-tv-entra { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.an-tv-titulo { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.an-tv-ayuda { font-size: 1.05rem; opacity: 0.8; margin-top: -0.4rem; }
.an-tv-visor { height: 4.6rem; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.35); box-shadow: inset 0 2px 10px rgba(0,0,0,0.25); }
.an-tv-visor-texto { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.12em; color: #fff; font-variant-numeric: tabular-nums; }
.an-tv-visor-vacio { font-size: 1.3rem; opacity: 0.45; letter-spacing: 0.08em; }
.an-tv-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
vaadin-button.an-tv-tecla { height: 5.2rem; margin: 0; border-radius: 22px; font-size: 2.1rem; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.5); transition: transform 0.08s ease, background 0.15s ease; }
vaadin-button.an-tv-tecla:hover { background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.09)); }
vaadin-button.an-tv-tecla:active { transform: scale(0.96); }
vaadin-button.an-tv-tecla vaadin-icon { width: 1.8rem; height: 1.8rem; }
vaadin-button.an-tv-tecla-ok { background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3)); color: var(--an-tono-05231f);
  border: 0; box-shadow: 0 14px 30px -12px rgba(var(--an-tono-7ff0dd-rgb), 0.75); }
vaadin-button.an-tv-tecla-borrar { color: var(--an-tono-eafffb); }
vaadin-button.an-tv-volver { align-self: center; margin: 0; background: transparent; color: var(--an-tono-eafffb); opacity: 0.8; font-size: 1rem; }
vaadin-button.an-tv-volver:hover { opacity: 1; }
/* El campo que recibe el teclado y el lector: invisible pero con el foco */
vaadin-text-field.an-tv-entrada { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.an-tv-esquina { display: flex; gap: 0.5rem; }
vaadin-button.an-tv-boton-esquina { min-width: 2.6rem; height: 2.6rem; padding: 0; margin: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--an-tono-eafffb); border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.25); }
vaadin-button.an-tv-boton-esquina:hover { background: rgba(var(--an-tono-2bb3a3-rgb), 0.3); }
/* Empleado identificado */
.an-tv-persona { display: flex; align-items: center; gap: 1.1rem; }
.an-tv-avatar { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: var(--an-tono-05231f); background: linear-gradient(135deg, var(--an-tono-7ff0dd), var(--an-tono-2bb3a3));
  box-shadow: 0 14px 30px -14px rgba(var(--an-tono-7ff0dd-rgb), 0.8); }
.an-tv-nombre { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1.1; }
.an-tv-situacion { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; font-size: 1.05rem; font-weight: 600; }
.an-tv-situacion::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,0.08); }
.an-tv-dentro { color: #5ee6a0; }
.an-tv-fuera { color: rgba(255,255,255,0.7); }
.an-tv-motivo { color: #ffc861; }
.an-tv-hoy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 18px; background: rgba(0,0,0,0.18); }
.an-tv-hoy-titulo { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-right: 0.3rem; }
.an-tv-chip { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: pre; }
.an-tv-chip-entrada { background: rgba(94, 230, 160, 0.16); color: #8ff0bf; }
.an-tv-chip-salida { background: rgba(255, 255, 255, 0.1); color: rgba(255,255,255,0.85); }
.an-tv-acciones { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.3rem; }
vaadin-button.an-tv-grande { height: 6rem; margin: 0; border-radius: 24px; font-size: 1.9rem; font-weight: 800; cursor: pointer; border: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
vaadin-button.an-tv-grande vaadin-icon { width: 2.2rem; height: 2.2rem; margin-right: 0.3rem; }
vaadin-button.an-tv-grande:hover { transform: translateY(-2px); }
vaadin-button.an-tv-grande.an-tv-entra { color: #04301d; background: linear-gradient(135deg, #7ff0b8, #2fc982); box-shadow: 0 20px 44px -16px rgba(47, 201, 130, 0.8); }
vaadin-button.an-tv-grande.an-tv-salida { color: #3a1500; background: linear-gradient(135deg, #ffcf8a, #ff9a3d); box-shadow: 0 20px 44px -16px rgba(255, 154, 61, 0.8); }
vaadin-button.an-tv-secundario { margin: 0; height: 3.6rem; border-radius: 18px; font-size: 1.15rem; font-weight: 700; color: #fff; cursor: pointer;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); }
/* Resultado */
.an-tv-resultado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; padding: 1.4rem 0.4rem; }
.an-tv-res-circulo { width: 8.5rem; height: 8.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  animation: an-tv-latido 0.5s cubic-bezier(.2,1.4,.4,1); }
.an-tv-res-circulo vaadin-icon { width: 4rem; height: 4rem; }
@keyframes an-tv-latido { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.an-tv-res-entrada .an-tv-res-circulo { color: #04301d; background: radial-gradient(circle at 30% 30%, #a6f7cf, #2fc982); box-shadow: 0 0 0 14px rgba(47, 201, 130, 0.16), 0 26px 60px -20px rgba(47, 201, 130, 0.9); }
.an-tv-res-salida .an-tv-res-circulo { color: #3a1500; background: radial-gradient(circle at 30% 30%, #ffe0b0, #ff9a3d); box-shadow: 0 0 0 14px rgba(255, 154, 61, 0.16), 0 26px 60px -20px rgba(255, 154, 61, 0.9); }
.an-tv-res-repetido .an-tv-res-circulo { color: #fff; background: rgba(255,255,255,0.14); box-shadow: 0 0 0 14px rgba(255,255,255,0.06); }
.an-tv-res-titulo { margin: 0.4rem 0 0; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.an-tv-res-quien { font-size: 1.35rem; opacity: 0.9; }
.an-tv-res-nota { margin-top: 0.6rem; padding: 0.8rem 1rem; border-radius: 14px; background: rgba(255, 200, 97, 0.14); color: #ffd98f; font-size: 1rem; }
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
  .an-tv { gap: 1.2rem; padding: 1.2rem 1rem; border-radius: 22px; min-height: calc(100vh - 6.5rem); }
  .an-tv-cabecera { grid-template-columns: 1fr; gap: 0.8rem; padding: 1.2rem; text-align: center; }
  .an-tv-cab-izq, .an-tv-cab-der { align-items: center; text-align: center; }
  .an-tv-cab-centro { border: 0; padding: 0; }
  .an-tv-hora { font-size: 4.4rem; }
  .an-tv-panel { padding: 1.4rem; border-radius: 24px; }
  vaadin-button.an-tv-tecla { height: 4rem; font-size: 1.6rem; }
  vaadin-button.an-tv-grande { height: 5rem; font-size: 1.5rem; }
}
/* Iconos de las teclas (borrar, aceptar) y de los botones grandes a su tamaño */
vaadin-button.an-tv-tecla, vaadin-button.an-tv-grande { --vaadin-icon-size: 2rem; --lumo-icon-size-m: 2rem; }
vaadin-button.an-tv-tecla vaadin-icon, vaadin-button.an-tv-grande vaadin-icon { width: 2rem !important; height: 2rem !important; padding: 0 !important; --vaadin-icon-visual-size: 100%; }
/* Incidencias de la salida: tarjeta siempre a la vista, apagada hasta encender el interruptor */
.an-tv-inc { display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem 1.1rem 1.1rem; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,200,97,0.13), rgba(255,255,255,0.04)); border: 1px solid rgba(255,200,97,0.32);
  box-shadow: 0 18px 40px -26px rgba(255,170,60,0.7), inset 0 1px 0 rgba(255,255,255,0.08); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.an-tv-inc.an-tv-inc-apagado { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.an-tv-inc-cab { display: flex; align-items: center; gap: 0.9rem; cursor: pointer; user-select: none; }
.an-tv-inc-icono { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 14px; display: grid; place-items: center; color: #3a1d00;
  background: linear-gradient(135deg, #ffd98f, #ffa94d); box-shadow: 0 10px 22px -10px rgba(255,169,77,0.9); transition: filter 0.3s, opacity 0.3s; }
.an-tv-inc-icono vaadin-icon { width: 1.45rem; height: 1.45rem; padding: 0; }
.an-tv-inc-apagado .an-tv-inc-icono { filter: grayscale(1); opacity: 0.55; }
.an-tv-inc-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.an-tv-inc-titulo { font-size: 1.15rem; font-weight: 800; }
.an-tv-inc-ayuda { font-size: 0.88rem; opacity: 0.7; }
/* Interruptor */
.an-tv-interruptor { flex: none; position: relative; width: 4.2rem; height: 2.4rem; border-radius: 999px;
  background: linear-gradient(135deg, #ffd98f, #ff9a3d); box-shadow: 0 8px 20px -8px rgba(255,154,61,0.9); transition: background 0.25s, box-shadow 0.25s; }
.an-tv-interruptor-bola { position: absolute; top: 0.25rem; left: 2.05rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.3); transition: left 0.25s cubic-bezier(.4,1.4,.6,1), background 0.25s; }
.an-tv-inc-apagado .an-tv-interruptor { background: rgba(255,255,255,0.16); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); }
.an-tv-inc-apagado .an-tv-interruptor-bola { left: 0.25rem; background: #dfe9e7; }
/* Fichas de incidencia */
.an-tv-motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem; max-height: 8.4rem; overflow: auto; padding: 0.15rem; }
vaadin-button.an-tv-motivo-boton { --an-tv-motivo-color: #ffc861; min-height: 3.6rem; height: auto; margin: 0; padding: 0.45rem 0.9rem; border-radius: 16px;
  font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; line-height: 1.2; justify-content: flex-start; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.14);
  transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.3s, filter 0.3s; }
vaadin-button.an-tv-motivo-boton::part(label) { white-space: normal; overflow: visible; text-overflow: clip; }
vaadin-button.an-tv-motivo-boton:hover:not([disabled]) { background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)); transform: translateY(-1px); }
vaadin-button.an-tv-motivo-boton:active:not([disabled]) { transform: scale(0.97); }
vaadin-button.an-tv-motivo-boton[disabled] { opacity: 0.38; filter: grayscale(0.7); cursor: default; color: #fff; }
.an-tv-motivo-punto { display: inline-block; width: 0.8rem !important; min-width: 0.8rem; height: 0.8rem !important; margin-right: 0.6rem; border-radius: 50%; flex: none; background: var(--an-tv-motivo-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-tv-motivo-color) 25%, transparent), 0 0 12px var(--an-tv-motivo-color); }
vaadin-button.an-tv-motivo-boton.an-tv-motivo-elegido { border-color: var(--an-tv-motivo-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--an-tv-motivo-color) 38%, transparent), color-mix(in srgb, var(--an-tv-motivo-color) 12%, transparent));
  box-shadow: 0 0 0 2px var(--an-tv-motivo-color), 0 14px 30px -14px var(--an-tv-motivo-color); }
/* Botón de salida esperando a que se elija la incidencia */
vaadin-button.an-tv-grande[disabled] { opacity: 0.45; filter: grayscale(0.6); transform: none; cursor: default; color: #3a1500; }
vaadin-button.an-tv-motivo-boton.an-tv-motivo-elegido { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--an-tv-motivo-color), 0 14px 30px -14px var(--an-tv-motivo-color); }
.an-tv-motivo-marca { display: none; width: 1.2rem; height: 1.2rem; margin-left: auto; padding: 0; }
vaadin-button.an-tv-motivo-elegido .an-tv-motivo-marca { display: inline-block; }
.an-tv-motivos { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); padding-bottom: 1rem; }
vaadin-button.an-tv-motivo-boton::part(label) { flex: 1; }
.an-tv-inc-bloqueado .an-tv-inc-cab { cursor: default; } .an-tv-inc-bloqueado .an-tv-interruptor { opacity: 0.45; }
/* Pantalla del teclado: teclado e incidencias en el mismo panel, uno al lado del otro */
.an-tv-panel[data-paso=reposo] { width: min(1180px, 100%); }
.an-tv-reposo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr); gap: 2rem; align-items: stretch; }
.an-tv-col-teclado { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.an-tv-inc.an-tv-inc-lateral { min-height: 0; contain: size; } /* la altura la marca el teclado; la lista se desplaza */
.an-tv-inc-lateral .an-tv-motivos { grid-template-columns: 1fr; max-height: none; flex: 1; min-height: 0; overflow: auto; align-content: start; }
.an-tv-con-incidencia { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px;
  font-weight: 800; font-size: 0.95rem; background: color-mix(in srgb, var(--an-tv-motivo-color, #ffc861) 22%, transparent);
  border: 1px solid var(--an-tv-motivo-color, #ffc861); }
.an-tv-con-incidencia::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--an-tv-motivo-color, #ffc861); }
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
  .an-tv-reposo { grid-template-columns: 1fr; }
  .an-tv-inc.an-tv-inc-lateral { contain: none; }
  .an-tv-inc-lateral .an-tv-motivos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 8.4rem; }
}
vaadin-button.an-tv-motivo-boton::part(suffix), vaadin-button.an-tv-motivo-boton::part(prefix) { align-self: center; }

/* ===================================================================== Terminales NKT9/10 (ServerNKT 13 integrado) */
.an-ficha-nkt .an-nkt-driver { display: flex; flex-direction: column; gap: 0.9rem; }
.an-nkt-driver-cab { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--an-tono-2bb3a3-rgb), .12), rgba(var(--an-tono-1a7a80-rgb), .05));
  border: 1px solid rgba(var(--an-tono-2bb3a3-rgb), .35); }
.an-nkt-driver-textos { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-nkt-driver-titulo { font-weight: 800; font-size: 0.98rem; }
.an-nkt-driver-ayuda { font-size: 0.8rem; color: var(--an-texto-suave); line-height: 1.35; }
.an-nkt-interruptor { flex: 0 0 auto; position: relative; width: 3.4rem; height: 1.9rem; border-radius: 999px; cursor: pointer;
  background: var(--an-superficie-3); border: 1px solid var(--an-borde); transition: background .25s, box-shadow .25s; }
.an-nkt-interruptor-bola { position: absolute; top: 0.17rem; left: 0.2rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.an-nkt-interruptor[activo] { background: linear-gradient(135deg, var(--an-tono-2bb3a3), var(--an-tono-1a7a80)); border-color: transparent;
  box-shadow: 0 0 0 4px rgba(var(--an-tono-2bb3a3-rgb), .18); }
.an-nkt-interruptor[activo] .an-nkt-interruptor-bola { transform: translateX(1.45rem); }
.an-nkt-interruptor[bloqueado] { cursor: not-allowed; opacity: .6; }
.an-nkt-interruptor:focus-visible { outline: 2px solid var(--lumo-primary-color); outline-offset: 2px; }

.an-nkt-chivato { display: flex; flex-direction: column; gap: 0.85rem; }
.an-nkt-chiv-cab { display: flex; align-items: center; gap: 0.9rem; }
.an-nkt-pulso { position: relative; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  --c: 34, 197, 94; background: rgba(var(--c), .14); }
.an-nkt-pulso > span { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: rgb(var(--c)); animation: an-nkt-latir 1.8s infinite; }
.an-nkt-pulso[nivel="aviso"] { --c: 234, 179, 8; }
.an-nkt-pulso[nivel="aviso"] > span { animation-duration: 3s; }
.an-nkt-pulso[nivel="mal"] { --c: 229, 72, 77; }
@keyframes an-nkt-latir { 0% { box-shadow: 0 0 0 0 rgba(var(--c), .55); } 70% { box-shadow: 0 0 0 14px rgba(var(--c), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--c), 0); } }
.an-nkt-chiv-textos { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.an-nkt-chiv-titulo { font-weight: 800; font-size: 1.05rem; }
.an-nkt-chiv-sub { font-size: 0.82rem; color: var(--an-texto-suave); line-height: 1.35; }
.an-nkt-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
/* Driver pendiente del servicio técnico: el motivo, solo para el técnico (fase 3, 2026-10-21) */
.an-nkt-pendiente { margin: 0.6rem 0; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.4;
  background: color-mix(in srgb, var(--lumo-warning-color, #e8a10c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lumo-warning-color, #e8a10c) 35%, transparent); color: var(--an-texto); }
.an-nkt-pendiente > div + div { margin-top: 0.3rem; }
.an-nkt-dato { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--an-superficie-2);
  border: 1px solid var(--an-linea); min-width: 0; }
.an-nkt-dato > vaadin-icon { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--lumo-primary-text-color); padding: 0; }
.an-nkt-dato > div { display: flex; flex-direction: column; min-width: 0; }
.an-nkt-dato-etiqueta { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--an-texto-suave); font-weight: 600; }
.an-nkt-dato-valor { font-weight: 700; font-size: 0.88rem; overflow-wrap: anywhere; line-height: 1.3; }
.an-nkt-aviso { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.75rem; border-radius: 12px; font-size: 0.82rem;
  background: rgba(234, 179, 8, .12); border: 1px solid rgba(234, 179, 8, .4); line-height: 1.35; }
.an-nkt-aviso > vaadin-icon { flex: 0 0 auto; width: 1rem; height: 1rem; color: #b7791f; padding: 0; margin-top: 0.1rem; }
.an-nkt-aviso > span { flex: 1 1 auto; }
.an-nkt-aviso-boton { flex: 0 0 auto; align-self: center; margin: 0; }
.an-nkt-leido { align-self: flex-end; font-size: 0.72rem; color: var(--an-texto-suave); }

.an-nkt-grafico { display: flex; flex-direction: column; gap: 0.4rem; --c: var(--an-tono-2bb3a3); }
.an-nkt-grafico-total { font-weight: 700; font-size: 0.85rem; color: var(--an-texto-suave); }
.an-nkt-grafico-caja { height: 9.5rem; display: flex; flex-direction: column; }
.an-nkt-vacio { display: flex; align-items: center; gap: 0.6rem; padding: 1.1rem; border-radius: 12px; color: var(--an-texto-suave);
  background: var(--an-superficie-2); border: 1px dashed var(--an-borde); font-size: 0.85rem; }
.an-nkt-vacio > vaadin-icon { width: 1.1rem; height: 1.1rem; padding: 0; }
@media (max-width: 700px) {
  .an-nkt-datos { grid-template-columns: 1fr; }
}
.an-nkt-avanzado { margin-top: 0.4rem; border-radius: 12px; border: 1px dashed var(--an-borde); padding: 0 0.75rem; }
.an-nkt-avanzado::part(summary) { font-weight: 700; font-size: 0.85rem; color: var(--an-texto-suave); }
.an-nkt-tecnico { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.6rem; }
.an-nkt-tecnico > vaadin-button { align-self: flex-start; }
.an-nkt-registro { flex: 1; margin: 0.5rem 0 0; padding: 0.9rem 1rem; border-radius: 12px; overflow: auto; height: calc(100% - 2.5rem);
  background: #0f1d22; color: #cfe9e4; font: 0.76rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }

/* Estado en directo en la fila de un listado (EnDirecto: terminales NKT9/10 conectados o no) */
.an-vivo { display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-end: 0.55rem; padding: 0.12rem 0.6rem 0.12rem 0.45rem;
  border-radius: 999px; font-size: 0.74rem; font-weight: 700; line-height: 1.4; vertical-align: middle; --c: 148, 163, 184;
  background: rgba(var(--c), .14); color: rgb(var(--c)); border: 1px solid rgba(var(--c), .35); transition: background .3s, color .3s; }
.an-vivo[nivel="bien"] { --c: 22, 163, 74; }
.an-vivo[nivel="mal"] { --c: 220, 38, 38; }
.an-vivo[nivel="aviso"] { --c: 202, 138, 4; }
.an-vivo-punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(var(--c)); flex: 0 0 auto; }
.an-vivo[nivel="bien"] .an-vivo-punto { animation: an-vivo-latir 1.8s infinite; }
@keyframes an-vivo-latir { 0% { box-shadow: 0 0 0 0 rgba(var(--c), .55); } 70% { box-shadow: 0 0 0 7px rgba(var(--c), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--c), 0); } }
.an-vivo-valor { vertical-align: middle; }

/* Driver de los NKT9/10 en la barra del listado, junto a «Nuevo» */
.an-nkt-barra { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.3rem 0.25rem 0.75rem; border-radius: 999px;
  --c: 148, 163, 184; background: rgba(var(--c), .10); border: 1px solid rgba(var(--c), .38); transition: background .3s, border-color .3s; }
.an-nkt-barra[nivel="bien"] { --c: 22, 163, 74; }
.an-nkt-barra[nivel="aviso"] { --c: 202, 138, 4; }
.an-nkt-barra[nivel="mal"] { --c: 220, 38, 38; }
.an-nkt-barra-punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(var(--c)); flex: 0 0 auto; }
.an-nkt-barra[nivel="bien"] .an-nkt-barra-punto { animation: an-vivo-latir 1.8s infinite; }
.an-nkt-barra-textos { display: flex; flex-direction: column; line-height: 1.15; }
.an-nkt-barra-nombre { font-size: 0.68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--an-texto-suave); }
.an-nkt-barra-texto { font-size: 0.82rem; font-weight: 700; color: rgb(var(--c)); white-space: nowrap; }
.an-nkt-barra .an-nkt-interruptor { width: 2.9rem; height: 1.65rem; }
.an-nkt-barra .an-nkt-interruptor-bola { width: 1.25rem; height: 1.25rem; top: 0.15rem; }
.an-nkt-barra .an-nkt-interruptor[activo] .an-nkt-interruptor-bola { transform: translateX(1.2rem); }
.an-nkt-barra vaadin-button { margin: 0; }

/* Inicio: estado de los drivers, en la fila de los módulos (IndicadoresInicio; en AutoNET: NKT9/10 y CloudB Plus) */
.an-ini-indicadores { display: contents; }
.an-ini-driver { --c: 148, 163, 184; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.65rem 0.22rem 0.55rem;
  border-radius: 999px; font-size: 0.74rem; font-weight: 600; cursor: pointer; color: var(--an-tono-cffaf2);
  background: rgba(var(--c), 0.14); border: 1px solid rgba(var(--c), 0.5); transition: background .2s, transform .15s; }
.an-ini-driver:hover { background: rgba(var(--c), 0.26); transform: translateY(-1px); }
.an-ini-driver:focus-visible { outline: 2px solid rgba(var(--an-tono-7ff0dd-rgb), 0.9); outline-offset: 2px; }
.an-ini-driver[nivel="bien"] { --c: 74, 222, 128; }
.an-ini-driver[nivel="aviso"] { --c: 250, 204, 21; }
.an-ini-driver[nivel="mal"] { --c: 248, 113, 113; }
.an-ini-driver[nivel="apagado"] { --c: 148, 163, 184; }
.an-ini-driver-icono { display: inline-flex; color: rgb(var(--c)); }
.an-ini-driver-icono vaadin-icon { width: 0.85rem; height: 0.85rem; padding: 0; }
.an-ini-driver-textos { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.an-ini-driver-nombre { font-weight: 700; }
.an-ini-driver-estado { font-weight: 600; opacity: 0.85; }
.an-ini-driver-estado::before { content: "·"; margin-inline-end: 0.35rem; opacity: 0.6; }
.an-ini-driver-punto { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgb(var(--c)); flex: none; }
.an-ini-driver[nivel="bien"] .an-ini-driver-punto { animation: an-vivo-latir 1.8s infinite; }
.an-ini-driver[nivel="mal"] .an-ini-driver-punto { animation: an-vivo-latir 1.1s infinite; }
.an-ini-indicadores[hidden] { display: none; }

/* ===================================================================== Terminal virtual de SkyNET (SkyCAP: partes de producción, 2026-10-22) */
.an-tt .an-tv-panel[data-paso=operario], .an-tt .an-tv-panel[data-paso=lista] { width: min(1040px, 100%); }
.an-tt-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0.9rem; margin-top: 0.3rem; }
vaadin-button.an-tt-accion { --an-tt-color: #7ff0dd; --vaadin-icon-size: 1.8rem; --lumo-icon-size-m: 1.8rem; height: 5.4rem; margin: 0; border-radius: 22px;
  font-size: 1.35rem; font-weight: 800; color: #fff; cursor: pointer; justify-content: flex-start; padding: 0 1.3rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--an-tt-color) 42%, transparent), color-mix(in srgb, var(--an-tt-color) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--an-tt-color) 70%, transparent);
  box-shadow: 0 18px 38px -20px var(--an-tt-color), inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 0.12s ease, filter 0.2s, opacity 0.2s; }
vaadin-button.an-tt-accion vaadin-icon { width: 1.8rem; height: 1.8rem; padding: 0; margin-right: 0.5rem; color: var(--an-tt-color); }
vaadin-button.an-tt-accion::part(label) { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; text-align: left; }
vaadin-button.an-tt-accion:hover:not([disabled]) { transform: translateY(-2px); }
vaadin-button.an-tt-accion:active:not([disabled]) { transform: scale(0.97); }
vaadin-button.an-tt-accion[disabled] { opacity: 0.35; filter: grayscale(0.8); cursor: default; color: #fff; }
.an-tt-chip-incidencia { background: rgba(255, 200, 97, 0.18); color: #ffd98f; }
.an-tt .an-tv-motivos.an-tt-lista { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: min(46vh, 30rem); -webkit-mask-image: none; mask-image: none;
  padding-bottom: 0.2rem; }
vaadin-button.an-tt-ficha { min-height: 4.4rem; }
.an-tt-ficha-fila { display: flex; align-items: center; min-width: 0; }
.an-tt-ficha-textos { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; text-align: left; }
.an-tt-ficha-titulo { font-size: 1.08rem; font-weight: 800; }
.an-tt-ficha-detalle { font-size: 0.86rem; font-weight: 500; opacity: 0.72; white-space: normal; }
.an-tt .an-tv-motivo-punto { align-self: center; }
.an-tt-nada { grid-column: 1 / -1; padding: 1.2rem; text-align: center; opacity: 0.65; font-size: 1.05rem; }
vaadin-text-field.an-tt-buscar { width: 100%; --vaadin-input-field-background: rgba(0,0,0,0.22); --vaadin-input-field-value-color: #fff;
  --lumo-contrast-10pct: rgba(0,0,0,0.22); --lumo-body-text-color: #fff; --lumo-secondary-text-color: rgba(255,255,255,0.65);
  --vaadin-input-field-height: 3.6rem; --lumo-text-field-size: 3.6rem; font-size: 1.25rem; }
vaadin-text-field.an-tt-buscar::part(input-field) { border-radius: 16px; border: 1px solid rgba(var(--an-tono-7ff0dd-rgb), 0.35); }
vaadin-button.an-tt-tecla-ancha { grid-column: 1 / -1; }
.an-tt-ajustes { display: flex; flex-direction: column; gap: 0.35rem; }
.an-tt-ajustes-titulo { margin-top: 0.8rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lumo-secondary-text-color); }
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
  vaadin-button.an-tt-accion { height: 4.4rem; font-size: 1.15rem; }
}

/* Terminal virtual de SkyNET, pantalla de inicio (2026-10-22): primero la actuación, en tarjetas; aspecto futurista */
.an-tt::before, .an-tt::after { content: ""; position: absolute; width: 48vw; height: 48vw; border-radius: 50%; filter: blur(90px); opacity: 0.38;
  pointer-events: none; z-index: 0; animation: an-tt-aurora 22s ease-in-out infinite alternate; }
.an-tt::before { background: radial-gradient(circle, rgba(47, 129, 195, 0.95), transparent 70%); top: -20vw; left: -12vw; }
.an-tt::after { background: radial-gradient(circle, rgba(127, 240, 221, 0.6), transparent 70%); bottom: -24vw; right: -14vw; animation-delay: -11s; }
@keyframes an-tt-aurora { from { transform: translate(0, 0) scale(1); } to { transform: translate(7vw, 5vw) scale(1.18); } }
.an-tt .an-tv-fondo { opacity: 0.24; }
.an-tt .an-tv-panel[data-paso=reposo] { width: min(1220px, 100%); padding: 2.2rem 2.4rem 1.8rem; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); }
.an-tt .an-tv-titulo.an-tt-titulo-grande { font-size: clamp(2.1rem, 3.4vw, 3rem); letter-spacing: -0.03em;
  background: linear-gradient(92deg, #ffffff 30%, #8dc4f2 70%, #7ff0dd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.an-tt-acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.2rem; margin-top: 0.8rem; }
.an-tt-acc { --c: 127, 240, 221; position: relative; overflow: hidden; cursor: pointer; user-select: none; min-height: 10.5rem;
  padding: 1.4rem 1.5rem 1.1rem; border-radius: 26px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto;
  column-gap: 1.15rem; row-gap: 0.35rem; align-items: start;
  background: linear-gradient(150deg, rgba(var(--c), 0.22), rgba(255, 255, 255, 0.035) 55%, rgba(var(--c), 0.09));
  border: 1px solid rgba(var(--c), 0.4); box-shadow: 0 24px 50px -30px rgba(var(--c), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.22s cubic-bezier(.2, .9, .3, 1.25), box-shadow 0.25s, border-color 0.25s;
  animation: an-tt-aparece 0.5s cubic-bezier(.2, .9, .3, 1) both; }
.an-tt-acc:nth-child(2) { animation-delay: 0.05s; } .an-tt-acc:nth-child(3) { animation-delay: 0.1s; }
.an-tt-acc:nth-child(4) { animation-delay: 0.15s; } .an-tt-acc:nth-child(5) { animation-delay: 0.2s; } .an-tt-acc:nth-child(6) { animation-delay: 0.25s; }
@keyframes an-tt-aparece { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.an-tt-acc::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.2) 46%, transparent 60%); transition: transform 0.9s ease; }
.an-tt-acc:hover, .an-tt-acc:focus-visible { transform: translateY(-5px); border-color: rgba(var(--c), 0.85); outline: none;
  box-shadow: 0 0 0 1px rgba(var(--c), 0.45), 0 0 38px -8px rgba(var(--c), 0.75), 0 30px 60px -26px rgba(var(--c), 1); }
.an-tt-acc:hover::after { transform: translateX(120%); }
.an-tt-acc:active { transform: scale(0.98); }
.an-tt-acc-icono { grid-row: 1 / 3; width: 4.4rem; height: 4.4rem; border-radius: 20px; display: grid; place-items: center; color: #061b26;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95), rgb(var(--c)) 62%);
  box-shadow: 0 0 0 6px rgba(var(--c), 0.14), 0 0 26px rgba(var(--c), 0.55), 0 14px 32px -8px rgba(var(--c), 0.9); }
.an-tt-acc-icono vaadin-icon { width: 2rem; height: 2rem; padding: 0; }
.an-tt-acc-titulo { font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; align-self: end; line-height: 1.15; }
.an-tt-acc-desc { font-size: 0.98rem; color: rgba(255, 255, 255, 0.72); line-height: 1.35; }
.an-tt-acc-cod { grid-column: 1 / -1; justify-self: end; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem;
  letter-spacing: 0.2em; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(var(--c), 0.45); color: rgb(var(--c)); }
.an-tt-pista { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; font-size: 1rem; color: rgba(255, 255, 255, 0.7); }
.an-tt-pista vaadin-icon { width: 1.4rem; height: 1.4rem; padding: 0; color: var(--an-tono-7ff0dd); }
/* Paso del código: la actuación elegida arriba */
.an-tt-elegida { --c: 127, 240, 221; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; align-items: center;
  padding: 0.9rem 1rem 0.9rem 1.1rem; border-radius: 22px; animation: an-tt-aparece 0.4s both;
  background: linear-gradient(135deg, rgba(var(--c), 0.28), rgba(var(--c), 0.06)); border: 1px solid rgba(var(--c), 0.55);
  box-shadow: 0 0 34px -12px rgba(var(--c), 0.8); }
.an-tt-elegida .an-tt-acc-icono { grid-row: 1 / 3; width: 3.3rem; height: 3.3rem; border-radius: 16px; }
.an-tt-elegida .an-tt-acc-icono vaadin-icon { width: 1.6rem; height: 1.6rem; }
.an-tt-elegida .an-tt-acc-titulo { font-size: 1.25rem; }
.an-tt-elegida .an-tt-acc-desc { font-size: 0.9rem; grid-column: 2; }
vaadin-button.an-tt-cambiar { grid-column: 3; grid-row: 1 / 3; margin: 0; border-radius: 14px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.an-tt .an-tv-visor { box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 30px -12px rgba(127, 240, 221, 0.6); }
@media (max-width: 900px) { .an-tt-acc-grid { grid-template-columns: 1fr; } .an-tt-acc { min-height: 8rem; } }
/* Terminar trabajo: la orden que se cierra, en grande, mientras se piden las piezas */
.an-tt-cierra { --c: 47, 129, 195; display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 24px; animation: an-tt-aparece 0.4s both;
  background: linear-gradient(135deg, rgba(var(--c), 0.32), rgba(var(--c), 0.08) 60%, rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(var(--c), 0.6); box-shadow: 0 0 40px -14px rgba(var(--c), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.an-tt-cierra .an-tt-acc-icono { flex: none; width: 4.6rem; height: 4.6rem; }
.an-tt-cierra-textos { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.an-tt-cierra-etiqueta { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--an-tono-7ff0dd); }
.an-tt-cierra-ot { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.an-tt-cierra-desc { font-size: 1.1rem; color: rgba(255, 255, 255, 0.82); }
.an-tt-cierra-datos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }
.an-tt-cierra-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.92rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(var(--c), 0.45); color: #fff; }
.an-tt-cierra-chip vaadin-icon { width: 1rem; height: 1rem; padding: 0; color: rgb(var(--c)); }

/* ===================================================================== SkyNET · Cálculos › Precios (2026-10-22) */
.an-pr-cuerpo { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.an-pr-izquierda { display: flex; flex-direction: column; gap: 1rem; }
.an-pr-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 0.8rem; }
.an-pr-rejilla > * { min-width: 0; width: 100%; }
.an-pr-rejilla > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.an-pr-casillas { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
vaadin-button.an-pr-calcular { width: 100%; margin-top: 1rem; height: 3rem; font-size: 1.05rem; border-radius: 14px; }
.an-pr-derecha { min-width: 0; display: flex; flex-direction: column; }
.an-pr-derecha > .an-aj-tarjeta-cabecera, .an-pr-derecha > .an-pr-pie { flex: none; }
.an-pr-tabla { flex: 1 1 auto; height: auto; min-height: 340px; border-radius: 12px; }
.an-pr-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap; }
.an-pr-cambio { display: inline-flex; align-items: center; gap: 0.45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-pr-antes { color: var(--an-texto-suave); }
.an-pr-cambio .an-pr-antes:only-child { color: inherit; }
.an-pr-nuevo { font-weight: 800; }
.an-pr-sube { color: #1f9d55; font-size: 0.75rem; }
.an-pr-baja { color: #d64545; font-size: 0.75rem; }
.an-pr-sin { color: var(--an-texto-suave); font-style: italic; }
@media (max-width: 1100px) { .an-pr-cuerpo { grid-template-columns: 1fr; } .an-pr-tabla { flex: none; height: 60vh; } }

/* ===================================================================== SkyNET · estructuras en árbol (2026-10-22) */
/* Cada tipo con su forma: raíz = cabecera oscura; subconjunto = tarjeta azul; componente = tarjeta blanca; método = franja
   del color de la operación; línea = fila fina con punto de línea de tiempo. Los datos van en columnas a la derecha. */
vaadin-grid.an-arb { --vaadin-grid-cell-padding: 0 10px 0 4px; background: transparent; }
vaadin-grid.an-arb::part(cell) { background: transparent; border: 0; }
vaadin-grid.an-arb::part(header-cell) { display: none; }
/* Sangría: 3rem por nivel (petición del usuario). Las filas ocupan todo el ancho que queda (el hueco interno del componente se
   ajusta al contenido, así que se mide el contenedor con cqw) y una raya fina por nivel hace de guía. */
vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 3rem; --an-arb-guia: 0.95rem; width: 100%; container-type: inline-size;
  background: repeating-linear-gradient(90deg, transparent 0 var(--an-arb-guia), rgba(47, 129, 195, 0.3) var(--an-arb-guia) calc(var(--an-arb-guia) + 2px),
    transparent calc(var(--an-arb-guia) + 2px) var(--vaadin-grid-tree-toggle-level-offset)) left top / calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset)) 100% no-repeat; }
vaadin-grid.an-arb vaadin-grid-tree-toggle::part(toggle) { color: var(--an-texto-suave); }
.an-arb-fila { --an-arb-color: 107, 122, 134; box-sizing: border-box; width: calc(100cqw - var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset) - 2.4rem); min-width: 0; display: flex; align-items: center; gap: 0.85rem;
  min-height: 3.1rem; padding: 0.45rem 0.9rem; margin: 3px 0; border-radius: 14px; background: var(--an-superficie);
  border: 1px solid var(--an-borde); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; cursor: grab; }
.an-arb-fila:hover { border-color: rgba(var(--an-arb-color), 0.6); box-shadow: 0 10px 24px -16px rgba(var(--an-arb-color), 0.95); }
.an-arb-icono { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, rgb(var(--an-arb-color)), rgba(var(--an-arb-color), 0.7)); box-shadow: 0 6px 14px -8px rgba(var(--an-arb-color), 0.95); }
.an-arb-icono vaadin-icon { width: 1.1rem; height: 1.1rem; padding: 0; }
.an-arb-textos { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1 1 auto; }
.an-arb-tipo { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, rgb(var(--an-arb-color)) 62%, #000); line-height: 1.2; }
html[theme~="dark"] .an-arb-fila:not(.an-arb-raiz) .an-arb-tipo { color: color-mix(in srgb, rgb(var(--an-arb-color)) 65%, #fff); }
.an-arb-nombre { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.an-arb-codigo { font-weight: 800; white-space: nowrap; color: var(--an-texto); }
.an-arb-texto { color: var(--an-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.an-arb-marcas { display: flex; gap: 0.3rem; flex: none; }
.an-arb-marcas:empty { display: none; }
.an-arb-datos { display: flex; gap: 0.4rem; flex: none; margin-left: auto; }
.an-arb-col { width: 7.2rem; box-sizing: border-box; padding: 0.2rem 0.6rem; border-radius: 10px; text-align: right;
  background: rgba(var(--an-arb-color), 0.08); display: flex; flex-direction: column; }
.an-arb-col-nombre { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--an-texto-suave); }
.an-arb-col-valor { font-weight: 800; font-size: 0.86rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--an-texto); }
.an-arb-etiqueta { padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.an-arb-et-compartido { background: rgba(255, 154, 61, 0.2); color: #9a4b06; }
.an-arb-et-inactivo { background: rgba(214, 69, 69, 0.12); color: #a33; }
.an-arb-et-externa { background: rgba(150, 100, 230, 0.15); color: #6b3fb0; }
.an-arb-et-fijo { background: rgba(107, 122, 134, 0.15); color: var(--an-texto-suave); }
/* Nodo raíz: cabecera oscura, la pieza que se fabrica */
.an-arb-fila.an-arb-raiz { --an-arb-color: 141, 196, 242; min-height: 4rem; padding: 0.7rem 1.1rem; cursor: default; border: 0; color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, rgba(141, 196, 242, 0.35), transparent 55%), linear-gradient(120deg, #13293b, #1d3d57 45%, #2f81c3);
  box-shadow: 0 14px 30px -18px rgba(29, 61, 87, 0.9); }
.an-arb-raiz .an-arb-icono { width: 2.9rem; height: 2.9rem; border-radius: 14px; color: #1d3d57; background: linear-gradient(135deg, #ffffff, #cfe6fa); }
.an-arb-raiz .an-arb-icono vaadin-icon { width: 1.4rem; height: 1.4rem; }
.an-arb-raiz .an-arb-tipo { color: #8dc4f2; }
.an-arb-raiz .an-arb-codigo { font-size: 1.25rem; color: #fff; }
.an-arb-raiz .an-arb-texto { color: rgba(255, 255, 255, 0.78); font-size: 1rem; }
.an-arb-raiz .an-arb-col { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); }
.an-arb-raiz .an-arb-col-nombre { color: rgba(255, 255, 255, 0.7); }
.an-arb-raiz .an-arb-col-valor { color: #fff; font-size: 0.95rem; }
/* Subconjunto (nodo secundario): tarjeta azul */
.an-arb-fila.an-arb-sub { --an-arb-color: 47, 129, 195; border-color: rgba(47, 129, 195, 0.45);
  background: linear-gradient(100deg, rgba(47, 129, 195, 0.16), rgba(47, 129, 195, 0.04) 60%), var(--an-superficie); box-shadow: inset 5px 0 0 rgb(47, 129, 195); }
.an-arb-sub .an-arb-codigo { color: #1d5f94; }
html[theme~="dark"] .an-arb-sub .an-arb-codigo { color: #8dc4f2; }
/* Componente (material): tarjeta blanca, icono gris */
.an-arb-componente:not(.an-arb-sub) { --an-arb-color: 120, 132, 145; min-height: 2.8rem; }
/* Método: franja del color de su operación */
.an-arb-fila.an-arb-metodo { --an-arb-color: 47, 201, 130; border-color: rgba(var(--an-arb-color), 0.4);
  background: linear-gradient(100deg, rgba(var(--an-arb-color), 0.14), rgba(var(--an-arb-color), 0.03) 55%), var(--an-superficie);
  box-shadow: inset 5px 0 0 rgb(var(--an-arb-color)); border-radius: 14px 999px 999px 14px; }
.an-arb-metodo .an-arb-icono { border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--an-arb-color)) 80%, #000), rgb(var(--an-arb-color))); }
/* Línea del método: fila fina, sin tarjeta, con punto de línea de tiempo */
.an-arb-fila.an-arb-linea { --an-arb-color: 107, 122, 134; min-height: 2.6rem; padding: 0.25rem 0.9rem; background: transparent;
  border: 1px dashed var(--an-borde); box-shadow: none; }
.an-arb-linea .an-arb-icono { width: 1.7rem; height: 1.7rem; border-radius: 50%; color: rgb(var(--an-arb-color)); background: var(--an-superficie-2); box-shadow: none;
  border: 2px solid rgba(var(--an-arb-color), 0.5); }
.an-arb-linea .an-arb-icono vaadin-icon { width: 0.85rem; height: 0.85rem; }
.an-arb-linea .an-arb-codigo { font-size: 0.9rem; font-weight: 700; }
.an-arb-linea .an-arb-col { background: transparent; padding-top: 0.05rem; padding-bottom: 0.05rem; }
.an-arb-bloqueada { cursor: default; }
.an-arb-bloqueada:not(.an-arb-raiz) .an-arb-textos, .an-arb-bloqueada:not(.an-arb-raiz) .an-arb-datos { opacity: 0.75; }
.an-arb-candado { flex: none; width: 1rem; height: 1rem; color: var(--an-texto-suave); }
/* Leyenda de los iconos */
.an-arb-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; padding: 0.45rem 0.8rem; border-radius: 12px;
  background: var(--an-superficie-2); border: 1px solid var(--an-borde); font-size: 0.8rem; color: var(--an-texto-suave); }
.an-arb-leyenda-elemento { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.an-arb-leyenda-elemento.an-arb-raiz { --an-arb-color: 29, 61, 87; }
.an-arb-leyenda-elemento.an-arb-sub { --an-arb-color: 47, 129, 195; }
.an-arb-leyenda-elemento.an-arb-componente:not(.an-arb-sub) { --an-arb-color: 120, 132, 145; }
.an-arb-leyenda-elemento.an-arb-metodo { --an-arb-color: 47, 201, 130; }
.an-arb-leyenda-elemento.an-arb-linea { --an-arb-color: 107, 122, 134; }
.an-arb-leyenda .an-arb-icono { width: 1.5rem; height: 1.5rem; border-radius: 7px; box-shadow: none; }
.an-arb-leyenda .an-arb-icono vaadin-icon { width: 0.85rem; height: 0.85rem; }
.an-arb-leyenda .an-arb-raiz .an-arb-icono { background: linear-gradient(120deg, #13293b, #2f81c3); }
.an-arb-leyenda .an-arb-metodo .an-arb-icono { border-radius: 50%; }
.an-arb-leyenda .an-arb-linea .an-arb-icono { border-radius: 50%; color: rgb(var(--an-arb-color)); background: var(--an-superficie); border: 2px solid rgba(var(--an-arb-color), 0.5); }
@media (max-width: 900px) {
  vaadin-grid.an-arb vaadin-grid-tree-toggle { --vaadin-grid-tree-toggle-level-offset: 1.6rem; --an-arb-guia: 0.55rem; }
  .an-arb-col { width: auto; min-width: 4.6rem; }
  .an-arb-fila { flex-wrap: wrap; }
  .an-arb-datos { margin-left: 0; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}
/* Al arrastrar: la fila que se mueve, y dónde caería */
vaadin-grid.an-arb::part(dragstart-row) { opacity: 0.45; }
vaadin-grid.an-arb::part(dragover-on-top-row) { outline: 2px solid #2f81c3; outline-offset: -2px; border-radius: 14px; background: rgba(47, 129, 195, 0.08); }
vaadin-grid.an-arb::part(dragover-above-row) { box-shadow: inset 0 3px 0 #2f81c3; }
vaadin-grid.an-arb::part(dragover-below-row) { box-shadow: inset 0 -3px 0 #2f81c3; }
vaadin-grid.an-arb::part(selected-row) .an-arb-fila { border-color: #2f81c3; }
vaadin-grid.an-arb::part(selected-row) { background: transparent; }
/* Editor */
.an-arb-editor .an-arb-zona { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; min-height: 0; }
.an-arb-editor vaadin-grid.an-arb { flex: 1 1 auto; min-height: 320px; padding: 0.4rem; border-radius: 18px; background: var(--an-fondo); border: 1px solid var(--an-borde); }
.an-arb-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; padding: 0.35rem 0.45rem; border-radius: 14px;
  background: var(--an-superficie-2); border: 1px solid var(--an-borde); }
vaadin-button.an-arb-boton { margin: 0; }
.an-arb-separador { width: 1px; height: 1.6rem; margin: 0 0.3rem; background: var(--an-borde); }
.an-arb-pista { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--an-texto-suave); }
.an-arb-pista vaadin-icon { width: 1rem; height: 1rem; color: #2f81c3; }
/* Icono de método: persona con un martillo pequeño */
.an-arb-persona { position: relative; display: inline-grid; place-items: center; }
.an-arb-persona .an-arb-mini { position: absolute; right: -0.42rem; bottom: -0.36rem; width: 0.7rem !important; height: 0.7rem !important; padding: 0.08rem !important;
  border-radius: 50%; background: #fff; color: #1d3d57; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.an-arb-leyenda .an-arb-persona .an-arb-mini { width: 0.5rem !important; height: 0.5rem !important; right: -0.32rem; bottom: -0.3rem; }
vaadin-button .an-arb-persona { margin-right: 0.35rem; }
vaadin-button .an-arb-persona .an-arb-mini { right: -0.3rem; bottom: -0.25rem; width: 0.55rem !important; height: 0.55rem !important; }
vaadin-button .an-arb-persona > vaadin-icon:first-child { width: var(--lumo-icon-size-s, 1.1rem); height: var(--lumo-icon-size-s, 1.1rem); }
/* Estado de fabricación en el árbol de las órdenes (2026-10-22): pastilla, latido si está en marcha o parada y barra de avance */
.an-arb-st-pendiente { --st: 120, 132, 145; }
.an-arb-st-en_marcha { --st: 14, 165, 233; }
.an-arb-st-parcial { --st: 234, 150, 12; }
.an-arb-st-terminada { --st: 22, 163, 74; }
.an-arb-st-parada { --st: 220, 38, 38; }
.an-arb-fila.an-arb-con-estado { position: relative; padding-bottom: 0.7rem; }
.an-arb-estado { display: inline-flex; align-items: center; gap: 0.35rem; align-self: center; padding: 0.28rem 0.7rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(var(--st), 0.12);
  border: 1px solid rgba(var(--st), 0.38); color: color-mix(in srgb, rgb(var(--st)) 72%, #000); }
html[theme~="dark"] .an-arb-estado { color: color-mix(in srgb, rgb(var(--st)) 70%, #fff); background: rgba(var(--st), 0.2); }
.an-arb-estado vaadin-icon { width: 0.9rem; height: 0.9rem; padding: 0; color: rgb(var(--st)); }
.an-arb-st-en_marcha .an-arb-estado,
.an-arb-st-parada .an-arb-estado { animation: an-arb-pulso 1.8s ease-out infinite; }
@keyframes an-arb-pulso { 0% { box-shadow: 0 0 0 0 rgba(var(--st), 0.5); } 70% { box-shadow: 0 0 0 9px rgba(var(--st), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--st), 0); } }
.an-arb-fila.an-arb-st-en_marcha, .an-arb-fila.an-arb-st-parada { outline: 2px solid rgba(var(--st), 0.55); outline-offset: 1px; animation: an-arb-latido 2.4s ease-in-out infinite; }
@keyframes an-arb-latido { 50% { outline-color: rgba(var(--st), 0.15); } }
.an-arb-fila.an-arb-st-terminada:not(.an-arb-raiz) .an-arb-icono { box-shadow: 0 0 0 2px var(--an-superficie), 0 0 0 4px rgba(var(--st), 0.7); }
.an-arb-avance { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.3rem; height: 4px; border-radius: 99px; background: rgba(var(--st), 0.16); overflow: hidden; }
.an-arb-avance::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--an-arb-avance, 0%); border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--st), 0.65), rgb(var(--st))); box-shadow: 0 0 8px rgba(var(--st), 0.6); }
.an-arb-st-en_marcha > .an-arb-avance::after { background: linear-gradient(90deg, rgba(var(--st), 0.55) 0%, rgb(var(--st)) 40%, rgba(255, 255, 255, 0.85) 50%, rgb(var(--st)) 60%, rgba(var(--st), 0.55) 100%);
  background-size: 220% 100%; animation: an-arb-brillo 1.6s linear infinite; }
@keyframes an-arb-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.an-arb-raiz .an-arb-estado { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.an-arb-raiz .an-arb-avance { background: rgba(255, 255, 255, 0.18); }
/* Iniciada con su fecha y hora (2026-10-23): dos líneas dentro de la misma pastilla, sin ocupar más ancho */
.an-arb-estado.an-arb-estado-con-hora { gap: 0.45rem; padding: 0.22rem 0.75rem 0.22rem 0.5rem; border-radius: 12px; }
.an-arb-estado-con-hora vaadin-icon { width: 1.05rem; height: 1.05rem; }
.an-arb-estado-textos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.an-arb-estado-cuando { margin-top: 0.12rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none;
  font-variant-numeric: tabular-nums; opacity: 0.82; }
.an-arb-raiz .an-arb-estado-cuando { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .an-arb-estado, .an-arb-fila, .an-arb-avance::after { animation: none !important; } }
/* Modo quiosco (puesto de fichar, 2026-10-22): sin menú lateral ni barra de arriba, como el inicio a pantalla completa */
vaadin-app-layout.an-main.an-quiosco::part(navbar), vaadin-app-layout.an-main.an-quiosco::part(drawer),
vaadin-app-layout.an-main.an-quiosco::part(backdrop) { display: none; }
vaadin-app-layout.an-main.an-quiosco { --vaadin-app-layout-drawer-offset-size: 0px; --vaadin-app-layout-navbar-offset-size: 0px; }
.an-quiosco .an-tv { min-height: 100dvh; border-radius: 0; box-shadow: none; box-sizing: border-box; }
/* Garita en modo quiosco: los accesos online a toda la pantalla, sin la barra de arriba (2026-10-25) */
.an-quiosco .an-online { height: 100dvh; }

/* ===================================================================== SkyNET · líneas de las fichas con cabecera y detalle (2026-10-23) */
/* Pedidos, presupuestos y métodos (TablaLineas): tarjeta con cabecera suave, filas aireadas con barra de color al pasar,
   número de línea en pastilla, artículo con su descripción debajo, cifras a la derecha y totales en tarjetas. */
.an-lineas-barra { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0.35rem 0 0.6rem; }
vaadin-grid.an-lineas { --vaadin-grid-cell-padding: 0.55rem 0.85rem; border: 1px solid var(--an-borde); border-radius: 14px; overflow: hidden;
  background: var(--an-superficie); box-shadow: 0 1px 2px rgba(var(--an-tono-0f2e35-rgb), 0.05), 0 12px 28px -22px rgba(var(--an-tono-0f2e35-rgb), 0.45); }
vaadin-grid.an-lineas::part(header-cell) { background: var(--an-superficie-2); color: var(--an-texto-suave); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; min-height: 2.4rem; border-bottom: 1px solid var(--an-borde); cursor: default; }
vaadin-grid.an-lineas::part(body-cell) { border-top: 1px solid var(--an-linea); background: transparent; }
vaadin-grid.an-lineas::part(first-row-cell) { border-top: 0; }
vaadin-grid.an-lineas::part(row) { cursor: pointer; background: var(--an-superficie); box-shadow: inset 3px 0 0 transparent; transition: background-color .15s, box-shadow .15s; }
vaadin-grid.an-lineas::part(an-lineas-cifra) { font-variant-numeric: tabular-nums; white-space: nowrap; }
vaadin-grid.an-lineas::part(an-lineas-importe) { font-weight: 800; color: var(--an-texto); }
vaadin-grid.an-lineas::part(an-lineas-suave) { color: var(--an-texto-suave); font-size: var(--lumo-font-size-s); }
/* Fila bajo el ratón: fondo con un toque del color principal y barra a la izquierda */
vaadin-grid.an-lineas::part(row):hover { background: color-mix(in srgb, var(--lumo-primary-color) 6%, var(--an-superficie)); box-shadow: inset 3px 0 0 var(--lumo-primary-color); }
.an-lineas-num { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; box-sizing: border-box; border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lumo-primary-color);
  background: color-mix(in srgb, var(--lumo-primary-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lumo-primary-color) 28%, transparent); }
.an-lineas-art { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; line-height: 1.25; }
.an-lineas-codigo { font-weight: 800; color: var(--an-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-lineas-texto { font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-lineas-et { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; --et: 107, 122, 134;
  background: rgba(var(--et), 0.12); border: 1px solid rgba(var(--et), 0.32); color: color-mix(in srgb, rgb(var(--et)) 72%, #000); }
.an-lineas-et vaadin-icon { width: 0.8rem; height: 0.8rem; padding: 0; color: rgb(var(--et)); }
.an-lineas-et-ok { --et: 22, 163, 74; }
.an-lineas-et-info { --et: 47, 129, 195; }
.an-lineas-et-suave { --et: 120, 134, 145; background: transparent; }
html[theme~="dark"] .an-lineas-et { color: color-mix(in srgb, rgb(var(--et)) 70%, #fff); background: rgba(var(--et), 0.2); }
html[theme~="dark"] .an-lineas-et-suave { background: transparent; }
/* Botones de cada fila: discretos hasta pasar el ratón por encima */
.an-lineas-acciones { display: flex; gap: 2px; opacity: 0.6; transition: opacity .15s; }
.an-lineas-acciones:hover, .an-lineas-acciones:focus-within { opacity: 1; }
@media (hover: none) { .an-lineas-acciones { opacity: 1; } }
/* Sin líneas */
.an-lineas-vacio { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.6rem 1rem; text-align: center; }
.an-lineas-vacio-icono { width: 2.6rem; height: 2.6rem; border-radius: 14px; display: grid; place-items: center; margin-bottom: 0.25rem;
  color: var(--lumo-primary-color); background: color-mix(in srgb, var(--lumo-primary-color) 12%, transparent); }
.an-lineas-vacio-icono vaadin-icon { width: 1.25rem; height: 1.25rem; padding: 0; }
.an-lineas-vacio-titulo { font-weight: 800; color: var(--an-texto); }
.an-lineas-vacio-ayuda { font-size: var(--lumo-font-size-s); color: var(--an-texto-suave); }
/* Pie: ayuda a la izquierda, totales a la derecha */
.an-lineas-pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; margin-top: 0.7rem; }
.an-lineas-pie > .an-ayuda { flex: 1 1 16rem; margin-top: 0.2rem; }
.an-lineas-totales { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.an-lineas-total { min-width: 8.5rem; box-sizing: border-box; padding: 0.45rem 0.85rem; border-radius: 12px; text-align: right; display: flex; flex-direction: column;
  background: var(--an-superficie-2); border: 1px solid var(--an-borde); }
.an-lineas-total-nombre { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--an-texto-suave); }
.an-lineas-total-valor { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--an-texto); }
.an-lineas-total-destacado { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--lumo-primary-color), color-mix(in srgb, var(--lumo-primary-color) 70%, #000));
  box-shadow: 0 10px 22px -14px var(--lumo-primary-color); }
.an-lineas-total-destacado .an-lineas-total-nombre { color: rgba(255, 255, 255, 0.82); }
.an-lineas-total-destacado .an-lineas-total-valor { color: #fff; font-size: 1.2rem; }
@media (max-width: 700px) { .an-lineas-totales { width: 100%; } .an-lineas-total { flex: 1 1 0; min-width: 0; } }

/* Licencia de SkyNET (2026-10-23): seis módulos; tarjetas compactas (cada pantalla en una línea, la ruta del menú al pasar
   el ratón) y la página se desplaza si no cabe */
.an-licencia.an-licencia-larga { height: auto; overflow: visible; }
.an-licencia-modulos-seis .an-licencia-modulo { padding: 1rem; gap: 0.7rem; }
.an-licencia-cuerpo .an-licencia-modulos-seis .an-licencia-modulo-icono { width: 2.6rem; height: 2.6rem; border-radius: 14px; }
.an-licencia-cuerpo .an-licencia-modulos-seis .an-licencia-modulo-icono vaadin-icon { width: 1.3rem; height: 1.3rem; }
.an-licencia-cuerpo .an-licencia-modulos-seis .an-licencia-modulo-nombre { font-size: 1.1rem; }
.an-licencia-cuerpo .an-licencia-modulos-seis .an-licencia-modulo-que { font-size: 0.8rem; line-height: 1.35; }
.an-licencia-modulos-seis .an-licencia-funciones { gap: 0.1rem; padding-top: 0.5rem; }
.an-licencia-modulos-seis .an-licencia-funcion { grid-template-columns: 1.7rem minmax(0, 1fr) auto; padding: 0.3rem 0.45rem; gap: 0.5rem; }
.an-licencia-modulos-seis .an-licencia-funcion-icono { width: 1.7rem; height: 1.7rem; border-radius: 8px; }
.an-licencia-modulos-seis .an-licencia-funcion-nombre { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-licencia-modulos-seis .an-licencia-funcion-donde { display: none; }

/* SkyNET · Stock físico (2026-10-23): ventana «Calcular stock» y de dónde sale el stock de un artículo */
.an-stock-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 1rem; margin-top: 0.6rem; }
@media (max-width: 600px) { .an-stock-filtros { grid-template-columns: minmax(0, 1fr); } }
.an-stock-cuenta { display: flex; flex-direction: column; gap: 0.45rem; }
.an-stock-paso { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem;
  border-radius: 14px; border: 1px solid var(--an-borde); background: var(--an-superficie); }
.an-stock-signo { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-weight: 800; font-size: 1.15rem;
  color: #fff; background: rgb(var(--st, 100, 116, 139)); }
.an-stock-entra { --st: 22, 163, 74; }
.an-stock-sale { --st: 220, 38, 38; }
.an-stock-ajuste { --st: 234, 150, 12; }
.an-stock-nombre { font-weight: 600; color: var(--an-texto); }
.an-stock-valor { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--an-texto); }
.an-stock-total { display: flex; justify-content: space-between; align-items: center; margin: 0.8rem 0; padding: 1rem 1.2rem; border-radius: 16px;
  color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--lumo-primary-color) 75%, #000), var(--lumo-primary-color));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--lumo-primary-color) 30%, transparent); }
.an-stock-total > span:first-child { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.an-stock-total > span:last-child { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-stock-total.an-stock-negativo { background: linear-gradient(120deg, #7f1d1d, #dc2626); box-shadow: 0 8px 22px rgba(220, 38, 38, 0.3); }
.an-stock-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
@media (max-width: 600px) { .an-stock-datos { grid-template-columns: minmax(0, 1fr); } }
.an-stock-dato { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: var(--an-superficie-2);
  border: 1px solid var(--an-borde); }
.an-stock-dato-nombre { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--an-texto-suave); }
.an-stock-dato-valor { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--an-texto); }

/* Buscar controladoras CloudB Plus en la red (ficha de controladoras, 2026-10-23) */
.an-buscar-ctrl-cuerpo { display: flex; flex-direction: column; gap: 0.6rem; }
.an-buscar-ctrl-cuerpo .an-ayuda { margin: 0; }
.an-buscar-ctrl-estado { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.an-buscar-ctrl-nueva { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.an-buscar-ctrl-ya { background: var(--lumo-contrast-10pct); color: var(--an-texto-suave); }
/* Controladoras que se conectan sin ficha: aviso en la barra del driver y su lista (2026-10-23) */
.an-ctrl-sin-alta { margin-left: 0.4rem; color: #b45309; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.4); font-weight: 600; }
.an-ctrl-sin-alta-lista { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.an-ctrl-sin-alta-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem; border-radius: 10px;
    background: var(--lumo-contrast-5pct); border: 1px solid var(--lumo-contrast-10pct);
}
.an-ctrl-sin-alta-serie { display: block; font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 1.05rem; color: var(--an-texto); }
.an-ctrl-sin-alta-datos { display: block; font-size: 0.8rem; color: var(--an-texto-suave); }
/* NKT9/10 que llaman al driver sin ficha: la misma lista y qué poner en el terminal (2026-10-24) */
.an-nkt-sin-alta .an-nkt-aviso { margin-top: 0.8rem; }
.an-nkt-sin-alta-vacio { display: block; padding: 0.9rem 1rem; border-radius: 10px; border: 1px dashed var(--lumo-contrast-20pct);
    color: var(--an-texto-suave); font-size: 0.85rem; }
.an-nkt-sin-alta-nota { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: #b45309; }
.an-nkt-sin-alta-config { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--lumo-contrast-5pct);
    border: 1px solid var(--lumo-contrast-10pct); display: grid; gap: 0.35rem; }
.an-nkt-sin-alta-config-titulo { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--lumo-primary-text-color); margin-bottom: 0.2rem; }
.an-nkt-sin-alta-linea { display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem; font-size: 0.85rem; }
.an-nkt-sin-alta-etiqueta { color: var(--an-texto-suave); }
.an-nkt-sin-alta-valor { color: var(--an-texto); font-weight: 600; }
.an-nkt-buscando { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.5rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; color: var(--an-texto-suave); background: var(--lumo-contrast-5pct); border: 1px solid var(--lumo-contrast-10pct); }
.an-nkt-buscando-giro { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--lumo-contrast-20pct); box-sizing: border-box; }
.an-nkt-buscando[activo] { color: var(--lumo-primary-text-color); background: color-mix(in srgb, var(--lumo-primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--lumo-primary-color) 35%, transparent); }
.an-nkt-buscando[activo] .an-nkt-buscando-giro { border-color: color-mix(in srgb, var(--lumo-primary-color) 25%, transparent);
    border-top-color: var(--lumo-primary-color); animation: an-nkt-girar 0.9s linear infinite; }
@keyframes an-nkt-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .an-nkt-buscando[activo] .an-nkt-buscando-giro { animation-duration: 3s; } }
/* Botón con texto dentro de un campo («Leer» en la MAC) y texto de ayuda en ámbar cuando avisa de algo */
vaadin-button.an-boton-en-campo { margin: 0; font-weight: 600; }
vaadin-text-field.an-campo-aviso::part(helper-text) { color: #b45309; }
html[theme~="dark"] vaadin-text-field.an-campo-aviso::part(helper-text) { color: #f5b14c; }
.an-nkt-sin-alta-pie { margin-top: 0.3rem; font-size: 0.8rem; color: var(--an-texto-suave); }
@media (max-width: 560px) { .an-nkt-sin-alta-linea { grid-template-columns: 1fr; gap: 0; } }

/* ===================================================================== Ajustes en pantallas (2026-10-25)
   Cada opción de Ajustes llena toda la zona de datos, a lo ancho y a lo alto (petición del usuario): cabecera compacta
   y el cuerpo repartido en rejilla; las tarjetas se estiran hasta abajo. En pantallas pequeñas, desplazamiento normal. */
.an-aj-pagina { min-height: calc(100dvh - 61px); display: flex; flex-direction: column; }
.an-aj-hero.an-aj-hero-compacta { flex: none; padding: 1.05rem 1.8rem; align-items: center; }
.an-aj-hero-compacta h2 { font-size: 1.65rem; margin: 0.15rem 0 0; }
.an-aj-hero-compacta .an-aj-lema { margin-top: 0.3rem; font-size: 0.92rem; max-width: 980px; }
.an-aj-titulo { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.an-aj-hero-compacta .an-aj-pastilla { padding: 0.5rem 0.85rem; }
.an-aj-pagina .an-aj-cuerpo { flex: 1; padding: 1.1rem 1.6rem 1.3rem; display: grid; gap: 1.1rem; }
.an-aj-pagina .an-aj-tarjeta { margin: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.an-aj-pagina .an-aj-tarjeta > * { flex-shrink: 0; }
.an-aj-columna { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.an-aj-columna > .an-aj-tarjeta { flex: 1 1 auto; }
.an-aj-pagina .an-aj-botones { margin-top: auto; padding-top: 1rem; justify-content: flex-start; }

/* Estado del servidor: 12 cifras en 6 × 2 y el gráfico de memoria con todo el alto que queda */
.an-aj-p-estado .an-aj-cuerpo { grid-template-rows: auto 1fr; }
.an-aj-p-estado .an-aj-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.an-aj-tarjeta-grafico { overflow: hidden; min-height: 300px; }
.an-aj-tarjeta-grafico .an-aj-grafico { flex: 1; min-height: 140px; display: flex; flex-direction: column; }
.an-aj-tarjeta-grafico .an-aj-grafico svg { flex: 1; height: auto; min-height: 0; }

/* Parámetros: los 5 grupos en columnas y la tabla de todas las propiedades hasta abajo */
.an-aj-p-parametros .an-aj-cuerpo { grid-template-rows: auto 1fr; }
.an-aj-p-parametros .an-aj-parametros { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
.an-aj-p-parametros .an-aj-grupo {
    background: var(--an-superficie); border: 1px solid var(--an-borde); border-radius: 16px; box-shadow: var(--an-sombra);
    padding: 1rem 1.1rem; min-width: 0;
}
.an-aj-p-parametros .an-aj-param { grid-template-columns: 1fr; gap: 0.1rem; }
.an-aj-tarjeta-todas { }
.an-aj-todas-barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.an-aj-todas-barra vaadin-text-field { flex: 0 1 420px; }
.an-aj-todas-tabla { border-radius: 12px; }

/* Correo: la cuenta a la izquierda; la prueba y cómo funciona a la derecha */
.an-aj-p-correo .an-aj-cuerpo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.an-aj-p-correo .an-aj-formulario { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-aj-p-correo .an-aj-caminos { grid-template-columns: 1fr; }

/* Seguridad: superusuario | verificación en dos pasos */
.an-aj-p-seguridad .an-aj-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.an-aj-p-seguridad .an-aj-dv { display: flex; flex-direction: column; gap: 1.1rem; flex: 1; min-height: 0; }
.an-aj-p-seguridad .an-aj-dv > .an-aj-tarjeta { flex: 1 1 auto; }
.an-aj-p-seguridad .an-aj-caminos { grid-template-columns: 1fr; }
.an-aj-fila-campo { display: flex; gap: 0.8rem; align-items: flex-start; margin: 0.4rem 0 0.9rem; }
.an-aj-fila-campo vaadin-button { margin-top: 2.15rem; flex: none; }

/* Actualizaciones: 2 × 2 (versión y estado | sin Internet; cuándo buscar | historial) */
.an-aj-p-actualizaciones .an-aj-cuerpo { grid-template-rows: 1fr; }
.an-aj-p-actualizaciones .an-aj-actualizaciones {
    display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr;
}

/* Pantallas medianas o bajas: sin alto fijo, cada cosa con su alto y desplazamiento normal */
@media (max-width: 1280px) {
    .an-aj-p-estado .an-aj-kpis { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .an-aj-tarjeta-grafico .an-aj-grafico { min-height: 220px; }
    .an-aj-p-parametros .an-aj-parametros { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .an-aj-p-correo .an-aj-cuerpo, .an-aj-p-seguridad .an-aj-cuerpo, .an-aj-p-actualizaciones .an-aj-actualizaciones { grid-template-columns: 1fr; }
    .an-aj-p-actualizaciones .an-aj-actualizaciones { grid-auto-rows: auto; }
    .an-aj-p-correo .an-aj-formulario { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 700px) {
    .an-aj-hero.an-aj-hero-compacta { padding: 1rem; }
    .an-aj-pagina .an-aj-cuerpo { padding: 0.8rem; }
    .an-aj-fila-campo { flex-direction: column; align-items: stretch; }
    .an-aj-fila-campo vaadin-button { margin-top: 0; }
}

/* Perfil de usuarios › «¿Qué menús verá?»: plantillas arriba a la derecha (petición del usuario, 2026-10-25) */
.an-asis-paso-cabecera > .an-asis-plantillas { margin-left: auto; flex: 0 1 58%; align-self: flex-start; }
.an-asis-plantillas {
    border: 1px solid var(--an-borde); border-radius: 16px; padding: 0.9rem 1rem;
    background: linear-gradient(180deg, rgba(var(--an-tono-2bb3a3-rgb), 0.08), transparent);
}
.an-asis-plantillas-titulo { display: block; font-weight: 700; font-size: 0.95rem; color: var(--an-texto); }
.an-asis-plantillas-sub { display: block; font-size: 0.8rem; color: var(--an-texto-suave); margin: 0.15rem 0 0.65rem; }
.an-asis-plantillas-botones { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.an-asis-plantillas-botones vaadin-button { margin: 0; }
.an-asis-plantillas-botones vaadin-button.an-activo { background: var(--an-turquesa); color: #fff; }
.an-asis-plantillas-aviso { margin-top: 0.65rem; font-size: 0.82rem; }
@media (max-width: 900px) { .an-asis-paso-cabecera:has(> .an-asis-plantillas) { flex-wrap: wrap; } .an-asis-paso-cabecera > .an-asis-plantillas { flex-basis: 100%; } }
.an-asis-paso-cabecera:has(> .an-asis-plantillas) { align-items: flex-start; }
.an-asis-plantilla-propia { display: inline-flex; align-items: center; gap: 0; }
.an-asis-plantilla-propia > vaadin-button:last-child { margin-left: -0.15rem; min-width: 0; }
.an-asis-plantillas-guardar { margin-top: 0.55rem; }

/* Ajustes › Seguridad › Certificado HTTPS (2026-10-26) */
.an-aj-cert-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 1rem; margin-bottom: 0.9rem; }
.an-aj-cert-datos > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.75rem; border-radius: 10px;
    background: var(--an-hover); border: 1px solid var(--an-borde); }
.an-aj-cert-etiqueta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--an-texto-suave); }
.an-aj-cert-valor { font-weight: 600; overflow-wrap: anywhere; }
.an-aj-cert-bloque { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.an-aj-cert-bloque > vaadin-button { align-self: flex-start; }
.an-aj-cert-aviso { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.65rem 0.8rem; margin: 0.4rem 0 0.6rem;
    border-radius: 10px; border: 1px solid color-mix(in srgb, #e8a33d 55%, transparent);
    background: color-mix(in srgb, #e8a33d 14%, var(--an-superficie)); }
.an-aj-cert-aviso vaadin-icon { color: #e8a33d; flex: none; }

/* Terminal virtual sin incidencias (2026-10-26): el teclado solo, con el ancho del de PIN y centrado en la pantalla */
.an-tv-panel.an-tv-panel-sin-inc[data-paso=reposo], .an-tt .an-tv-panel.an-tv-panel-sin-inc[data-paso=reposo] { width: min(720px, 100%); }